/* base.css — el sistema de diseño de Diseño 9: el sistema del equipo, la app de alumnas, el portal de maestros y las
   páginas sin sesión lo cargan PRIMERO. Aquí viven los colores, la letra, los espacios y todos los componentes; las hojas
   de cada pantalla (admin.css, app.css, maestros.css, publico.css) solo acomodan su marco.

   Al estilo de apple.com: fondo blanco y gris perla, letra casi negra, mucho aire, todo redondo y un solo color de acento.
   Para alumnas de todas las edades: letra de 17 px, botones de 54 px de alto y contraste de 4.5 a 1 o más en todo texto.

   Reglas de la casa (romperlas es un defecto):
   · Ningún color ni tamaño suelto en una regla: todo es una variable de :root (una-sola-fuente).
   · La CSP es style-src 'self': nada de style="…" ni elemento.style. Lo que se mueve va con clases y @keyframes.
   · Nada de fuera: la letra Inter se sirve desde /tipografias (SIL OFL 1.1, ver tipografias/LICENCIA.txt).
   · Antes de crear una clase, búscala aquí y en las hojas de cada pantalla (D08: dos .barra se enciman).
   · Las cifras de contraste del comentario de cada color se midieron con la cuenta de WCAG. */


/* ─── 1. La letra ──────────────────────────────────────────────────────────────────────────────────────────────────
   En iPhone, iPad y Mac se usa la letra del sistema (SF Pro); en Android y Windows, Inter, que se parece y se sirve de
   aquí. El archivo de 400 es la Inter variable (cubre de 300 a 500); 600 y 700 son fijos. Solo latino y latino
   extendido: el español necesita acentos, ñ y signos de apertura, y nada más. Sin precarga a propósito: en un iPhone
   nunca se usa, y la bajaría de balde. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/tipografias/inter-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('/tipografias/inter-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/tipografias/inter-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/tipografias/inter-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/tipografias/inter-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/tipografias/inter-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─── 2. Las variables ─────────────────────────────────────────────────────────────────────────────────────────────
   Solo valores fijos en :root. Lo que se arma con otra variable que cambia por pantalla (la escala de letra) va en
   body (D95: en :root se calcularía con el valor de la raíz y la pantalla nunca lo cambiaría). */
