/* ══════════════════════════════════════════════════════════════════════
   loea.css — los tokens visuales de Loea Solutions
   ══════════════════════════════════════════════════════════════════════
   Vive en el NÚCLEO porque no menciona ninguna fórmula: lo comparten el
   panel y la ayuda de todos los complementos de la familia.

   Lo usan hoy:
     ax/src/taskpane/taskpane.html   (panel)
     ax/src/taskpane/ayuda.html      (fichas de ayuda)
   Llega al dist por `CopyWebpackPlugin` (ver ax/webpack.config.js) y se
   enlaza con <link rel="stylesheet" href="loea.css">.

   Diseño aprobado: ax/docs/referencia/maqueta-panel-v5.html
   Hoja de ruta del porte: ax/PLAN.md, Fase 12.

   ── Por qué los nombres llevan prefijo `--loea-` ──────────────────────
   El panel y la ayuda ya tienen CADA UNO su propio vocabulario de
   variables (`--acc`/`--accent`, `--mut`/`--dim`…) con los mismos colores
   bajo distinto nombre, y `--acc2` significa cosas distintas en cada uno.
   Redefinir esos nombres desde aquí rompería producción sin avisar. Así
   que los tokens nuevos estrenan prefijo y conviven con los viejos; las
   pantallas se van pasando a `--loea-*` un paso a la vez (Fase 12), y
   cuando no quede ninguna referencia vieja se borran los `:root` locales.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Acento ──────────────────────────────────────────────────────────
     Verde AZULADO, no el verde de antes: es la paleta que el usuario
     aprobó el 24 ago 2026, tomada de `nucleo/docs/tools/catalogo.html`,
     que ya la traía resuelta para claro y para oscuro.

     Dos acentos y no uno: el de marca hace dos trabajos que en oscuro se
     pelean — pintar SUPERFICIES (cabecera, botones) que llevan texto claro
     encima, y pintar TEXTO sobre el fondo de la página. En oscuro el texto
     tiene que aclararse para leerse; la superficie no, porque entonces el
     blanco de encima pierde contraste. */
  --loea-acc:        #1E5B54;  /* TEXTO y bordes de acento */
  --loea-acc-fondo:  #1E5B54;  /* SUPERFICIES; no cambia en oscuro */
  --loea-acc-vivo:   #2B7C6E;  /* el extremo claro de los degradados */
  --loea-deep:       #123B35;  /* fondo de cabeceras y barras */
  --loea-soft:       #E4EDE8;  /* fondo suave del acento */
  --loea-on-acc:     #FFFFFF;  /* texto encima del acento */

  /* ── Latón: el color del candado premium, NUNCA el de un error ── */
  --loea-brass:      #8F6207;
  --loea-brass-soft: #F6ECD6;
  --loea-brass-line: #E4D3A8;

  /* ── Correcto: lo que salió bien (una licencia activada, un resultado
     verificado). Es verde oliva, NO el acento: el acento es identidad de
     marca y no debe significar "correcto". ── */
  --loea-si:         #43702F;
  --loea-si-soft:    #E7EFDF;
  /* SUPERFICIES verdes; NO cambia en oscuro, igual que `--loea-acc-fondo`.
     Hacía falta el 7 sep 2026 para un BOTÓN verde —el «Siguiente» de una clase
     cuando el paso ya está bien—: `--loea-si` se aclara en oscuro para poder
     leerse SOBRE el fondo, así que rellenar con él y poner texto blanco encima
     da blanco sobre verde claro. Es la misma trampa que el acento resolvió con
     su par, y por eso se resuelve igual: relleno que no cambia, `--loea-on-acc`
     encima. */
  --loea-si-fondo:   #43702F;

  /* ── Error: sólo para lo que salió mal (un código inválido) ── */
  --loea-mal:        #99341F;
  --loea-mal-soft:   #F6E2DC;
  --loea-mal-line:   #E8C3B8;

  /* ── Superficies y texto ── */
  --loea-bg:         #F5F6F3;  /* fondo de la página */
  --loea-card:       #FFFFFF;  /* tarjetas y campos */
  --loea-ink:        #17211D;  /* texto principal */
  --loea-mut:        #47544E;  /* texto secundario */
  --loea-mut-2:      #75827B;  /* tercer nivel: rótulos, pies de tabla */
  --loea-line:       #D8DCD4;  /* bordes y separadores */
  --loea-line-soft:  #E6E9E2;  /* separadores de dentro de una tarjeta */

  /* ── Profundidad ── */
  --loea-sombra-1:   0 1px 2px rgba(23,33,29,.06);
  --loea-sombra-2:   0 8px 24px -10px rgba(23,33,29,.28);
  --loea-radio:      14px;
  --loea-radio-chico:9px;

  /* ── Tope de ancho del contenido ────────────────────────────────────
     El panel de Excel se puede ensanchar tanto como quiera el alumno, y
     a 950 px las líneas de texto llegan a 110 caracteres: ilegibles (lo
     cómodo son 45-75). El contenido se centra y no pasa de aquí, así una
     sola hoja sirve para el panel angosto y para el ancho.             */
  --loea-ancho:      620px;

  /* ── Tipografía ────────────────────────────────────────────────────
     Cada familia lleva su pila de respaldo completa: si el .woff2 no
     carga (o Excel viejo no lo entiende), la pantalla se ve bien igual,
     sólo con otra letra.
     · display → títulos, nombres de módulo y símbolos actuariales
     · body    → todo lo demás
     · mono    → nombres de función, cifras y fórmulas escritas
     · math    → notación dentro de las fichas de ayuda              */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-math:    'Newsreader', 'Cambria Math', Cambria, 'Times New Roman', serif;
}

