:root {
  --azul: #1f4e8c;
  --azul-oscuro: #14305a;
  --azul-claro: #e8eef7;
  --fondo: #f2f4f8;
  --borde: #d7dde6;
  --texto: #1e2733;
  --suave: #5f6b7a;
  --verde: #157a39;
  --verde-fondo: #e4f4e9;
  --rojo: #b42318;
  --rojo-fondo: #fdeae8;
  --naranja: #b45309;
  --naranja-fondo: #fef1dc;
  --whatsapp: #147a3d;
  --superficie: #fff;
  --superficie-2: #f6f8fb;
  --superficie-3: #e9eef6;
  --borde-campo: #8694a6;
  --borde-suave: #eaeef4;
  --peligro-borde: #e3b1ac;
  --azul-hover: #18417a;
  --azul-texto: #1f4e8c;
  --enlace: #1f4e8c;
  --anillo: #2f6fc4;
  --hoja: #fcfaf5;
  --renglon: #d9e1ec;
  --margen: #dc8f88;
  --tinta: #14305a;
  --alto-control: 2.75rem;
  --alto-chico: 2.25rem;
}

/* Modo oscuro: lo activa el botón del menú de la cuenta (ver tema.js y porteria.js). */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --azul: #3672c2;
  --azul-oscuro: #d3e0f3;
  --azul-claro: #20365a;
  --fondo: #0f1726;
  --borde: #33435f;
  --texto: #e7ecf4;
  --suave: #a9b5c7;
  --verde: #6fd79a;
  --verde-fondo: #13301f;
  --rojo: #ffa59b;
  --rojo-fondo: #3a1815;
  --naranja: #f6b867;
  --naranja-fondo: #37260f;
  --superficie: #18233a;
  --superficie-2: #1f2c46;
  --superficie-3: #283857;
  --borde-campo: #62769b;
  --borde-suave: #263450;
  --peligro-borde: #7a3b35;
  --azul-hover: #2f64ab;
  --azul-texto: #a9c6ee;
  --enlace: #9cc1f5;
  --anillo: #6f9be0;
  --hoja: #17213a;
  --renglon: #2b3a57;
  --margen: #8a4a4a;
  --tinta: #d3e0f3;
}

* { box-sizing: border-box; }

html { font-size: 16px; scrollbar-gutter: stable; }

a { color: var(--enlace); }
:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
h1[tabindex]:focus { outline: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
}

h1, h2, h3 { margin: 0; color: var(--azul-oscuro); }
h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; color: var(--suave); }

/* ---------- Encabezado ---------- */
/* El menú va a la izquierda en todo el alto: header y .encabezado no forman caja para que
   sus partes y el contenido se ubiquen en la misma grilla. Por debajo de 860 px vuelve arriba. */