:root {
  /* La marca. Cuando llegue la de la escuela, se cambian ESTOS SEIS juntos (y su copia del modo oscuro, abajo), se
     vuelve a medir el contraste y se corre `node herramientas/iconos_app.js` (lee --acento de aquí para los íconos).
     Ciruela: sobria, elegante y con buen contraste. */
  --acento: #8b3a62;            /* rellena: botón principal, lo elegido. Blanco encima: 7.29 a 1 */
  --acento-hondo: #74304f;      /* el mismo al pasar encima o al tocar. Blanco encima: 9.22 */
  --acento-tinta: #8b3a62;      /* texto de color: sobre blanco 7.29 · sobre #f5f5f7 6.70 · sobre el tinte 6.33 */
  --acento-tinte: #f7ecf1;      /* fondo de lo elegido y de lo que celebra */
  --acento-anillo: rgba(139, 58, 98, .32);   /* el anillo del foco (teclado) */
  --sobre-acento: #ffffff;

  /* Neutros (los de apple.com) */
  --tinta: #1d1d1f;             /* texto: sobre blanco 16.83 */
  --tinta-2: #424245;           /* texto secundario: sobre #f5f5f7 9.20 */
  --tenue: #6e6e73;             /* lo de menos peso: sobre blanco 5.07 · sobre #f5f5f7 4.66 (nada más claro que esto) */
  --papel: #ffffff;             /* tarjetas, paneles, campos */
  --fondo: #f5f5f7;             /* el fondo agrupado (app de alumnas, barra lateral) */
  --relleno: #e8e8ed;           /* buscador, pista de pestañas, botón gris */
  --linea: #d2d2d7;
  --linea-suave: #e5e5ea;
  --barra-fondo: rgba(255, 255, 255, .82);   /* las barras de vidrio (arriba y abajo) */
  --velo-claro: rgba(255, 255, 255, .18);    /* el mosaico de un ícono encima del color de acento */

  /* Estados: tinta sobre su tinte (cifras medidas) */
  --verde: #176b36;   --verde-tinte: #e6f4ea;   /* 5.79 */
  --rojo: #b3261e;    --rojo-tinte: #fdecea;    /* 5.72 */
  --ambar: #8a5300;   --ambar-tinte: #fff3dc;   /* 5.76 */
  --azul: #0b5cad;    --azul-tinte: #e8f1fc;    /* 5.85 */
  --rojo-relleno: #c62828;                      /* botón de peligro y contador: blanco encima 5.62 */

  /* Los mosaicos de color detrás de un ícono blanco (como en Ajustes del iPhone): ayudan a reconocer cada cosa. */
  --mosaico-azul: #1f6fd1;  --mosaico-verde: #23874b;  --mosaico-ambar: #b86e00;  --mosaico-rojo: #c9372c;
  --mosaico-indigo: #4f4bc4; --mosaico-turquesa: #13808a; --mosaico-gris: #6e6e73;

  /* Avisos flotantes (oscuros sobre la página clara) */
  --toast-fondo: #1d1d1f;  --toast-tinta: #ffffff;  --toast-bien: #5fd38a;  --toast-error: #ff8a80;   /* 8.95 · 7.37 */

  /* La letra */
  --letra: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  --t-base: 1.0625rem;          /* 17 px. Cada pantalla pone el suyo en su clase de body (abajo) */

  /* Espacios: una sola escala */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 20px;  --e-6: 24px;  --e-7: 32px;  --e-8: 40px;
  --e-9: 56px; --e-10: 72px;

  /* Formas */
  --r-chico: 10px;  --r: 14px;  --r-grande: 20px;  --r-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .03);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .08);
  --sombra-3: 0 18px 50px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .08);

  /* Movimiento (con "menos movimiento" se apaga todo, al final de la hoja) */
  --curva: cubic-bezier(.25, .1, .25, 1);
  --rapido: .16s;
  --normal: .28s;

  /* Tamaños de toque: 48 px es el mínimo para un dedo; la app de alumnas usa más */
  --toque: 48px;
  --alto-control: 52px;
  --alto-chico: 40px;
  --alto-barra-inferior: 0px;   /* la app de alumnas pone el alto de su barra de pestañas: los avisos flotan encima */

  /* La flecha de los <select> (img-src permite data:). Gris de --tenue. */
  --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Modo oscuro: las MISMAS variables con otro valor. Ningún componente escribe un color propio, así que todo cambia. */
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #9b3f6e;            /* blanco encima: 6.31 */
    --acento-hondo: #b04d80;
    --acento-tinta: #f2a5c8;      /* sobre #1c1c1e 8.91 · sobre negro 10.99 · sobre el tinte 7.69 */
    --acento-tinte: #3a2030;
    --acento-anillo: rgba(242, 165, 200, .38);

    --tinta: #f5f5f7;             /* sobre #1c1c1e 15.63 */
    --tinta-2: #d1d1d6;           /* 11.18 */
    --tenue: #a1a1a6;             /* sobre #1c1c1e 6.61 · sobre negro 8.16 */
    --papel: #1c1c1e;
    --fondo: #000000;
    --relleno: #2c2c2e;
    --linea: #3a3a3c;
    --linea-suave: #2c2c2e;
    --barra-fondo: rgba(28, 28, 30, .82);

    --verde: #6fd895;   --verde-tinte: #12301d;   /* 8.14 */
    --rojo: #ff9a8f;    --rojo-tinte: #3b1512;    /* 7.89 */
    --ambar: #ffc766;   --ambar-tinte: #33250a;   /* 9.66 */
    --azul: #7cbcff;    --azul-tinte: #0f2742;    /* 7.55 */
    --rojo-relleno: #c62828;

    --toast-fondo: #f5f5f7;  --toast-tinta: #1d1d1f;  --toast-bien: #176b36;  --toast-error: #b3261e;   /* 6.04 · 6.00 */

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .4);
    --sombra-3: 0 18px 50px rgba(0, 0, 0, .7);

    --flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

