/* ============================================================
   BLO - Modo oscuro: capa compartida de tokens.

   Este archivo NO define el modo claro. Cada pagina declara su propio
   :root con los valores claros; aca solo se REDEFINEN los tokens cuando
   el tema es oscuro. Por eso es aditivo: si esta hoja no carga, todo
   sigue viendose como antes.

   Tres capas de profundidad:
     --gray-light  fondo de pagina (lo usa body)
     --surface     tarjetas
     --surface-2   paneles dentro de tarjetas

   Tokens que NO voltean, a proposito:
     --white  es el texto sobre botones de color, no una superficie
     --ink    es el chip oscuro, que debe seguir oscuro
     --green  es el morado de marca COMO FONDO (para texto va --green-text)
     --navy   idem (para texto va --navy-text)

   La paleta aparece dos veces y no se puede evitar en CSS plano: un
   bloque es la eleccion explicita del usuario y el otro vive dentro de
   un @media, y no hay forma de agrupar selectores a traves de esa
   frontera. Los dos los emite scripts/gen_css.py desde una sola lista,
   asi que no pueden quedar distintos.
   ============================================================ */

/* 1) Eleccion explicita del usuario (localStorage 'blo_tema'). */
:root[data-theme="dark"]{
--gray-light:#0B1220;  /* fondo de pagina */
--surface:#151E2E;  /* tarjetas */
--surface-2:#1F2937;  /* paneles dentro de tarjetas */
--border:#334155;
--dark:#E8EAED;  /* texto principal */
--gray:#9CA3AF;  /* texto atenuado */
--text-2:#C8CDD6;  /* texto de parrafo, entre --dark y --gray */
--green-text:#A78BFA;  /* el morado de marca NO contrasta en oscuro */
--green-soft:#17253A;
--green-border:#35507A;
--navy-text:#93B4D8;  /* el navy como texto tampoco contrasta */
--navy-soft:#1F2937;
--red-text:#FCA5A5;  /* --red (#dc2626) da 3.5:1 en oscuro: insuficiente */
--red-strong:#FCA5A5;  /* texto de alerta; en claro es #991b1b, mas oscuro que --red-text */
--red-soft:#3B1418;
--red-border:#7F1D1D;
--warn-soft:#3A2E10;
--warn-border:#5A4A18;
--morado-suave:#2A1B4A;
--naranja-suave:#3A2416;
--yellow-text:#FCD34D;
--lime-text:#FDBA74;
--shadow:0 2px 14px rgba(0,0,0,.55);
}

/* 2) Sin eleccion explicita, seguimos al sistema. El :not() hace que
      quien eligio claro a mano gane sobre el prefers-color-scheme. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--gray-light:#0B1220;  /* fondo de pagina */
--surface:#151E2E;  /* tarjetas */
--surface-2:#1F2937;  /* paneles dentro de tarjetas */
--border:#334155;
--dark:#E8EAED;  /* texto principal */
--gray:#9CA3AF;  /* texto atenuado */
--text-2:#C8CDD6;  /* texto de parrafo, entre --dark y --gray */
--green-text:#A78BFA;  /* el morado de marca NO contrasta en oscuro */
--green-soft:#17253A;
--green-border:#35507A;
--navy-text:#93B4D8;  /* el navy como texto tampoco contrasta */
--navy-soft:#1F2937;
--red-text:#FCA5A5;  /* --red (#dc2626) da 3.5:1 en oscuro: insuficiente */
--red-strong:#FCA5A5;  /* texto de alerta; en claro es #991b1b, mas oscuro que --red-text */
--red-soft:#3B1418;
--red-border:#7F1D1D;
--warn-soft:#3A2E10;
--warn-border:#5A4A18;
--morado-suave:#2A1B4A;
--naranja-suave:#3A2416;
--yellow-text:#FCD34D;
--lime-text:#FDBA74;
--shadow:0 2px 14px rgba(0,0,0,.55);
}
}

/* Boton de tema en la barra superior. Vive aca y no en cada pagina
   porque lo monta js/dark-mode.js, que tambien es compartido.
   El blanco asume barra de color (morado): mi-cuenta.html, que tiene
   la barra clara, lo pisa con su propia regla. */
.blo-tema-btn{background:none;border:none;cursor:pointer;color:#fff;
padding:5px;border-radius:9px;line-height:0;display:flex;align-items:center;
opacity:.9;transition:opacity .2s,background .2s;font-family:inherit}
.blo-tema-btn:hover{opacity:1;background:rgba(255,255,255,.16)}
.blo-tema-btn svg{width:19px;height:19px}