/* ==========================================================================
   LA BASE DE DIDAKRON
   Nueve pantallas escritas en momentos distintos acabaron con nueve paletas
   casi iguales: el mismo lila con dos nombres —`--soft` en unas, `--accent-
   soft` en otras—, tarjetas con esquinas de 9, 10, 11 y 16 píxeles, y avisos
   de cuatro tamaños de letra. Por separado ninguna se ve mal; juntas se
   sienten cuatro aplicaciones pegadas con cinta, y el maestro que pasa de la
   página a la aplicación nota el brinco aunque no sepa decir en qué.

   Esto es lo que comparten todas. Va PRIMERO en cada pantalla, así que
   cualquiera puede seguir pisando lo suyo cuando tiene una razón —la
   aplicación es blanca porque es papel de trabajo, la pantalla del salón
   tiene su propia escala porque se lee a seis metros— y lo que no tiene
   razón se cae solo.

   Regla para el que venga: aquí no se pone nada de una sola pantalla. Si
   algo solo lo usa el buzón, vive en el buzón.
   ========================================================================== */

:root{
  /* ---- Papel y tinta ----------------------------------------------------
     El lila del fondo es la marca. La aplicación lo cambia a blanco a
     propósito: ahí se trabaja horas y el papel de trabajo es blanco. */
  --bg:#F6F2FD;
  --panel:#FFFFFF;
  --panel-2:#FBF9FE;
  --ink:#1B1626;
  --ink-2:#635A78;
  /* El gris más claro que TODAVÍA se lee: 4.79:1 sobre el papel blanco y
     4.58:1 sobre el gris de campo, o sea que pasa el mínimo en los dos fondos
     de la casa. Existe porque no existía: cuando alguien quería un dato
     apagado —un cero de faltas, un "no aplica"— agarraba `--line-2`, que es el
     color de las ORILLAS y da 1.5:1, o sea invisible. Si lo que quieres es que
     de plano no se lea, entonces no lo escribas. */
  --ink-3:#766E8D;

  /* ---- Orillas ---------------------------------------------------------- */
  --line:#EAE4F6;
  --line-2:#D9CEEC;

  /* ---- El morado -------------------------------------------------------- */
  --accent:#8B2FE8;
  --accent-soft:#F3EAFE;
  /* La tinta que va ENCIMA del morado. Vivía nada más en `app.html`, así que
     `.btn.primary` —que está aquí, en la base— se quedaba sin color en la
     página pública y heredaba el que hubiera: morado sobre morado. */
  --accent-ink:#FFFFFF;
  /* El mismo lila se llamaba `--soft` en las dos pantallas del celular del
     alumno y `--accent-soft` en todo lo demás. Ya no: los ocho usos que
     quedaban se pasaron a `--accent-soft` y el alias se fue, porque un color
     con dos nombres acaba siendo dos colores. */

  /* ---- Lo que va bien, lo que avisa y lo que está mal --------------------
     Los tres llegan a 4.5:1 sobre su propio fondo claro: se leen en el
     proyector del salón y en un teléfono al sol del recreo. */
  --ok:#0d7a54;      --ok-soft:#E9F7F0;
  --warn:#95560b;    --warn-soft:#FDF4E4;
  --err:#b03426;     --err-soft:#FDECEA;

  /* ---- Esquinas ---------------------------------------------------------
     Cinco y no treinta. Se contaron TREINTA valores distintos de
     `border-radius` en la hoja de la aplicación —2, 3, 4, 5, 6, 7, 8, 9, 10,
     11, 12, 14, 16, 18, 20, 99, 999— porque cada pantalla se escribió en un
     día distinto. `--radius` es el de siempre, el de las tarjetas; el mini
     es para lo que va DENTRO de algo chico, el chico para botones, campos y
     chips, el grande para lo que flota encima y la pastilla para lo que es
     una etiqueta y no una caja. */
  /* ---- Los iconos -------------------------------------------------------
     El trazo de un icono es `currentColor` —se pinta del color de su texto—
     y esto es el relleno: la pieza lila que lleva cada dibujo dentro. Vive
     aquí y no en la aplicación porque los iconos son de la casa entera. */
  --ico-fondo:#E4D7FA;

  --r-mini:6px;
  --r-chico:9px;
  --radius:12px;
  --r-grande:16px;
  /* La pastilla: lo que es una etiqueta y no una caja —un contador, un
     estado, un chip de filtro—. Estaba escrita como 99px en unos sitios y
     999px en otros, que es el mismo redondeo con dos nombres. */
  --r-pastilla:999px;

  /* ---- Letra ------------------------------------------------------------
     La del sistema: en el teléfono de un maestro carga en cero y se ve como
     el resto de su teléfono. La monoespaciada es para lo que se dicta en voz
     alta —códigos, pases— donde la ele y el uno no se pueden parecer. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- La etiqueta monoespaciada ---------------------------------------
     El rótulo chiquito en mayúsculas que encabeza una sección, marca un
     chip o dice "PDA". Se contaron NUEVE tamaños para lo mismo —7, 8, 8.5,
     9, 9.5, 10, 10.5, 11, 11.5, 12 y 12.5 píxeles— según el día en que se
     escribió cada pantalla. Tres bastan, y ningún rótulo se movió más de un
     píxel al ponerlos: la que va dentro de algo chico, la de en medio y la
     que encabeza una sección. */
  --et-1:9px;
  --et-2:10px;
  --et-3:11.5px;
}