/* El tamaño de letra de cada pantalla: el cuerpo de 17 px para las alumnas y las páginas sin sesión, 16 px para los
   maestros y 15 px para el sistema del equipo (más datos por pantalla, en computadora). */
.superficie-app, .superficie-publica { --t-base: 1.0625rem; --alto-control: 54px; --alto-chico: 44px; }
.superficie-maestros { --t-base: 1rem; --alto-control: 50px; --alto-chico: 40px; }
.superficie-equipo { --t-base: .9375rem; --alto-control: 44px; --alto-chico: 34px; }

/* La escala se arma EN body, con el --t-base de su pantalla (D95). Piso de 13 px: nada se lee más chico. */
body {
  --t-micro: max(.8125rem, calc(var(--t-base) * .76));
  --t-chica: max(.8125rem, calc(var(--t-base) * .88));
  --t-cuerpo: var(--t-base);
  --t-grande: calc(var(--t-base) * 1.18);
  --t-titulo-3: calc(var(--t-base) * 1.3);
  --t-titulo-2: calc(var(--t-base) * 1.65);
  --t-titulo-1: calc(var(--t-base) * 2);
  --t-gigante: calc(var(--t-base) * 2.9);
}


/* ─── 3. La base de toda hoja (cada línea salió de un defecto) ─────────────────────────────────────────────────── */
[hidden] { display: none !important; }      /* D36: si no, cualquier regla de display le gana al atributo */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;                          /* D114: nada se arrastra de lado */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--letra);
  font-size: var(--t-cuerpo);
  line-height: 1.47;
  letter-spacing: -.003em;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;                        /* para el navegador que no conoce clip */
  overflow-x: clip;
  overflow-wrap: anywhere;                   /* D104: el correo o el enlace pegado se parte en vez de empujar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { margin: 0; color: var(--tinta); line-height: 1.15; overflow-wrap: break-word; }
h1 { font-size: var(--t-titulo-1); font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: var(--t-titulo-3); font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: var(--t-grande); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--acento-tinta); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento-anillo); outline-offset: 2px; }
::selection { background: var(--acento-tinte); color: var(--tinta); }

.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tenue { color: var(--tenue); }
.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; min-width: 0; }
.pila-chica { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); align-content: start; min-width: 0; }
.pila-grande { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); align-content: start; min-width: 0; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); min-width: 0; }
.contenedor { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--e-4); }

/* La marca escrita (hasta que llegue el logotipo): "Diseño" en tinta y el 9 en el acento. */
.marca { font-weight: 700; letter-spacing: -.03em; color: var(--tinta); white-space: nowrap; }
.marca-nueve { color: var(--acento-tinta); }
/* El logo de la escuela, cuando lo sube (comun.ponerMarca): en las barras hasta 40 px de alto; en la bienvenida, entrar y
   restablecer hasta 72. Con tope de ancho: un logo muy alargado no empuja la barra. */
.marca-con-logo { display: inline-flex; align-items: center; }
.marca-logo { display: block; width: auto; height: auto; max-height: 40px; max-width: 180px; object-fit: contain; }
.marca-logo-grande { max-height: 72px; max-width: min(320px, 80vw); }


/* ─── 4. Íconos (SVG de comun.js: icono('nombre')) ─────────────────────────────────────────────────────────────── */
.icono {
  display: inline-block; flex: 0 0 auto; vertical-align: middle;
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icono .relleno { fill: currentColor; stroke: none; }


/* ─── 5. Botones ───────────────────────────────────────────────────────────────────────────────────────────────────
   <button type="button" class="boton boton-primario">. Todo botón que no envía lleva type="button" (D28). */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alto-control); padding: var(--e-2) var(--e-5);
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--relleno); color: var(--tinta);
  font-size: var(--t-cuerpo); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: center;
  text-decoration: none; overflow-wrap: normal;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.boton:hover { text-decoration: none; background: var(--linea-suave); }
