/* tokens.css — Sistema visual de MATRIZ (docs/diseno/ux-app-v01.md, seccion 3).
   Tres capas: 1) primitivos (no se usan directo) 2) semanticos (los que usa el componente)
   3) marca (los que sobreescribe el tenant, via js/tenant.js).
   Regla dura: un componente SOLO consume capa 2 y capa 3. Nunca un hex literal en un componente. */

/* Tipografia propia, self-hosted (canon DARFU: sin CDN, sin build). Dos familias variables:
   - Fraunces: serif editorial contemporanea. Voz de marca de la plataforma: titulares y cifras.
     Optical sizing automatico -> en grande gana contraste de trazo (se siente "large"), en chico
     mantiene legibilidad. Es lo que separa "enterprise premium" de "herramienta barata".
   - Inter: sans de interfaz, el estandar de producto moderno. Etiquetas, cuerpo, numeros tabulares.
   woff2 latin, ~113KB las dos juntas. Licencia OFL. */
@font-face{
  font-family:'Fraunces'; src:url('../assets/fonts/fraunces.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'InterVar'; src:url('../assets/fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* ============================================================ */
  /* CAPA 2: SEMANTICOS — tema Papel (claro, canon)                */
  /* Reparacion estructural (docs/diseno/tema-y-neumorphism-v1.md, seccion 0/2): --paper se define */
  /* SIEMPRE contra una base fija de este tema (#FCF9F4) y el tenant solo empuja el matiz un 2.5%  */
  /* via color-mix(). Un tenant no puede aclarar/oscurecer el papel mas alla de eso: el split      */
  /* "papel de dia + tinta de noche" queda imposible por construccion, no por vigilancia.          */
  /* ============================================================ */
  --paper:      color-mix(in srgb, var(--marca) 2.5%, #FCF9F4);
  --paper-2:    #F1EBE1;
  --surface:    #FFFFFF;
  --line:       #E8DFD2;
  --line-fuerte:#CDBEAC;

  --ink:        #1C1517;
  --ink-2:      #574B46;
  /* --ink-3 ajustado (2026-07-25): el valor del doc (#786C65) daba 4.68:1 sobre --paper pero
     caia bajo 4.5 sobre --paper-2 (4.29:1) y --superficie-neu (4.10:1): un texto real (kicker,
     pie del sidebar, nota del sparkline) quedaba bajo AA en esas superficies hundidas/neu. Se
     oscurece un paso (misma tonalidad) hasta pasar AA contra la mas oscura de las tres
     (--superficie-neu): asi queda >=4.5:1 en las tres a la vez, sin tocar cada componente. */
  --ink-3:      #6E635D;
  --ink-inv:    #FFFFFF;

  /* CAPA 3: MARCA (defaults; js/tenant.js los sobreescribe por tenant, derivando por contraste) */
  --marca:        #F5382B;
  --marca-accion: #E02A1D;  /* fondo de boton con texto blanco: 4.65:1, AA */
  --marca-ink:    #C82A20;  /* coral como texto sobre el papel: 5.08:1, AA */
  --marca-tenue:  color-mix(in srgb, var(--marca) 8%, var(--paper));
  --font-marca:   'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;

  /* Paleta de datos: colorblind-safe (Okabe-Ito), INDEPENDIENTE de la marca (regla D2).
     Ningun dato se pinta jamas con --marca. */
  --dato-1: #0072B2;  --dato-1-ink: #005B8F;
  --dato-2: #E69F00;  --dato-2-ink: #8A5A00;
  --dato-3: #009E73;  --dato-3-ink: #00674B;
  --dato-4: #CC79A7;  --dato-4-ink: #93446F;
  --dato-5: #56B4E9;  --dato-5-ink: #2A6E92;
  --dato-resto: #7A6E68;

  --pos:            #14714B;
  --neg:            #8A2B2B;
  --neutro-fuerte:  #4A3F3A;
  --neutro-medio:   #8B7B71;
  --neutro-suave:   #C3B4A7;

  /* Fase 3.15 (docs/diseno/precio-y-alerta-margen-v1.md, seccion 7): tercer estado semantico de
     resultado, "te deja poco". Ambar Okabe-Ito, colorblind-safe. SIEMPRE acompanado de posicion
     (tick del objetivo en el termometro) + palabra: nunca color solo (regla D2/3.7). */
  --flaco:     #D98324;   /* relleno de barra ambar (mismo tono que --urg-corto / --dato-2) */
  --flaco-ink: #8A5A00;   /* ambar como texto sobre papel: AA (mismo que --dato-2-ink) */

  --urg-vencido: #6E1B14;
  --urg-hoy:     #A63A16;
  --urg-corto:   #D98324;
  --urg-largo:   #E9C46A;

  /* Tipografia */
  --font-sis:  'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-num:  var(--font-sis);

  --t-portada:  clamp(44px, 13vw, 88px);
  --t-portada-media: clamp(36px, 10.5vw, 72px);
  --t-portada-larga: clamp(30px, 8.5vw, 60px);
  --t-cifra:    clamp(28px, 7.5vw, 38px);
  --t-titulo:   24px;
  --t-lede:     17px;
  --t-cuerpo:   15px;
  --t-dato:     15px;
  --t-etiqueta: 12.5px;
  --t-kicker:   11px;
  --t-micro:    11.5px;

  /* Espacio, medida, radios */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:80px;

  --margen-movil: 18px;
  --col-narrativa: 680px;
  --ancho-maximo: 1180px;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* Elevacion: casi no hay. */
  --sombra-hoja: 0 -8px 32px rgba(30,20,22,.18);
  --sombra-mano: 0 -1px 0 var(--line), 0 -10px 28px rgba(30,20,22,.07);

  /* ============================================================ */
  /* NEUMORPHISM — capa tactil, solo Papel (docs/diseno/tema-y-neumorphism-v1.md, seccion 6).     */
  /* Acento, no base: SOLO en lo que se toca (hero de cifra, barra de mano, boton primario,       */
  /* segmentado, toggle de tema, medidor del CAI). Nada de esto en texto, tablas ni dataviz fina. */
  /* ============================================================ */
  --superficie-neu: #EDE6DB;   /* plano tactil: mismo tono para pieza y contenedor */
  --neu-luz:    #FCF8F2;       /* highlight arriba-izquierda */
  --neu-sombra: #D2C6B4;       /* sombra abajo-derecha */

  /* EXTRUIDO (sobresale) — reposo */
  --sombra-neu-alta:  6px 6px 14px var(--neu-sombra), -6px -6px 14px var(--neu-luz); /* tarjeta KPI/hero */
  --sombra-neu-media: 4px 4px 9px  var(--neu-sombra), -4px -4px 9px  var(--neu-luz); /* botones, thumb */

  /* HUNDIDO (presionado / well) — activo */
  --sombra-neu-inset:       inset 4px 4px 9px var(--neu-sombra), inset -4px -4px 9px var(--neu-luz);
  --sombra-neu-inset-suave: inset 3px 3px 6px var(--neu-sombra), inset -3px -3px 6px var(--neu-luz); /* track segmentado, gauge */

  /* boton PRIMARIO (coral): neumorphism "de color", sombras derivadas del coral, no del plano */
  --sombra-marca-alta:  -3px -3px 7px rgba(255,255,255,.30), 3px 3px 8px rgba(130,20,15,.40);
  --sombra-marca-inset: inset 2px 2px 6px rgba(130,20,15,.55), inset -2px -2px 6px rgba(255,255,255,.18);

  /* anillo de foco que SOBREVIVE al neumorphism (seccion 8): un aro del propio plano (3px) que
     separa del relieve + un aro solido de tinta (2px) imposible de perder. Se SUMA al box-shadow
     de reposo en :focus-visible, nunca lo reemplaza. */
  --anillo-foco: #1C1517;
  --sombra-foco-neu: 0 0 0 3px var(--superficie-neu), 0 0 0 5px var(--anillo-foco);

  /* Movimiento */
  --mo-tacto:  120ms;
  --mo-rapido: 180ms;
  --mo-base:   260ms;
  --mo-dato:   620ms;
  --mo-escalon: 45ms;

  --e-entrada: cubic-bezier(0, 0, .2, 1);
  --e-salida:  cubic-bezier(.4, 0, 1, 1);
  --e-suave:   cubic-bezier(.2, .8, .2, 1);
  --e-dato:    cubic-bezier(.16, 1, .3, 1);

  /* ============================================================ */
  /* Cara de escritorio (2B): workspace ERP. Debajo de --bp-workspace,   */
  /* estos tokens no se usan: la cara movil (2.2) queda intacta.        */
  /* ============================================================ */
  --sidebar-w:         248px;
  --sidebar-w-compact: 208px;
  --topbar-h:          64px;
  --ws-pad:            28px;   /* padding del area de trabajo (24px en compacto) */
  --ws-pad-compact:    24px;
  --ws-gutter:         20px;   /* gutter del grid (--sp-5) */
  --ws-max:            1560px; /* ancho maximo del area en pantallas amplias */
  --panel-pad:         20px;
  --panel-radio:       14px;
  --bp-workspace:      1000px; /* aca muere la barra de mano y entra el shell */
  --bp-ws-pleno:       1280px; /* aca el grid pasa de 8 a 12 columnas */
  --bp-ws-amplio:      1728px;
}

/* CAPA 2: tema Noche (oscuro), repensada (docs/diseno/tema-y-neumorphism-v1.md, seccion 3). No es
   "Papel invertido": fondo carbon tibio (no gris azulado), tinta crema (no blanco puro), y el
   coral rinde distinto como fondo de boton (--marca-accion, corregido a AA) que como texto
   (--marca-ink, ya rinde pleno sobre carbon). El atributo data-tema (siempre concreto, estampado
   en <head> antes del primer paint) es la UNICA fuente de verdad: este bloque es la unica logica
   que decide "es de noche", nadie mas vuelve a consultar prefers-color-scheme. */
[data-tema="noche"]{
  /* --- superficies (Noche) --- */
  --paper:       color-mix(in srgb, var(--marca) 5%, #100C0B);
  --paper-2:     #1B1614;
  --surface:     #221C19;
  --line:        #342B26;
  --line-fuerte: #4B3F38;

  /* --- tinta (Noche) --- */
  --ink:     #F5EFE8;
  --ink-2:   #C4B7AE;
  --ink-3:   #9C8F87;
  --ink-inv: #12100F;

  /* --- marca (Noche) --- */
  --marca:        #F5382B;
  --marca-accion: #E22A1C;  /* CORRECCION AA: blanco sobre coral puro da 3.83:1 (falla); esto da 4.58:1 */
  --marca-ink:    #F5382B;  /* coral pleno como texto sobre carbon: 4.95:1, AA */
  --marca-tenue:  color-mix(in srgb, var(--marca) 16%, var(--paper));

  /* --- dataviz: los *-ink son version CLARA para texto sobre carbon (seccion 5). Los rellenos
     categoricos (--dato-1..5) se aclaran un punto para separarse del carbon; siguen Okabe-Ito. --- */
  --dato-1:#3B9BD6; --dato-1-ink:#7FC1E8;
  --dato-2:#F0B44A; --dato-2-ink:#F3C570;
  --dato-3:#2DBE93; --dato-3-ink:#5FD3B0;
  --dato-4:#DD9AC1; --dato-4-ink:#E9B7D5;
  --dato-5:#7AC7F2; --dato-5-ink:#A6D9F6;
  --dato-resto:#9C8F87;
  --pos:#46B98A; --neg:#EB6A5E;
  --neutro-fuerte:#D8CBC0; --neutro-medio:#A8988C; --neutro-suave:#6E615A;
  --urg-vencido:#F07A6B; --urg-hoy:#F0A05A; --urg-corto:#E9C46A; --urg-largo:#B8974A;
  --flaco:     #E9A64A;
  --flaco-ink: #F0B44A;   /* ambar como texto sobre carbon: legible, mismo criterio que --marca-ink */

  /* --- neumorphism (Noche, seccion 6.3): mismas composiciones de :root, solo cambian los
     colores. El resalte es luz tibia MUY sutil (no blanca); la sombra es casi negra. --- */
  --superficie-neu: #1E1917;
  --neu-luz:    #2A2320;
  --neu-sombra: #080706;

  --sombra-marca-alta:  -3px -3px 7px rgba(255,120,110,.10), 3px 3px 9px rgba(0,0,0,.55);
  --sombra-marca-inset: inset 2px 2px 6px rgba(0,0,0,.60), inset -2px -2px 6px rgba(255,140,130,.10);

  --anillo-foco: #F5EFE8;
}

/* Red de seguridad SOLO para "JS totalmente apagado" (sin el script de <head> que estampa
   data-tema, este selector jamas gana: :root SIEMPRE trae el atributo). Copia exacta del bloque
   de arriba, calificada para no poder pelearse nunca con el atributo concreto. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema]){
    --paper:       color-mix(in srgb, var(--marca) 5%, #100C0B);
    --paper-2:     #1B1614;
    --surface:     #221C19;
    --line:        #342B26;
    --line-fuerte: #4B3F38;
    --ink:     #F5EFE8;
    --ink-2:   #C4B7AE;
    --ink-3:   #9C8F87;
    --ink-inv: #12100F;
    --marca:        #F5382B;
    --marca-accion: #E22A1C;
    --marca-ink:    #F5382B;
    --marca-tenue:  color-mix(in srgb, var(--marca) 16%, var(--paper));
    --dato-1:#3B9BD6; --dato-1-ink:#7FC1E8;
    --dato-2:#F0B44A; --dato-2-ink:#F3C570;
    --dato-3:#2DBE93; --dato-3-ink:#5FD3B0;
    --dato-4:#DD9AC1; --dato-4-ink:#E9B7D5;
    --dato-5:#7AC7F2; --dato-5-ink:#A6D9F6;
    --dato-resto:#9C8F87;
    --pos:#46B98A; --neg:#EB6A5E;
    --neutro-fuerte:#D8CBC0; --neutro-medio:#A8988C; --neutro-suave:#6E615A;
    --urg-vencido:#F07A6B; --urg-hoy:#F0A05A; --urg-corto:#E9C46A; --urg-largo:#B8974A;
    --flaco:#E9A64A; --flaco-ink:#F0B44A;
    --superficie-neu: #1E1917;
    --neu-luz:    #2A2320;
    --neu-sombra: #080706;
    --sombra-marca-alta:  -3px -3px 7px rgba(255,120,110,.10), 3px 3px 9px rgba(0,0,0,.55);
    --sombra-marca-inset: inset 2px 2px 6px rgba(0,0,0,.60), inset -2px -2px 6px rgba(255,140,130,.10);
    --anillo-foco: #F5EFE8;
  }
}

/* Modo alto contraste: interruptor en Ajustes + automatico con prefers-contrast:more (6.1). */
:root[data-alto-contraste="1"]{
  --paper:#FFFFFF; --ink:#000000; --line-fuerte:#000000;
}
@media (prefers-contrast: more){
  :root:not([data-alto-contraste="0"]){ --paper:#FFFFFF; --ink:#000000; }
}

@media (prefers-reduced-motion: reduce){
  :root{ --mo-tacto:0ms; --mo-rapido:0ms; --mo-base:0ms; --mo-dato:0ms; --mo-escalon:0ms; }
}