/* =====================================================================
   PRAXIS · estilos
   Tema oscuro azul marino + dorado, propio de PRAXIS (independiente de
   CERPLAS). Misma familia tipográfica que el resto del sitio (Public
   Sans / Source Serif 4): ya están cargadas en otras páginas del
   dominio, así que no suman peso nuevo la mayoría de las veces.
   ===================================================================== */
:root {
  --px-fondo: #0a1330;
  --px-fondo-alto: #0e1a3d;
  --px-superficie: #10204a;
  --px-superficie-alta: #152655;
  --px-borde: rgba(255, 255, 255, .09);
  --px-dorado: #f0b429;
  --px-dorado-oscuro: #c8940f;
  --px-texto: #dbe2f5;
  --px-texto-tenue: #97a3c4;
  --px-titulo: #ffffff;
  --px-verde: #2fb873;
  --px-rojo: #e0564f;
  --px-azul-info: #4d8ff0;
  --px-fuente: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --px-fuente-titulo: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body.px-body {
  font-family: var(--px-fuente);
  color: var(--px-texto);
  background: var(--px-fondo);
  min-height: 100vh;
  margin: 0;
}

h1, h2, h3, h4, .px-serif {
  font-family: var(--px-fuente-titulo);
  color: var(--px-titulo);
}

a { color: var(--px-dorado); text-decoration: none; }
a:hover { color: #ffd06b; }

.px-muted { color: var(--px-texto-tenue); }

/* ---------- Botones ---------- */
.btn-px {
  background: var(--px-dorado);
  border: 1px solid var(--px-dorado);
  color: #1a1300;
  font-weight: 700;
  border-radius: 10px;
}
.btn-px:hover, .btn-px:focus { background: #ffc44d; border-color: #ffc44d; color: #1a1300; }
.btn-px:disabled { opacity: .6; }
.btn-px-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}
.btn-px-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }
.btn-px-ghost {
  background: transparent;
  border: 1px solid var(--px-borde);
  color: var(--px-texto);
  border-radius: 10px;
}
.btn-px-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* ---------- Formularios (sobre fondo oscuro) ---------- */
.px-form-control {
  background: var(--px-fondo-alto);
  border: 1px solid var(--px-borde);
  color: #fff;
  border-radius: 9px;
  padding: .55rem .8rem;
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
}
.px-form-control::placeholder { color: var(--px-texto-tenue); }
.px-form-control:focus {
  outline: none;
  border-color: var(--px-dorado);
  box-shadow: 0 0 0 3px rgba(240, 180, 41, .18);
  background: var(--px-fondo-alto);
  color: #fff;
}
.px-label { font-size: .82rem; font-weight: 600; color: var(--px-texto-tenue); margin-bottom: .35rem; display: block; }

/* ---------- Tarjetas y paneles ---------- */
.px-card {
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: 16px;
  padding: 1.5rem;
}
.px-card-header {
  background: var(--px-superficie-alta);
  border-bottom: 1px solid var(--px-borde);
}

/* ---------- Etiquetas de estado ---------- */
.px-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .3rem .65rem;
  border-radius: 999px;
}
.px-badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.px-badge-aprobado, .px-badge-finalizado, .px-badge-evaluado { background: rgba(47, 184, 115, .15); color: var(--px-verde); }
.px-badge-en_revision, .px-badge-pendiente, .px-badge-plan_enviado, .px-badge-informe_enviado { background: rgba(240, 180, 41, .16); color: var(--px-dorado); }
.px-badge-observado { background: rgba(224, 86, 79, .16); color: var(--px-rojo); }
.px-badge-en_curso { background: rgba(77, 143, 240, .16); color: var(--px-azul-info); }
/* "Aprobado" = práctica en curso; la sustentación en curso aún no es un resultado final */
.px-badge-aprobado { background: rgba(77, 143, 240, .16); color: var(--px-azul-info); }
.px-badge-evaluado { background: rgba(240, 180, 41, .16); color: var(--px-dorado); }
.px-badge-anulado { background: rgba(255, 255, 255, .1); color: var(--px-texto-tenue); }