.boton:active { transform: scale(.98); }
.boton .icono { width: 1.2em; height: 1.2em; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.boton[aria-busy="true"] { cursor: progress; }

.boton-primario { background: var(--acento); color: var(--sobre-acento); }
.boton-primario:hover { background: var(--acento-hondo); }
.boton-secundario { background: var(--papel); color: var(--acento-tinta); border-color: var(--linea); }
.boton-secundario:hover { background: var(--fondo); }
.boton-peligro { background: var(--rojo-relleno); color: #ffffff; }
.boton-peligro:hover { background: var(--rojo-relleno); filter: brightness(.92); }
.boton-fantasma { background: transparent; color: var(--acento-tinta); }
.boton-fantasma:hover { background: var(--acento-tinte); }
.boton-chico { min-height: var(--alto-chico); padding: var(--e-1) var(--e-3); font-size: var(--t-chica); border-radius: var(--r-chico); }
.boton-ancho { display: flex; width: 100%; }
.boton-icono { width: var(--alto-control); min-width: var(--alto-control); padding: 0; }
.boton-icono.boton-chico { width: var(--alto-chico); min-width: var(--alto-chico); }
.boton-icono .icono { width: 24px; height: 24px; }
/* Un botón que parece enlace (para "Olvidé mi contraseña"): tamaño de toque completo, sin caja. */
.boton-enlace {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: 0 var(--e-2);
  border: 0; background: none; color: var(--acento-tinta); font-size: var(--t-cuerpo); font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.boton-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

.girando {
  display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: girar .7s linear infinite;
}


/* ─── 6. Campos ────────────────────────────────────────────────────────────────────────────────────────────────────
   <div class="campo"><label class="campo-etiqueta">…</label><input class="control">
     <p class="campo-ayuda">…</p><p class="campo-error" hidden>…</p></div>
   La etiqueta va ARRIBA (nunca solo el marcador gris: al escribir desaparece y la señora ya no sabe qué era). */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); min-width: 0; align-content: start; }
.campo-etiqueta { font-size: var(--t-chica); font-weight: 600; color: var(--tinta); }
.campo-opcional { font-weight: 400; color: var(--tenue); }
.control {
  display: block; width: 100%; min-width: 0; min-height: var(--alto-control);
  padding: var(--e-3) var(--e-4);
  font-size: max(16px, var(--t-cuerpo));      /* con menos de 16 px el iPhone hace zoom al escribir */
  line-height: 1.35;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--r);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.control::placeholder { color: var(--tenue); opacity: 1; }
.control:hover { border-color: var(--tenue); }
.control:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-anillo); }
.control:disabled { background: var(--fondo); color: var(--tenue); cursor: not-allowed; }
.control[aria-invalid="true"] { border-color: var(--rojo); }
.control[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--rojo-tinte); }
select.control { padding-right: 44px; background-image: var(--flecha-select); background-repeat: no-repeat;
                 background-position: right 14px center; background-size: 20px 20px; cursor: pointer; }
textarea.control { min-height: 0; resize: vertical; line-height: 1.45; }
/* La introducción de cada pantalla (comun/guias.js): una tarjeta con el color de la escuela, arriba de la pantalla. */
.guia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3) var(--e-4); align-items: start;
  margin-bottom: var(--e-5); padding: var(--e-4) var(--e-5); border-radius: var(--r-grande);
  background: var(--acento-tinte); border: 1px solid var(--acento-anillo); }
.guia-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pildora);
  background: var(--acento); color: var(--sobre-acento); }
.guia-icono .icono { width: 22px; height: 22px; }
.guia-texto { display: grid; gap: var(--e-1); min-width: 0; color: var(--tinta); }
.guia-titulo { font-weight: 700; }
.guia-acciones { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.guia-apagar { font-size: var(--t-chica); }
/* El mensaje listo para copiar y pegar (el acceso de alguien con su contraseña): se lee completo, tal cual sale. */
.mensaje-listo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.mensaje-listo-texto { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fondo); }
.mensaje-listo .boton { justify-self: start; }
input[type="search"].control::-webkit-search-decoration { -webkit-appearance: none; }
input[type="date"].control, input[type="time"].control { min-height: var(--alto-control); }
.campo-ayuda { font-size: var(--t-chica); color: var(--tenue); }
.campo-error { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-chica); font-weight: 500; color: var(--rojo); }
.campo-error .icono { margin-top: .1em; }

