/* ==========================================================================
   TOKENS DEL SISTEMA DE DISEÑO
   --------------------------------------------------------------------------
   Única fuente de verdad de colores, tipografías y medidas.
   Ningún otro archivo escribe un color "a mano": siempre usa una variable.

   CRITERIOS
   · Azul tinta es el color de la marca y de todo lo interactivo.
   · Verde, ámbar y rojo están RESERVADOS para el estado de las cosas
     (al día / por vencer / vencido). No se usan como decoración, para que
     cuando aparezca un color de estado signifique siempre lo mismo.
   · Los neutros tienen una leve calidez, para que el contenido se lea como
     papel y no como pantalla.
   ========================================================================== */

:root {
  /* ---- Superficies y texto (tema claro) ---- */
  --color-fondo:            #f2f2ef;
  --color-superficie:       #ffffff;
  --color-superficie-2:     #f5f5f1;
  --color-superficie-3:     #e9e9e3;
  --color-borde:            #e3e3dc;
  --color-borde-fuerte:     #c9c9c0;

  --color-texto:            #1b1c19;
  --color-texto-suave:      #4e5049;
  --color-texto-tenue:      #7b7d74;
  --color-texto-invertido:  #ffffff;

  /* ---- Color de marca: azul tinta ---- */
  --color-primario:         #27476e;
  --color-primario-fuerte:  #1b3252;
  --color-primario-suave:   #e5ebf4;
  --color-primario-borde:   #c3d1e6;
  --color-primario-texto:   #1f3a5c;

  /* ---- Estado (uso exclusivo, nunca decorativo) ---- */
  --color-exito:            #2e7d57;
  --color-exito-suave:      #e1f0e8;
  --color-alerta:           #8f6412;
  --color-alerta-suave:     #f8ecd6;
  --color-error:            #ab3a2c;
  --color-error-suave:      #fae4df;
  --color-neutro:           #5f6159;
  --color-neutro-suave:     #eaeae4;

  /* ---- Series de un gráfico ----
     Las únicas ocho que no son ni marca ni estado. NO contradicen la regla de
     arriba: en una torta el color no dice cómo viene algo, dice CUÁL es —es la
     identidad de la porción, lo que la une con su renglón en la referencia—.
     Por eso son ocho y no más: pasadas las ocho, dos porciones vecinas ya no
     se distinguen y el color deja de identificar nada.

     Son los colores clásicos de un gráfico —azul, naranja, verde, rojo,
     violeta—, a pedido del titular (02/11/2026): con azules, petróleos y
     violetas parecidos, los chips de dos actividades de un libro no se
     distinguían. Se apartan a propósito de la regla de no usar verde ni
     rojo fuera del estado: en una serie el color dice cuál es, no cómo
     viene, y los de estado son más oscuros (#2e7d57, #ab3a2c). Van en un
     orden que no deja dos parecidas al lado. */
  --serie-1: #1f77b4;
  --serie-2: #ff7f0e;
  --serie-3: #2ca02c;
  --serie-4: #d62728;
  --serie-5: #9467bd;
  --serie-6: #8c564b;
  --serie-7: #e377c2;
  --serie-8: #7f7f7f;

  /* ---- Menú lateral (chrome oscuro, separa el mueble del contenido) ---- */
  --nav-fondo:              #1c2530;
  --nav-fondo-2:            #263242;
  --nav-borde:              #2d3a49;
  --nav-texto:              #a3b0bf;
  --nav-texto-fuerte:       #eef2f6;
  --nav-tenue:              #6f7d8d;
  --nav-activo-fondo:       #2f4763;
  --nav-activo-texto:       #ffffff;
  --nav-activo-marca:       #7ba7db;

  /* ---- Franja de encabezado ----
     El encabezado de una pantalla de lectura —el estado de resultados— en
     el azul tinta de la marca, de punta a punta: el contribuyente, el título
     y qué se mira. La barra de arriba es el mueble; la franja es la pantalla. */
  --franja-fondo:           #1b3252;
  --franja-texto:           #ffffff;
  --franja-suave:           #c6d3e4;
  --franja-borde:           rgba(255, 255, 255, 0.18);
  --franja-control:         rgba(255, 255, 255, 0.10);
  --franja-marca:           #7ba7db;
  --franja-destacado:       #27476e;

  /* ---- Tipografía ---- */
  --fuente-base: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui,
                 -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* NO hay una fuente aparte para los números. Los datos fiscales —CUIT,
     fechas, importes— salen en la misma familia que todo lo demás, que es
     `--fuente-base` y se hereda del body. Lo que alinea las columnas son las
     cifras tabulares, que también se aplican a la página entera en 2-base.css.

     Acá vivía una monoespaciada para los datos y se veía como un injerto de
     otra tipografía en medio de la pantalla. Si alguna vez vuelve a aparecer
     una `--fuente-datos`, es esto otra vez. */

  /* Monoespaciada de verdad, sólo donde el texto ES código: el ejemplo del
     archivo a importar y la tecla del atajo. Nunca para números. */
  --fuente-mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  --texto-xs:   0.6875rem;  /* 11px · etiquetas en mayúsculas */
  --texto-sm:   0.8125rem;  /* 13px · tablas y texto auxiliar */
  --texto-base: 0.9375rem;  /* 15px · texto general */
  --texto-md:   1.0625rem;  /* 17px · títulos de panel */
  --texto-lg:   1.25rem;    /* 20px · títulos de sección */
  --texto-xl:   1.5rem;     /* 24px · título de página */
  --texto-2xl:  1.75rem;    /* 28px · indicadores */
  --texto-3xl:  2.125rem;   /* 34px · CUIT en la ficha */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-fuerte: 700;

  --interlineado-ajustado: 1.22;
  --interlineado-base:     1.55;

  /* ---- Espaciado (escala de 4px) ---- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* ---- Bordes y sombras ---- */
  --radio-sm:   5px;
  --radio:      9px;
  --radio-lg:   14px;
  --radio-full: 999px;

  --sombra-sm: 0 1px 2px rgba(28, 37, 48, 0.07);
  --sombra:    0 1px 2px rgba(28, 37, 48, 0.05), 0 4px 14px rgba(28, 37, 48, 0.07);
  --sombra-lg: 0 2px 6px rgba(28, 37, 48, 0.07), 0 18px 42px rgba(28, 37, 48, 0.13);

  /* ---- Medidas ---- */
  --ancho-barra-lateral: 236px;
  --alto-barra-superior: 58px;
  --ancho-contenido-max: 1400px;
  /* Dos anchos de formulario y no uno por pantalla: con 640, 760, 780 y 860
     escritos a mano, cada alta se veía de otro tamaño sin que nadie lo
     hubiera decidido. El largo, con índice, no lleva tope. */
  --ancho-formulario-chico: 640px;
  --ancho-formulario:       860px;

  --transicion: 130ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   TEMA OSCURO
   Se aplica según el sistema operativo, salvo elección explícita de tema claro.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo:            #14161a;
    --color-superficie:       #1c1f25;
    --color-superficie-2:     #23272e;
    --color-superficie-3:     #2b3037;
    --color-borde:            #2f343c;
    --color-borde-fuerte:     #414852;

    --color-texto:            #e8e8e3;
    --color-texto-suave:      #adb1ab;
    --color-texto-tenue:      #7f847e;
    --color-texto-invertido:  #14161a;

    --color-primario:         #6f9fd8;
    --color-primario-fuerte:  #8bb5e6;
    --color-primario-suave:   #1c2938;
    --color-primario-borde:   #2f4664;
    --color-primario-texto:   #9cc0ec;

    --color-exito:            #5cbd85;
    --color-exito-suave:      #16301f;
    --color-alerta:           #d0a04a;
    --color-alerta-suave:     #302713;
    --color-error:            #de8072;
    --color-error-suave:      #3a211c;
    --color-neutro:           #9aa09a;
    --color-neutro-suave:     #262b30;

    /* Las mismas ocho, aclaradas: sobre fondo oscuro los tonos profundos se
       juntan entre sí y la torta queda de un solo color. */
    --serie-1: #4ea1e6;
    --serie-2: #ffa04d;
    --serie-3: #5cc65c;
    --serie-4: #f0605f;
    --serie-5: #b58fe0;
    --serie-6: #b07a6e;
    --serie-7: #f09ad6;
    --serie-8: #a8a8a8;

    --nav-fondo:              #101318;
    --nav-fondo-2:            #181d24;
    --nav-borde:              #242a33;
    --nav-texto:              #98a3b1;
    --nav-texto-fuerte:       #e8edf3;
    --nav-tenue:              #646f7d;
    --nav-activo-fondo:       #24354a;
    --nav-activo-texto:       #ffffff;
    --nav-activo-marca:       #6f9fd8;

    --franja-fondo:           #16233a;
    --franja-texto:           #e8edf3;
    --franja-suave:           #b3c2d6;
    --franja-borde:           rgba(255, 255, 255, 0.14);
    --franja-control:         rgba(255, 255, 255, 0.08);
    --franja-marca:           #6f9fd8;
    --franja-destacado:       #24426b;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra:    0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4);
    --sombra-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.5);
  }
}

