/* ══════════════════════════════════════════════════════════════════════
   paletas.css — el ACENTO de cada menú
   ══════════════════════════════════════════════════════════════════════
   El complemento es UNO. Dentro tiene varios MENÚS (las áreas), y dentro de
   cada menú sus herramientas y sus funciones. Entre menús:

       la FORMA no cambia nunca  →  `armazon.css`
       el COLOR sí puede cambiar →  este archivo

   Es una decisión del 27 ago 2026, y no es un capricho: `ex` llevaba azul
   (#274690) desde antes de la mudanza y eso siempre estuvo bien. Lo que
   estaba mal era que cambiara además la estructura.

   ── CÓMO FUNCIONA ─────────────────────────────────────────────────────
   `loea.css` define los tokens de la familia en `:root`. Aquí se REDEFINEN
   los seis del acento, y sólo esos seis, cuando el `<html>` lleva puesto
   `data-area`. El armazón no se entera: sigue pidiendo `--loea-acc-fondo` y
   le llega el color del menú en el que esté.

       <html data-area="ec" data-tema="claro">

   Lo pone `armazon.js` al entrar a un menú (`ponerArea`). Cambiar de menú
   cambia el color de la cabecera sin repintar nada más.

   ── LOS SEIS TOKENS, Y POR QUÉ SON SEIS ───────────────────────────────
   Son dos trabajos distintos que en oscuro se pelean, y por eso no basta
   con un color (ver el comentario largo de `loea.css`):

       --loea-acc        TEXTO y bordes de acento. En oscuro se ACLARA
       --loea-acc-fondo  SUPERFICIES con texto claro encima. NO cambia
       --loea-acc-vivo   el extremo claro del degradado de la portada
       --loea-deep       fondo de cabeceras y barras
       --loea-soft       fondo suave del acento
       --loea-on-acc     el texto que va encima. Casi siempre blanco

   ── LO QUE NO SE TOCA, NUNCA ──────────────────────────────────────────
   El latón del candado premium (`--loea-brass`), el verde oliva de correcto
   (`--loea-si`) y el rojo de error (`--loea-mal`) son de la FAMILIA y no
   del menú. Si un menú los repintara, «premium» y «salió bien» querrían
   decir cosas distintas en cada pantalla del mismo complemento.

   Tampoco se tocan los fondos ni el texto (`--loea-bg`, `--loea-card`,
   `--loea-ink`, `--loea-mut`, `--loea-line`): el papel es el mismo en todo
   el complemento; lo que cambia es la tinta del acento.

   ── ORDEN Y ESPECIFICIDAD (importa) ───────────────────────────────────
   `:root[data-area]` y `:root[data-tema="oscuro"]` de `loea.css` tienen la
   MISMA especificidad, así que ganaría el último en cargarse. Por eso cada
   menú declara sus dos variantes, y la de oscuro lleva los dos atributos
   (`:root[data-area="x"][data-tema="oscuro"]`), que sí gana a las dos.

   **Este archivo se carga DESPUÉS de `loea.css`.** Si se carga antes, el
   modo oscuro de la familia le pisa el acento al menú.

   ── AÑADIR UN MENÚ NUEVO ──────────────────────────────────────────────
   Un bloque claro y un bloque oscuro, aquí. Nada más de diseño: la forma ya
   se la da `armazon.css`. El paso a paso completo, con lo que hay que
   apartar antes (prefijo, clave de licencia, renglón en el catálogo de
   áreas), está en `../docs/ARMAZON-DEL-PANEL.md` §8.
   ══════════════════════════════════════════════════════════════════════ */

/* ── AC · Actuarial ── verde azulado. Es el color de la familia y el que
   lleva el complemento cuando no hay ningún menú abierto. */
:root[data-area="ac"]{
  --loea-acc:        #1E5B54;
  --loea-acc-fondo:  #1E5B54;
  --loea-acc-vivo:   #2B7C6E;
  --loea-deep:       #123B35;
  --loea-soft:       #E4EDE8;
  --loea-on-acc:     #FFFFFF;
}
:root[data-area="ac"][data-tema="oscuro"]{
  --loea-acc:        #79C2B0;   /* aclarado: es texto sobre fondo oscuro */
  --loea-soft:       #21332E;
}

/* ── EC · Economía ── azul. No es nuevo: es el `--accent:#274690` que ya
   usaba `ex/src/taskpane/taskpane.html` antes de la mudanza, con su
   `--accent-soft:#E2E8F5`. Se conserva para que quien conoció la Suite
   Económica la reconozca. */