/* La contraseña con su botón de "Ver": el campo NACE como password (D37) y el botón lo cambia. */
.campo-con-boton { position: relative; min-width: 0; }
.campo-con-boton .control { padding-right: 84px; }
.campo-boton {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  min-height: 40px; min-width: 64px; padding: 0 var(--e-3);
  border: 0; border-radius: var(--r-chico); background: transparent; color: var(--acento-tinta);
  font-size: var(--t-chica); font-weight: 600; cursor: pointer;
}
.campo-boton:hover { background: var(--acento-tinte); }

/* Casilla y opción: el renglón entero se toca. */
.casilla { display: flex; align-items: flex-start; gap: var(--e-3); min-height: var(--toque); padding: var(--e-2) 0; cursor: pointer; }
.casilla input { width: 24px; height: 24px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--acento); cursor: pointer; }

/* Interruptor (como en el iPhone): <label class="interruptor"><input type="checkbox" role="switch">
   <span class="interruptor-pista" aria-hidden="true"></span><span>Texto</span></label> */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--toque); cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista {
  position: relative; order: 2; flex: 0 0 auto; width: 51px; height: 31px; border-radius: 31px;
  background: var(--relleno); transition: background-color var(--normal) var(--curva);
}
.interruptor-pista::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, .22); transition: transform var(--normal) var(--curva);
}
.interruptor input:checked + .interruptor-pista { background: var(--verde); }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(20px); }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--acento-anillo); outline-offset: 2px; }
.interruptor input:disabled + .interruptor-pista { opacity: .45; }

/* El formulario que arma comun.formulario(). */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); min-width: 0; }
.formulario-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }


/* ─── 7. Tarjetas, rejilla y listas ────────────────────────────────────────────────────────────────────────────── */
.tarjeta {
  min-width: 0; padding: var(--e-6);
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea-suave); border-radius: var(--r-grande); box-shadow: var(--sombra-1);
}
.tarjeta-titulo { font-size: var(--t-grande); font-weight: 600; letter-spacing: -.01em; }
.tarjeta-enlace {
  display: block; color: inherit; text-decoration: none;
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva);
}
.tarjeta-enlace:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--linea); }
.tarjeta-enlace:active { transform: scale(.99); }
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Lista agrupada (como Ajustes del iPhone). <ul class="lista"><li><a class="lista-fila">…</a></li></ul> */
.lista {
  list-style: none; margin: 0; padding: 0; min-width: 0; overflow: hidden;
  background: var(--papel); border: 1px solid var(--linea-suave); border-radius: var(--r-grande);
}
.lista > li + li { border-top: 1px solid var(--linea-suave); }
.lista-titulo {
  margin: var(--e-6) var(--e-4) var(--e-2);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue);
}
.lista-fila {
  display: flex; align-items: center; gap: var(--e-4); width: 100%; min-height: 60px; padding: var(--e-3) var(--e-4);
  border: 0; background: none; color: var(--tinta); font-size: var(--t-cuerpo); text-align: left; text-decoration: none;
  cursor: pointer; transition: background-color var(--rapido) var(--curva);
}
a.lista-fila:hover, button.lista-fila:hover { background: var(--fondo); text-decoration: none; }
a.lista-fila:active, button.lista-fila:active { background: var(--relleno); }
.lista-fila-texto { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.lista-fila-sub { font-size: var(--t-chica); color: var(--tenue); }
.lista-fila-extra { flex: 0 0 auto; font-size: var(--t-chica); color: var(--tenue); }
.lista-fila-flecha { flex: 0 0 auto; width: 20px; height: 20px; color: var(--tenue); }
.lista-fila-peligro { color: var(--rojo); }
.mosaico {
  display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: var(--acento); color: #ffffff;
}
.mosaico .icono { width: 22px; height: 22px; stroke-width: 1.9; }
.mosaico-grande { width: 48px; height: 48px; border-radius: 13px; }
.mosaico-grande .icono { width: 26px; height: 26px; }
.mosaico-azul { background: var(--mosaico-azul); }
.mosaico-verde { background: var(--mosaico-verde); }
.mosaico-ambar { background: var(--mosaico-ambar); }
.mosaico-rojo { background: var(--mosaico-rojo); }
.mosaico-indigo { background: var(--mosaico-indigo); }
.mosaico-turquesa { background: var(--mosaico-turquesa); }
.mosaico-gris { background: var(--mosaico-gris); }


/* ─── 8. Tablas ────────────────────────────────────────────────────────────────────────────────────────────────────
   comun.tabla() pone data-etiqueta en cada celda: en el celular cada renglón es una tarjeta y cada dato dice qué es
   (D39). En la compu, si no cabe, la tabla se desplaza DENTRO de su caja; la página nunca. */
.tabla-envoltura {
  min-width: 0; overflow-x: auto; background: var(--papel);
  border: 1px solid var(--linea-suave); border-radius: var(--r-grande);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-cuerpo); }