/* Tema oscuro elegido desde el botón de la barra superior */
:root[data-tema="oscuro"] {
  --color-fondo:            #14161a;
  --color-superficie:       #1c1f25;
  --color-superficie-2:     #23272e;
  --color-superficie-3:     #2b3037;
  --color-borde:            #2f343c;
  --color-borde-fuerte:     #414852;

  --color-texto:            #e8e8e3;
  --color-texto-suave:      #adb1ab;
  --color-texto-tenue:      #7f847e;
  --color-texto-invertido:  #14161a;

  --color-primario:         #6f9fd8;
  --color-primario-fuerte:  #8bb5e6;
  --color-primario-suave:   #1c2938;
  --color-primario-borde:   #2f4664;
  --color-primario-texto:   #9cc0ec;

  --color-exito:            #5cbd85;
  --color-exito-suave:      #16301f;
  --color-alerta:           #d0a04a;
  --color-alerta-suave:     #302713;
  --color-error:            #de8072;
  --color-error-suave:      #3a211c;
  --color-neutro:           #9aa09a;
  --color-neutro-suave:     #262b30;

  /* Las mismas ocho, aclaradas: sobre fondo oscuro los tonos profundos se
     juntan entre sí y la torta queda de un solo color. */
  --serie-1: #4ea1e6;
  --serie-2: #ffa04d;
  --serie-3: #5cc65c;
  --serie-4: #f0605f;
  --serie-5: #b58fe0;
  --serie-6: #b07a6e;
  --serie-7: #f09ad6;
  --serie-8: #a8a8a8;

  --nav-fondo:              #101318;
  --nav-fondo-2:            #181d24;
  --nav-borde:              #242a33;
  --nav-texto:              #98a3b1;
  --nav-texto-fuerte:       #e8edf3;
  --nav-tenue:              #646f7d;
  --nav-activo-fondo:       #24354a;
  --nav-activo-texto:       #ffffff;
  --nav-activo-marca:       #6f9fd8;

  --franja-fondo:           #16233a;
  --franja-texto:           #e8edf3;
  --franja-suave:           #b3c2d6;
  --franja-borde:           rgba(255, 255, 255, 0.14);
  --franja-control:         rgba(255, 255, 255, 0.08);
  --franja-marca:           #6f9fd8;
  --franja-destacado:       #24426b;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra:    0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4);
  --sombra-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.5);
}