/* Pantallas de apoyo: ajustes, perfil y horario, importacion de listas,
   calendario y confirmacion de borrado.
   Los colores y medidas salen de las variables de estilos.css. */

/* --- Menu de opciones (Ajustes) ------------------------------------------ */

.opciones { display: grid; gap: 10px; }

.opcion {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform .1s;
}
.opcion:active { transform: scale(.985); }
.opcion .ico {
  flex: 0 0 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--marca-tenue); color: var(--marca);
}
.opcion .ico svg { width: 19px; height: 19px; }
.opcion .info { flex: 1; min-width: 0; }
.opcion .nombre { display: block; font-weight: 620; font-size: 14.5px; margin-bottom: 2px; }
.opcion .detalle { display: block; font-size: 12px; color: var(--tinta-tenue); }
.opcion .flecha { color: var(--tinta-adorno); flex: 0 0 auto; }

.plegable {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 4px 16px;
}
.plegable summary {
  cursor: pointer; list-style: none;
  padding: 13px 0; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: "+"; font-size: 19px; color: var(--tinta-adorno); }
.plegable[open] summary::after { content: "\2212"; }
.plegable[open] { padding-bottom: 18px; }

/* 11.5px quedaba por debajo del minimo comodo en movil. */
.pista { font-size: 12.5px; color: var(--tinta-tenue); font-weight: 500; line-height: 1.5; }
.pista.bloque { display: block; margin: 8px 2px 0; line-height: 1.45; }

.como-boton { display: block; text-align: center; cursor: pointer; }

/* --- Zona de riesgo ------------------------------------------------------ */

.seccion-titulo.peligro { color: var(--falta); }

.tarjeta-riesgo {
  background: var(--superficie);
  border: 1.5px solid var(--falta-bg);
  border-radius: var(--radio);
  padding: 16px;
}
.tarjeta-riesgo .texto {
  margin: 0 0 14px;
  font-size: 13px; color: var(--tinta-suave); line-height: 1.5;
}
.tarjeta-riesgo .btn { margin-bottom: 10px; }
.tarjeta-riesgo .btn:last-child { margin-bottom: 0; }

.btn.peligro-suave {
  background: var(--falta-bg);
  color: var(--falta);
  border: 1.5px solid transparent;
}
.btn.peligro-suave:active { background: var(--falta); color: #fff; }

.aviso-fuerte {
  display: flex; gap: 12px;
  padding: 14px;
  border-radius: var(--radio-chico);
  background: var(--falta-bg);
  color: var(--falta);
  margin-bottom: 18px;
}
.aviso-fuerte svg { width: 21px; height: 21px; flex: 0 0 21px; margin-top: 1px; }
.aviso-fuerte b { font-size: 13px; }
.aviso-fuerte ul { margin: 7px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.65; }

/* --- Archivos: horario e importacion ------------------------------------- */

.archivo {
  display: flex; align-items: center; gap: 13px;
  padding: 14px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 12px;
}
.archivo .ico {
  flex: 0 0 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--marca-tenue); color: var(--marca);
}
.archivo .ico svg { width: 20px; height: 20px; }
.archivo .info { flex: 1; min-width: 0; }
.archivo .nombre {
  display: block; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.archivo .detalle { display: block; font-size: 11.5px; color: var(--tinta-tenue); margin-top: 2px; }

/* El visor vale para el vigente y para cualquiera del historial: al ojear uno
   guardado se abre otro debajo de su renglon (#005). */
.horario-visor {
  margin-bottom: 12px;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
}
/* Acotado como el iframe: un horario en imagen alta empujaba el historial y el
   boton de subir fuera de la pantalla. Para verlo en grande esta la pantalla
   completa del horario, que es donde se consulta de verdad. */
.horario-visor img { display: block; width: 100%; max-height: 62dvh; object-fit: contain; }
.horario-visor iframe { display: block; width: 100%; height: 62dvh; border: 0; }

/* El que rige ahora se distingue de los guardados de un vistazo: sin esto, un
   historial de tres archivos parecidos no dice cual esta en uso. */
.archivo.vigente { border-left: 3px solid var(--marca); }
.marca-vigente {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: 7px; padding: 2px 6px; border-radius: 5px;
  background: var(--marca-tenue); color: var(--marca);
  vertical-align: 1px;
}
/* Los guardados van en tono menor: estan ahi por si acaso, no para usarse. */
.historial-horarios .archivo { box-shadow: none; border: 1px solid var(--borde); }
.historial-horarios .archivo .ico { background: var(--superficie-2); color: var(--tinta-tenue); }

/* Que pasa con el horario anterior. Se elige con el pulgar, asi que el area
   que responde es el renglon entero y no solo el circulito. */
.opcion-radio {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  margin-bottom: 9px;
  cursor: pointer;
}
.opcion-radio:has(input:checked) { border-color: var(--marca); background: var(--marca-tenue); }
.opcion-radio input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--marca); }
.opcion-radio b { display: block; font-size: 14px; font-weight: 650; }
.opcion-radio i { display: block; font-style: normal; font-size: 12px;
                  color: var(--tinta-tenue); margin-top: 2px; line-height: 1.45; }

