/*
 * Base de la interfaz.
 *
 * Sin marco de componentes: lo que la plataforma necesita hoy son formularios,
 * listas y tablas, y eso son unos cientos de líneas. La misma razón por la que
 * el serializador JSON se escribió en vez de traer una biblioteca.
 *
 * Las medidas y los colores viven en variables para que una fase posterior
 * cambie el aspecto sin recorrer archivo por archivo.
 */
:root {
  --tinta: #16202e;
  --tinta-suave: #5a6779;
  --papel: #f7f8fa;
  --superficie: #ffffff;
  --linea: #d8dee7;
  --acento: #275ea8;
  --acento-tinta: #ffffff;
  /* La barra es la unica superficie que una escuela suele querer en su color.
     Por omision es la superficie neutra, para que sin tema no se note. */
  --barra: var(--superficie);
  --barra-tinta: var(--tinta);
  --alerta: #9a3324;
  --alerta-fondo: #fbeceb;

  --paso: 0.75rem;
  --radio: 6px;
  --ancho: 26rem;
}

/* El modo oscuro se respeta desde el principio: agregarlo después obliga a
   revisar cada color escrito a mano en cada pantalla. */
@media (prefers-color-scheme: dark) {
  :root:not([data-apariencia="claro"]) {
    --tinta: #e6eaf2;
    --tinta-suave: #9aa6b8;
    --papel: #11151c;
    --superficie: #1a2029;
    --linea: #2c3542;
    --acento: #7aa5e0;
    --acento-tinta: #11151c;
    --alerta: #f0a79c;
    --alerta-fondo: #33201d;
  }
}

/* Elegir oscuro a mano vale aunque el sistema este en claro. Son los mismos
   valores: escribirlos una sola vez obligaria a un preprocesador, y son nueve
   lineas. */
:root[data-apariencia="oscuro"] {
  --tinta: #e6eaf2;
  --tinta-suave: #9aa6b8;
  --papel: #11151c;
  --superficie: #1a2029;
  --linea: #2c3542;
  --acento: #7aa5e0;
  --acento-tinta: #11151c;
  --alerta: #f0a79c;
  --alerta-fondo: #33201d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.barra {
  background: var(--barra);
  color: var(--barra-tinta);
  border-bottom: 1px solid var(--linea);
  padding: var(--paso) calc(var(--paso) * 1.5);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* El escudo se muestra a un tamano fijo: una institucion sube el suyo en la
   proporcion que tenga y la barra no puede cambiar de alto por eso. */
#escudo {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.marca { font-weight: 600; letter-spacing: -0.01em; }

/*
 * Dos anchos, no uno.
 *
 * Entrar y elegir escuela son formularios: leerlos a lo ancho de un monitor
 * cansa, y por eso van estrechos. Trabajar es otra cosa —una lista de cuarenta
 * alumnos, un panel con secciones— y ahi el limite de formulario aprieta sin
 * motivo. El de trabajo es amplio y sigue teniendo tope: una fila de texto que
 * cruza 2000 px tampoco se lee.
 */
main {
  margin: 0 auto;
  padding: calc(var(--paso) * 2) var(--paso);
  max-width: 60rem;
}

#vista-entrar,
#vista-escuela {
  max-width: var(--ancho);
  margin: 0 auto;
}

/* El atributo hidden es como esta aplicacion decide que se ve: lo ponen y lo
   quitan las cuatro pantallas. El navegador lo aplica con display:none en SU
   hoja, y cualquier regla de autor con display -una lista en flex, por
   ejemplo- le gana sin avisar. El sintoma no parece de CSS: la seccion que se
   acaba de ocultar sigue ahi, y el fallo se busca en el JavaScript. */
[hidden] { display: none !important; }

h1 { font-size: 1.5rem; margin: 0 0 var(--paso); }

.nota { color: var(--tinta-suave); margin: 0 0 var(--paso); }

/* ---------------------------------------------------------------- formas */

form { display: flex; flex-direction: column; gap: 0.35rem; }