body:has(> header) { display: grid; grid-template-columns: 228px minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 100vh; }
body > header, .encabezado { display: contents; }
.lateral {
  grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0.75rem; background: var(--superficie); border-right: 1px solid var(--borde);
}
.lateral .marca { gap: 0.85rem; margin-bottom: 0.75rem; padding: 0.5rem 0.25rem 1rem; border-bottom: 1px solid var(--borde); }
.lateral .subtitulo { margin-top: 0.2rem; font-size: 0.8125rem; line-height: 1.3; text-wrap: balance; }
/* El logo va centrado arriba y el nombre del colegio entra en una línea. */
.lateral .marca { flex-direction: column; gap: 0.45rem; text-align: center; }
.lateral .marca img { width: 60px; height: auto; }
.lateral .marca .titulo { font-size: 1.3rem; }
.lateral .marca .subtitulo { margin-top: 0.1rem; font-size: 0.8125rem; white-space: nowrap; }
.credito {
  margin: auto 0 0; padding: 0.75rem 0.7rem 0.25rem; border-top: 1px solid var(--borde);
  font-size: 0.75rem; line-height: 1.35; color: var(--suave);
}
.credito strong { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--texto); }
.encabezado .arriba, .franja-prueba, body > main { grid-column: 2; }
body > main { width: 100%; }
.encabezado .arriba {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.5rem 1.5rem; padding: 0.5rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 0.75rem; }
.marca img { display: block; flex: none; }
.encabezado .titulo { font-size: 1.4rem; font-weight: 700; color: var(--azul-oscuro); line-height: 1.15; }
.encabezado .subtitulo { color: var(--suave); font-size: 0.85rem; }
.encabezado .derecha { display: flex; align-items: center; gap: 1rem; }
.reloj { text-align: right; line-height: 1.2; }
.reloj-hora { display: block; font-size: 1.2rem; font-weight: 700; color: var(--azul-oscuro); font-variant-numeric: tabular-nums; }
.reloj-fecha { display: block; font-size: 0.8rem; color: var(--suave); }
.cuenta { position: relative; padding-left: 1rem; border-left: 1px solid var(--borde); }
.cuenta summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: var(--alto-chico); padding: 0.2rem 0.7rem; font-size: 0.9rem; }
.cuenta summary::-webkit-details-marker { display: none; }
.cuenta summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.cuenta[open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
.cuenta-menu {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 10; min-width: 12rem; padding: 0.3rem;
  background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: 8px;
}
.opcion-menu {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.7rem; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none; color: var(--texto); cursor: pointer;
}
.opcion-menu[hidden] { display: none; }
.opcion-menu:hover { background: var(--superficie-3); }
.icono {
  flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--suave);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.opcion-menu:hover .icono { stroke: currentColor; }
.icono-sol, :root[data-tema="oscuro"] .icono-luna { display: none; }
:root[data-tema="oscuro"] .icono-sol { display: block; }
.franja-prueba {
  background: var(--naranja-fondo); color: var(--naranja); font-weight: 700; font-size: 0.8rem;
  text-align: center; padding: 0.3rem 0.75rem;
}
.menu { display: grid; gap: 0.125rem; }
.menu a {
  display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0 0.7rem; border-radius: 8px;
  text-decoration: none; color: var(--azul-oscuro); font-weight: 700;
}
.menu a:hover { background: var(--fondo); }
.menu a.activa { background: var(--azul-claro); }
.menu a.activa .icono { stroke: currentColor; }
.boton-icono { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--borde-campo); border-radius: 8px; background: var(--superficie-2); color: var(--azul-oscuro); cursor: pointer; }
.boton-icono:hover { border-color: var(--azul); }
.boton-icono .icono { width: 1.35rem; height: 1.35rem; stroke: currentColor; }
.velo-menu { display: none; }
/* Por debajo de 860 px también hay pantallas táctiles: todo botón se toca con comodidad. */
@media (max-width: 860px) {
  :root { --alto-chico: 2.75rem; }
  body:has(> header) { display: block; }
  body > header, .encabezado { display: block; }
  .lateral { position: static; height: auto; border-right: 0; }
  .credito { margin-top: 0.75rem; }
  .menu { display: flex; flex-wrap: wrap; }

  /* Con JavaScript, el menú se abre y se cierra desde el costado. */
  .con-js .lateral {
    position: fixed; top: 0; left: 0; z-index: 40; width: min(18rem, 85vw); height: 100vh; height: 100dvh;
    border-right: 1px solid var(--borde); box-shadow: 0 8px 28px rgb(20 48 90 / 28%);
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease-out, visibility 0.2s;
  }
  .con-js .lateral.abierto { transform: none; visibility: visible; transition: transform 0.2s ease-out, visibility 0s; }
  .con-js .menu { display: grid; }
  .con-js .credito { margin-top: auto; }
  .con-js .abrir-menu { display: inline-flex; flex: none; margin-right: auto; }
  .con-js .cerrar-menu { display: inline-flex; flex: none; align-self: flex-end; width: 2.5rem; height: 2.5rem; }
  .con-js .velo-menu { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(20 48 90 / 45%); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
  .con-js .velo-menu.visible { opacity: 1; visibility: visible; }
  .con-js body.menu-abierto { overflow: hidden; }
  .con-js .arriba { position: sticky; top: 0; z-index: 20; flex-wrap: nowrap; padding: 0.4rem 1rem; }
}
@media (max-width: 640px) {
  .con-js .encabezado .derecha { gap: 0.6rem; min-width: 0; }
  .con-js .reloj-fecha { display: none; }
  .con-js .cuenta { padding-left: 0.6rem; min-width: 0; }
  .con-js .cuenta summary { min-height: 2.75rem; max-width: 12.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .con-js .lateral, .con-js .velo-menu { transition: none; }
}

/* ---------- Estructura ---------- */
.contenedor { max-width: 1250px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
[id] { scroll-margin-top: 4.5rem; }
.dos-columnas { display: grid; grid-template-columns: minmax(280px, 0.4fr) minmax(0, 0.6fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dos-columnas .tarjeta { margin-bottom: 0; }
.columna { display: grid; gap: 1rem; min-width: 0; }
.columna [hidden] { display: none; }
.fila-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.fila-tarjetas .tarjeta { margin-bottom: 0; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}

/* ---------- Formularios ---------- */
label.campo { display: block; font-weight: 700; font-size: 0.9rem; color: var(--suave); margin: 0.2rem 0 0.3rem; }
form > * + label.campo, .tarjeta > * + label.campo { margin-top: 0.8rem; }
input[type=text], input[type=tel], input[type=password], input[type=date], input[type=time], select, textarea {
  width: 100%; height: var(--alto-control); font: inherit; padding: 0 0.7rem; border: 1px solid var(--borde-campo); border-radius: 8px; background: var(--superficie); color: var(--texto);
}
/* Flecha propia de las listas: separada del borde y animada al pasar el mouse y al abrir. */
select { appearance: none; padding-right: 2.4rem; cursor: pointer; }
.selector { position: relative; display: block; }
.fila-busqueda .selector { flex: none; min-width: 7.5rem; }
.selector::after {
  content: ""; position: absolute; top: 50%; right: 1rem; width: 0.45rem; height: 0.45rem; margin-top: -0.35rem;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); rotate: 45deg;
  transition: translate 0.18s ease-out, rotate 0.18s ease-out; pointer-events: none;
}
.selector:hover::after { translate: 0 2px; }
/* El giro negativo lleva la punta por el lado derecho, tanto al abrir como al cerrar. */
.selector:has(select:open)::after { translate: 0 3px; rotate: -135deg; }
@media (prefers-reduced-motion: reduce) { .selector::after { transition: none; } }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--anillo); border-color: var(--azul); }
textarea { height: auto; padding-block: 0.5rem; resize: vertical; min-height: 4.2rem; }
::placeholder { color: var(--suave); opacity: 1; }
input.cedula-grande { height: 3.25rem; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.04em; }
/* Vacío, el campo usa la letra del ejemplo: si solo se achicara el ejemplo, quedaría más abajo del centro. */
input.cedula-grande:placeholder-shown { font-size: 1.1rem; font-weight: 400; letter-spacing: 0; }
.fila-busqueda { display: flex; gap: 0.6rem; align-items: stretch; }
.fila-busqueda input { flex: 1; min-width: 0; }
.ayuda { color: var(--suave); font-size: 0.85rem; margin-top: 0.8rem; }
.ayuda-campo { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--suave); }
.error-campo { margin: 0.3rem 0 0; font-size: 0.9rem; font-weight: 700; color: var(--rojo); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--alto-control);
  font: inherit; font-weight: 700; line-height: 1.2; padding: 0.3rem 1.2rem; border-radius: 8px; border: 1px solid var(--borde-campo);
  background: var(--superficie-2); color: var(--azul-oscuro); cursor: pointer; text-decoration: none; text-align: center;
}
.boton:hover { background: var(--superficie-3); }
.boton.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton.primario:hover { background: var(--azul-hover); }
.boton.whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; font-size: 1.1rem; padding: 0.8rem 1.6rem; }
.boton.whatsapp:hover { background: #0f6632; }
.boton.peligro { color: var(--rojo); border-color: var(--peligro-borde); }
.boton.peligro:hover { background: var(--rojo-fondo); }
.boton.chico { min-height: var(--alto-chico); padding: 0.2rem 0.75rem; font-size: 0.875rem; }
/* Acciones secundarias de una fila: no compiten con el botón principal. */
.boton-texto {
  display: inline-flex; align-items: center; min-height: var(--alto-chico); padding: 0 0.4rem; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--enlace); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.boton-texto:hover { background: var(--superficie-3); }
.boton-texto.peligro { color: var(--rojo); }
.boton-texto.peligro:hover { background: var(--rojo-fondo); }
.boton[disabled] { opacity: 0.5; cursor: not-allowed; }
.boton[hidden] { display: none; }
.acciones-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.acciones-usuario { justify-content: flex-start; }

/* ---------- Mensajes ---------- */
.banner { border-radius: 8px; padding: 0.65rem 0.9rem; margin-bottom: 0.9rem; font-weight: 700; }
.banner.ok { background: var(--verde-fondo); color: var(--verde); }
.banner.error { background: var(--rojo-fondo); color: var(--rojo); }
.banner.aviso { background: var(--naranja-fondo); color: var(--naranja); }
.banner.info { background: var(--azul-claro); color: var(--azul-texto); }
.banner small { display: block; font-weight: 400; color: var(--texto); }
.banner a { color: inherit; }
h1.banner { font-size: 1rem; }
.banner-accion { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fila-entrevista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.fila-entrevista + .fila-entrevista { margin-top: 0.5rem; }
.fila-entrevista small { display: block; }
.columna .ayuda { margin-bottom: 0; }
.grupo-etiqueta { display: block; margin: 0.8rem 0 0.3rem; padding: 0; font-size: 0.9rem; font-weight: 700; color: var(--suave); }
.error-grupo { margin: -0.2rem 0 0.6rem; font-weight: 700; color: var(--rojo); }
form ~ .banner, form .banner { margin-top: 0.9rem; margin-bottom: 0; }

/* ---------- Opciones (alumno, motivo) ---------- */
.opciones { display: grid; gap: 0.5rem; margin-bottom: 0.6rem; }
.opciones.fila { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.opcion { display: block; position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; }
.opcion .texto {
  display: block; position: relative; border: 2px solid var(--borde-campo); border-radius: 10px;
  padding: 0.6rem 0.9rem 0.6rem 2.8rem; background: var(--superficie);
}
.opcion .texto::before {
  content: ""; position: absolute; left: 0.8rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem;
  box-sizing: border-box; border: 2px solid var(--borde-campo); border-radius: 50%; background: var(--superficie);
}
/* El punto interior: el relleno azul queda separado del borde por un anillo del color de fondo. */
.opcion input:checked + .texto::before { border-color: var(--azul); background: var(--azul); box-shadow: inset 0 0 0 3px var(--azul-claro); }
.opcion .texto strong { display: block; }
.opcion .texto small { color: var(--suave); }
.opcion:hover .texto { border-color: var(--azul); }
.opcion input:checked + .texto { border-color: var(--azul); background: var(--azul-claro); }
.opcion input:focus-visible + .texto { outline: 3px solid var(--anillo); }
.opciones.fila .opcion { display: flex; }
.opciones.fila .texto { flex: 1; padding-right: 0.4rem; font-weight: 700; white-space: nowrap; }
.campo-observacion { display: block; height: 4.9rem; resize: none; }
.fila-datos { display: grid; gap: 0 0.75rem; }
.fila-datos[hidden] { display: none; }
.fila-datos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-datos.tres { grid-template-columns: minmax(0, 0.75fr) repeat(2, minmax(0, 1fr)); }
.fila-datos .ayuda-campo { grid-column: 1 / -1; }
@media (max-width: 640px) { .fila-datos.dos, .fila-datos.tres { grid-template-columns: 1fr; } }
.apagada { opacity: 0.55; }
.apagada .opcion, .apagada .boton { cursor: not-allowed; pointer-events: none; }
.opcion-vacia { padding: 0.95rem 0.9rem; border: 2px dashed var(--borde-campo); border-radius: 10px; color: var(--suave); }

/* ---------- Resultado de consulta ---------- */
.resultado .nombre { font-size: 1.8rem; font-weight: 700; color: var(--azul-oscuro); }
.resultado .detalle { font-size: 1.15rem; }

/* ---------- Tablas ---------- */
.tabla-scroll { container-type: inline-size; overflow-x: auto; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); }
table.datos { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.datos th {
  background: var(--azul-claro); color: var(--azul-oscuro); text-align: left; padding: 0.6rem 0.7rem; white-space: nowrap;
  border-bottom: 1px solid var(--borde);
}
table.datos td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
table.datos tr:nth-child(even) td { background: var(--superficie-2); }
table.datos input { height: var(--alto-chico); }
/* Si la tabla no entra, cada fila pasa a ser una ficha con sus rótulos. */
@container (max-width: 50rem) {
  table.fichas, table.fichas tbody, table.fichas tr { display: block; }
  table.fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.fichas tr { padding: 0.6rem 0.8rem; }
  table.fichas tr + tr { border-top: 1px solid var(--borde); }
  table.datos.fichas tr td { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.15rem 0; border: 0; background: none; }
  table.datos.fichas tr td:not([data-rotulo]) { display: block; }
  table.fichas td[data-rotulo]::before { content: attr(data-rotulo); font-size: 0.85rem; color: var(--suave); }
  table.fichas .acciones-fila { margin-top: 0.35rem; }
}
.pendiente { color: var(--naranja); font-weight: 700; }
.listo { color: var(--verde); font-weight: 700; }
.pie-tabla { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; }
.pie-tabla .total { color: var(--suave); font-weight: 700; }
.pie-tabla.arriba-tabla { margin: 0 0 0.6rem; }
.separada { margin-top: 1rem; }
.sin-margen { margin: 0; }
.acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: end; }
.filtros .grupo { min-width: 150px; max-width: 13rem; }
.filtros .grupo.chico { flex: 0 1 145px; min-width: 120px; max-width: 150px; }
.filtros .grupo.ancho { flex: 1; min-width: 220px; max-width: none; }
.filtros .acciones { flex-wrap: nowrap; white-space: nowrap; }
.filtros .acciones .boton { padding-inline: 0.85rem; }
@media (max-width: 1160px) { .filtros .acciones { flex-wrap: wrap; white-space: normal; } }

/* ---------- Login ---------- */
.login { max-width: 400px; margin: 8vh auto 0; padding: 0 1rem; }
.login .tarjeta { padding: 1.6rem; }
.login h1 { font-size: 1.6rem; margin-bottom: 0.2rem; }
.login p { margin: 0; color: var(--suave); }
.login p.ayuda { margin-top: 1rem; text-align: center; }
.login .marca { margin-bottom: 1.2rem; }
.login .campo { margin-top: 0.8rem; }
.login .boton { width: 100%; margin-top: 1.2rem; }
.recordarme { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; cursor: pointer; }
.recordarme input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--azul); }
.login small { display: block; margin-top: 0.2rem; }

