/* =============================================================
   Plataforma escolar — hoja de estilos
   Sistema de diseño: una escala de espacios, una de tipografía y
   una paleta con roles fijos, para que todo se vea de la misma familia.
   ============================================================= */

:root {
  /* --- Paleta ---
     Cada escuela trae su propio color: el JavaScript sólo cambia
     --marca-escuela y de ahí salen el tono de reposo, el de hover y el
     fondo suave, para que toda la interfaz siga al color de la institución.
     Aquí quedan los valores fijos; los derivados se calculan más abajo, solo
     en los navegadores que entienden color-mix (Safari 16.2+, Chrome 111+).
     En uno más viejo la escuela conserva su color y los tonos de apoyo se
     quedan en azul, que es mucho mejor que quedarse sin color. */
  --marca-escuela: #2551d4;
  --marca:        var(--marca-escuela);
  --marca-fuerte: #1c3fa8;
  --marca-suave:  #eef2ff;
  --verde:  #0f8a5f;
  --ambar:  #b4690e;
  --rojo:   #c8322f;
  --morado: #6d3fc4;
  --cian:   #0e7490;

  /* Neutros: el fondo no es blanco puro, cansa menos la vista. */
  --fondo:        #f6f7f9;
  --superficie:   #ffffff;
  --superficie-2: #f2f4f7;
  --borde:        #e3e7ee;
  --borde-fuerte: #cbd3e1;
  --texto:        #131a2a;
  --texto-suave:  #5b6679;
  --texto-tenue:  #8994a6;

  /* Barra lateral oscura: separa la navegación del contenido. */
  --barra-fondo:  #101a33;
  --barra-texto:  #c3cddf;
  --barra-activo: #1e2d52;

  /* --- Espacios --- */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;
  --e5: 1.5rem; --e6: 2rem;   --e7: 3rem;

  /* --- Bordes y sombras --- */
  --radio-s: 8px; --radio: 12px; --radio-l: 16px;
  --sombra-s: 0 1px 2px rgba(16, 26, 51, .06);
  --sombra:   0 1px 3px rgba(16, 26, 51, .07), 0 6px 16px -6px rgba(16, 26, 51, .10);
  --sombra-l: 0 12px 40px -8px rgba(16, 26, 51, .22);

  --ancho-barra: 258px;
}

html[data-tema="oscuro"] {
  --marca:        #6b91ff;
  --marca-fuerte: #8aa8ff;
  --marca-suave:  #18203a;
  --verde:  #34d399;
  --ambar:  #fbbf24;
  --rojo:   #f87171;
  --morado: #a78bfa;
  --cian:   #22d3ee;

  --fondo:        #0a0f1c;
  --superficie:   #131b2e;
  --superficie-2: #1a2337;
  --borde:        #253049;
  --borde-fuerte: #35425f;
  --texto:        #e9eef8;
  --texto-suave:  #9aa6bd;
  --texto-tenue:  #6d7a93;

  --barra-fondo:  #080d18;
  --barra-texto:  #9aa6bd;
  --barra-activo: #1b2540;

  --sombra-s: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra:   0 1px 3px rgba(0, 0, 0, .5), 0 8px 20px -8px rgba(0, 0, 0, .6);
  --sombra-l: 0 16px 48px -10px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--e2); line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: 1.35rem; font-weight: 650; }
h2 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; font-weight: 620; }
h4 { font-size: .98rem; font-weight: 620; }
p  { margin: 0 0 var(--e3); }
a  { color: var(--marca); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }


/* --- Tonos derivados del color de la escuela ---
   Se calculan aparte para poder comprobar antes que el navegador sepa hacerlo:
   si no, una regla que no entiende dejaría el elemento sin color en vez de
   caer al azul de arriba. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --marca-fuerte: color-mix(in srgb, var(--marca-escuela) 78%, #000);
    --marca-suave:  color-mix(in srgb, var(--marca-escuela) 9%,  #fff);
  }
  /* En oscuro el color de la escuela se aclara: un azul marino o un verde
     bosque sobre fondo negro no se leería. */
  html[data-tema="oscuro"] {
    --marca:        color-mix(in srgb, var(--marca-escuela) 55%, #fff);
    --marca-fuerte: color-mix(in srgb, var(--marca-escuela) 38%, #fff);
    --marca-suave:  color-mix(in srgb, var(--marca-escuela) 24%, #0f1730);
  }
}

/* =========================== ACCESO =========================== */

.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

.acceso__marca {
  /* El degradado sale del color de la escuela: oscurecido arriba y aclarado
     abajo, para que la portada sea del color de la institución sin retocarla. */
  background:
    radial-gradient(1000px 500px at 12% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(155deg, #16224a 0%, #22409c 52%, #2f6ad0 100%);
  background:
    radial-gradient(1000px 500px at 12% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--marca-escuela) 52%, #000) 0%,
      color-mix(in srgb, var(--marca-escuela) 92%, #000) 52%,
      color-mix(in srgb, var(--marca-escuela) 72%, #fff) 100%);
  color: #fff;
  padding: var(--e7) 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.acceso__lema {
  font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  color: #a9c4f0;
  color: color-mix(in srgb, var(--marca-escuela) 32%, #fff);
  margin: var(--e5) 0 0; font-weight: 600;
}
.acceso__lema:empty { display: none; }

.acceso__marca h1 { font-size: 2.35rem; font-weight: 680; margin: var(--e2) 0 var(--e4); letter-spacing: -.028em; }
.acceso__marca p { max-width: 44ch; color: #c9d8f5; font-size: 1.02rem; }

.acceso__puntos { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: var(--e2); }
.acceso__puntos li {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: var(--e2) var(--e4);
  border-radius: 999px;
  width: fit-content;
  font-size: .92rem;
  backdrop-filter: blur(3px);
}

.acceso__panel { display: flex; align-items: center; justify-content: center; padding: var(--e6); }
.tarjeta--acceso { width: min(400px, 100%); padding: var(--e6); }
.tarjeta--acceso h2 { font-size: 1.45rem; }
.sub { color: var(--texto-suave); margin: 0 0 var(--e5); }

/* ========================= ESTRUCTURA ========================= */

.app { display: grid; grid-template-columns: var(--ancho-barra) 1fr; min-height: 100vh; }

.barra {
  background: var(--barra-fondo);
  color: var(--barra-texto);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 40;
}

.barra__marca {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e5) var(--e4) var(--e4);
  color: #fff;
}
.marca__icono {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center; font-size: 1.2rem;
  background: linear-gradient(140deg, var(--marca), #4f7cf0);
  background: linear-gradient(140deg, var(--marca), color-mix(in srgb, var(--marca) 62%, #fff));
  border-radius: 11px;
}
.marca__texto strong { display: block; font-size: 1.02rem; letter-spacing: .1em; font-weight: 640; }
.marca__texto small { display: block; font-size: .72rem; color: var(--barra-texto); }

.barra__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e2) var(--e3);
  overflow-y: auto; flex: 1;
}
.barra__nav button {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; text-align: left;
  padding: .58rem var(--e3);
  border: 0; border-radius: var(--radio-s);
  background: transparent; color: var(--barra-texto);
  font: inherit; font-size: .92rem; cursor: pointer;
  transition: background .12s, color .12s;
}
.barra__nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.barra__nav button.activo { background: var(--barra-activo); color: #fff; font-weight: 560; }
.barra__nav button.activo::before {
  content: ''; width: 3px; height: 18px; border-radius: 2px;
  background: var(--marca); margin-left: -var(--e3); margin-right: -2px;
}

.barra__pie {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: var(--e3) var(--e4) var(--e4);
  display: grid; gap: var(--e3);
}
.barra__acciones { display: flex; gap: var(--e1); }

/* Los tres botones del pie llevan texto, no solo un icono: "cerrar sesión" es
   de las cosas que se buscan con prisa y un símbolo suelto no dice qué hace.
   Además evita depender de glifos raros: el símbolo de encendido (⏻) no existe
   en la fuente de Android y salía como un cuadro vacío. */
.barra__pie .btn--barra {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--e2) var(--e1);
  background: rgba(255, 255, 255, .06);
  border-color: transparent;
  color: var(--barra-texto);
  font-size: .68rem; line-height: 1.2;
}
.barra__pie .btn--barra span:first-child { font-size: 1rem; }
.barra__pie .btn--barra:hover { background: rgba(255, 255, 255, .13); color: #fff; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.superior {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e6);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--borde);
  min-height: 62px;
}
.superior__titulo { min-width: 0; flex: 1; }
.superior__titulo h1 { margin: 0; }
.superior__titulo p { margin: 0; font-size: .82rem; color: var(--texto-suave); }
.superior__acciones { display: flex; align-items: center; gap: var(--e2); }

/* Más específica que .btn, que se define más abajo y tiene el mismo peso. */
.superior .btn--menu { display: none; }

.velo {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(10, 15, 28, .5); backdrop-filter: blur(2px);
}

.contenido { padding: var(--e5) var(--e6) var(--e7); max-width: 1400px; width: 100%; }
.pie { padding: var(--e4) var(--e6) var(--e6); color: var(--texto-tenue); font-size: .8rem; margin-top: auto; }

.usuario { display: flex; align-items: center; gap: var(--e2); font-size: .85rem; min-width: 0; }
.usuario__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: linear-gradient(140deg, var(--marca), #4f7cf0);
  background: linear-gradient(140deg, var(--marca), color-mix(in srgb, var(--marca) 62%, #fff)); color: #fff;
  display: grid; place-items: center; font-weight: 640; font-size: .78rem;
}
.usuario strong { display: block; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario__rol { display: block; font-size: .72rem; opacity: .75; text-transform: capitalize; }
.barra__pie .usuario { color: #fff; }
.usuario--compacto .usuario__rol { display: none; }

/* ====================== ENCABEZADO DE VISTA ====================== */

.encabezado-vista {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5);
}
.encabezado-vista h2 { margin: 0 0 var(--e1); }
.encabezado-vista p { color: var(--texto-suave); margin: 0; max-width: 78ch; }

/* =========================== PIEZAS =========================== */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-s);
  padding: var(--e5);
}

.rejilla { display: grid; gap: var(--e4); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Seis cifras en un renglón en pantalla ancha; se van acomodando solas al
   angostarse. Es la fila principal del panel. */
.rejilla--6 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.stat { display: flex; align-items: center; gap: var(--e3); padding: var(--e4); }
.stat__icono {
  font-size: 1.35rem; width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--superficie-2);
}
.stat__valor { font-size: 1.6rem; font-weight: 660; line-height: 1.1; letter-spacing: -.02em; }
.stat__etiqueta { font-size: .78rem; color: var(--texto-suave); }
.stat__nota { font-size: .72rem; margin-top: 2px; opacity: .85; }

/* --- Tarjetas de cifra a color ---
   Se usan en la fila principal de cada panel: es lo primero que se mira y el
   color ayuda a distinguir de un golpe qué se está viendo. El resto de las
   tarjetas se queda en blanco a propósito, para que esta fila destaque.
   "marca" toma el color de la escuela, así que la cifra principal siempre es
   del color de la institución. */
.stat--marca, .stat--verde, .stat--morado, .stat--ambar, .stat--rojo, .stat--cian {
  color: #fff; border: 0;
}
.stat--marca  { background: linear-gradient(140deg, var(--marca),  color-mix(in srgb, var(--marca) 74%, #000)); }
.stat--verde  { background: linear-gradient(140deg, var(--verde),  color-mix(in srgb, var(--verde) 74%, #000)); }
.stat--morado { background: linear-gradient(140deg, var(--morado), color-mix(in srgb, var(--morado) 74%, #000)); }
.stat--ambar  { background: linear-gradient(140deg, var(--ambar),  color-mix(in srgb, var(--ambar) 74%, #000)); }
.stat--rojo   { background: linear-gradient(140deg, var(--rojo),   color-mix(in srgb, var(--rojo) 74%, #000)); }
.stat--cian   { background: linear-gradient(140deg, var(--cian),   color-mix(in srgb, var(--cian) 74%, #000)); }

.stat--marca .stat__etiqueta, .stat--verde .stat__etiqueta, .stat--morado .stat__etiqueta,
.stat--ambar .stat__etiqueta, .stat--rojo .stat__etiqueta, .stat--cian .stat__etiqueta { color: rgba(255,255,255,.88); }

.stat--marca .stat__icono, .stat--verde .stat__icono, .stat--morado .stat__icono,
.stat--ambar .stat__icono, .stat--rojo .stat__icono, .stat--cian .stat__icono {
  background: rgba(255, 255, 255, .20);
}

/* --- Gráficas (SVG dibujado a mano) --- */
.grafica { margin-top: var(--e3); }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica__reja { stroke: var(--borde); stroke-width: 1; }
/* Los tamaños van en unidades del viewBox, no en píxeles de pantalla: se
   encogen junto con la gráfica. Por eso se ven grandes aquí. */
.grafica__eje  { fill: var(--texto-tenue); font-size: 13px; }
.grafica__cifra { fill: var(--texto); font-size: 14px; font-weight: 620; }

.grafica__leyenda {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  margin-top: var(--e3); font-size: .78rem; color: var(--texto-suave);
}
.grafica__serie { display: inline-flex; align-items: center; gap: 6px; }
.grafica__serie i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* --- Barras horizontales con nombre ---
   Ojo con el nombre: ".barra" a secas ya es la barra lateral oscura, así que
   estas llevan sufijo. */
.barras-h { display: grid; gap: var(--e2); margin-top: var(--e3); }
.barra-h {
  display: grid; grid-template-columns: minmax(0, 8.5rem) 2.4rem 1fr;
  align-items: center; gap: var(--e2); font-size: .82rem;
}
.barra-h__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); }
.barra-h__valor { font-weight: 640; text-align: right; }
.barra-h__pista { height: 9px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.barra-h__relleno { display: block; height: 100%; border-radius: 99px; }

/* --- Dona de porcentaje --- */
.dona { flex: none; }
.dona svg { width: 100%; height: auto; display: block; }
.dona__cifra { fill: var(--texto); font-size: 22px; font-weight: 680; }
.dona__texto { fill: var(--texto-tenue); font-size: 10px; }

/* --- Accesos rápidos ---
   Botones grandes de color, en rejilla: son las acciones que de verdad se
   usan todos los días, así que valen el espacio. */
/* "atajo" y no "acceso": .acceso ya es la pantalla de inicio de sesión. */
.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); margin-top: var(--e3); }
.atajo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e2); padding: var(--e4) var(--e3); min-height: 84px;
  border: 0; border-radius: var(--radio); cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 560; line-height: 1.25;
  color: #fff; text-align: center;
  transition: transform .12s, filter .12s;
}
.atajo:hover { filter: brightness(1.08); transform: translateY(-1px); }
.atajo:active { transform: none; }
.atajo__icono { font-size: 1.3rem; }
.atajo--marca  { background: var(--marca); }
.atajo--verde  { background: var(--verde); }
.atajo--morado { background: var(--morado); }
.atajo--ambar  { background: var(--ambar); }
.atajo--cian   { background: var(--cian); }
.atajo--rojo   { background: var(--rojo); }

@media (max-width: 480px) {
  .atajos { grid-template-columns: 1fr; }
  .atajo { flex-direction: row; justify-content: flex-start; min-height: 0; padding: var(--e3) var(--e4); }
  .barra-h { grid-template-columns: minmax(0, 6.5rem) 2.2rem 1fr; }
}

.fila-lista { padding: var(--e3) 0; border-bottom: 1px solid var(--borde); }
.fila-lista:last-of-type { border-bottom: 0; }

.item {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  border-radius: var(--radio);
  padding: var(--e4) var(--e5);
  box-shadow: var(--sombra-s);
}
.item__cabecera { display: flex; justify-content: space-between; gap: var(--e3); align-items: flex-start; flex-wrap: wrap; }
.item h4 { margin: 0; }
.item__meta {
  font-size: .8rem; color: var(--texto-suave);
  display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e1);
}
.item p.desc { margin: var(--e3) 0 0; font-size: .92rem; color: var(--texto-suave); }
.item__pie { margin-top: var(--e3); display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.item__estados { display: flex; gap: var(--e1); align-items: center; flex-wrap: wrap; }
.item--fijado, .item--integradora { border-left-color: var(--morado); }

.retro {
  margin-top: var(--e3); padding: var(--e3) var(--e4);
  border-radius: var(--radio-s); background: var(--superficie-2);
  border: 1px solid var(--borde); font-size: .9rem;
}

.vacio {
  text-align: center; padding: var(--e7) var(--e4); color: var(--texto-suave);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie);
}
.vacio span { font-size: 2.2rem; display: block; margin-bottom: var(--e2); opacity: .75; }

/* =========================== BOTONES =========================== */

.btn {
  font: inherit; font-size: .9rem; font-weight: 520;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde-fuerte);
  padding: .48rem .9rem;
  cursor: pointer;
  background: var(--superficie);
  color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--superficie-2); border-color: var(--texto-tenue); }
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 570;
  box-shadow: var(--sombra-s);
}
.btn--primario:hover { background: var(--marca-fuerte); border-color: var(--marca-fuerte); }
html[data-tema="oscuro"] .btn--primario { color: #07102a; }

.btn--peligro { background: transparent; border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo); }
.btn--peligro:hover { background: color-mix(in srgb, var(--rojo) 10%, transparent); border-color: var(--rojo); }
.btn--bloque { width: 100%; }
.btn--icono { padding: .42rem .5rem; border-color: transparent; background: transparent; font-size: 1rem; }
.btn--icono:hover { background: var(--superficie-2); border-color: var(--borde); }
.btn--pequeno { padding: .3rem .62rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ========================= FORMULARIOS ========================= */

.campo { display: block; margin-bottom: var(--e4); }
.campo > span { display: block; font-size: .82rem; font-weight: 560; margin-bottom: var(--e1); color: var(--texto); }

.campo input, .campo select, .campo textarea,
.filtros select, .filtros input, td input, td select {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--texto);
  font: inherit; font-size: .9rem;
  transition: border-color .12s, box-shadow .12s;
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus,
.filtros select:focus, .filtros input:focus, td input:focus, td select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
.campo--fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.pista { font-size: .78rem; color: var(--texto-suave); margin: var(--e1) 0 0; }
.error { color: var(--rojo); font-size: .86rem; margin: 0 0 var(--e3); }

.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 2.8rem; }
.ver-clave {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; padding: .3rem .4rem; border-radius: var(--radio-s);
}
.ver-clave:hover { background: var(--superficie-2); }

.filtros {
  display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--e4);
}
.filtros select, .filtros input { width: auto; min-width: 160px; }

.acciones-modal { display: flex; gap: var(--e2); justify-content: flex-end; margin-top: var(--e5); }

.campo--casilla { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); font-size: .9rem; cursor: pointer; }
.campo--casilla input { width: auto; }
.campo--casilla > span { margin: 0; font-weight: 400; }

.casillas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: var(--e1) var(--e3); margin-top: var(--e1);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  padding: var(--e3); background: var(--superficie-2);
}

.lista-simple { margin: var(--e1) 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--texto-suave); }
.lista-pasos { margin: var(--e3) 0 0; padding-left: 1.3rem; display: grid; gap: var(--e2); }
.tecla {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 .35rem;
  border-radius: 6px; border: 1px solid var(--borde-fuerte); background: var(--superficie-2);
  font-size: .85rem; font-weight: 640;
}

/* =========================== TABLAS =========================== */

.tabla-envoltura { overflow-x: auto; border-radius: var(--radio-s); }
table { width: 100%; border-collapse: collapse; font-size: .89rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borde); }
th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-tenue); font-weight: 620;
  background: var(--superficie-2); position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--marca) 4%, transparent); }
td input[type="number"], td input[type="text"] { max-width: 120px; }

.fila--clic { cursor: pointer; }
.fila--clic:hover .item__meta { color: var(--marca); }
.fila--clic .item__meta { font-size: .72rem; }
.fila--sucia { background: color-mix(in srgb, var(--ambar) 12%, transparent); }
.podio .fila--yo { background: var(--marca-suave); font-weight: 600; }
.podio td:first-child { font-weight: 660; width: 58px; }

.tabla-evaluacion th { text-align: center; vertical-align: bottom; }
.tabla-evaluacion th:first-child { text-align: left; }
.tabla-evaluacion td { text-align: center; vertical-align: top; }
.tabla-evaluacion td:first-child { text-align: left; }
.tabla-evaluacion th small { font-weight: 400; opacity: .7; }
.tabla-evaluacion input[type="number"] { max-width: 60px; text-align: center; }
.tabla-evaluacion .item__meta { justify-content: flex-start; gap: var(--e2); font-size: .72rem; }
.col-resultado { background: var(--superficie-2); font-weight: 620; }
.col-estado { white-space: nowrap; }

/* ========================== ETIQUETAS ========================== */

.etiqueta {
  display: inline-block; padding: .14rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 570; line-height: 1.5;
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--texto-suave); white-space: nowrap;
}
.etiqueta--verde  { background: color-mix(in srgb, var(--verde) 12%, var(--superficie));  color: var(--verde);  border-color: color-mix(in srgb, var(--verde) 30%, transparent); }
.etiqueta--rojo   { background: color-mix(in srgb, var(--rojo) 12%, var(--superficie));   color: var(--rojo);   border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }
.etiqueta--ambar  { background: color-mix(in srgb, var(--ambar) 13%, var(--superficie));  color: var(--ambar);  border-color: color-mix(in srgb, var(--ambar) 30%, transparent); }
.etiqueta--azul   { background: color-mix(in srgb, var(--marca) 11%, var(--superficie));  color: var(--marca);  border-color: color-mix(in srgb, var(--marca) 28%, transparent); }
.etiqueta--morada { background: color-mix(in srgb, var(--morado) 11%, var(--superficie)); color: var(--morado); border-color: color-mix(in srgb, var(--morado) 28%, transparent); }

.aviso-fijo {
  margin-top: var(--e4); padding: var(--e3) var(--e4); border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie); font-size: .9rem;
}
.aviso-fijo--rojo { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 8%, var(--superficie)); }
.tarjeta--avisos { border-left: 3px solid var(--morado); }

/* ========================== HORARIO ========================== */

.horario {
  display: grid;
  grid-template-columns: 62px repeat(var(--dias, 5), minmax(120px, 1fr));
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  min-width: 640px;
}
.horario__celda { background: var(--superficie); padding: var(--e1); min-height: 34px; position: relative; }
.horario__encabezado {
  background: var(--superficie-2); padding: var(--e2);
  font-size: .78rem; font-weight: 620; text-align: center;
  position: sticky; top: 0; z-index: 2;
}
.horario__hora {
  background: var(--superficie-2); padding: var(--e1) var(--e2);
  font-size: .7rem; color: var(--texto-tenue); text-align: right;
  font-variant-numeric: tabular-nums;
}
.horario__celda--libre { cursor: pointer; }
.horario__celda--libre:hover { background: var(--marca-suave); }
.horario__celda--libre:hover::after {
  content: '+'; position: absolute; inset: 0;
  display: grid; place-items: center; color: var(--marca); font-size: 1.1rem; font-weight: 700;
}

.clase {
  border-radius: var(--radio-s); padding: var(--e2);
  height: 100%; display: flex; flex-direction: column; gap: 2px;
  font-size: .78rem; cursor: pointer; border-left: 3px solid;
  transition: filter .12s;
}
.clase:hover { filter: brightness(.96); }
.clase strong { font-weight: 600; line-height: 1.25; }
.clase small { color: var(--texto-suave); font-size: .72rem; }
.clase--mate { background: color-mix(in srgb, #2563eb 11%, var(--superficie)); border-color: #2563eb; }
.clase--esp  { background: color-mix(in srgb, #dc2626 11%, var(--superficie)); border-color: #dc2626; }
.clase--cien { background: color-mix(in srgb, #059669 11%, var(--superficie)); border-color: #059669; }
.clase--hist { background: color-mix(in srgb, #b45309 11%, var(--superficie)); border-color: #b45309; }
.clase--ing  { background: color-mix(in srgb, #7c3aed 11%, var(--superficie)); border-color: #7c3aed; }
.clase--comp { background: color-mix(in srgb, #0f766e 11%, var(--superficie)); border-color: #0f766e; }

.resumen-horas { display: grid; gap: var(--e1); }
.barra-horas { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.barra-horas span { display: block; height: 100%; background: var(--marca); }
.barra-horas--completa span { background: var(--verde); }
.barra-horas--excedida span { background: var(--ambar); }

/* ========================= PASE DE LISTA ========================= */

.marcas { display: flex; gap: var(--e1); flex-wrap: wrap; }
.marca {
  font: inherit; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e1);
  padding: .32rem .6rem; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--texto-suave); transition: all .12s;
}
.marca:hover { border-color: var(--marca); color: var(--texto); }
.marca--activa { font-weight: 640; color: #fff; }
.marca--activa.marca--verde { background: var(--verde); border-color: var(--verde); }
.marca--activa.marca--ambar { background: var(--ambar); border-color: var(--ambar); }
.marca--activa.marca--azul  { background: var(--marca); border-color: var(--marca); }
.marca--activa.marca--rojo  { background: var(--rojo);  border-color: var(--rojo); }
html[data-tema="oscuro"] .marca--activa { color: #07102a; }
.marca__inicial { display: none; }
.leyenda-marcas { display: none; }

.mes { margin-top: var(--e4); }
.mes__cabecera { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e2); }
.mes__cabecera .item__meta { margin: 0; }
.calendario { display: flex; flex-wrap: wrap; gap: var(--e1); }
/* Cada cuadro del calendario es un botón: al darle clic se abre ese día
   clase por clase en el panel de arriba. */
.dia {
  width: 42px; padding: var(--e1) 0; border-radius: var(--radio-s); text-align: center;
  border: 1px solid var(--borde); background: var(--superficie);
  display: grid; gap: 1px; font: inherit; color: inherit; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.dia:hover { transform: translateY(-1px); box-shadow: var(--sombra-s); }
.dia--elegido { outline: 2px solid var(--marca); outline-offset: 1px; }
.dia__semana { font-size: .6rem; text-transform: uppercase; color: var(--texto-tenue); }
.dia__numero { font-size: .92rem; font-weight: 640; line-height: 1; }
.dia__marca { font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.dia--verde { border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.dia--ambar { border-color: var(--ambar); background: color-mix(in srgb, var(--ambar) 10%, var(--superficie)); }
.dia--azul  { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, var(--superficie)); }
.dia--rojo  { border-color: var(--rojo);  background: color-mix(in srgb, var(--rojo) 12%, var(--superficie)); }

/* --- El día, clase por clase ---
   Es lo que de verdad quiere ver el papá: no "faltó", sino a qué materia y a
   qué hora. Por eso la hora va primero y en grande. */
.tarjeta--hueca {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--e4); margin: var(--e4) 0;
}
.dia-detalle h4 { font-size: 1rem; }
.clases-dia { display: grid; gap: var(--e2); margin-top: var(--e3); }
.clase-dia {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto minmax(0, 8rem);
  align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3); background: var(--superficie);
  border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio-s); font-size: .84rem;
}
.clase-dia--verde { border-left-color: var(--verde); }
.clase-dia--ambar { border-left-color: var(--ambar); }
.clase-dia--azul  { border-left-color: var(--marca); }
.clase-dia--rojo  { border-left-color: var(--rojo); }
.clase-dia__hora { font-weight: 640; font-variant-numeric: tabular-nums; }
.clase-dia__materia { min-width: 0; }
.clase-dia__materia strong { display: block; font-weight: 570; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-dia__materia small { color: var(--texto-tenue); font-size: .74rem; }
.clase-dia__nota { color: var(--texto-suave); font-size: .78rem; font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Leyenda de estados --- */
.leyenda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e2) var(--e4); margin-top: var(--e4);
  padding-top: var(--e3); border-top: 1px solid var(--borde);
}
.leyenda__item { display: flex; align-items: flex-start; gap: var(--e2); font-size: .8rem; }
.leyenda__punto {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; color: #fff;
}
.leyenda__punto--verde { background: var(--verde); }
.leyenda__punto--ambar { background: var(--ambar); }
.leyenda__punto--azul  { background: var(--marca); }
.leyenda__punto--rojo  { background: var(--rojo); }
.leyenda__item strong { display: block; font-weight: 570; }
.leyenda__item small { color: var(--texto-tenue); }

@media (max-width: 640px) {
  .clase-dia { grid-template-columns: 3.6rem 1fr; row-gap: var(--e1); }
  .clase-dia .etiqueta { grid-column: 2; justify-self: start; }
  .clase-dia__nota { grid-column: 2; }
}

/* ====================== PLAN DE ESTUDIOS ====================== */

.cuatri {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e4); margin-top: var(--e3); background: var(--superficie-2);
}
.cuatri--curso { border-color: var(--verde); box-shadow: inset 3px 0 0 var(--verde); }
.cuatri td select { max-width: 185px; }
.cuatri td input { max-width: 88px; }

/* =========================== DESAFÍOS =========================== */

.desafio-tarjeta {
  border-radius: var(--radio); padding: var(--e5); color: #fff;
  display: flex; flex-direction: column; gap: var(--e2); min-height: 168px;
  box-shadow: var(--sombra); border: 0;
}
.desafio-tarjeta h4 { font-size: 1.1rem; margin: 0; }
.desafio-tarjeta small { opacity: .92; }
.desafio-tarjeta .btn {
  margin-top: auto; background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3); color: #fff; font-weight: 600;
}
.desafio-tarjeta .btn:hover { background: rgba(255, 255, 255, .3); }

.quiz__barra { height: 6px; background: var(--superficie-2); border-radius: 999px; overflow: hidden; margin-bottom: var(--e5); }
.quiz__progreso { height: 100%; background: var(--marca); transition: width .3s; }
.quiz__pregunta { font-size: 1.2rem; font-weight: 600; margin-bottom: var(--e4); }
.quiz__opciones { display: grid; gap: var(--e2); }
.opcion {
  text-align: left; padding: .8rem var(--e4); border-radius: var(--radio);
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
  cursor: pointer; font: inherit; color: var(--texto);
  display: flex; gap: var(--e3); align-items: center; transition: all .12s;
}
.opcion:hover:not([disabled]) { border-color: var(--marca); background: var(--marca-suave); }
.opcion__letra {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--superficie-2); font-weight: 660; font-size: .8rem; flex: none;
}
.opcion--correcta { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 12%, var(--superficie)); }
.opcion--incorrecta { border-color: var(--rojo); background: color-mix(in srgb, var(--rojo) 12%, var(--superficie)); }
.quiz__pie { display: flex; justify-content: space-between; align-items: center; margin-top: var(--e4); gap: var(--e4); flex-wrap: wrap; }
.cronometro { font-variant-numeric: tabular-nums; font-weight: 660; }

.resultado { text-align: center; padding: var(--e6) var(--e4); }
.resultado__marca { font-size: 3.2rem; font-weight: 700; color: var(--marca); line-height: 1; letter-spacing: -.03em; }
.resultado__medalla { font-size: 3rem; }
.resultado__acciones { display: flex; gap: var(--e2); justify-content: center; margin-top: var(--e5); flex-wrap: wrap; }

/* =========================== AVISOS =========================== */

.avisos { position: fixed; right: var(--e4); bottom: var(--e4); display: grid; gap: var(--e2); z-index: 60; }
.aviso {
  background: var(--texto); color: var(--fondo);
  padding: .65rem var(--e4); border-radius: var(--radio-s); font-size: .88rem;
  box-shadow: var(--sombra-l); animation: entra .18s ease-out;
  max-width: 340px;
}
.aviso--error { background: var(--rojo); color: #fff; }
.aviso--exito { background: var(--verde); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* =========================== MODAL =========================== */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--e4); }
.modal__fondo { position: absolute; inset: 0; background: rgba(10, 15, 28, .55); backdrop-filter: blur(3px); }
.modal__caja {
  position: relative; background: var(--superficie); border-radius: var(--radio-l);
  width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--sombra-l); border: 1px solid var(--borde);
  animation: sube .18s ease-out;
}
@keyframes sube { from { opacity: 0; transform: translateY(12px) scale(.99); } }
.modal__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borde);
}
.modal__cabecera h3 { margin: 0; }
.modal__cuerpo { padding: var(--e5); overflow-y: auto; }

/* =============================================================
   ADAPTACIÓN A CADA PANTALLA
   ============================================================= */

/* Tableta y teléfono: la barra lateral se guarda y sale como cajón. */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .barra {
    position: fixed; inset: 0 auto 0 0;
    width: min(288px, 84vw);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-l);
  }
  .barra--abierta { transform: translateX(0); }
  .superior .btn--menu { display: inline-flex; }
  .superior { padding: var(--e3) var(--e4); }
  .contenido { padding: var(--e4) var(--e4) var(--e6); }
  .pie { padding: var(--e4); }
}

@media (min-width: 1025px) { .velo { display: none !important; } }

/* Teléfono */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { padding: var(--e6) var(--e5); }
  .acceso__lema {
  font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  color: #a9c4f0; margin: var(--e5) 0 0; font-weight: 600;
}
.acceso__lema:empty { display: none; }

.acceso__marca h1 { font-size: 1.7rem; }
  .acceso__puntos li { width: 100%; }
  .acceso__panel { padding: var(--e5) var(--e4) var(--e6); }
  .tarjeta--acceso { padding: var(--e5); }

  h2 { font-size: 1.32rem; }
  .superior__titulo h1 { font-size: 1.1rem; }
  .superior__titulo p { display: none; }

  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .tarjeta { padding: var(--e4); }
  .item { padding: var(--e3) var(--e4); }
  .item__cabecera { flex-direction: column; align-items: flex-start; }

  .campo--fila { grid-template-columns: 1fr; }
  .filtros select, .filtros input, .filtros .btn { width: 100%; min-width: 0; }
  .acciones-modal { flex-wrap: wrap; }
  .acciones-modal .btn { flex: 1 1 auto; }
  .modal__caja { max-height: 92vh; }
  .modal__cuerpo { padding: var(--e4); }

  table { font-size: .84rem; }
  th, td { padding: .45rem .45rem; }
  .marca__texto, .marca__inicial { }
  .marca .marca__texto { display: none; }
  .marca__inicial { display: inline; font-weight: 700; }
  .leyenda-marcas { display: block; }

  .dia { width: 38px; }
  .resultado__marca { font-size: 2.5rem; }
  .quiz__pregunta { font-size: 1.05rem; }
}

/* Tableta: dos columnas donde caben. */
@media (min-width: 641px) and (max-width: 1024px) {
  .rejilla--4, .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Pantallas muy anchas. */
@media (min-width: 1600px) { .contenido { max-width: 1560px; } }

/* Dedos en vez de cursor. */
@media (pointer: coarse) {
  .btn, .barra__nav button, .marca, .opcion { min-height: 44px; }
  .btn--pequeno { min-height: 38px; }
  .btn--icono { min-width: 44px; }
  input, select, textarea { font-size: 16px; }
}

/* Instalada como aplicación: respeta la muesca del teléfono. */
@media (display-mode: standalone) {
  .superior { padding-top: max(var(--e3), env(safe-area-inset-top)); }
  .pie { padding-bottom: max(var(--e6), env(safe-area-inset-bottom)); }
  .barra { padding-top: env(safe-area-inset-top); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Dirección sin escuela reconocida */
.sin-escuela {
  max-width: 34rem; margin: 15vh auto; padding: 0 var(--e5); text-align: center;
}
.sin-escuela span { font-size: 3rem; display: block; margin-bottom: var(--e4); }
.sin-escuela h1 { font-size: 1.5rem; margin-bottom: var(--e3); }
.sin-escuela p { color: var(--texto-suave); }

/* Elegir escuela cuando la dirección no dice a cuál entrar. */
.escuelas { display: grid; gap: var(--e2); margin-top: var(--e5); text-align: left; }
.escuela {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-s);
  text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.escuela:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra); transform: translateY(-1px); }
.escuela__punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.escuela__texto strong { display: block; font-weight: 600; }
.escuela__texto small { color: var(--texto-tenue); }

/* =============================================================
   PASE DE LISTA
   La lista a la izquierda y el resumen a la derecha, que se actualiza
   solo conforme se marca. El profesor ve cómo va la clase sin dejar
   de marcar, que es lo que hace durante los primeros minutos.
   ============================================================= */

.pase { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: var(--e4); align-items: start; }
.pase__lado { position: sticky; top: var(--e4); }
.pase__lado h3 { margin: 0 0 var(--e3); }
.pase__titulo { margin: var(--e5) 0 var(--e2); font-size: .88rem; }
.pase__dona { display: grid; place-items: center; margin-bottom: var(--e3); }

.pase__cuenta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); font-size: .84rem; }
.pase__cuenta li { display: flex; align-items: center; gap: var(--e2); }
.pase__cuenta b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 640; }
.pase__cuenta-total { border-top: 1px solid var(--borde); margin-top: var(--e2); padding-top: var(--e2); }
.pase__falta-marcar { color: var(--ambar); font-weight: 560; }

.pase__punto {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; color: #fff;
}
.pase__punto--verde { background: var(--verde); }
.pase__punto--ambar { background: var(--ambar); }
.pase__punto--azul  { background: var(--marca); }
.pase__punto--rojo  { background: var(--rojo); }

.pase__ultimas { display: grid; gap: var(--e1); }
.pase__marca {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e1) var(--e2); border-radius: var(--radio-s);
  background: var(--superficie-2); font-size: .8rem;
  animation: entra-marca .18s ease-out;
}
.pase__marca-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pase__marca small { margin-left: auto; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
@keyframes entra-marca { from { opacity: 0; transform: translateY(-4px); } }

.pase__nota { margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--borde); }

/* Debajo de 1100px el resumen se va arriba de la lista: en una tableta en
   vertical no caben las dos columnas sin apretar la tabla. */
@media (max-width: 1100px) {
  .pase { grid-template-columns: 1fr; }
  .pase__lado { position: static; order: -1; }
  .pase__dona { max-width: 130px; margin-inline: auto; }
}

/* =============================================================
   CALIFICAR ENTREGAS
   El campo de la calificación tenía 17 px útiles dentro de la tabla del
   modal: se escribía el número y no se veía. Ahora tiene ancho propio y
   la tabla puede correrse de lado en vez de aplastar las columnas.
   ============================================================= */

.tabla-entregas { min-width: 720px; }

td input.campo-calif {
  width: 5.2rem; min-width: 5.2rem; max-width: none;
  padding: .5rem .4rem; text-align: center;
  font-weight: 620; font-variant-numeric: tabular-nums;
}
/* Las flechitas del campo numérico se comen la mitad del ancho y nadie las
   usa para poner un 8.5: se escribe. */
td input.campo-calif::-webkit-outer-spin-button,
td input.campo-calif::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
td input.campo-calif { -moz-appearance: textfield; appearance: textfield; }

td input.campo-retro { width: 100%; min-width: 11rem; max-width: none; }

/* =============================================================
   ADJUNTOS Y VISTA PREVIA
   ============================================================= */

.adjunto {
  display: inline-flex; align-items: center; gap: var(--e2);
  max-width: 100%; padding: .3rem .5rem .3rem .6rem;
  border: 1px solid var(--borde); border-radius: 99px;
  background: var(--superficie); font-size: .8rem;
}
.adjunto small { color: var(--texto-tenue); flex: none; }
.adjunto__ver, .adjunto__nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; color: inherit;
}
.adjunto__ver {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px;
}
.adjunto__ver:hover { color: var(--marca); text-decoration-color: var(--marca); }
.adjunto__bajar {
  flex: none; text-decoration: none; color: var(--texto-suave);
  padding: 0 .25rem; border-radius: var(--radio-s); font-size: .95rem;
}
.adjunto__bajar:hover { background: var(--superficie-2); color: var(--marca); }

/* min-height para que una imagen chica no deje la ventana casi vacía y
   parezca que no cargó. */
.previa { display: grid; place-items: center; min-height: 180px;
  background: var(--superficie-2); border-radius: var(--radio); padding: var(--e2); }
.previa__imagen { max-width: 100%; max-height: 62vh; border-radius: var(--radio-s); }
.previa__medio { width: 100%; max-height: 62vh; border-radius: var(--radio-s); background: #000; }
.previa__marco { width: 100%; height: 62vh; border: 0; border-radius: var(--radio-s); background: var(--superficie); }
.previa__marco--texto { height: 45vh; }

@media (max-width: 640px) {
  .previa__marco { height: 55vh; }
}

/* Una tarea vencida sin entregar se ve de inmediato en la lista del papá:
   es lo único de esa tabla sobre lo que puede hacer algo hoy. */
.fila--vencida { background: color-mix(in srgb, var(--rojo) 7%, transparent); }
.fila--vencida td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }

/* =============================================================
   BUSCADOR DE LISTAS LARGAS
   Con 500 alumnos una tabla completa mide cuarenta pantallas. Se busca
   por nombre y se pinta de cien en cien.
   ============================================================= */

.buscador { position: relative; display: flex; align-items: center; gap: var(--e2); flex: 1 1 16rem; min-width: 0; }
.buscador input { flex: 1; min-width: 0; }
.buscador__cuenta {
  flex: none; font-size: .78rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.mas-filas { display: flex; justify-content: center; margin-top: var(--e3); }
.mas-filas .btn { min-width: 14rem; }

/* Un renglón escondido por el buscador no debe dejar hueco en la tabla. */
#contenido tbody tr[hidden] { display: none; }