label { font-size: 0.875rem; color: var(--tinta-suave); margin-top: var(--paso); }

input {
  font: inherit;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.6rem 0.7rem;
}

input:focus-visible, button:focus-visible, .escuela:focus-visible {
  /* Un foco visible no es adorno: sin él, quien navega con teclado no sabe
     dónde está. */
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

button {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  background: var(--acento);
  color: var(--acento-tinta);
  border: 1px solid transparent;
  border-radius: var(--radio);
  padding: 0.6rem 1rem;
  margin-top: calc(var(--paso) * 1.5);
}

button:disabled { opacity: 0.6; cursor: progress; }

button.secundario {
  background: transparent;
  color: var(--acento);
  border-color: var(--linea);
}

.acciones { display: flex; gap: var(--paso); flex-wrap: wrap; }

/* ------------------------------------------------------------- escuelas */

.escuelas { display: flex; flex-direction: column; gap: 0.5rem; }

.escuela {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
  margin: 0;
  background: var(--superficie);
  color: inherit;
  border: 1px solid var(--linea);
}

.escuela:hover { border-color: var(--acento); }

.escuela-nombre { font-weight: 600; }
.escuela-roles { font-size: 0.875rem; color: var(--tinta-suave); }

/* --------------------------------------------------------------- avisos */

.aviso {
  background: var(--alerta-fondo);
  color: var(--alerta);
  border: 1px solid currentColor;
  border-radius: var(--radio);
  padding: 0.6rem 0.7rem;
  margin: 0 0 var(--paso);
}

/* ----------------------------------------------------------- asistencia */

/* El codigo se dicta a un salon: se lee desde la ultima fila o no sirve. */
.codigo {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--paso);
  margin: var(--paso) 0;
  text-align: center;
}

#asistencia-codigo {
  display: block;
  font-size: 2.5rem;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

#asistencia-mi-codigo {
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.asistencia-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linea);
}

/* En un telefono el nombre ocupa su renglon y los botones el siguiente: caben
   los cuatro sin encogerse. En pantalla ancha vuelven a la misma linea. */
.asistencia-alumno { flex: 1 1 100%; }
.asistencia-estados { display: flex; gap: 0.25rem; flex: 1 1 100%; }

@media (min-width: 40rem) {
  .asistencia-alumno { flex: 1 1 16rem; }
  .asistencia-estados { flex: 0 1 auto; }
}

/*
 * Cuatro botones por alumno y cuarenta alumnos.
 *
 * El tamano lo manda el dedo, no la pantalla: el pase de lista se hace de pie,
 * en el salon, desde un telefono. 2.75rem son los 44 px que se pueden tocar sin
 * fallar; mas chicos entran mas por renglon y se marca al alumno equivocado, que
 * en esta pantalla significa poner una falta a quien si vino.
 *
 * El que esta puesto se distingue por borde ademas de por color: quien no
 * distingue rojo de verde tambien tiene que poder ver cual quedo.
 */
button.estado {
  flex: 1 1 auto;
  min-height: 2.75rem;
  min-width: 4.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  margin: 0;
  background: var(--superficie);
  color: inherit;
  border: 1px solid var(--linea);
}

button.estado.activo {
  border-color: var(--acento);
  border-width: 2px;
  font-weight: 600;
}

/*
 * Justificar no es un cuarto estado, y no debe parecerlo.
 *
 * Se decide otro dia, sobre un alumno concreto y con un papel enfrente, asi que
 * se ve como lo que es: una accion aparte, mas discreta, que solo aparece cuando
 * ya hay falta que justificar.
 */
button.justificar {
  flex: 0 1 auto;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  margin: 0 0 0 0.5rem;
  background: transparent;
  border-style: dashed;
}

button.justificar.activo {
  border-style: solid;
  border-color: var(--acento);
  font-weight: 600;
}

/*
 * Lo que va a pasar si el docente no hace nada.
 *
 * Antes, quien no estaba marcado dejaba la fila en blanco, y una fila en blanco
 * no se lee como una falta: se lee como algo pendiente. Decirlo con letras es la
 * diferencia entre revisar la lista antes de cerrar y descubrirlo despues.
 */