.formulario-chico { max-width: 460px; }
.formulario-chico.centrada { margin-inline: auto; }
.formulario-chico .campo { margin-top: 0.8rem; }
.plegable summary { list-style: none; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable[open] { order: 1; flex-basis: 100%; }
.plegable form { margin-top: 0.4rem; }
.plegable .fila-busqueda { max-width: 22rem; }
.suave { color: var(--suave); }

.ayuda-arriba { margin: -0.4rem 0 0.8rem; }
.fila-ingreso { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) auto; gap: 0.6rem; width: 100%; }

/* ---------- Alumnos del profesor y cursos asignados ---------- */
.filtros-alumnos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.filtros-alumnos > div:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.filtros-alumnos .selector { display: block; }
.lista-alumnos { position: relative; max-height: 24rem; margin: 0.5rem 0 0; overflow-y: auto; border: 1px solid var(--borde); border-radius: 8px; }
.lista-alumnos ul { list-style: none; margin: 0; padding: 0; }
.lista-alumnos li + li { border-top: 1px solid var(--borde-suave); }
.grupo-alumnos h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 0.4rem 0.75rem; background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-size: 0.85rem; font-weight: 700; color: var(--azul-oscuro); }
.grupo-alumnos + .grupo-alumnos h3 { border-top: 1px solid var(--borde); }
.alumno-curso { margin: 0 0 0.5rem; }
input.campo-vacio, textarea.campo-vacio { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.fila-horario { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.fila-horario .ancho-completo { grid-column: 1 / -1; }
.lista-alumnos a { display: block; min-height: 2.75rem; padding: 0.55rem 0.75rem; text-decoration: none; color: var(--texto); }
.lista-alumnos a:hover { background: var(--superficie-2); }
.lista-alumnos a.elegido { background: var(--azul-claro); color: var(--azul-oscuro); font-weight: 700; }
.lista-vacia { margin: 0.75rem 0 0; }
.alumno-elegido { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 700; color: var(--azul-oscuro); }
.titulo-pagina { font-size: 1.2rem; margin-bottom: 0.75rem; }

/* ---------- Calendario de entrevistas ---------- */
.barra-entrevistas { margin-bottom: 1rem; }
.barra-entrevistas .grupo.ancho { flex: 0 1 22rem; }
/* En pantallas chicas los filtros se alinean en columnas iguales. */
@media (max-width: 860px) {
  .filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filtros .grupo, .filtros .grupo.chico, .filtros .grupo.ancho { min-width: 0; max-width: none; }
  .filtros .grupo input, .filtros .grupo .selector { display: block; width: 100%; }
  .filtros .acciones { grid-column: 1 / -1; }
  .barra-entrevistas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; }
  .filtros .acciones .boton { flex: 1 1 auto; }
  .barra-entrevistas { grid-template-columns: minmax(0, 1fr) auto; }
  .barra-entrevistas .grupo.ancho { grid-column: 1 / -1; }
}
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.calendario-tarjeta { padding: 0.9rem 1rem; margin-bottom: 0; }
.calendario-tarjeta .ayuda { margin: 0.6rem 0 0; }
.agenda .libro-hoja { margin-bottom: 0; }
.ver-calendario { display: none; }
.calendario-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-bottom: 0.6rem; }
.calendario-cabeza h2 { margin: 0; }
.calendario { width: 100%; table-layout: fixed; border-collapse: collapse; }
.calendario th { padding: 0.25rem; font-size: 0.8125rem; font-weight: 600; text-align: left; color: var(--suave); }
.calendario td { padding: 0; border: 1px solid var(--borde); vertical-align: top; }
.dia { display: flex; flex-direction: column; align-items: center; height: 2.9rem; padding: 0.15rem 0; text-decoration: none; color: var(--texto); }
.dia:hover { background: var(--superficie-2); }
.dia:focus-visible { outline-offset: -3px; }
.dia.fuera { color: var(--suave); }
.dia.fuera .numero { font-weight: 400; }
.dia.elegido { box-shadow: inset 0 0 0 2px var(--azul); }
/* Los números de Segoe UI quedan 1 px abajo de su caja: el relleno los centra en el círculo. */
.numero { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-bottom: 2px; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 50%; }
.dia.hoy .numero { background: var(--azul); color: #fff; }
.cuenta-dia { font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--azul-texto); }
@media (max-width: 1100px) {
  .agenda { grid-template-columns: 1fr; }
  .ver-calendario { display: inline-flex; }
}
@media (max-width: 640px) { .fila-ingreso { grid-template-columns: 1fr; } }