.tabla th {
  padding: var(--e-3) var(--e-4); text-align: left; white-space: nowrap; overflow-wrap: normal;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue);
  border-bottom: 1px solid var(--linea);
}
.tabla td { padding: var(--e-3) var(--e-4); vertical-align: top; border-bottom: 1px solid var(--linea-suave); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .tabla-derecha { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-fila-tocable { cursor: pointer; transition: background-color var(--rapido) var(--curva); }
.tabla-fila-tocable:hover, .tabla-fila-tocable:focus-visible { background: var(--fondo); }


/* ─── 9. Insignias, contador, chips, pestañas y buscador ───────────────────────────────────────────────────────── */
.insignia {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px;
  border-radius: var(--r-pildora); background: var(--relleno); color: var(--tinta-2);
  font-size: var(--t-micro); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow-wrap: normal;
}
.insignia-verde { background: var(--verde-tinte); color: var(--verde); }
.insignia-roja { background: var(--rojo-tinte); color: var(--rojo); }
.insignia-ambar { background: var(--ambar-tinte); color: var(--ambar); }
.insignia-azul { background: var(--azul-tinte); color: var(--azul); }
.insignia-acento { background: var(--acento-tinte); color: var(--acento-tinta); }

/* El numerito rojo de lo que no se ha leído. */
.contador {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--r-pildora); background: var(--rojo-relleno); color: #ffffff;
  font-size: var(--t-micro); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--alto-chico); padding: 0 var(--e-4);
  border: 1px solid var(--linea); border-radius: var(--r-pildora); background: var(--papel); color: var(--tinta);
  font-size: var(--t-chica); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.chip:hover { background: var(--fondo); }
.chip[aria-pressed="true"] { background: var(--acento-tinte); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }

/* Pestañas como el control segmentado del iPhone. <div class="pestanas" role="tablist"><button role="tab"
   class="pestana" aria-selected="true">…</button></div> */
.pestanas {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none;
  background: var(--relleno); border-radius: var(--r-chico);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  flex: 1 0 auto; min-height: var(--alto-chico); padding: 0 var(--e-4);
  border: 0; border-radius: 8px; background: transparent; color: var(--tinta);
  font-size: var(--t-chica); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.pestana[aria-selected="true"] { background: var(--papel); box-shadow: var(--sombra-1); font-weight: 600; }

.buscador {
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: var(--alto-chico); padding: 0 var(--e-3);
  background: var(--relleno); border-radius: var(--r-chico); color: var(--tenue);
}
.buscador:focus-within { box-shadow: 0 0 0 3px var(--acento-anillo); }
.buscador input {
  flex: 1 1 auto; min-width: 0; padding: var(--e-2) 0; border: 0; background: transparent; outline: none;
  font-size: max(16px, var(--t-cuerpo)); color: var(--tinta);
}
.buscador input::placeholder { color: var(--tenue); opacity: 1; }

.mostrar-mas { display: flex; justify-content: center; padding: var(--e-4) 0; }


/* ─── 10. Avisos: en la página (nota), flotantes (toast) y diálogo ─────────────────────────────────────────────── */
.nota {
  display: flex; align-items: flex-start; gap: var(--e-3); min-width: 0; padding: var(--e-3) var(--e-4);
  border-radius: var(--r); background: var(--azul-tinte); color: var(--azul); font-size: var(--t-chica); line-height: 1.45;
}
.nota .icono { margin-top: .12em; width: 1.3em; height: 1.3em; }
.nota-texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); min-width: 0; }
.nota-error { background: var(--rojo-tinte); color: var(--rojo); }
.nota-bien { background: var(--verde-tinte); color: var(--verde); }
.nota-alerta { background: var(--ambar-tinte); color: var(--ambar); }
.nota-lista { margin: 0; padding-left: 1.2em; }
/* La caja donde aparecen los avisos de un formulario: vacía no ocupa lugar (si no, deja doble espacio). */
.caja-avisos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.caja-avisos:empty { display: none; }

