/* ═══════════════════════════════════════════════════════════════════════════
   TEMA CLARO — `html[data-tema="claro"]`
   ───────────────────────────────────────────────────────────────────────────
   Da vuelta los 20 tokens de color que `styles.css` define en `:root`. Nada
   más. Ese es todo el archivo, y por eso el tema claro es barato.

   ── Por qué alcanza con esto ───────────────────────────────────────────────
   El marco entero —`body`, `.topbar`, `.sidebar`, `.nav-item`— ya estaba
   escrito contra los tokens (`var(--navy-2)`, `var(--text)`, `var(--border)`),
   así que se aclara solo. Medido antes de escribir una línea: con los 20
   tokens invertidos, en "Pago de Facturas" quedaban **10** elementos oscuros
   de toda la vista. Ese número es el que justificó hacer esto; sin medirlo, el
   conteo crudo de colores escritos a mano (1.077 en toda la app) sugería que
   era inviable. Casi todos resultaron ser acentos —verde, rojo, ámbar— y
   `rgba()` translúcidos, que no producen parches.

   ── Es un eje INDEPENDIENTE del piloto corporativo ─────────────────────────
   `data-tema` cambia la PALETA; `data-diseno` cambia la tipografía, el
   espaciado y los componentes de Gestión de Usuarios y Gestión de Roles. Se
   combinan sin conocerse: el tema claro funciona con el diseño actual y con el
   corporativo, y el corporativo funciona en los dos temas.

   ⚠ Los valores no son "el oscuro aclarado": son los del login corporativo
   (`login.html`), que es la referencia de identidad. El azul de la app era
   #2563eb, el de Tailwind; acá es #003A70, el de la marca.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-tema="claro"] {
  /* ── Superficies, de atrás hacia adelante ────────────────────────────────
     El original apila cuatro azules cada vez más claros para dar profundidad.
     En claro se invierte: el fondo es el que tiene tinte y las superficies
     elevadas van hacia el blanco. Si no, las tarjetas no se despegan. */
  --navy:   #F1F4F8;   /* fondo de la página */
  --navy-2: #FFFFFF;   /* topbar, menú, tarjetas */
  --navy-3: #FFFFFF;   /* superficie elevada: modales */
  --navy-4: #EDF1F6;   /* campos, filas alternas, hover */

  --border:   #DCE3EA;
  --border-2: #C4D0DC;

  /* ── Texto ───────────────────────────────────────────────────────────────
     Los tres niveles pasan AA sobre los tres fondos donde aparecen: blanco puro,
     #F1F4F8 y #EDF1F6, que es el más oscuro de los tres.

     ⚠ `--text-3` ya se ajustó dos veces por medir contra el fondo equivocado.
     Primero fue #6B7C8F (4,3:1), se bajó a #5E7085 mirando el blanco puro… y
     sobre #EDF1F6 daba 4,48:1 — a dos centésimas del mínimo, en 170 elementos.
     Ahora es #586A7E: 4,90:1 sobre el peor de los tres. **El fondo más OSCURO es
     el que manda en el tema claro**, al revés que en el oscuro. */
  --text:   #0E1A26;
  --text-2: #43566B;
  --text-3: #586A7E;

  /* ── Azules de marca ─────────────────────────────────────────────────────
     `--blue-glow` es el fondo del `:hover` del menú. En oscuro es un
     resplandor; sobre blanco un azul al 18% es una mancha, así que baja a .07. */
  --blue:       #003A70;
  --blue-light: #00579E;
  --blue-glow:  rgba(0, 58, 112, .07);
  --cyan:       #00789C;

  /* ── Estados ─────────────────────────────────────────────────────────────
     Los mismos roles, oscurecidos hasta pasar AA sobre blanco: los tonos del
     tema oscuro (#22c55e, #f59e0b) están pensados para leerse sobre azul
     profundo y sobre papel quedan en 1,8:1 — ilegibles, sin dejar de "verse
     verdes" en una captura. */
  --green:    #0E7A4A;  --green-bg: rgba(14, 122, 74, .10);
  --amber:    #9A6100;  --amber-bg: rgba(154, 97, 0, .10);
  --red:      #C0342F;  --red-bg:   rgba(192, 52, 47, .10);
  --purple:   #5B3E9B;

  /* Los tres de TEXTO (ver el comentario largo en styles.css). Acá van al revés
     que en el oscuro: ahí hay que aclararlos para que se lean sobre el navy, y
     acá oscurecerlos para que se lean sobre el papel. Es el mismo problema con el
     signo dado vuelta, y es la razón de que existan como tokens aparte. */
  --red-txt:    #A82A26;   /* 6,12:1 sobre el más oscuro de los tres fondos */
  --blue-txt:   #1A5FD0;   /* 5,15:1 */
  --purple-txt: #6D3FD4;   /* 5,59:1 */
  /* El índigo va al revés que en el oscuro, igual que los tres de arriba: allá
     el 400 para aclararlo sobre el navy, acá el 600 para oscurecerlo sobre el
     papel. Medido sobre el fondo REAL de la card (#f3f3fe, que ya lleva su
     propio tinte índigo), no sobre blanco puro: 5,66:1. */
  --indigo:     #4338CA;
  --indigo-txt: #4F46E5;   /* 5,66:1 */
  --indigo-bg:  rgba(67, 56, 202, .08);
  /* Igual al `--blue-light` de este tema, a propósito: acá ya da 6,48:1 y no hay
     nada que corregir. Se repite para que el token exista en los dos temas — si
     faltara, en el claro el acento se descartaría por inválido y el texto
     heredaría el color del padre, sin ningún error. */
  --blue-light-txt: #00579E;   /* 6,48:1 */

  /* La sombra de los elementos flotantes. En el oscuro es negro al 50%, que sobre
     el navy profundo se lee como profundidad; sobre papel blanco la misma sombra se
     ve como una mancha gris alrededor del globo. Acá es un tinte de la tinta
     corporativa, mucho más suave: el papel no necesita tanto contraste para que algo
     parezca estar por encima. */
  --sombra: rgba(14, 26, 38, .16);
}