/* ---------- Confirmación ---------- */
.confirmacion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.3rem 1.5rem; max-width: 24rem; color: var(--texto); }
.confirmacion::backdrop { background: rgba(20, 48, 90, 0.45); }
.confirmacion p { margin: 0 0 1rem; }
.confirmacion h2 { margin-bottom: 0.5rem; }

/* ---------- Cambio entre modo claro y oscuro ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease-out; }

/* El libro de portería: lo ya registrado va en hoja, con la hora al margen y renglones. */
.libro-hoja {
  --ancho-margen: 5.25rem;
  --alto-renglon: 2rem;
  position: relative;
  margin-bottom: 1rem;
  background: var(--hoja);
  border: 1px solid var(--borde);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgb(20 48 90 / 8%), 0 8px 20px -14px rgb(20 48 90 / 22%);
}
.libro-hoja::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--ancho-margen); width: 4px; border-inline: 1px solid var(--margen); pointer-events: none; }
.libro-cabeza { display: grid; grid-template-columns: var(--ancho-margen) minmax(0, 1fr) auto auto; align-items: baseline; gap: 0 1rem; padding: 0.9rem 1.25rem 0.7rem 0; border-bottom: 2px solid var(--tinta); }
.libro-cabeza h1, .libro-cabeza h2 { margin: 0; font-size: 1.2rem; color: var(--tinta); }
.libro-rotulo { padding-right: 0.6rem; text-align: right; font-size: 0.8rem; color: var(--suave); }
.libro-marcar { display: none; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--suave); cursor: pointer; }
#form-eliminar[hidden] { display: none; }
.libro-hoja[data-eliminando] .libro-entrada { cursor: pointer; }
.libro-hoja[data-eliminando] .acciones-fila { display: none; }
.libro-marca { display: none; align-items: flex-start; padding: 0.6rem 1.25rem 0.5rem 0; }
.libro-hoja[data-eliminando] .libro-marca, .libro-hoja[data-eliminando] .libro-marcar { display: flex; }
.libro-dato { font-size: 0.9rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.libro-asiento { display: grid; grid-template-columns: var(--ancho-margen) minmax(0, 1fr); }
.libro-hora { padding: 0 0.6rem; text-align: right; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.libro-hora span, .libro-hora small { display: block; }
.libro-hora small { font-size: 0.8125rem; font-weight: 400; color: var(--suave); }
.libro-asiento .libro-hora { font-size: 1.05rem; line-height: var(--alto-renglon); }
.libro-renglones { min-width: 0; margin: 0; padding-left: 1rem; background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--alto-renglon) - 1px), var(--renglon) calc(var(--alto-renglon) - 1px) var(--alto-renglon)); }
.libro-renglon { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; min-height: var(--alto-renglon); padding-right: 1.25rem; line-height: var(--alto-renglon); }
.libro-renglon dt { font-size: 0.875rem; color: var(--suave); }
.libro-renglon dd { margin: 0; overflow-wrap: anywhere; }
.libro-renglon b, .libro-texto b { color: var(--tinta); }
.libro-avisos { padding: 0.75rem 1.25rem 0 calc(var(--ancho-margen) + 1rem); }
.libro-avisos .banner { margin: 0; }
.libro-cierre { display: grid; gap: 0.75rem; padding: 1rem 1.25rem 1rem calc(var(--ancho-margen) + 1rem); }
.libro-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.libro-aviso .libro-nota { flex: 1 1 14rem; margin: 0; }
.libro-salidas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.libro-nota { margin: 0 0 0.4rem; font-size: 0.875rem; color: var(--suave); }
.libro-dia { display: grid; grid-template-columns: var(--ancho-margen) minmax(0, 1fr) auto; gap: 0 1rem; align-items: baseline; padding: 0.55rem 1.25rem 0.45rem 0; background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.libro-entrada + .libro-dia { border-top: 1px solid var(--borde); }
.libro-dia h2, .libro-dia h3 { grid-column: 2; margin: 0; font-size: 1rem; color: var(--tinta); }
.libro-dia span { font-size: 0.875rem; color: var(--suave); }
.libro-entrada { display: grid; grid-template-columns: var(--ancho-margen) minmax(0, 1fr) 15.5rem auto; border-bottom: 1px solid var(--renglon); }
.libro-entrada:last-child { border-bottom: 0; }
.libro-entrada:hover { background: rgb(31 78 140 / 4%); }
.libro-entrada .libro-hora { padding-block: 0.5rem; }
.libro-texto { min-width: 0; padding: 0.5rem 0.75rem 0.5rem 1rem; }
.libro-texto p { margin: 0; overflow-wrap: anywhere; }
.libro-detalle { font-size: 0.9rem; color: var(--suave); }
.libro-estado { display: grid; gap: 0.3rem; justify-items: start; align-content: start; padding: 0.5rem 1.25rem 0.5rem 0; font-size: 0.9rem; }
.libro-estado .boton { white-space: nowrap; }
.libro-estado .libro-detalle { font-size: 0.8125rem; }
.libro-ingreso, .libro-acciones { grid-column: 2 / -1; padding: 0 1.25rem 0.75rem 1rem; }
.libro-ingreso .grupo-etiqueta { margin-top: 0; }
.libro-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.libro-vacio { margin: 0; padding: 1rem 1.25rem 1rem calc(var(--ancho-margen) + 1rem); color: var(--suave); }
input.marca-visita, .libro-marcar input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--azul); cursor: pointer; }
@media (max-width: 640px) {
  .libro-hoja { --ancho-margen: 3.6rem; }
  .libro-cabeza { grid-template-columns: var(--ancho-margen) minmax(0, 1fr); padding-right: 0.75rem; }
  .libro-cabeza h1, .libro-cabeza h2, .libro-dato { grid-column: 2; padding-left: 1rem; }
  .libro-cabeza .boton { grid-column: 2; justify-self: start; margin: 0.4rem 0 0 1rem; }
  .libro-marcar { grid-column: 2; padding: 0.4rem 0 0 1rem; }
  .libro-asiento .libro-hora, .libro-entrada .libro-hora { padding-inline: 0.3rem; font-size: 0.95rem; }
  .libro-hora small { font-size: 0.75rem; }
  .libro-entrada { position: relative; }
  .libro-marca { position: absolute; top: 0; right: 0; padding: 0.55rem 0.75rem 0 0; }
  .libro-hoja[data-eliminando] .libro-texto { padding-right: 2.5rem; }
  .libro-renglones { padding-left: 0.9rem; background-image: none; }
  .libro-renglon { grid-template-columns: 1fr; gap: 0; padding-block: 0.3rem; padding-right: 0.75rem; border-bottom: 1px solid var(--renglon); line-height: 1.35; }
  .libro-renglon dt { font-size: 0.8rem; }
  .libro-avisos { padding: 0.75rem 0.75rem 0 calc(var(--ancho-margen) + 0.9rem); }
  .libro-cierre { padding: 0.9rem 0.75rem 0.9rem calc(var(--ancho-margen) + 0.9rem); }
  .libro-cierre .libro-aviso form, .libro-aviso .boton { width: 100%; }
  .libro-salidas > * { flex: 1 1 auto; }
  .libro-salidas form .boton { width: 100%; }
  .libro-dia { grid-template-columns: var(--ancho-margen) minmax(0, 1fr); padding-right: 0.75rem; }
  .libro-dia span { grid-column: 2; }
  .libro-entrada { grid-template-columns: var(--ancho-margen) minmax(0, 1fr); }
  .libro-texto { padding: 0.5rem 0.75rem 0.2rem 0.9rem; }
  .libro-estado { grid-column: 2; padding: 0 0.75rem 0.6rem 0.9rem; }
  .libro-ingreso, .libro-acciones { grid-column: 2; padding: 0 0.75rem 0.75rem 0.9rem; }
  .libro-vacio { padding-left: calc(var(--ancho-margen) + 0.9rem); }
}