.avisos-flotantes {
  position: fixed; z-index: 1000; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px) + var(--alto-barra-inferior));
  display: grid; gap: var(--e-2); width: min(460px, calc(100vw - 32px)); pointer-events: none;
}
.aviso-flotante {
  display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); pointer-events: auto;
  border-radius: var(--r); background: var(--toast-fondo); color: var(--toast-tinta); box-shadow: var(--sombra-3);
  font-size: var(--t-chica); font-weight: 500; line-height: 1.4; cursor: pointer;
  animation: subir var(--normal) var(--curva);
}
.aviso-flotante .icono { margin-top: .05em; width: 1.35em; height: 1.35em; }
.aviso-flotante-bien .icono { color: var(--toast-bien); }
.aviso-flotante-error .icono { color: var(--toast-error); }
.aviso-flotante-texto { flex: 1 1 auto; min-width: 0; }
.aviso-flotante-saliendo { animation: desvanecer var(--rapido) var(--curva) forwards; }

/* Diálogo (comun.confirmar). El fondo del velo va escrito aquí y no en una variable: ::backdrop no hereda las
   variables en todos los navegadores (en Safari y en Chrome viejo salía sin velo). */
.dialogo {
  width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0;
  border: 0; border-radius: var(--r-grande); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-3);
  overflow-wrap: anywhere;
}
.dialogo::backdrop { background: rgba(0, 0, 0, .42); }
.dialogo[open] { animation: aparecer-centro var(--normal) var(--curva); }
.dialogo-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-6) var(--e-6) var(--e-4); }
.dialogo-titulo { font-size: var(--t-titulo-3); font-weight: 700; letter-spacing: -.015em; }
.dialogo-texto { color: var(--tinta-2); }
.dialogo-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-3); padding: var(--e-2) var(--e-6) var(--e-6); }


/* ─── 11. Encabezado, vacío, cargando, falla ───────────────────────────────────────────────────────────────────── */
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-6); }
.encabezado-texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); min-width: 0; }
.encabezado-sub { color: var(--tenue); font-size: var(--t-cuerpo); }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.vacio { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--e-3); padding: var(--e-9) var(--e-5); text-align: center; color: var(--tenue); }
.vacio-icono { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--acento-tinte); color: var(--acento-tinta); }
.vacio-icono .icono { width: 36px; height: 36px; stroke-width: 1.6; }
.vacio-texto { max-width: 30ch; font-size: var(--t-grande); font-weight: 600; color: var(--tinta); letter-spacing: -.01em; }
.vacio-sub { max-width: 38ch; }
.vacio .boton { margin-top: var(--e-2); }

/* Esqueleto mientras llegan los datos: la forma de lo que viene, sin saltos al llegar. */
.esqueleto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-2) 0; }
.esqueleto-linea, .esqueleto-bloque {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--relleno) 25%, var(--fondo) 37%, var(--relleno) 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
}
.esqueleto-linea { height: 16px; }
.esqueleto-linea:nth-child(3n + 2) { width: 84%; }
.esqueleto-linea:nth-child(3n + 3) { width: 62%; }
.esqueleto-bloque { height: 92px; border-radius: var(--r-grande); }

