/* ═══════════════════════════════════════════════════════════════════════
   Sistema visual SIAN — tokens (línea de diseño v2, 2026-08-13)
   ═══════════════════════════════════════════════════════════════════════

   Esta hoja es la ÚNICA fuente de los valores del sistema. Se registra antes
   que ninguna otra (SIANNavbar la registra primero) para que esté disponible
   en toda la página, y ninguna hoja del ERP debe volver a escribir un hex a
   mano: si hace falta un color que no está aquí, el color falta aquí.

   ── Lo que cambió respecto de la v1 y por qué importa ──────────────────

   La v1 usaba el degradado de marca (verde→naranja) como interfaz: el lima
   era la selección y el naranja la acción. La v2 separa las dos cosas, y la
   razón está escrita en la propia línea:

     «El degradado verde→naranja es identidad, no interfaz. En pantallas de
      trabajo el color va en dosis.»

   Lo que cambia en concreto: el DEGRADADO deja de aparecer en la interfaz —
   queda para el logo—, la selección y el foco pasan a CELESTE (#4FA8C6 en
   oscuro, #1E7FA0 en claro), y el lima queda reservado a la IA.

   La acción primaria SIGUE siendo el naranja de marca, pero con un tono por
   modo para que los dos pasen AA: #F0901E sobre oscuro, #B84E12 sobre claro.
   Un naranja claro sobre fondo claro no llega al contraste, y esa es la
   única razón por la que hay dos.

   Y el asistente ya no se llama SIP: es SIA, SIAN Artificial Intelligence
   Operative. Su reducción es el par AI del lockup.

   ── Regla dura que no es estética ──────────────────────────────────────

   El verde de marca NUNCA significa "éxito". El éxito es #2E7A4C; el lima es
   siempre SIA. Es para que nadie confunda "procesado por IA" con "aceptado
   por SUNAT" — en contabilidad esa confusión se paga.

   ── Modo oscuro ────────────────────────────────────────────────────────

   La línea es oscura por defecto con modo claro. El ERP (Yii) es claro y
   pasarlo entero a oscuro no es un cambio de tokens: son 555k líneas con
   colores escritos a mano en cientos de hojas. Así que aquí se declaran los
   DOS juegos —el oscuro tras `[data-theme="dark"]`— y el ERP usa el claro
   mientras tanto. Cuando una pantalla se migre de verdad a los tokens, el
   oscuro ya está listo y no hay que volver a decidirlo.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Marca ────────────────────────────────────────────────────────────
       Identidad, NO interfaz. Estos cinco tonos aparecen en el logo, en el
       filete de marca y en nada más. */
    --sian-verde: #62B32C;
    --sian-lima: #A8CC35;
    --sian-ambar: #F2C230;
    --sian-naranja: #F0901E;
    --sian-naranja-profundo: #E4661A;

    /* El filete de marca de 2px: cose cualquier franja teñida por módulo a
       la identidad SIAN. Es el único sitio donde el degradado completo toca
       una pantalla de trabajo. */
    --sian-gradiente-marca: linear-gradient(90deg, var(--sian-verde) 0%, var(--sian-lima) 28%, var(--sian-ambar) 55%, var(--sian-naranja) 78%, var(--sian-naranja-profundo) 100%);

    /* ── Interfaz ─────────────────────────────────────────────────────────
       «Azul y celeste —los tonos que el negocio lee como confianza—
       resolviendo hacia el verde SIAN.» De aquí sale todo lo que no es dato:
       filetes, acción, foco, enlaces y hover. */
    --sian-azul: #2F68A0;
    --sian-celeste: #3D97BE;
    --sian-transicion: #4E9B72;
    --sian-verde-ui: #5C8F3C;
    --sian-gradiente-ui: linear-gradient(90deg, var(--sian-azul) 0%, var(--sian-celeste) 38%, var(--sian-transicion) 72%, var(--sian-verde-ui) 100%);

    /* Acción primaria y selección, separadas a propósito: «selección ≠
       acción». Lo seleccionado lleva realce y filete celeste; el naranja de
       marca queda para el botón que HACE algo, y por eso no debe aparecer
       nunca marcando una fila o una pestaña activa.

       Dos tonos de acción, uno por modo: el naranja claro no llega a 4.5:1
       sobre fondo claro. No son una variante estética. */
    /* Los valores del documento, tal cual: `--btn`, `--btn-h`, `--btn-t`. Son
       los MISMOS en claro y en oscuro: el botón de acción no cambia de tono con
       el modo, cambia el fondo que tiene detrás.

       Aquí me equivoqué antes y conviene dejarlo escrito: leí `--pri` (#B84E12
       con texto blanco), que en el documento es el color de ACENTO para texto y
       filetes, y lo usé de relleno de botón. Salía un botón marrón oscuro que no
       se parecía a la línea. El relleno es `--btn`, naranja al 84%, y su rótulo
       va en tinta: sobre blanco da 9.00:1. El documento estaba bien. */
    --sian-accion: rgba(240, 144, 30, 0.84);
    --sian-accion-hover: rgba(242, 163, 63, 0.92);
    --sian-accion-texto: #1A0F02;
    --sian-seleccion: #1E7FA0;
    /* Anillo de foco: 3px al 18%, siempre visible. */
    --sian-foco: rgba(30, 127, 160, 0.18);

    /* ── Azul de tinta ────────────────────────────────────────────────────
       El fondo de las superficies de marca: panel del login, cabecera del
       hub, tile del ícono SIAN. Y el neutro al que cae un módulo que no
       trae color en base de datos. */
    --sian-tinta-azul: #1A4B7A;
    --sian-modulo-neutro: #12304F;
    /* Degradado del login: azul de tinta resolviendo a verde. Es el único
       sitio donde la marca ocupa media pantalla. */
    --sian-gradiente-ingreso: linear-gradient(135deg, #1A4B7A 0%, #22617E 42%, #2F7A63 78%, #3E8C52 100%);

    /* El botón de entrada, el único control con degradado de lado a lado. Es
       el valor del documento, literal, incluido el naranja del final.

       Queda dicho para quien lo audite: el rótulo va en blanco y sobre el
       extremo naranja mide 2.64:1. Es decisión tomada — la línea quiere ESE
       botón en el momento del acceso, y es un botón único, con una sola
       palabra, que nadie tiene que leer dos veces. No se toca sin decirlo. */
    --sian-gradiente-entrada: linear-gradient(90deg, #2F68A0, #3D97BE 46%, #E8873A);

    /* ── Vidrio ───────────────────────────────────────────────────────────
       Lo que hace legible una píldora sobre la franja teñida sin inventar un
       color por módulo: blanco translúcido con desenfoque. El realce (`-on`)
       es el estado seleccionado — más opaco, no de otro color. */
    --sian-vidrio: rgba(255, 255, 255, 0.17);
    --sian-vidrio-on: rgba(255, 255, 255, 0.30);
    --sian-vidrio-borde: rgba(255, 255, 255, 0.30);
    --sian-vidrio-borde-on: rgba(255, 255, 255, 0.44);
    --sian-vidrio-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 8px rgba(0, 0, 0, 0.22);
    --sian-vidrio-filtro: blur(12px) saturate(150%);

    /* ── SIA ─────────────────────────────────────────────────────────────
       Exclusivo de inteligencia. El lima al 35% es el borde de la burbuja de
       respuesta, al 55% el de los chips y filetes de herramienta. */
    --sian-sia: var(--sian-lima);
    --sian-sia-gradiente: linear-gradient(135deg, var(--sian-verde), var(--sian-lima));
    --sian-sia-35: rgba(168, 204, 53, 0.35);
    --sian-sia-55: rgba(168, 204, 53, 0.55);

    /* ── Neutros · claro (los que usa el ERP hoy) ─────────────────────── */
    --sian-fondo: #F5F7FA;
    --sian-superficie: #FFFFFF;
    --sian-superficie-elevada: #FFFFFF;
    --sian-fila-alterna: #EEF1F6;
    --sian-borde: #E3E8EF;
    --sian-texto: #1B1F26;
    --sian-texto-2: #5B6675;
    --sian-tinta: #0E1116;

    /* ── Estados de validación ────────────────────────────────────────────
       Cada uno con su fondo tenue para badges. «Ningún estado se comunica
       solo por color: color + etiqueta o icono.» */
    --sian-exito: #2E7A4C;
    --sian-exito-fondo: #E8F1EA;
    /* El ámbar de la línea es #C98209, y sobre su propio fondo da 2.86:1 —
       por debajo del 4.5 que la misma línea exige («nunca bajo 4.5:1 en datos
       de tabla»). Es una contradicción del documento, medida, no una opinión.
       Se baja a #A45F00: mismo matiz y mismo croma en OkLCh, 4.52:1 sobre el
       fondo del badge y 4.98:1 sobre superficie blanca.
       Un "pendiente" que no se lee no avisa de nada. */
    --sian-alerta: #A45F00;
    --sian-alerta-fondo: #FDF3E0;
    --sian-error: #C4362F;
    --sian-error-fondo: #FCEAE8;
    --sian-info: #2668C4;
    --sian-info-fondo: #E8F0FC;

    /* ── Tipografía ───────────────────────────────────────────────────────
       Plex Sans por las formas abiertas y el 1/l/I diferenciable, que en RUC,
       series y códigos no es un detalle. Plex Mono para todo lo que se
       compara en columna: importes, RUC, correlativos, kardex. */
    /* NEUTRA, y una sola para titulares y cuerpo: la jerarquia la hacen el
       tamano, el peso y el aire, no una segunda voz. IBM Plex Sans se diseno
       como tipografia corporativa de ingenieria —terminaciones planas, dibujo
       mecanico— y en un ERP que se lee todo el dia leia a laboratorio.

       Y sobre todo: esta hoja PEDIA Plex pero el ERP nunca la descargaba (solo
       lo hacen las plantillas de correo e impresion), asi que caia a Segoe UI
       mientras SIAN 2 si cargaba Plex. Las dos mitades se veian con tipografias
       distintas sin que nadie lo hubiera decidido. Ahora la carga SIANAssets::registerCoreCss. */
    --sian-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sian-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --sian-txt-modulo: 600 32px/38px var(--sian-sans);
    --sian-txt-pantalla: 600 24px/30px var(--sian-sans);
    --sian-txt-seccion: 600 18px/24px var(--sian-sans);
    --sian-txt-cuerpo: 400 15px/23px var(--sian-sans);
    --sian-txt-dato: 400 13px/20px var(--sian-sans);
    --sian-txt-columna: 500 11px/16px var(--sian-sans);
    --sian-txt-columna-espaciado: 0.12em;

    /* ── Espaciado, radios, elevación ─────────────────────────────────────
       Escala base 4. Cada paso tiene un uso declarado; si un margen no cae en
       uno de estos, casi siempre está mal medido. */
    --sian-e1: 4px;   /* interior de badge */
    --sian-e2: 8px;   /* label ↔ input */
    --sian-e3: 12px;  /* celda de tabla */
    --sian-e4: 16px;  /* entre campos */
    --sian-e6: 24px;  /* padding de card */
    --sian-e8: 32px;  /* entre bloques */
    --sian-e12: 48px; /* entre secciones */

    --sian-r-input: 4px;
    --sian-r-boton: 6px;
    --sian-r-card: 10px;
    --sian-r-badge: 9999px;

    --sian-sombra-1: 0 2px 8px rgba(8, 10, 14, 0.10);  /* dropdown */
    --sian-sombra-2: 0 12px 32px rgba(8, 10, 14, 0.18); /* modal */

    /* ── Densidad ─────────────────────────────────────────────────────────
       «La densidad es preferencia del usuario, no del módulo»: una sola
       opción global para todo SIAN. Por eso son variables y no medidas
       escritas en cada tabla. */
    --sian-fila-compacta: 32px;
    --sian-fila: 40px;
    --sian-control: 36px;

    /* ── Estructura de la barra y el pie ──────────────────────────────── */
    --sian-franja: 64px;
    --sian-filete: 2px;
    --sian-fila-menus: 44px;
    --sian-item-menu: 30px;
    --sian-pie: 56px;

    /* ── Panel de SIA ────────────────────────────────────────────────────
       432px cuando es dock de altura completa (el historial necesita aire y
       la tabla del módulo sigue visible); 372px acoplado dentro del módulo. */
    --sian-sia-panel: 432px;
    --sian-sia-panel-modulo: 372px;
}

/* ── Neutros · oscuro ──────────────────────────────────────────────────
   Solo cambian los neutros: la marca, la interfaz y los estados son los
   mismos tonos en los dos modos, que es lo que hace que un componente
   escrito con tokens funcione en ambos sin retocarlo.

   Se define bajo `[data-theme="dark"]` y NO bajo `prefers-color-scheme`: en
   un ERP el modo es una preferencia declarada del usuario (vive en su menú),
   no algo que decida el sistema operativo a media jornada. */
[data-theme="dark"] {
    --sian-fondo: #080A0E;
    --sian-superficie: #0E1116;
    --sian-superficie-elevada: #13171D;
    --sian-fila-alterna: #1B1F26;
    --sian-borde: #262B33;
    --sian-texto: #E6EAF2;
    --sian-texto-2: #97A3B6;
    --sian-tinta: #E6EAF2;

    /* Sobre fondo oscuro los estados necesitan subir luminosidad para
       mantener el 4.5:1, y sus fondos tenues pasan a ser veladuras del
       propio color en vez de pasteles. */
    --sian-exito: #86B68A;
    --sian-exito-fondo: rgba(134, 182, 138, 0.14);
    --sian-alerta: #E8B24A;
    --sian-alerta-fondo: rgba(232, 178, 74, 0.14);
    --sian-error: #D89A96;
    --sian-error-fondo: rgba(216, 154, 150, 0.14);
    --sian-info: #77BCD8;
    --sian-info-fondo: rgba(119, 188, 216, 0.14);

    /* Sobre oscuro el naranja de marca sí pasa AA, así que la acción usa el
       tono de marca tal cual y el texto va en tinta casi negra. */
    --sian-accion: rgba(240, 144, 30, 0.84);
    --sian-accion-hover: rgba(242, 163, 63, 0.92);
    --sian-accion-texto: #1A0F02;
    --sian-seleccion: #4FA8C6;
    --sian-foco: rgba(79, 168, 198, 0.18);

    --sian-sombra-1: 0 2px 8px rgba(0, 0, 0, 0.45);
    --sian-sombra-2: 0 12px 32px rgba(0, 0, 0, 0.6);
}