/* =====================================================================
   tokens.css — un solo juego de colores para «Finanzas SIRF»
   (rediseño F2-1, Comisiones 22.4, 22/10/2026)

   ESTE ARCHIVO NACE EN COMISIONES Y SE COPIA TAL CUAL A TESORERÍA con
   herramientas/copiar_diseno.sh, que anota su huella SHA-256: una prueba en
   cada repo compara el archivo con su huella. No se edita en Tesorería.
   Solo variables (custom properties): ningún selector de la app, ninguna
   regla que pinte nada por sí misma. Sin url(), sin @import, sin recursos de
   fuera (la política de contenido de las dos apps no se amplía: SR-06).

   CÓMO SE ELIGE EL TEMA (decisión D1-b de Iván, 21/10/2026)
   - Lo pone js/tema.js en <html data-tema="…">, solo de una lista cerrada:
     «claro», «oscuro» o «sistema». Cualquier otro valor, o ninguno = claro.
   - Claro es el de siempre y el de por defecto (fondo claro, tarjetas
     blancas): manda en :root y en :root[data-tema="claro"].
   - Oscuro: :root[data-tema="oscuro"].
   - «Como el sistema»: :root[data-tema="sistema"] sigue al aparato SOLO
     dentro de @media (prefers-color-scheme: dark). Sin data-tema (por
     ejemplo, si tema.js no cargó) se ve claro aunque el aparato esté en
     oscuro: nadie vuelve a ver oscuro sin pedirlo.

   REGLAS DE COLOR (pedido de Iván del 21/10/2026: «el azul es el color
   principal y solo uso colores para lo que importa o hay que resaltar»)
   1. El azul principal (--f-primario) va en botones principales, enlaces,
      el ítem activo del menú, el foco y las barras de las gráficas. Es un
      azul sobrio tipo Siigo (decisión D9-b), no el cian de la marca.
   2. El cian de marca (--f-marca, #00AEEF) va SOLO en el logo y el isotipo.
      Nunca como texto: sobre blanco da 2,53:1 (no llega a 4,5:1).
   3. Verde, ámbar y rojo SOLO en chips (etiquetas), avisos y cifras en
      contra. Nunca para pintar una cifra porque sí.
   4. Las cifras de las tarjetas (KPI) van en el color de texto
      (--f-texto). Una cifra en contra se marca en rojo por su clase.
   5. Ningún color suelto en las hojas: todo sale de aquí, definido a la vez
      en claro y en oscuro.

   CONTRASTE (WCAG 2.x, luminancia relativa sRGB; calculado el 22/10/2026
   con la fórmula de WCAG; texto normal pide ≥ 4,5:1)
   Claro
     --f-primario      #0B5FFF  blanco encima (botón)        5,13:1
                                 como texto sobre #FFFFFF      5,13:1
                                 sobre --f-fondo #F2F4F7       4,65:1
     --f-primario-texto #0A4FD6 (enlaces, ítem activo)
                                 sobre #FFFFFF                 6,77:1
                                 sobre el fondo suave activo   5,86:1
                                 (#0B5FFF al 10 % sobre blanco = #E7EFFF)
                                 sobre --f-superficie-2 #EDF0F4 5,92:1
     --f-texto  #1A1A1B sobre #FFFFFF 17,39:1 · --f-texto-3 #676B71 5,36:1
     verde #0A7250 5,94:1 · ámbar #8F5C00 5,68:1 · rojo #B92E40 5,95:1
     --f-foco #0B5FFF (anillo de foco; WCAG 1.4.11 pide ≥ 3:1 contra lo de al lado)
                                 sobre #FFFFFF 5,13:1 · sobre --f-fondo 4,65:1
                                 sobre --f-superficie-2 4,49:1 · sobre el fondo suave activo 4,44:1
   Oscuro (su par)
     --f-primario      #6EA8FF  texto #0B0B0C encima (botón)  8,16:1
     --f-primario-texto #6EA8FF sobre --f-superficie #1A1A1B  7,21:1
                                 sobre --f-superficie-2 #232427 6,44:1
                                 sobre el fondo suave activo   5,45:1
                                 (#6EA8FF al 16 % sobre #1A1A1B = #27313F)
     --f-texto-3 #878B91 sobre #1A1A1B 5,08:1
     --f-foco #6EA8FF sobre --f-superficie 7,21:1 · sobre --f-fondo 7,64:1
                                 sobre --f-superficie-2 6,44:1 · sobre el fondo suave activo 5,45:1
     verde #3FCB92 8,42:1 · ámbar #F2B33D 9,35:1 · rojo #F2707E 6,12:1
   ===================================================================== */