/* ==========================================================================
   LO QUE SE REPITE EN TODAS
   Solo las tres piezas que estaban en siete pantallas con cuatro medidas
   distintas. Lo demás se queda donde vive.
   ========================================================================== */

*{ box-sizing:border-box }

/* LA TARJETA. Tenía esquinas de 9, 10, 11, 12 y 16 píxeles según el día en
   que se escribió la pantalla. */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}

/* EL RENGLÓN QUE EXPLICA. Va debajo de un título y no compite con él. */
.sub{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.55;
  margin:0 0 14px;
}

/* EL AVISO. Tres tonos y uno solo de cada cosa: lo que salió bien, lo que
   hay que mirar y lo que se rompió. El color nunca va solo —siempre lleva
   texto— porque un maestro daltónico también pasa lista. */
.aviso{
  border-radius:var(--r-chico);
  padding:12px 14px;
  font-size:14px;
  line-height:1.5;
  margin:12px 0;
  background:var(--accent-soft);
  color:var(--ink);
}
.aviso.ok  { background:var(--ok-soft);   color:var(--ok) }
.aviso.warn{ background:var(--warn-soft); color:var(--warn) }
.aviso.err,
.aviso.mal { background:var(--err-soft);  color:var(--err) }

/* ==========================================================================
   LO QUE SE TOCA
   Vivía entero dentro de `app.html`, y `index.html` tenía el suyo aparte: el
   mismo botón con dos geometrías, dos radios y dos maneras de responder al
   dedo. Aquí está la familia completa, una vez. Una pantalla puede seguir
   pisando lo suyo —va después—, pero ya no tiene que reinventar el botón
   para poner uno.
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8px 14px;
  border:1px solid var(--campo-linea);
  border-radius:var(--r-chico);
  background:var(--panel-2);
  color:var(--ink);
  font:600 13.5px var(--sans);
  white-space:nowrap; cursor:pointer;
  transition:border-color .12s, background .12s, color .12s, transform .06s;
}
/* El icono de un botón mide lo mismo en todos y nunca se estira: un svg sin
   `flex:none` dentro de un botón que se encoge se aplasta a un óvalo. */
.btn > svg{ width:16px; height:16px; flex:none }
.btn:hover:not(:disabled){ border-color:var(--ink-2) }
/* Se hunde al apretarlo. Sin esto, en un teléfono no hay manera de saber si
   el toque entró hasta que la pantalla cambia. */
.btn:active:not(:disabled){ transform:translateY(1px) }
.btn:disabled{ opacity:.45; cursor:not-allowed }

/* El principal: uno por pantalla, el que uno vino a apretar. */
.btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.btn.primary:hover:not(:disabled){ filter:brightness(1.08); border-color:var(--accent) }

/* El de al lado: pesa menos, pero sigue siendo un botón —tiene su caja al
   pasarle el dedo—. Sin borde NI fondo se leía como un pie de página y nadie
   lo tocaba. */
.btn.ghost{ background:none; border-color:transparent; color:var(--ink-2) }
.btn.ghost:hover:not(:disabled){ background:var(--panel-2); color:var(--ink);
  border-color:var(--line) }