.sera-falta {
  align-self: center;
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  opacity: 0.75;
}

/*
 * El boton de orden va arriba de la lista y se sale del renglon de los alumnos.
 * Desordenar sirve para que la llamada no sea predecible: cuando el orden es
 * siempre el mismo, quien va al final aprende que puede llegar tarde.
 */
button.orden {
  margin: 0 0 0.75rem 0;
  min-height: 2.75rem;
}

/* Quien todavia no se registra se ve, pero apagado: el docente necesita
   distinguir de un vistazo a quien le falta. */
.asistencia-fila.sin-registro .asistencia-alumno { color: var(--tinta-suave); }

/* ---------------------------------------------------------- panel directivo */

/* Las secciones que no le tocan a alguien no estan aqui: el servidor no las
   manda. Lo que se ve es lo que se puede hacer. */
.secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: var(--paso) 0;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 0.4rem;
}

button.seccion {
  margin: 0;
  padding: 0.3rem 0.7rem;
  background: transparent;
  color: var(--tinta-suave);
  border: 1px solid transparent;
  font-size: 0.9375rem;
}

button.seccion.activa {
  color: var(--acento);
  border-color: var(--linea);
  border-bottom-color: var(--papel);
  font-weight: 600;
}

.cuentas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paso);
}

.cuenta {
  display: flex;
  flex-direction: column;
  min-width: 6rem;
  padding: var(--paso);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.cuenta strong { font-size: 1.75rem; line-height: 1.1; }
.cuenta span { font-size: 0.875rem; color: var(--tinta-suave); }

/* ------------------------------------------------------------------ movil */

/*
 * El pase de lista se hace desde el telefono, de pie y con prisa, y mas tarde
 * desde ahi mismo se mira el avance de un examen en curso. Es la pantalla que
 * mas se usa y la que menos tiempo tiene quien la usa.
 */
@media (max-width: 30rem) {
  main { padding: var(--paso) 0.6rem; }

  /* El codigo se dicta a un salon; en el telefono del docente tambien tiene que
     leerse de un vistazo, sin que se salga de la caja. */
  #asistencia-codigo {
    font-size: 2rem;
    letter-spacing: 0.2em;
    word-break: break-all;
  }

  /*
   * Los botones con los que se trabaja ocupan el ancho: en un telefono, dos a
   * media linea se tocan por error, y aqui equivocarse cierra una lista.
   *
   * Los de la sesion no: son secundarios y a ancho completo empujaban el codigo
   * y la lista fuera de la primera pantalla, que es justo lo que el docente
   * necesita ver al entrar al salon.
   */
  #panel-asistencia-docente .acciones { flex-direction: column; align-items: stretch; }
  #panel-asistencia-docente .acciones button { width: 100%; }

  #vista-sesion > .acciones button {
    flex: 1 1 auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.9375rem;
  }

  /* Las secciones del panel se deslizan en lugar de apilarse en cinco
     renglones que empujan el contenido fuera de la pantalla. */
  .secciones {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  button.seccion { white-space: nowrap; }

  .cuentas { gap: 0.5rem; }
  .cuenta { flex: 1 1 40%; min-width: 0; }
  .cuenta strong { font-size: 1.5rem; }
}

/* Nada debe forzar scroll horizontal en la pagina: una tabla ancha se desliza
   dentro de su propia caja, no arrastra el resto. */
#asistencia-lista,
#designaciones-lista,
#asistencia-mis-cursos { overflow-x: auto; }

/* --- Banco de reactivos ---------------------------------------------------
   Una lista de tarjetas y un detalle debajo, y no dos columnas: la mitad de
   esto se mira desde un telefono -el docente captura un reactivo entre clase y
   clase- y en dos columnas no cabe ninguna de las dos. */

/* Las cuatro pestañas no caben en un telefono, y partidas en dos renglones se
   leen como dos cosas distintas. Se deslizan, que es lo que un dedo ya sabe
   hacer; el borde cortado de la ultima es la señal de que hay mas. */