.vacio.compacto { padding: 26px 16px; }
.vacio.compacto svg { width: 38px; height: 38px; margin-bottom: 10px; }

/* --- Importacion de listas ----------------------------------------------- */

.hoja-opcion {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 10px;
  cursor: pointer;
}
.hoja-opcion input { display: none; }
.hoja-opcion .caja {
  flex: 0 0 24px; height: 24px; margin-top: 2px;
  border: 2px solid var(--borde);
  border-radius: 7px;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.hoja-opcion .caja svg { width: 15px; height: 15px; color: #fff; opacity: 0; }
.hoja-opcion input:checked + .caja { background: var(--marca); border-color: var(--marca); }
.hoja-opcion input:checked + .caja svg { opacity: 1; }
.hoja-opcion .info { flex: 1; min-width: 0; }
.hoja-opcion .grupo { font-weight: 660; font-size: 15px; }
.hoja-opcion .pestana {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--tinta-suave);
  background: var(--superficie-2);
  padding: 2px 7px; border-radius: 5px;
  display: inline-block; margin: 5px 0 4px;
  word-break: break-all;
}
.hoja-opcion .conteo { display: block; font-size: 12px; color: var(--tinta-tenue); }
.hoja-opcion .ya { color: var(--presente); font-weight: 600; }
.hoja-opcion .en-base {
  display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.45; color: var(--tinta-suave);
}
.hoja-opcion .en-base.nuevo { color: var(--presente); font-weight: 600; }
/* Lo que se corta del archivo: informativo, no una alarma. Es lo correcto que
   ocurra, pero el maestro tiene que enterarse de que ocurrio. */
.hoja-opcion .descartados {
  display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.45; color: var(--tinta-suave);
}
.hoja-opcion .aviso-hoja {
  display: block; font-size: 11.5px; color: var(--retardo);
  margin-top: 5px; line-height: 1.45;
}

/* Pestanas cuyo grupo se dedujo de dentro de la hoja: se pueden importar, pero
   no vienen premarcadas. Acertar casi siempre no basta cuando equivocarse
   mezcla las faltas de dos grupos. */
.hoja-opcion.revisar {
  border-left: 3px solid var(--retardo);
  background: color-mix(in srgb, var(--retardo) 5%, var(--superficie));
}
.hoja-opcion .verificar {
  display: block; margin-top: 7px;
  font-size: 12px; line-height: 1.5; color: #92400e; font-weight: 550;
}
.renglon-confirma .materia em { color: var(--retardo); font-style: normal; font-size: 11.5px; }

/* Pestanas que no se pueden importar. Se ensenan igual —el maestro tiene
   derecho a saber que hay en su archivo— pero en rojo, sin casilla que tocar y
   con la instruccion de como arreglarlo. */
.hoja-opcion.rechazada {
  cursor: default;
  border-left: 3px solid var(--falta);
  background: color-mix(in srgb, var(--falta) 5%, var(--superficie));
}
.hoja-opcion .marca-no {
  flex: 0 0 24px; height: 24px; margin-top: 2px;
  display: grid; place-items: center;
  color: var(--falta); font-size: 17px; font-weight: 700;
}
.hoja-opcion.rechazada .grupo { color: var(--falta); }
.hoja-opcion .motivo {
  display: block; margin-top: 6px;
  font-size: 13px; font-weight: 550; line-height: 1.45;
}
.hoja-opcion .por-que {
  display: block; margin-top: 6px;
  font-size: 12px; color: var(--tinta-tenue); line-height: 1.5;
}
.hoja-opcion .arreglo {
  display: block; margin-top: 11px;
  padding: 11px 12px;
  background: var(--superficie-2); border-radius: 10px;
}
.hoja-opcion .arreglo .como {
  display: block; font-size: 12px; color: var(--tinta-suave); line-height: 1.5;
}
.hoja-opcion .nombre-sugerido {
  display: block; margin: 9px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; font-weight: 600;
  word-break: break-all; user-select: all;
}
.hoja-opcion .btn-copiar {
  padding: 7px 15px;
  border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie); color: inherit;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}