/* ══════════════════════════════════════════════════════════════════════
   MODO OSCURO
   ══════════════════════════════════════════════════════════════════════
   Va SÓLO en `[data-tema="oscuro"]`, no en `@media (prefers-color-scheme)`.
   Con las dos cosas habría que escribir la lista de valores dos veces y
   acabarían separándose; así hay una sola fuente. Quien pone el atributo
   es el panel al arrancar (taskpane.js): pregunta primero a Excel por su
   tema y, si no puede, cae en `prefers-color-scheme`.

   Se redefine lo que cambia. NO se tocan `--loea-acc-fondo`, `--loea-si-fondo`, `--loea-deep`
   ni `--loea-acc-vivo`: son superficies verdes con texto claro encima, y
   aclararlas le quitaría contraste a ese texto. Sí se aclaran `--loea-acc`
   y `--loea-brass`, que son texto sobre el fondo de la página.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-tema="oscuro"]{
  /* Oscuro SUAVE, no negro. La primera versión salía del catálogo tal cual
     (#101614 de fondo y #E5EAE6 de texto) y el usuario dijo que no le gustaba:
     casi negro con casi blanco encima cansa la vista y hace que el texto
     "vibre". Aquí el fondo se levanta del negro, las tarjetas se separan más
     del fondo, y el texto baja del blanco puro. Sigue muy por encima del
     mínimo de contraste; lo que baja es la dureza, no la legibilidad. */
  --loea-acc:        #79C2B0;  /* aclarado: sobre el fondo oscuro tiene que leerse */
  --loea-soft:       #21332E;
  --loea-brass:      #D9AE66;  /* el latón del candado, aclarado por lo mismo */
  --loea-brass-soft: #33291A;
  --loea-brass-line: #4E4126;
  --loea-si:         #A7CC8C;
  --loea-si-soft:    #24301D;
  --loea-mal:        #E09A85;
  --loea-mal-soft:   #372018;
  --loea-mal-line:   #513025;
  --loea-bg:         #1A211F;  /* levantado del negro */
  --loea-card:       #222A28;  /* se despega del fondo sin brillar */
  --loea-ink:        #DCE3DF;  /* no blanco puro: menos deslumbre */
  --loea-mut:        #9DAAA4;
  --loea-mut-2:      #8A968F;
  --loea-line:       #35403C;  /* borde visible sin cortar */
  --loea-line-soft:  #2C3532;
  --loea-sombra-1:   0 1px 2px rgba(0,0,0,.28);
  --loea-sombra-2:   0 8px 24px -10px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════════════════
   FUENTES PROPIAS — servidas por el VPS, no por Google
   ══════════════════════════════════════════════════════════════════════
   Cinco .woff2 (104 KB en total) en `nucleo/panel/fuentes/`, subconjunto
   `latin`, que ya trae los acentos y la ñ del español. Se descargaron de
   Google Fonts el 24 ago 2026 y se redistribuyen bajo SIL Open Font
   License 1.1: el texto de cada licencia está junto a los archivos
   (`fuentes/OFL-*.txt`) y NO se borra.

   Por qué propias y no el CDN de Google: el panel deja de necesitar
   internet para verse bien, y Google deja de recibir una visita por cada
   alumno que abre Excel.

   El `unicode-range` no es adorno: si un carácter no cae dentro (los
   subíndices actuariales ₓ ₜ ₘ, por ejemplo), el navegador ni descarga
   esta cara y pasa a la siguiente de la pila. Es lo que ya pasaba antes
   y por eso esos símbolos se siguen viendo bien.

   Para actualizarlas: bajar de nuevo los .woff2 del subconjunto latin y
   sustituir; los @font-face de abajo no cambian salvo que cambie el
   unicode-range.
   ══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/instrument-sans-var-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:'Spectral';
  font-style:italic;
  font-weight:600;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/spectral-600-italic-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:'Spectral';
  font-style:normal;
  font-weight:600;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/spectral-600-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:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/ibm-plex-mono-400-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:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/ibm-plex-mono-500-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;
}

/* ── La pareja del catálogo del área DA: la usa la ayuda ──────────────
   Las dos son VARIABLES: un solo archivo cubre de 400 a 600, por eso el
   `font-weight` va como rango y no hay un .woff2 por peso. */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/newsreader-var-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:'Newsreader';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/newsreader-italic-var-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:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;                 /* se ve el texto de inmediato con la de respaldo */
  src:url("fuentes/ibm-plex-sans-var-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;
}