/* ---------- Cabecera pública (landing) ---------- */
.px-header-publico {
  background: rgba(10, 19, 48, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--px-borde);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.px-header-publico .navbar-brand { display: flex; align-items: center; gap: .6rem; }
.px-header-publico .navbar-brand img { height: 36px; }
.px-marca-praxis {
  font-family: var(--px-fuente-titulo);
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.1;
}
.px-marca-praxis small { display: block; font-size: .62rem; color: var(--px-texto-tenue); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.px-header-publico .nav-link { color: var(--px-texto); font-weight: 500; }
.px-header-publico .nav-link:hover, .px-header-publico .nav-link.active { color: var(--px-dorado); }

/* ---------- Hero de la landing ---------- */
.px-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 5rem;
  background:
    radial-gradient(1.5px 1.5px at center, rgba(255, 255, 255, .07) 1.5px, transparent 1.5px) 0 0 / 26px 26px,
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(240, 180, 41, .16), transparent 60%),
    linear-gradient(160deg, var(--px-fondo-alto), var(--px-fondo));
}
.px-hero .display-praxis {
  font-family: var(--px-fuente-titulo);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--px-dorado);
  line-height: 1;
  margin-bottom: .3rem;
}
.px-hero h2 { color: #fff; font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin-bottom: 1rem; }
.px-hero p.lead { color: var(--px-texto); max-width: 520px; }

/* ---------- Layout del panel (barra lateral + contenido) ---------- */
.px-shell { display: flex; min-height: 100vh; }
.px-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--px-fondo-alto);
  border-right: 1px solid var(--px-borde);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.px-sidebar .px-marca-wrap { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--px-borde); display: flex; align-items: center; gap: .6rem; }
.px-sidebar .px-marca-wrap img { height: 32px; }
.px-nav { padding: .75rem; flex: 1; overflow-y: auto; }
.px-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  border-radius: 10px;
  color: var(--px-texto);
  font-size: .92rem;
  font-weight: 500;
  margin-bottom: .15rem;
  position: relative;
}
.px-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; color: var(--px-texto-tenue); }
.px-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.px-nav a.activo { background: var(--px-dorado); color: #1a1300; font-weight: 700; }
.px-nav a.activo i { color: #1a1300; }
.px-nav .px-nav-contador {
  margin-left: auto;
  background: var(--px-rojo);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .1rem .4rem;
  min-width: 1.2rem;
  text-align: center;
}
.px-nav a.activo .px-nav-contador { background: #1a1300; color: var(--px-dorado); }

.px-main { flex: 1; min-width: 0; }
.px-topbar {
  background: var(--px-fondo-alto);
  border-bottom: 1px solid var(--px-borde);
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.px-topbar .px-campana { position: relative; color: var(--px-texto); font-size: 1.2rem; cursor: pointer; }
.px-topbar .px-campana .px-punto {
  position: absolute; top: -3px; right: -5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--px-rojo); border: 2px solid var(--px-fondo-alto);
}
.px-contenido { padding: 1.75rem; max-width: 1200px; }

/* ---------- Stepper vertical de avance ---------- */
.px-stepper { list-style: none; margin: 0; padding: 0; }
.px-stepper li {
  position: relative;
  padding: 0 0 1.5rem 2rem;
  font-size: .9rem;
}
.px-stepper li:last-child { padding-bottom: 0; }
.px-stepper li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--px-superficie-alta);
  border: 2px solid var(--px-texto-tenue);
  z-index: 1;
}
.px-stepper li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: -2px;
  width: 2px;
  background: var(--px-borde);
}
.px-stepper li:last-child::after { display: none; }
.px-stepper li.hecho { color: var(--px-texto); }
.px-stepper li.hecho::before { background: var(--px-verde); border-color: var(--px-verde); }
.px-stepper li.hecho::after { background: var(--px-verde); }
.px-stepper li.actual { color: #fff; font-weight: 700; }
.px-stepper li.actual::before { background: var(--px-dorado); border-color: var(--px-dorado); box-shadow: 0 0 0 4px rgba(240, 180, 41, .2); }
.px-stepper li.pendiente { color: var(--px-texto-tenue); }

/* ---------- Línea de tiempo (historial) ---------- */
.px-linea-tiempo { list-style: none; margin: 0; padding: 0; }
.px-linea-tiempo li { display: flex; gap: 1rem; padding-bottom: 1.25rem; position: relative; }
.px-linea-tiempo li::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: 0; width: 1px; background: var(--px-borde); }
.px-linea-tiempo li:last-child::before { display: none; }
.px-linea-tiempo .px-punto-tiempo { width: 11px; height: 11px; border-radius: 50%; background: var(--px-dorado); flex-shrink: 0; margin-top: 5px; }
.px-linea-tiempo .px-fecha { font-size: .75rem; color: var(--px-texto-tenue); }