/* Ultimo vistazo antes de escribir en la base. */
#confirma-importacion { margin-top: 22px; }
.tabla-confirma {
  background: var(--superficie); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
.renglon-confirma {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  font-size: 13.5px;
}
.renglon-confirma:last-child { border-bottom: 0; }
.renglon-confirma .grupo { font-weight: 700; }
.renglon-confirma .materia { color: var(--tinta-suave); min-width: 0; overflow-wrap: anywhere; }
.renglon-confirma .cuantos { color: var(--tinta-tenue); font-size: 12.5px; white-space: nowrap; }

.nombre-materia {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 15px 16px;
  margin-bottom: 12px;
}
.nombre-materia.apagada { opacity: .68; }
.nombre-materia .cabeza { font-weight: 650; font-size: 14.5px; margin-bottom: 12px; }
.nombre-materia .es-mia {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
}
.nombre-materia .es-mia input { width: 19px; height: 19px; accent-color: var(--marca); }
.nombre-materia .pista:empty { display: none; }
.nombre-materia .cabeza small { color: var(--tinta-tenue); font-weight: 500; }
.nombre-materia .par { display: grid; grid-template-columns: 1fr 118px; gap: 10px; }
@media (max-width: 400px) { .nombre-materia .par { grid-template-columns: 1fr; } }

.barra-accion.estatica {
  position: static; margin-top: 20px; padding: 0;
  background: none; backdrop-filter: none; border: 0;
}

.exito { text-align: center; padding: 20px 0 8px; }
.exito svg { width: 46px; height: 46px; color: var(--presente); }
.exito h2 { margin: 10px 0 0; font-size: 19px; }

.resumen-grupo {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.resumen-grupo .titulo { font-weight: 650; font-size: 14.5px; margin-bottom: 8px; }
.resumen-grupo .renglon { font-size: 13px; color: var(--tinta-suave); margin: 3px 0; }
.resumen-grupo .renglon b { color: var(--tinta); }
.resumen-grupo .renglon.baja { color: var(--falta); }
.resumen-grupo .renglon.alta { color: var(--presente); }
.resumen-grupo .lista-nombres { font-size: 12px; color: var(--tinta-tenue); margin: 2px 0 0 14px; }

/* --- Calendario ---------------------------------------------------------- */

.conmutador {
  display: flex; gap: 6px;
  padding: 10px 16px 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.conmutador button {
  flex: 1;
  padding: 9px 0 11px;
  font-size: 13px; font-weight: 600;
  color: var(--tinta-tenue);
  border-bottom: 2.5px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.conmutador button.activa { color: var(--marca); border-bottom-color: var(--marca); }

.mes-barra {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.mes-barra span { font-weight: 650; font-size: 15.5px; text-transform: capitalize; }

.dias-semana {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px; margin-bottom: 6px;
}
.dias-semana span {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--tinta-tenue); letter-spacing: .04em;
}

.rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.celda {
  position: relative;   /* ancla el punto de "varias listas" */
  aspect-ratio: 1;
  border-radius: 11px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  background: var(--superficie);
  border: 1.5px solid transparent;
  color: var(--tinta-suave);
  transition: transform .1s;
}
.celda.fuera { visibility: hidden; }
.celda.finde { color: var(--tinta-tenue); background: transparent; }
.celda.hoy { border-color: var(--marca); color: var(--marca); font-weight: 750; }
.celda.con-lista { background: var(--presente-bg); color: var(--presente); }
.celda.con-faltas { background: var(--falta-bg); color: var(--falta); }
/* Dos clases de la misma materia ese dia: la celda suma las dos y el punto
   avisa de que detras hay mas de una lista (#031). */
.celda.varias-listas::after {
  content: ''; position: absolute; bottom: 4px; left: 50%;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: currentColor;
}
.celda .marca { font-size: 10px; font-weight: 700; margin-top: 1px; line-height: 1; }
.celda:active { transform: scale(.93); }

.leyenda {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; font-size: 11.5px; color: var(--tinta-tenue);
}
.leyenda span { display: flex; align-items: center; gap: 5px; }
.leyenda i { width: 11px; height: 11px; border-radius: 3.5px; display: block; }
.leyenda i.p { background: var(--presente-bg); border: 1px solid var(--presente); }
.leyenda i.f { background: var(--falta-bg); border: 1px solid var(--falta); }
.leyenda i.sin { background: var(--superficie); border: 1px solid var(--borde); }

.icono-btn.dia-nav {
  flex: 0 0 34px; width: 34px; height: 38px;
  border-radius: 9px; background: var(--superficie-2);
}
.icono-btn.dia-nav svg { width: 17px; height: 17px; }

/* --- Sello del dia en las tarjetas del menu ------------------------------ */

.sello {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 650;
  padding: 2px 8px; border-radius: 20px;
  margin-top: 5px;
}
.sello.hecho { background: var(--presente-bg); color: var(--presente); }
.sello.pendiente { background: var(--retardo-bg); color: var(--retardo); }
.sello svg { width: 11px; height: 11px; }


/* --- Avisos que no se pueden ignorar ------------------------------------- */

.aviso-fuerte {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 16px; margin-bottom: 18px;
  background: var(--retardo-bg);
  border-left: 3px solid var(--retardo);
  border-radius: var(--radio);
  color: #7c2d12;
}
.aviso-fuerte .ico { flex: 0 0 22px; }
.aviso-fuerte .ico svg { width: 22px; height: 22px; }
.aviso-fuerte p { margin: 0; font-size: 13px; line-height: 1.55; }
.aviso-fuerte .titulo { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

.btn-enlace {
  margin-top: 9px; padding: 0;
  background: none; border: 0;
  color: inherit; font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* El correo, resaltado mientras falte. */
.campo.requerido input { border-color: var(--retardo); }
.campo.requerido label::after {
  content: " · requerido"; color: var(--retardo); font-weight: 700;
}

/* --- Maestros ------------------------------------------------------------- */

.maestro {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; margin-bottom: 10px;
  background: var(--superficie); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.maestro .datos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.maestro .nombre { font-weight: 650; font-size: 14.5px; }
.maestro .nombre small { color: var(--tinta-tenue); font-weight: 500; }
.maestro .usuario { font-size: 12.5px; color: var(--tinta-suave); }
.maestro .correo { font-size: 12.5px; color: var(--tinta-tenue); overflow-wrap: anywhere; }
.maestro .pendiente {
  margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--retardo);
}
.maestro .btn-enlace { margin-top: 0; white-space: nowrap; color: var(--marca); }

.casilla {
  display: flex; align-items: center; gap: 11px;
  margin-top: 6px; font-size: 13.5px; cursor: pointer;
}
.casilla input { width: 19px; height: 19px; accent-color: var(--marca); }

/* La clave temporal: grande, monoespaciada y facil de dictar. */
.credenciales {
  margin: 16px 0 18px;
  background: var(--superficie-2); border-radius: 12px; overflow: hidden;
}
.par-credencial {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--borde);
}
.par-credencial:last-child { border-bottom: 0; }
.par-credencial span { font-size: 12.5px; color: var(--tinta-suave); }
.par-credencial code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 17px; font-weight: 700; letter-spacing: .5px;
  user-select: all; overflow-wrap: anywhere;
}


/* --- Corregir la lista de un grupo --------------------------------------- */

/* La casilla ocupa todo el renglon: se marca de pie, con el pulgar y sin
   apuntar a un cuadrito de 19px. */
.casilla-alumno {
  display: flex; align-items: center; gap: 13px;
  width: 100%; cursor: pointer;
}
.casilla-alumno input {
  flex: 0 0 22px; width: 22px; height: 22px;
  accent-color: var(--marca);
}
.casilla-alumno .info { flex: 1; min-width: 0; }
.casilla-alumno .nom {
  display: block;
  font-size: 14.5px; font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.casilla-alumno .detalle {
  display: block;
  font-size: 12px; color: var(--tinta-tenue); margin-top: 2px;
}

/* De baja no es un error ni una alarma: es un estado. Se distingue sin gritar
   y sin tachar el nombre, que dificulta leerlo. */
.alumno.de-baja { background: var(--superficie-2); }
.alumno.de-baja .nom { color: var(--tinta-suave); }

#hoja-eliminar .pista.bloque { margin-bottom: 16px; }
#eliminar-inventario { margin: 6px 0 0; padding-left: 18px; }
#eliminar-inventario li { font-size: 13px; margin-bottom: 3px; }
#eliminar-inventario .nombres {
  list-style: none; margin-left: -18px; margin-top: 8px;
  font-size: 12.5px; color: var(--tinta-suave); line-height: 1.5;
}

/* --- Inasistencias y estadisticas, por materia (#013, #066) -------------- */

/* El recuento del periodo, encima de los alumnos (#066). */
.tarjeta-inasistencias {
  margin-bottom: 14px; padding: 14px 16px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta-inasistencias .rejilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  text-align: center;
}
.tarjeta-inasistencias .rejilla b { display: block; font-size: 22px; font-weight: 720; line-height: 1.1; }
.tarjeta-inasistencias .rejilla span { font-size: 11.5px; color: var(--tinta-tenue); }
.tarjeta-inasistencias .alerta b { color: var(--falta); }
.tarjeta-inasistencias .periodo { margin: 10px 0 0; font-size: 11.5px; color: var(--tinta-tenue); text-align: center; }

/* El retardo se ve en la lista de dias, pero no se puede elegir: no se
   justifica. En lugar de la casilla lleva su marca. */
.dia-falta.retardo { cursor: default; }
.dia-falta .marca-retardo {
  flex: 0 0 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--retardo-bg); color: var(--retardo);
  font-size: 12px; font-weight: 800;
}
/*
   El acceso vive en la tarjeta de la materia, en una franja de abajo: tocar la
   tarjeta sigue siendo pasar lista, que es lo que se hace a diario, y estas
   dos son consultas que vienen despues.
*/

.tarjeta-materia {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 12px;
  overflow: hidden;
}
.tarjeta-materia .materia {
  border: 0; border-radius: 0; margin: 0; width: 100%;
}
.acciones-materia {
  display: flex;
  border-top: 1px solid var(--borde);
}
.accion-materia {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 8px;
  border: 0; background: transparent;
  color: var(--tinta-suave);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.accion-materia + .accion-materia { border-left: 1px solid var(--borde); }
.accion-materia:active { background: var(--superficie-2); }
.accion-materia svg { width: 15px; height: 15px; color: var(--tinta-adorno); }
/* El numero es lo que lo convierte en trabajo pendiente y no en una pantalla
   mas que visitar. */
.accion-materia .cuenta {
  min-width: 20px; padding: 1px 6px;
  border-radius: 999px;
  background: var(--falta-bg); color: var(--falta);
  font-size: 11.5px; font-weight: 750;
}

/* --- La lista de alumnos que deben justificante -------------------------- */

.falta {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  margin-bottom: 8px; padding: 13px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  border-left: 4px solid var(--falta);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit; text-align: left;
  cursor: pointer;
}
.falta:active { background: var(--superficie-2); }
.falta.resuelta { border-left-color: var(--justif); }
.falta .info { flex: 1; min-width: 0; }
.falta .nombre {
  display: block;
  font-size: 14.5px; font-weight: 620;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.falta .nombre .nl {
  display: inline-block; min-width: 22px; margin-right: 7px;
  color: var(--tinta-tenue); font-weight: 700; font-variant-numeric: tabular-nums;
}
.falta .detalle { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-tenue); }
.falta .flecha { flex: 0 0 20px; color: var(--tinta-adorno); }

/* --- Los dias que cubre un documento ------------------------------------- */

.fila-acciones { display: flex; gap: 8px; margin-bottom: 12px; }

.dia-falta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; padding: 13px 14px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie);
  cursor: pointer;
}
.dia-falta input { display: none; }
.dia-falta .caja {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: grid; place-items: center;
  border: 2px solid var(--borde); border-radius: 6px;
}
.dia-falta .caja svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.dia-falta input:checked + .caja { background: var(--marca); border-color: var(--marca); }
.dia-falta input:checked + .caja svg { opacity: 1; }
.dia-falta .info { flex: 1; min-width: 0; }
.dia-falta .nombre { display: block; font-size: 14.5px; font-weight: 600; }
.dia-falta .detalle {
  display: block; margin-top: 3px;
  font-size: 12.5px; color: var(--justif);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Lo ya justificado se apaga: sigue ahi para consultarlo o corregirlo, pero no
   compite con lo que falta por resolver. */
.dia-falta.justificado { background: var(--superficie-2); border-style: dashed; }

/* El pie se queda a la vista mientras haya dias marcados: el motivo se escribe
   una sola vez para todos. */
.pie-fijo {
  position: sticky; bottom: 0;
  padding: 14px 16px calc(14px + var(--seguro-abajo));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .07);
}
.pie-fijo .campo { margin-bottom: 10px; }
.pie-fijo .btn { width: 100%; }
.opcional { font-weight: 500; color: var(--tinta-tenue); }

/* --- Los numeros del grupo ----------------------------------------------- */

.filtros-parcial { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros-parcial .filtro {
  padding: 9px 14px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--tinta-suave);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.filtros-parcial .filtro.activo {
  background: var(--marca); border-color: var(--marca); color: var(--sobre-marca);
}

.tarjeta-numeros {
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  margin-bottom: 16px;
}
.tarjeta-numeros .grande { text-align: center; margin-bottom: 16px; }
.tarjeta-numeros .grande b {
  display: block;
  font-size: 40px; font-weight: 750; letter-spacing: -.03em;
  color: var(--presente);
  font-variant-numeric: tabular-nums;
}
.tarjeta-numeros .grande b.bajo { color: var(--falta); }
.tarjeta-numeros .grande span { font-size: 13px; color: var(--tinta-tenue); }
.tarjeta-numeros .rejilla {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--borde);
}
.tarjeta-numeros .rejilla div { text-align: center; }
.tarjeta-numeros .rejilla b {
  display: block; font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tarjeta-numeros .rejilla span { font-size: 11.5px; color: var(--tinta-tenue); }
.tarjeta-numeros .aviso-riesgo {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--falta-bg); color: var(--falta);
  font-size: 13px;
}
.tarjeta-numeros .aviso-riesgo svg { width: 16px; height: 16px; flex: 0 0 16px; }
.tarjeta-numeros .periodo {
  margin: 12px 0 0; text-align: center;
  font-size: 12px; color: var(--tinta-tenue);
}

/* Una tabla es ancha por naturaleza: se le deja su propio desplazamiento en
   vez de obligar a la pagina entera a moverse de lado. */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie);
}
.tabla-numeros { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-numeros th, .tabla-numeros td {
  padding: 10px 12px; text-align: right; white-space: nowrap;
}
.tabla-numeros th {
  position: sticky; top: 0;
  background: var(--superficie-2);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.tabla-numeros td { border-top: 1px solid var(--borde); font-variant-numeric: tabular-nums; }
.tabla-numeros .nl, .tabla-numeros th:first-child { text-align: center; color: var(--tinta-tenue); }
.tabla-numeros .nom, .tabla-numeros th:nth-child(2) {
  text-align: left; white-space: normal; font-weight: 600;
}
.tabla-numeros .nom i { font-style: normal; color: var(--tinta-tenue); font-weight: 500; }
.tabla-numeros td i { font-style: normal; color: var(--justif); font-size: 12px; }
.tabla-numeros .pct { font-weight: 700; }
.tabla-numeros tr.riesgo td { background: var(--falta-bg); }
.tabla-numeros tr.riesgo .pct { color: var(--falta); }

/* --- Parciales ----------------------------------------------------------- */

.parcial {
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie);
}
.fila-parcial {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fila-parcial b { font-size: 14px; }
.fechas-parcial { display: flex; gap: 10px; }
.fechas-parcial label {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--tinta-tenue);
}
.fechas-parcial input {
  flex: 1; min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--fondo); color: var(--tinta);
  font: inherit; font-size: 13.5px;
}
.fechas-parcial input:disabled { opacity: .7; }
.btn-enlace.quitar { color: var(--falta); }
#vista-parciales .btn { width: 100%; margin-top: 16px; }
#btn-agregar-parcial { margin-top: 4px; }