:root,
:root[data-tema="claro"] {
  /* Superficies */
  --f-fondo: #F2F4F7;            /* fondo de la página */
  --f-superficie: #FFFFFF;       /* tarjetas, barra lateral, cabecera */
  --f-superficie-2: #EDF0F4;     /* encabezados de tabla, filas al pasar */
  --f-borde: #DDE1E6;
  --f-borde-fuerte: #C3C8CE;

  /* Texto */
  --f-texto: #1A1A1B;            /* Negro Antracita del manual */
  --f-texto-2: #5A5E66;
  --f-texto-3: #676B71;          /* Gris Plata oscurecido: AA en texto pequeño */
  --f-plata: #808285;            /* Gris Plata: divisiones, nunca texto */

  /* Color principal (D9-b) */
  --f-primario: #0B5FFF;
  --f-primario-fuerte: #0A4FD6;  /* al pasar el ratón; fondo de la barra de las gráficas */
  --f-primario-texto: #0A4FD6;   /* enlaces e ítem activo */
  --f-primario-suave: rgba(11, 95, 255, .10);
  --f-primario-borde: rgba(11, 95, 255, .40);   /* bordes suaves, NUNCA el anillo de foco (1,85:1) */
  --f-foco: #0B5FFF;             /* anillo de foco (:focus-visible), opaco: ≥ 3:1 */
  --f-sobre-primario: #FFFFFF;

  /* Marca: SOLO logo e isotipo */
  --f-marca: #00AEEF;

  /* Estados: solo chips, avisos y cifras en contra */
  --f-verde: #0A7250;  --f-verde-suave: rgba(15, 138, 95, .12);
  --f-ambar: #8F5C00;  --f-ambar-suave: rgba(214, 145, 0, .16);
  --f-rojo:  #B92E40;  --f-rojo-suave:  rgba(196, 56, 74, .12);
  --f-sobre-estado: #FFFFFF;     /* el número blanco del punto rojo del menú */

  /* Sombra y velo */
  --f-sombra: 0 1px 2px rgba(26, 26, 27, .05), 0 6px 20px rgba(26, 26, 27, .06);
  --f-velo: rgba(26, 26, 27, .42);

  /* Forma y tipografía */
  --f-radio: 12px;
  --f-radio-chico: 9px;
  --f-tipo-titulo: 'Montserrat', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --f-tipo-cuerpo: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Medidas de la cara (finanzas.css) */
  --f-lateral-cerrada: 64px;
  --f-lateral-abierta: 248px;
  --f-cabecera: 56px;

  /* Color de la barra del sistema (lo lee js/tema.js para <meta name="theme-color">) */
  --f-barra-sistema: #FFFFFF;

  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --f-fondo: #131416;
  --f-superficie: #1A1A1B;
  --f-superficie-2: #232427;
  --f-borde: #33353A;
  --f-borde-fuerte: #4A4D53;

  --f-texto: #F1F2F4;
  --f-texto-2: #A9ADB4;
  --f-texto-3: #878B91;
  --f-plata: #808285;

  --f-primario: #6EA8FF;
  --f-primario-fuerte: #8DBBFF;
  --f-primario-texto: #6EA8FF;
  --f-primario-suave: rgba(110, 168, 255, .16);
  --f-primario-borde: rgba(110, 168, 255, .50);
  --f-foco: #6EA8FF;
  --f-sobre-primario: #0B0B0C;

  --f-marca: #00AEEF;

  --f-verde: #3FCB92;  --f-verde-suave: rgba(63, 203, 146, .14);
  --f-ambar: #F2B33D;  --f-ambar-suave: rgba(242, 179, 61, .15);
  --f-rojo:  #F2707E;  --f-rojo-suave:  rgba(242, 112, 126, .15);
  --f-sobre-estado: #0B0B0C;

  --f-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --f-velo: rgba(0, 0, 0, .62);

  --f-barra-sistema: #1A1A1B;

  color-scheme: dark;
}

/* «Como el sistema»: el mismo oscuro, solo si el aparato está en oscuro.
   Copia exacta del bloque de arriba (una prueba lo compara). */
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    --f-fondo: #131416;
    --f-superficie: #1A1A1B;
    --f-superficie-2: #232427;
    --f-borde: #33353A;
    --f-borde-fuerte: #4A4D53;

    --f-texto: #F1F2F4;
    --f-texto-2: #A9ADB4;
    --f-texto-3: #878B91;
    --f-plata: #808285;

    --f-primario: #6EA8FF;
    --f-primario-fuerte: #8DBBFF;
    --f-primario-texto: #6EA8FF;
    --f-primario-suave: rgba(110, 168, 255, .16);
    --f-primario-borde: rgba(110, 168, 255, .50);
    --f-foco: #6EA8FF;
    --f-sobre-primario: #0B0B0C;

    --f-marca: #00AEEF;

    --f-verde: #3FCB92;  --f-verde-suave: rgba(63, 203, 146, .14);
    --f-ambar: #F2B33D;  --f-ambar-suave: rgba(242, 179, 61, .15);
    --f-rojo:  #F2707E;  --f-rojo-suave:  rgba(242, 112, 126, .15);
    --f-sobre-estado: #0B0B0C;

    --f-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --f-velo: rgba(0, 0, 0, .62);

    --f-barra-sistema: #1A1A1B;

    color-scheme: dark;
  }
}