#banco-pestanas {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

#banco-pestanas .seccion { white-space: nowrap; }

.banco-lista { display: flex; flex-direction: column; gap: 0.5rem; }

.reactivo,
.convocatoria {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--paso);
}

/* El enunciado con saltos de linea respetados: una pregunta de matematicas se
   escribe en varios renglones y colapsarlos la vuelve ilegible. */
.reactivo-enunciado {
  margin: 0 0 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.reactivo-marcas { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }

/* Las etiquetas son de lectura, no de accion: no se pulsan y no deben parecer
   botones. */
.etiqueta {
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

.etiqueta.correcta { color: var(--acento); border-color: var(--acento); }
.etiqueta.diagnostico { border-style: dashed; }

/* Lo compartido y lo que llego al banco central se distinguen de un vistazo:
   es lo primero que se busca en una lista larga. */
.etiqueta.visibilidad-PRIVADO { border-style: dashed; }
.etiqueta.visibilidad-BANCO_CENTRAL { color: var(--acento); border-color: var(--acento); }

.detalle {
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: var(--paso);
  margin-top: var(--paso);
}

.detalle h3, .detalle h4 { margin: var(--paso) 0 0.4rem; }

/* El enunciado se edita en el mismo sitio donde se lee: abrir otra pantalla
   para cambiar una palabra es lo que hace que nadie corrija las erratas. */
.detalle textarea { width: 100%; box-sizing: border-box; }

.opcion,
.concepto,
.catalogo-fila,
.renglon,
.aportacion,
.voto,
.comentario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--linea);
}

.opcion-texto { flex: 1 1 12rem; overflow-wrap: anywhere; }

/* Una opcion fuera de circulacion no desaparece: sigue contando en la
   estadistica de los examenes donde ya salio. Se ve, apagada. */
.opcion.inactiva { color: var(--tinta-suave); text-decoration: line-through; }

/* Un voto de una version anterior sigue en la lista, apagado: borrarlo haria
   desaparecer el rastro de que alguien ya lo habia mirado. */
.voto.caduco { color: var(--tinta-suave); }

.comentario.respuesta { padding-left: var(--paso); border-left: 2px solid var(--linea); }

.renglon.cubierto { color: var(--tinta-suave); }

.donde { display: flex; flex-direction: column; gap: 0.3rem; }

/* Las formas de una sola linea van en fila y no en columna.
   La forma general de la aplicacion apila -entrar, elegir escuela, capturar un
   reactivo-, y eso aqui hace dano de una manera que no se ve venir: en un
   contenedor en columna, un flex-basis de 12rem es ALTURA, y el campo de texto
   de una opcion queda como una caja de doce renglones. */
.opcion-alta,
.comentario-alta,
.diagnostico-alta,
.aporte,
.renglon-alta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.opcion-alta label,
.comentario-alta label,
.diagnostico-alta label { margin-top: 0; }

.opcion-alta input[type="checkbox"],
.diagnostico-alta input[type="checkbox"] { flex: 0 0 auto; min-width: 0; }

.opcion-alta input,
.comentario-alta input,
.diagnostico-alta input,
.opcion-alta select,
.comentario-alta select,
.diagnostico-alta select,
.aporte select {
  flex: 1 1 9rem;
  min-width: 7rem;
  margin: 0;
}

/* Los botones de dentro de una fila son secundarios de verdad: el margen de
   arriba y el tamano del boton principal los convierten en escalones. */
.opcion button,
.concepto button,
.catalogo-fila button,
.renglon button,
.aportacion button,
.comentario button,
.voto button,
.reactivo button,
.convocatoria button,
.opcion-alta button,
.comentario-alta button,
.diagnostico-alta button,
.aporte button,
.renglon-alta button {
  margin-top: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.875rem;
}

/* Capturar vive plegado: la pantalla normal es la de leer lo que ya hay. */
#banco-alta summary,
#convocatoria-alta summary {
  cursor: pointer;
  color: var(--acento);
  margin: var(--paso) 0;
}