/* EL DE UNA BARRA DE ACCIONES
   `.ghost` funciona cuando está SOLO al lado del principal: se lee como "el
   otro". Pero una fila de seis fantasmas seguidos no se lee como seis
   botones, se lee como un menú de texto —"hay textos que parecen textos pero
   son botones"—, y el maestro no los toca porque no sabe que se tocan. Este
   trae su caja desde que se pinta, y al pasarle el dedo se pone del morado
   de la casa: el mismo destino visual que el principal de la fila, porque
   en hover solo puede haber uno a la vez y ahí ya no hay confusión posible.

   El hover va dentro de `(hover:hover)` a propósito. En un iPad el
   navegador deja pegado el `:hover` del último botón que se tocó, así que
   al volver del cuadro que acabas de abrir ese botón se queda morado como
   si estuviera escogido, y la barra parece tener una pestaña activa que no
   existe. Eso es lo que había que quitar: que no se quede marcado ninguno. */
.btn.accion{ background:var(--accent-soft); border-color:var(--line-2); color:var(--ink) }
@media (hover:hover) and (pointer:fine){
  .btn.accion:hover:not(:disabled){
    background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
}

/* El que borra. Rojo en la letra y en la orilla, nunca de relleno: un botón
   rojo entero invita a apretarlo. */
.btn.danger{ color:var(--err); border-color:color-mix(in srgb,var(--err) 35%,transparent) }
.btn.danger:hover:not(:disabled){ border-color:var(--err); background:var(--err-soft) }

/* El chico. Medía lo mismo que el normal —los 38px de abajo le ganaban al
   padding— así que "sm" no quería decir nada: dos botones de tamaños
   distintos salían iguales y las barras de acciones se veían pesadas. */
.btn.sm{ min-height:32px; padding:5px 11px; font-size:12.5px }
.btn.sm > svg{ width:14px; height:14px }

/* EL ENLACE DE TEXTO
   Estaba definido cinco veces con cinco letras distintas —11, 11.5, 12, 14 y
   "la que herede"—, unas subrayadas y otras no. Ahora es uno: hereda el
   tamaño de donde está, que es lo que quiere un enlace metido en una frase,
   y lleva SIEMPRE su raya —tenue en reposo, entera al pasar— porque lo que
   se toca tiene que verse que se toca. "Hay textos que parecen textos pero
   son botones." */
.lnk{
  display:inline; padding:0; border:0; background:none;
  color:var(--accent); font:inherit; font-weight:650; cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 38%,transparent);
  border-radius:var(--r-mini);
  transition:text-decoration-color .12s, color .12s;
}
.lnk:hover{ text-decoration-color:currentColor }
.lnk:disabled{ opacity:.45; cursor:not-allowed; text-decoration:none }

/* La fila de cosas que van juntas. Estaba escrita en cinco pantallas con
   cinco separaciones distintas. */
.row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.row > div{ min-width:0 }
/* Lo que empuja al resto hasta la otra orilla. */
.spacer{ flex:1 1 auto; min-width:0 }

/* ==========================================================================
   LO QUE NO SE NEGOCIA
   Tres cosas que no son estilo: son que la pantalla se pueda usar.
   ========================================================================== */

/* Se ve dónde está el foco. Sin esto, quien navega con el teclado —o con el
   teclado de un tablet— no sabe qué va a pasar al dar Enter. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Lo que se toca, se ve que se toca. Había botones —los que no usan `.btn`:
   chips, pestañas, celdas de una tabla— que no cambiaban ni el cursor, así
   que parecían texto. `:where` no pisa a nadie: cualquier regla de una
   pantalla le gana sin esfuerzo. */
:where(button, [role=button]){ cursor:pointer }
:where(button:disabled, [role=button][aria-disabled=true]){ cursor:not-allowed }

/* Lo que se toca se toca con un dedo, no con un mouse. */
:where(button, .btn){ min-height:38px; touch-action:manipulation }

/* Y en un teléfono, con MÁS dedo: los 44 puntos de Apple, que es lo que mide
   la yema de un adulto. Estaba solo en la aplicación; los alumnos contestan
   el examen y votan desde su celular, donde hacía más falta. */
@media (max-width:700px){
  .btn{ min-height:44px; padding:10px 15px }
  .btn.sm{ min-height:38px; padding:8px 12px }
}

/* Quien pidió que las cosas no se muevan, que no se muevan. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}