/* ⚠ El logotipo NO se cambia acá, y conviene entender por qué para no volver a
   intentarlo. Lo que decide si el logo blanco se ve o no es el color del
   MEMBRETE, y ese no lo fija el tema: el membrete es azul en claro y en oscuro,
   porque es la marca. Así que el logotipo blanco se lee siempre y no hay nada
   que cambiar. Hubo una variante de marco con el membrete claro —`papel`— que sí
   necesitaba el cambio; se descartó el 17-08-2026 y con ella se fue. */

/* ── Los sobrevivientes ────────────────────────────────────────────────────
   Lo que la sonda encontró todavía oscuro con los tokens ya dados vuelta.
   Cada uno tiene su color escrito a mano en el fuente; se corrigen acá y no
   en `styles.css` para que el tema claro siga siendo un archivo que se puede
   borrar entero sin dejar rastro. */

/* Las sombras del tema oscuro son negras y sobre papel ensucian. */
html[data-tema="claro"] .card,
html[data-tema="claro"] .kpi-card{
  box-shadow: 0 1px 2px rgba(14, 26, 38, .06), 0 4px 12px rgba(14, 26, 38, .05);
}

/* El scrollbar propio queda negro sobre claro. */
html[data-tema="claro"] ::-webkit-scrollbar-track { background: var(--navy-4); }
html[data-tema="claro"] ::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 4px;
}
html[data-tema="claro"] ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* El texto de los campos y el color del cursor. */
html[data-tema="claro"] input,
html[data-tema="claro"] select,
html[data-tema="claro"] textarea { color: var(--text); }
html[data-tema="claro"] ::placeholder { color: var(--text-3); opacity: 1; }
html[data-tema="claro"] { color-scheme: light; }

/* ── Historial de Pagos ────────────────────────────────────────────────────
   Esta vista ya estaba escrita contra los tokens —91 de sus 104 colores—, así
   que el tema la recolorea sola. Lo de abajo es el único que queda suelto y que
   solo se rompe en claro. No da error: se ve como una decisión de diseño rara.

   Eran DOS. El otro corregía la perilla del switch "Ver todos los rubros", que
   siendo blanca desaparecía sobre una pista clara; el switch se retiró el
   17-08-2026 y la regla se fue con él. */

/* El realce de fila al pasar por encima era blanco al 3%: sobre papel es
   invisible. Se invierte a tinta al 4%, que es el mismo gesto al revés. */
html[data-tema="claro"] .hist-tanda:hover { background: rgba(14, 26, 38, .04); }

/* ── El toast ──────────────────────────────────────────────────────────────
   ⚠ Esto NO era una preferencia de estilo: era texto invisible.
   `showToast` mezcla las dos cosas — su FONDO está escrito a mano
   (`linear-gradient(rgba(24,35,56,.98), rgba(14,23,38,.98))`, azul oscuro) y su
   TEXTO sale de `var(--text)`. Con el tema claro el token se vuelve tinta
   oscura y el fondo se queda oscuro: tinta oscura sobre azul oscuro.

   Es la falla más muda de todas las de esta sesión, porque un toast dura 4
   segundos: nadie alcanza a reportarlo, solo queda la sensación de que "salió
   algo" sin poder leer qué. Y los de error duran 7 y son los que más importan.

   Se le da superficie clara con la misma familia del resto: papel elevado,
   línea suave y sombra de tinta en vez de negra. */
html[data-tema="claro"] .toast {
  background: var(--navy-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 32px rgba(14, 26, 38, .16), 0 2px 8px rgba(14, 26, 38, .10) !important;
}
html[data-tema="claro"] .toast-msg { color: var(--text); }
/* El círculo del ícono llevaba un realce interior blanco, que sobre papel no
   se ve: se cambia por un contorno de línea. */
html[data-tema="claro"] .toast-ico {
  box-shadow: inset 0 0 0 1px rgba(14, 26, 38, .10) !important;
}