:root[data-area="ec"]{
  --loea-acc:        #274690;
  --loea-acc-fondo:  #274690;
  --loea-acc-vivo:   #3A5FB0;
  --loea-deep:       #1B3269;
  --loea-soft:       #E2E8F5;
  --loea-on-acc:     #F2F6FF;
}
:root[data-area="ec"][data-tema="oscuro"]{
  --loea-acc:        #93AEE8;
  --loea-soft:       #1E2740;
}

/* ══════════════════════════════════════════════════════════════════════
   POR QUÉ ESTOS TRES Y NO OTROS
   ══════════════════════════════════════════════════════════════════════
   La primera propuesta (27 ago 2026) la tumbó el usuario mirándola, y con
   razón: `CO` estaba a 15° de tono de `AC` y `TL` a **5°** de `EC` — el
   mismo azul con otro nombre. Se repartieron de nuevo con la cuenta hecha.

   El espacio de tonos libre es más estrecho de lo que parece, porque tres
   colores ya están comprometidos en TODO el complemento y no pueden querer
   decir «menú»:

       ~40°  latón   → el candado premium
       ~95°  oliva   → «salió bien»
       ~15°  ladrillo→ error

   Descontados ésos y los dos decididos (`AC` 173°, `EC` 222°), quedan dos
   huecos buenos —violeta y ciruela— y hacen falta tres. El quinto se separa
   por SATURACIÓN en vez de por tono: `CO` es un grafito casi neutro (.17)
   que, aunque cae a 16° del azul de `EC`, no se confunde con él porque uno
   es color y el otro es gris. Y le va al menú: contabilidad es tinta.

   Distancias resultantes — el par más flojo es `EC`/`CO`, y es el de la
   saturación; todos los demás van a 33° o más:

       AC↔EC  49°   AC↔TL  88°   AC↔CO  33°   AC↔EN 147°
       EC↔TL  39°   EC↔CO  16° (sat .57 vs .17)   EC↔EN  98°
       TL↔CO  55°   TL↔EN  59°   CO↔EN 114°

   Los cinco acentos pesan lo mismo: contraste contra blanco entre 7.8 y
   8.9:1, y sus versiones de oscuro entre 5.1 y 7.8:1 contra `--loea-bg`.
   Si un menú pesara menos, su cabecera parecería apagada al lado de las
   otras y se leería como «este menú está a medias».
   ══════════════════════════════════════════════════════════════════════ */

/* ── TL · Herramientas ── violeta. Es el hueco más lejano de los dos menús
   decididos (88° de AC, 39° de EC). El ámbar y el ocre quedaban descartados
   de entrada: son el candado premium. */
:root[data-area="tl"]{
  --loea-acc:        #563C86;
  --loea-acc-fondo:  #563C86;
  --loea-acc-vivo:   #7556AE;
  --loea-deep:       #352355;
  --loea-soft:       #E8E5EE;
  --loea-on-acc:     #FFFFFF;
}
:root[data-area="tl"][data-tema="oscuro"]{
  --loea-acc:        #9986BB;
  --loea-soft:       #26212E;
}

/* ── CO · Contabilidad ── grafito. El que se separa por saturación y no por
   tono, porque no quedaba un sexto hueco de color. Casi neutro a propósito:
   al lado del azul de `EC` se lee como gris, no como otro azul. */
:root[data-area="co"]{
  --loea-acc:        #3E4C57;
  --loea-acc-fondo:  #3E4C57;
  --loea-acc-vivo:   #566E81;
  --loea-deep:       #262F37;
  --loea-soft:       #E7EAEB;
  --loea-on-acc:     #FFFFFF;
}
:root[data-area="co"][data-tema="oscuro"]{
  --loea-acc:        #86A4BB;
  --loea-soft:       #25282A;
}

/* ── EN · Enseñanza ── ciruela. El otro hueco limpio, y el más lejano de
   todo lo demás (147° de AC, 98° de EC). Va tirando a oscuro para no
   acercarse al rojo de error, que vive a 15°. */
:root[data-area="en"]{
  --loea-acc:        #7A3563;
  --loea-acc-fondo:  #7A3563;
  --loea-acc-vivo:   #A44D87;
  --loea-deep:       #4E1F3E;
  --loea-soft:       #EEE5EB;
  --loea-on-acc:     #FFFFFF;
}
:root[data-area="en"][data-tema="oscuro"]{
  --loea-acc:        #BB86A9;
  --loea-soft:       #2E212A;
}