/* La pantalla completa de "no se pudo" o "sin conexión" (los tres marcos la usan). */
.falla { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--e-6) var(--e-5); background: var(--fondo); }
.falla-caja { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--e-4); width: min(440px, 100%); text-align: center; }
.falla-icono { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--papel); color: var(--tenue); box-shadow: var(--sombra-1); }
.falla-icono .icono { width: 40px; height: 40px; stroke-width: 1.6; }
.falla-titulo { font-size: var(--t-titulo-2); font-weight: 700; letter-spacing: -.02em; }
.falla-texto { color: var(--tinta-2); font-size: var(--t-cuerpo); }

/* Mientras se abre cualquier marco: la marca y un círculo que gira. */
.arranque { display: grid; place-items: center; align-content: center; gap: var(--e-5); min-height: 100vh; min-height: 100dvh; background: var(--fondo); }
.arranque-marca { font-size: var(--t-titulo-2); }
.arranque .girando { width: 26px; height: 26px; color: var(--tenue); }


/* ─── 12. La bandeja de avisos (comun/bandeja.js), la misma en las tres pantallas ──────────────────────────────── */
.bandeja { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); min-width: 0; }
.bandeja-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--alto-chico); }
.bandeja-aviso {
  min-width: 0; background: var(--papel); border: 1px solid var(--linea-suave); border-radius: var(--r-grande);
  box-shadow: var(--sombra-1); overflow: hidden;
}
.bandeja-resumen {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4); min-height: 72px; cursor: pointer;
  list-style: none; transition: background-color var(--rapido) var(--curva);
}
.bandeja-resumen::-webkit-details-marker { display: none; }
.bandeja-resumen::marker { content: ''; }
.bandeja-resumen:hover { background: var(--fondo); }
.bandeja-textos { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bandeja-titulo { font-size: var(--t-cuerpo); font-weight: 500; color: var(--tinta); }
.bandeja-sin-leer .bandeja-titulo { font-weight: 700; }
.bandeja-fecha { font-size: var(--t-chica); color: var(--tenue); }
.bandeja-punto { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.bandeja-sin-leer .bandeja-punto { background: var(--acento); }
.bandeja-flecha { flex: 0 0 auto; width: 20px; height: 20px; color: var(--tenue); transition: transform var(--normal) var(--curva); }
.bandeja-aviso[open] .bandeja-flecha { transform: rotate(90deg); }
.bandeja-cuerpo { display: grid; gap: var(--e-3); padding: 0 var(--e-4) var(--e-5) calc(var(--e-4) + 10px + var(--e-3) + 38px + var(--e-3)); color: var(--tinta-2); white-space: pre-line; }
.bandeja-cuerpo-vacio { color: var(--tenue); font-style: italic; }


/* ─── 13. Movimiento ───────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes desvanecer { to { opacity: 0; transform: translateY(6px); } }
@keyframes aparecer-centro { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aparece { animation: aparecer var(--normal) var(--curva) both; }


/* ─── 14. El celular. D135: estas reglas van DESPUÉS de las que cambian (con la misma especificidad gana la de abajo).
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* D39: sin encabezados, cada dato dice qué es. Los encabezados quedan para el lector de pantalla. */
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea-suave); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td { display: flex; gap: var(--e-3); align-items: baseline; padding: var(--e-1) var(--e-4); border-bottom: 0; }
  .tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta); flex: 0 0 38%; max-width: 150px;
    font-size: var(--t-micro); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tenue);
  }
  .tabla td:empty { display: none; }
  .tabla .tabla-derecha { text-align: left; }
  .tarjeta { padding: var(--e-5); }
  .encabezado { margin-bottom: var(--e-5); }
}
@media (max-width: 420px) {
  .bandeja-cuerpo { padding-left: var(--e-4); }      /* en el celular chico, el texto del aviso usa todo el ancho */
}
@media (max-width: 480px) {
  .guia { grid-template-columns: minmax(0, 1fr); padding: var(--e-4); }
  .guia-icono { display: none; }
  .guia-acciones { grid-column: 1; }
  .dialogo-acciones { flex-direction: column-reverse; }
  .dialogo-acciones .boton { width: 100%; }
}

/* "Menos movimiento": todo queda quieto y en su lugar final. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}