/* --- Formato de Reporte (#046) -------------------------------------------- */

/* Las siete casillas del formato. Van numeradas como en el papel: el maestro
   las conoce por su numero y cotejar la pantalla con la hoja tiene que ser
   inmediato. */
.motivos-reporte { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.motivo-reporte {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  border: 1.5px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 13.5px; font-weight: 600;
}
.motivo-reporte .num {
  flex: 0 0 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--fondo); color: var(--tinta-tenue);
  font-size: 11.5px; font-weight: 700;
}
.motivo-reporte.activo {
  background: var(--marca-tenue); border-color: var(--marca); color: var(--marca);
}
.motivo-reporte.activo .num { background: var(--marca); color: #fff; }
/* Se puede marcar mas de una casilla, como en el papel. La palomita lo dice:
   el resaltado a secas se lee como «esta es la elegida», en singular. */
.motivo-reporte.activo::after {
  content: '✓'; margin-left: auto; font-size: 15px;
}

.pareja-campos { display: flex; gap: 10px; }
.pareja-campos .campo { flex: 1; min-width: 0; }

/* Un alumno que falto, con su parrafo ya redactado debajo: se lee y se acepta,
   no se escribe. */
/* Es un <label> con su casilla: tocar cualquier parte del renglon marca al
   alumno, que en el celular es la diferencia entre acertar y no. */
.candidato-reporte {
  display: flex; gap: 11px; align-items: flex-start;
  width: 100%; text-align: left;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  border-left: 3px solid var(--borde);
  margin-bottom: 10px;
}
.candidato-reporte input[type=checkbox] {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px;
  accent-color: var(--marca);
}
.candidato-reporte .ficha { flex: 1; min-width: 0; }
.candidato-reporte:has(input:checked) {
  background: var(--marca-tenue); border-left-color: var(--marca);
}
.candidato-reporte.riesgo { border-left-color: var(--falta); }
.candidato-reporte .cab {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 650; margin-bottom: 4px;
}
.candidato-reporte .cab .nl { color: var(--tinta-tenue); font-size: 12px; }
.candidato-reporte .cab .pct { margin-left: auto; font-size: 12.5px; }
.candidato-reporte.riesgo .cab .pct { color: var(--falta); }
.candidato-reporte .parrafo {
  display: block;
  font-size: 12.5px; color: var(--tinta-suave); line-height: 1.45;
}
.candidato-reporte .hecho {
  display: inline-block; margin-top: 6px;
  font-size: 11.5px; font-weight: 650;
  color: var(--tinta-tenue);
}

.reporte-previo {
  padding: 13px 14px;
  border-radius: var(--radio-chico);
  background: var(--superficie-2);
  border-left: 3px solid var(--falta);
  margin-bottom: 10px;
}
.reporte-previo .cab {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--tinta-tenue); margin-bottom: 6px;
}
.reporte-previo .cab .mot {
  padding: 1px 7px; border-radius: 5px;
  background: var(--marca-tenue); color: var(--marca); font-weight: 650;
}
.reporte-previo .cab .imprimir { margin-left: auto; color: var(--marca); }
.reporte-previo .cab .borrar { color: var(--tinta-tenue); }
.reporte-previo .texto { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

/* Levantar y ver, uno al lado del otro: son las dos mitades de lo mismo, y lo
   levantado hay que poder encontrarlo sin acordarse de a quien fue. En el
   telefono se apilan, que es donde el ancho no alcanza para dos. */
.par-botones { display: flex; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.par-botones .btn { flex: 1 1 160px; margin: 0; }

/* El nombre, en la lista de lo ya levantado: ahi el reporte no se lee desde la
   ficha de nadie, asi que de quien es tiene que decirlo el renglon. */
.reporte-previo .quien {
  margin: 0 0 4px; font-size: 13.5px; font-weight: 650;
}

/* Los atajos de seleccion, encima de la lista. */
.acciones-seleccion {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px;
}

/* En un lote, lo que se va a hacer, antes de hacerlo: cuantas hojas y a quien.
   Reportar a alguien sin querer no se deshace con un toque. */
.aviso-lote {
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--marca-tenue);
  border: 1px solid var(--marca);
  margin-bottom: 16px;
}
.aviso-lote .titulo { font-weight: 700; font-size: 14px; color: var(--marca); margin: 0 0 4px; }
.aviso-lote p { margin: 0; font-size: 13px; }
.aviso-lote .pista { margin-top: 6px; }

#hoja-reportes-dia .pie { display: flex; flex-direction: column; gap: 8px; }
#hoja-reportes-dia .pie .btn { width: 100%; }

/* El aviso de cotejar el membrete, encima de la hoja: es la pantalla desde la
   que se entrega, y un dato mal leido se imprime igual de bien que uno bueno. */
.aviso-membrete {
  display: flex; gap: 11px; align-items: flex-start;
  max-width: 700px; margin: 0 auto 14px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: #fef3c7; color: #78350f;
  border: 1px solid #f59e0b;
}
.aviso-membrete .ico svg { width: 20px; height: 20px; }
.aviso-membrete .titulo { font-weight: 700; margin: 0 0 3px; }
.aviso-membrete p { margin: 0; font-size: 13px; line-height: 1.45; }

/* --- La cuenta, arriba de Ajustes ------------------------------------------
   Quien esta dentro, que version corre y como salir. Iba todo al final de la
   pantalla, debajo de las materias y de la zona de riesgo: para cerrar sesion
   habia que recorrerla entera. */
.tarjeta-cuenta {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.tarjeta-cuenta .quien { flex: 1; min-width: 0; }
.tarjeta-cuenta .nombre {
  margin: 0; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-cuenta .detalle {
  margin: 2px 0 0; font-size: 11.5px; color: var(--tinta-tenue);
}
/* Salir no es la accion principal de la pantalla: se ve, no se grita. Con el
   area de toque completa, que en el celular es lo que decide si se puede. */
.tarjeta-cuenta .btn-salida {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta-suave);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.tarjeta-cuenta .btn-salida:active { background: var(--falta-bg); color: var(--falta); }

/* La confirmacion, por encima de cualquier otra hoja -----------------------
   Todas las hojas comparten capa (41), asi que entre dos mandaba el orden del
   HTML. Al borrar un reporte desde la lista de los levantados, la pregunta
   salia DETRAS de la lista: se preguntaba y no se veia la pregunta. */
#hoja-confirma { z-index: 46; }
#velo.sobre-hoja { z-index: 45; }

/* --- Opciones de la lista (#038) ------------------------------------------
   Eliminar un pase de lista entero no es una accion cualquiera: se ve que es
   la de riesgo antes de tocarla, y se apaga cuando no hay nada que eliminar. */
.opcion.peligro-opcion .ico { background: var(--falta-bg); color: var(--falta); }
.opcion.peligro-opcion .nombre { color: var(--falta); }
.opcion:disabled { opacity: .45; }
.opcion:disabled .nombre { color: var(--tinta-tenue); }

/* --- La clase que no hubo (#050) ------------------------------------------
   Ocupa el sitio de la tarjeta porque sustituye a lo que la tarjeta serviria:
   con la clase marcada no hay a quien marcar. */
.aviso-sin-clase {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px 6px;
  padding: 11px 13px;
  border-radius: var(--radio);
  background: var(--retardo-bg);
  border: 1.5px solid var(--retardo);
  color: var(--retardo);
}
.aviso-sin-clase .ico svg { width: 20px; height: 20px; }
.aviso-sin-clase > div { flex: 1; min-width: 0; }
.aviso-sin-clase .titulo { margin: 0; font-weight: 700; font-size: 14px; }
.aviso-sin-clase p:not(.titulo) { margin: 2px 0 0; font-size: 12px; }
.aviso-sin-clase .btn-enlace { flex: 0 0 auto; color: var(--retardo); font-weight: 700; }

/* Sin clase no se marca a nadie: la tarjeta y los botones de la lista dejan de
   estar. Los nombres se quedan, que es lo que hace falta ver. */
#vista-lista.sin-clase #tarjeta-actual { display: none; }
#vista-lista.sin-clase .alumno .estado,
#vista-lista.sin-clase .alumno .faltas { opacity: .35; pointer-events: none; }


/* --- La consulta del grupo (#067, #068, #069) ------------------------------ */

/* Un alumno en la lista del grupo: quién es, y de un vistazo cómo va. */
.alumno-ficha {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  margin-bottom: 8px; padding: 11px 14px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.alumno-ficha:active { transform: scale(.99); }
.alumno-ficha.riesgo { box-shadow: inset 3px 0 0 var(--falta), var(--sombra); }
.alumno-ficha .nl {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--marca-tenue); color: var(--marca);
  font-size: 12px; font-weight: 800;
}
.alumno-ficha .info { flex: 1; min-width: 0; }
.alumno-ficha .nombre { display: block; font-weight: 620; font-size: 14px; }
.alumno-ficha .senas { display: block; font-size: 11.5px; color: var(--tinta-tenue); }
.alumno-ficha .mini { display: flex; gap: 6px; margin-top: 4px; font-size: 11px; }
.alumno-ficha .mini span { padding: 1px 7px; border-radius: 5px; font-weight: 700; }
.alumno-ficha .mini .pct { background: var(--presente-bg); color: var(--presente); }
.alumno-ficha .mini .pct.bajo { background: var(--falta-bg); color: var(--falta); }
.alumno-ficha .mini .f { background: var(--falta-bg); color: var(--falta); }
.alumno-ficha .mini .r { background: var(--retardo-bg); color: var(--retardo); }
.alumno-ficha .flecha { color: var(--tinta-adorno); flex: 0 0 auto; }

/* La cédula: el número grande es el que contesta «¿cómo va?». */
.senas-alumno { margin: 0 0 12px; font-size: 12.5px; color: var(--tinta-tenue); }
.tarjeta-cedula {
  margin-bottom: 14px; padding: 16px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: center;
}
.tarjeta-cedula .grande b {
  display: block; font-size: 38px; font-weight: 760; line-height: 1;
  color: var(--presente);
}
.tarjeta-cedula .grande b.bajo { color: var(--falta); }
.tarjeta-cedula .grande span { font-size: 12.5px; color: var(--tinta-tenue); }
.tarjeta-cedula .rejilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px;
}
.tarjeta-cedula .rejilla b { display: block; font-size: 20px; font-weight: 720; line-height: 1.1; }
.tarjeta-cedula .rejilla span { font-size: 11px; color: var(--tinta-tenue); }
.tarjeta-cedula .periodo { margin: 12px 0 0; font-size: 11.5px; color: var(--tinta-tenue); }

/* El índice del grupo y la cédula llevan cuenta en algunas entradas. */
.opcion .cuenta {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fee2e2; color: #dc2626;
  font-size: 12px; font-weight: 900;
}
.btn.bloque { width: 100%; margin-top: 14px; }


/* Quiénes faltaron ese día (#070). Nombres para leer, no para tocar: no son
   botones y no hay nada que marcar aquí. */
.nombres-lista { list-style: none; margin: 0 0 14px; padding: 0; }
.nombres-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--superficie);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  font-size: 13.5px;
}
.nombres-lista .nl {
  flex: 0 0 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--marca-tenue); color: var(--marca);
  font-size: 11.5px; font-weight: 800;
}
.nombres-lista .nom { flex: 1; min-width: 0; }
.nombres-lista .just {
  flex: 0 0 auto;
  padding: 1px 7px; border-radius: 5px;
  background: var(--presente-bg); color: var(--presente);
  font-size: 11px; font-weight: 700;
}
.sesion.sin-clase .mini .n {
  padding: 1px 7px; border-radius: 5px;
  background: var(--borde); color: var(--tinta-tenue);
  font-weight: 620;
}