/* ---------- Tablas (paneles de docente/coordinador) ---------- */
.px-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.px-tabla th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--px-texto-tenue);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--px-borde);
}
.px-tabla td { padding: .8rem .9rem; border-bottom: 1px solid var(--px-borde); vertical-align: middle; }
.px-tabla tr:hover td { background: rgba(255, 255, 255, .03); }

/* ---------- Estadísticas (docente/coordinador) ---------- */
.px-stat { background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: 14px; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: .9rem; }
.px-stat .px-stat-icono { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.px-stat .px-stat-num { font-family: var(--px-fuente-titulo); font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.px-stat .px-stat-label { font-size: .78rem; color: var(--px-texto-tenue); }

.px-vacio { text-align: center; color: var(--px-texto-tenue); padding: 2.5rem 1rem; }
.px-vacio i { font-size: 2.2rem; color: var(--px-dorado); display: block; margin-bottom: .5rem; }

/* ---------- Aparición al hacer scroll (mismo criterio que CERPLAS) ---------- */
.px-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.px-reveal.px-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .px-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsivo: la barra lateral se vuelve menú inferior ---------- */
@media (max-width: 991.98px) {
  .px-sidebar { display: none; }
  .px-shell { flex-direction: column; }
  .px-nav-movil {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: var(--px-fondo-alto); border-top: 1px solid var(--px-borde);
    display: flex; justify-content: space-around; padding: .4rem 0;
  }
  .px-nav-movil a { display: flex; flex-direction: column; align-items: center; gap: .15rem; color: var(--px-texto-tenue); font-size: .66rem; padding: .3rem .5rem; }
  .px-nav-movil a i { font-size: 1.2rem; }
  .px-nav-movil a.activo { color: var(--px-dorado); }
  .px-contenido { padding: 1.1rem; padding-bottom: 5rem; }
  body.px-con-nav-movil { padding-bottom: 0; }
}
@media (min-width: 992px) {
  .px-nav-movil { display: none; }
}

/* Los controles nativos (icono del calendario, listas) se dibujan claros sobre el fondo oscuro */
.px-form-control, select.px-form-control, input.px-form-control { color-scheme: dark; }
/* Icono del calendario siempre blanco: se reemplaza el del navegador por uno propio */
input[type="date"].px-form-control::-webkit-calendar-picker-indicator {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  filter: none; opacity: .9; cursor: pointer;
}
input[type="date"].px-form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---------- Confirmación propia (reemplaza el aviso del navegador) ---------- */
.px-confirmar {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(4, 9, 24, .74); backdrop-filter: blur(3px);
}
.px-confirmar.d-none { display: none !important; }
.px-confirmar-caja {
  width: 100%; max-width: 430px; text-align: center;
  background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: 16px;
  padding: 1.7rem 1.5rem 1.4rem; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: px-confirmar-entra .18s ease-out;
}
.px-confirmar-icono {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: rgba(229, 83, 83, .16); color: #ff7b7b;
}
.px-confirmar-caja h2 { color: var(--px-texto); margin-bottom: .6rem; }
.px-confirmar-caja p { white-space: pre-line; font-size: .92rem; line-height: 1.55; color: var(--px-texto-tenue); margin-bottom: 1.3rem; }
.px-confirmar-botones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn-px-peligro {
  background: #e55353; color: #fff; border: 0; border-radius: 10px;
  padding: .5rem 1.2rem; font-weight: 600;
}
.btn-px-peligro:hover { background: #cf4343; color: #fff; }
@keyframes px-confirmar-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Documentos dentro de Inicio (tarjetas pequeñas) ---------- */
.px-docs-cab { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .8rem; }
.px-docs-cab h2 { font-size: 1.1rem; margin: 0; }
.px-docs-leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--px-texto-tenue); }
.px-docs-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.px-docs-leyenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.px-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; }
.px-doc {
  display: flex; flex-direction: column; gap: .4rem; min-height: 168px; padding: 1rem 1.05rem .9rem;
  background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: 14px;
  transition: border-color .15s, transform .15s;
}
.px-doc:hover { border-color: rgba(240, 180, 41, .45); transform: translateY(-1px); }
.px-doc-origen { font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--px-texto-tenue); }
.px-doc-origen.coord { color: var(--px-dorado); }
.px-doc-nombre { font-family: "Source Serif 4", Georgia, serif; font-size: 1.02rem; line-height: 1.3; color: var(--px-texto); margin: 0; }
.px-doc-archivo { font-size: .74rem; color: var(--px-texto-tenue); overflow-wrap: anywhere; }
.px-doc-estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; margin-top: .1rem; }
.px-doc-estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.px-doc-estado.pendiente { color: #f0b429; }
.px-doc-estado.visto, .px-doc-estado.disponible { color: #2fb873; }
.px-doc-estado.observado { color: #e55353; }
.px-doc-estado.vacio { color: var(--px-texto-tenue); }
.px-doc-correccion { font-size: .76rem; line-height: 1.45; color: #ffb9b9; background: rgba(229, 83, 83, .1); border-left: 3px solid #e55353; border-radius: 6px; padding: .45rem .6rem; }
.px-doc-correccion b { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .1rem; }
.px-doc-nota { font-size: .72rem; color: var(--px-texto-tenue); }
.px-doc-acciones { margin-top: auto; padding-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.px-doc-acciones .btn { font-size: .74rem; padding: .22rem .55rem; display: inline-flex; align-items: center; gap: .3rem; }


/* ---------- Lista de estudiantes (coordinación) ---------- */
.px-est-barra { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.px-est-total { font-size: .85rem; color: var(--px-texto-tenue); display: inline-flex; align-items: center; gap: .45rem; }
.px-est-buscar { position: relative; flex: 1 1 260px; max-width: 360px; }
.px-est-buscar i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--px-texto-tenue); pointer-events: none; }
.px-est-buscar input { padding-left: 38px; }
.px-est-lista { display: grid; gap: .85rem; }
.px-est {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.5fr) auto; gap: 1rem 1.5rem; align-items: center;
  padding: 1.05rem 1.25rem; background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.px-est:hover { border-color: rgba(240, 180, 41, .4); box-shadow: 0 6px 22px rgba(0, 0, 0, .22); }
.px-est-id { display: flex; gap: .9rem; align-items: center; min-width: 0; }
.px-est-avatar {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: #0a1330;
  background: linear-gradient(135deg, #f6c453, #d9961a);
}
.px-est-datos { min-width: 0; }
.px-est-programa {
  display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--px-dorado); background: rgba(240, 180, 41, .1); border-radius: 999px; padding: .18rem .6rem;
}
.px-est-nombre { font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; line-height: 1.25; color: var(--px-texto); margin: 0 0 .25rem; }
.px-est-meta { display: flex; flex-direction: column; gap: .12rem; font-size: .78rem; color: var(--px-texto-tenue); }
.px-est-meta span { display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.px-est-meta i { color: var(--px-dorado); opacity: .8; }
.px-est-practicas { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.px-prac {
  position: relative; min-width: 0; padding: .65rem .8rem .7rem; border-radius: 12px;
  background: var(--px-fondo-alto); border: 1px solid var(--px-borde);
}
.px-prac.vacia { background: transparent; border-style: dashed; }
.px-prac-cab { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--px-texto-tenue); }
.px-prac-estado { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; padding-right: 1.4rem; line-height: 1.25; }
.px-prac.e-revisar .px-prac-estado { color: #f0b429; }
.px-prac.e-curso .px-prac-estado { color: #6aa5f5; }
.px-prac.e-ok .px-prac-estado { color: #2fb873; }
.px-prac.vacia .px-prac-estado { color: var(--px-texto-tenue); font-weight: 500; }
.px-prac-x {
  position: absolute; top: .45rem; right: .45rem; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: transparent; color: var(--px-texto-tenue); font-size: .65rem; display: grid; place-items: center; cursor: pointer;
}
.px-prac-x:hover { background: rgba(229, 83, 83, .2); color: #ff8f8f; }
.btn-px-borrar { white-space: nowrap; color: #ff8f8f; border-color: rgba(229, 83, 83, .45); background: transparent; }
.btn-px-borrar:hover { background: rgba(229, 83, 83, .14); color: #ffb0b0; border-color: #e55353; }
@media (max-width: 1199px) {
  .px-est { grid-template-columns: 1fr; }
  .px-est-acciones { justify-self: start; }
}
@media (max-width: 575px) { .px-est-practicas { grid-template-columns: 1fr; } }

/* ---------- Visor de documentos (se abre sobre cualquier ventana) ---------- */
body.px-visor-abierto { overflow: hidden; }
.px-visor {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(4, 9, 24, .8); backdrop-filter: blur(3px);
}
.px-visor.d-none { display: none !important; }
.px-visor-caja {
  display: flex; flex-direction: column; width: min(1100px, 100%); height: min(92vh, 100%);
  background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .6); overflow: hidden;
}
.px-visor-cab { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--px-borde); }
.px-visor-titulo { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 600; color: var(--px-texto); }
.px-visor-titulo i { color: var(--px-dorado); font-size: 1.15rem; }
.px-visor-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-visor-acciones { display: flex; gap: .4rem; flex-shrink: 0; }
.px-visor-cuerpo { position: relative; flex: 1; min-height: 0; background: #0a1330; }
.px-visor-marco { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.px-visor-imagen { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.px-visor-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.px-visor-mensaje { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem; text-align: center; color: var(--px-texto-tenue); }
.px-visor-mensaje i { font-size: 2.2rem; color: var(--px-dorado); }
.px-visor-mensaje p { max-width: 420px; margin: 0; font-size: .92rem; line-height: 1.55; }
@media (max-width: 575px) { .px-visor { padding: 0; } .px-visor-caja { border-radius: 0; height: 100%; } }

/* ---------- Envío de documentos (ventana Gestionar) ---------- */
.px-envio-cab { font-size: .8rem; color: var(--px-texto-tenue); margin: 0 0 .5rem; }
.px-envio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.px-envio {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem;
  padding: 1rem .7rem .9rem; background: var(--px-fondo-alto); border: 1px solid var(--px-borde); border-radius: 14px;
}
.px-envio > i { font-size: 1.6rem; color: var(--px-dorado); }
.px-envio-nombre { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; color: var(--px-texto); }
.px-envio-estado { font-size: .7rem; line-height: 1.35; color: var(--px-texto-tenue); min-height: 2.1em; }
.px-envio-estado.ok { color: #2fb873; }
.px-envio-bloq { opacity: .75; }
.px-envio-bloq > i { color: var(--px-texto-tenue); }
.px-envio .btn { width: 100%; font-size: .78rem; }
.px-envio-link { background: none; border: 0; padding: 0; color: var(--px-dorado); font-size: .72rem; text-decoration: underline; cursor: pointer; }

/* ---------- Firmas y documentos (sección) ---------- */
.px-plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.px-plant {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; background: var(--px-superficie);
  border: 1px solid var(--px-borde); border-radius: 16px;
}
.px-plant > i { font-size: 1.7rem; color: var(--px-dorado); }
.px-plant h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; margin: 0; color: var(--px-texto); }
.px-plant-estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: var(--px-texto-tenue); }
.px-plant-estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.px-plant-estado.lista { color: #2fb873; }
.px-plant-estado.incompleta { color: #f0b429; }
.px-plant-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .6rem; }
.px-plant-acciones .btn { font-size: .78rem; display: inline-flex; align-items: center; gap: .35rem; }

.px-confirmar-neutro .px-confirmar-icono { background: rgba(240, 180, 41, .16); color: var(--px-dorado); }
.px-firma-img, .px-firma-vacia {
  display: grid; place-items: center; height: 96px; border-radius: 10px; margin-bottom: .2rem;
  background: #fff; border: 1px solid var(--px-borde);
}
.px-firma-img img { max-width: 80%; max-height: 80px; }
.px-firma-vacia { background: var(--px-fondo-alto); border-style: dashed; color: var(--px-texto-tenue); font-size: .78rem; align-content: center; gap: .15rem; }
.px-firma-vacia i { font-size: 1.3rem; color: var(--px-dorado); }
.px-envio-panel { margin-top: .9rem; padding: 1rem; background: var(--px-fondo-alto); border: 1px solid var(--px-dorado); border-radius: 14px; }
.px-envio-panel-cab { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; }
.px-envio-panel-cab i { font-size: 1.25rem; color: var(--px-dorado); }
.px-envio-panel .px-form-control { font-size: .85rem; padding: .4rem .6rem; }
.px-envio-panel .px-label { font-size: .72rem; }

/* ---------- Acciones de cada estudiante ---------- */
.px-est-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.px-est-acciones .btn { white-space: nowrap; }
.px-est-pregunta { font-size: .8rem; color: var(--px-texto-tenue); margin-right: .2rem; }

/* ---------- Pestañas del repositorio (coordinación) ---------- */
.px-pestanas { display: inline-flex; gap: .3rem; padding: .25rem; margin-bottom: 1rem; background: var(--px-fondo-alto); border: 1px solid var(--px-borde); border-radius: 12px; flex-wrap: wrap; }
.px-pestana { border: 0; background: transparent; color: var(--px-texto-tenue); font-size: .84rem; font-weight: 600; padding: .5rem .95rem; border-radius: 9px; display: inline-flex; align-items: center; gap: .45rem; }
.px-pestana:hover { color: var(--px-texto); }
.px-pestana.activa { background: var(--px-dorado); color: #14110a; }
.px-pestana small { font-weight: 700; opacity: .8; }
.px-codigo { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; letter-spacing: .03em; color: var(--px-dorado); white-space: nowrap; }

/* ---------- Panel del estudiante: contenido + notificaciones en el "celular" ---------- */
.px-contenido-ancho { max-width: 1400px; }
.px-est-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.6rem; align-items: start; }
.px-seg-titulo { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.px-seg-titulo > i { font-size: 2rem; line-height: 1; color: var(--px-texto-tenue); }
.px-seg-titulo h3 { margin: 0; padding-bottom: .3rem; border-bottom: 3px solid #2fb873; font-size: .95rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--px-texto); }
.px-celular { position: sticky; top: 4.6rem; }
.px-celular-cuerpo { padding: .85rem; background: var(--px-superficie); border: 2px solid rgba(58, 168, 240, .75); border-radius: 34px; box-shadow: 0 0 0 4px rgba(58, 168, 240, .07); }
.px-celular-cab { display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; margin: 0 auto .75rem; width: fit-content; background: var(--px-fondo); border: 1px solid var(--px-borde); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--px-texto); }
.px-celular-cab i { color: var(--px-texto-tenue); }
.px-celular-cont { min-width: 20px; padding: 0 .35rem; text-align: center; border-radius: 999px; background: #e55353; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.45rem; height: 1.45rem; }
.px-celular-pantalla { display: flex; flex-direction: column; gap: .6rem; max-height: 520px; overflow-y: auto; padding: .8rem; background: var(--px-fondo); border-radius: 26px; scrollbar-width: thin; }
.px-notif { display: block; width: 100%; text-align: left; padding: .75rem .85rem; background: transparent; border: 1px solid rgba(58, 168, 240, .55); border-radius: 16px; color: var(--px-texto); cursor: default; }
.px-notif.nueva { cursor: pointer; background: rgba(58, 168, 240, .07); border-color: rgba(58, 168, 240, .9); }
.px-notif.nueva:hover { background: rgba(58, 168, 240, .13); }
.px-notif-texto { display: block; font-size: .8rem; line-height: 1.45; }
.px-notif.nueva .px-notif-texto::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .45rem; border-radius: 50%; background: var(--px-dorado); }
.px-notif-fecha { display: block; margin-top: .35rem; font-size: .68rem; color: var(--px-texto-tenue); }
.px-celular-vacio { padding: 1.6rem .6rem; text-align: center; font-size: .8rem; color: var(--px-texto-tenue); }
.px-celular-vacio i { display: block; margin-bottom: .4rem; font-size: 1.5rem; }
.px-celular-todas { display: block; margin: .7rem auto .1rem; background: none; border: 0; padding: 0; font-size: .74rem; color: var(--px-dorado); text-decoration: underline; cursor: pointer; }
@media (max-width: 1199px) {
  .px-est-grid { grid-template-columns: minmax(0, 1fr); }
  .px-celular { position: static; max-width: 420px; }
}

/* ---------- Alineación del panel del estudiante ---------- */
.px-est-grid { grid-template-rows: auto auto; column-gap: 1.6rem; row-gap: 0; }
.px-est-tabs { grid-column: 1; grid-row: 1; min-width: 0; }
.px-est-cuerpo { grid-column: 1; grid-row: 2; min-width: 0; }
.px-est-grid > .px-celular { grid-column: 2; grid-row: 2; }
.px-est-resumen .px-card { height: 100%; margin-bottom: 0; }
@media (max-width: 1199px) {
  .px-est-tabs, .px-est-cuerpo, .px-est-grid > .px-celular { grid-column: 1; grid-row: auto; }
  .px-est-grid > .px-celular { margin-top: 1.5rem; }
}

/* ---------- Seguimiento con el mismo marco que Notificaciones; títulos en mayúsculas ---------- */
.px-celular-cab span:not(.px-celular-cont) { text-transform: uppercase; letter-spacing: .09em; }
.px-est-resumen .px-celular-cuerpo { height: 100%; display: flex; flex-direction: column; }
.px-seg-pantalla { flex: 1; max-height: none; padding: 1.1rem .6rem 1.1rem .85rem; }
.px-docs-cab h2 {
  display: inline-block; padding-bottom: .35rem; border-bottom: 3px solid #2fb873;
  font-size: .95rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}

/* ---------- Tema celeste del panel del estudiante: el mismo borde en todo ---------- */
.px-tema-celeste { --px-celeste: 58, 168, 240; }
.px-tema-celeste .px-sidebar { border-right: 1.5px solid rgba(var(--px-celeste), .55); }
.px-tema-celeste .px-topbar { border-bottom: 1.5px solid rgba(var(--px-celeste), .55); }
.px-tema-celeste .px-card { border: 1.5px solid rgba(var(--px-celeste), .55); border-radius: 22px; }
.px-tema-celeste .px-doc { border: 1.5px solid rgba(var(--px-celeste), .45); border-radius: 18px; }
.px-tema-celeste .px-doc:hover { border-color: rgba(var(--px-celeste), .95); }
.px-tema-celeste .px-topbar .px-campana {
  display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.1rem;
  border: 1.5px solid rgba(var(--px-celeste), .55); border-radius: 50%; background: var(--px-superficie);
}
.px-tema-celeste .px-topbar .px-campana:hover { border-color: rgba(var(--px-celeste), 1); }
.px-tema-celeste .px-topbar .px-campana .px-punto { top: 1px; right: 1px; }

.px-usuario {
  display: flex; align-items: center; gap: .7rem; padding: .3rem 1.05rem .3rem .35rem;
  background: var(--px-superficie); border: 1.5px solid rgba(var(--px-celeste, 58, 168, 240), .55); border-radius: 999px;
}
.px-usuario-avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--px-dorado); color: #1a1300; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.px-usuario-datos { display: flex; flex-direction: column; line-height: 1.2; }
.px-usuario-nombre { font-size: .88rem; font-weight: 600; color: var(--px-texto); }
.px-usuario-sub { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--px-texto-tenue); }

.btn-px-salir {
  display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; padding: .7rem 1rem;
  font-size: .92rem; font-weight: 700; color: #ffb3b3; background: rgba(229, 83, 83, .14);
  border: 1.5px solid rgba(229, 83, 83, .75); border-radius: 12px; transition: background .15s, color .15s, border-color .15s;
}
.btn-px-salir:hover, .btn-px-salir:focus-visible { color: #fff; background: #e55353; border-color: #e55353; }
.btn-px-salir i { font-size: 1.1rem; }
@media (max-width: 575px) { .px-usuario-sub { display: none; } .px-usuario { padding-right: .8rem; } }
.px-tema-celeste .px-stat,
.px-tema-celeste .px-est,
.px-tema-celeste .px-plant { border: 1.5px solid rgba(var(--px-celeste), .55); border-radius: 20px; }
.px-tema-celeste .px-prac,
.px-tema-celeste .px-envio { border: 1.5px solid rgba(var(--px-celeste), .4); }
.px-tema-celeste .px-prac.vacia { border-style: dashed; }
