/* ==========================================================================
   Ecuaquímica · Dashboard — tokens del rediseño (Phase 2)

   Qué es: la paleta y los tokens semánticos del rediseño (riel fijo de 64 px con
   degradado azul #002e76 → teal #1f6764, flyout, insignias y pestañas de sección).

   Regla: los colores nuevos viven SOLO aquí, dentro de la capa «tokens». Ningún
   componente escribe un hex suelto.

   Convivencia: las variables del CSS actual (--verde, --azul, --teal, --bg, --ink,
   --line, --gris, --blue, --yellow) siguen en estilos.css (capa «legado») hasta
   la Phase 5/6. Este archivo NO las redefine.

   Medición: node dashboard/app/scripts/contraste.mjs   (sale 1 si algún par rompe AA)
   Informe:  docs/rediseno/06-contraste-medido.md        (generado con --informe)
   Los comentarios con razones son la peor razón medida por ese script.
   CSP del dashboard: style-src 'self' -> todo en hoja externa, cero style="".
   ========================================================================== */
@layer tokens{

/* --------------------------------------------------------------------------
   1. PRIMITIVOS — la paleta cruda. No se usan directo en componentes.
   -------------------------------------------------------------------------- */
:root{
  /* Verde marca (#008259 = --color-1 de ecuaquimica.com.ec) */
  --eq-verde-50:#e8f4ef;
  --eq-verde-100:#dcf2e8;
  --eq-verde-300:#3ccf95;   /* solo no-texto sobre oscuro: filete activo, foco */
  --eq-verde-500:#008259;   /* blanco encima 4.84 · como TEXTO solo sobre #fff puro */
  --eq-verde-600:#006f4c;   /* texto verde sobre gris/tintes; hover del primario */
  --eq-verde-700:#005c3f;
  --eq-verde-800:#00492f;

  /* Azul marca */
  --eq-azul-50:#e8eef8;
  --eq-azul-75:#dbe5f3;     /* texto secundario sobre el riel azul→teal */
  --eq-azul-100:#e5edf9;
  --eq-azul-300:#9fb4d8;
  --eq-azul-400:#2f6fd0;    /* solo no-texto (borde de alerta info) */
  --eq-azul-500:#002e76;
  --eq-azul-450:#12428c;    /* ítem activo de la barra lateral */
  --eq-azul-475:#0b3a83;    /* hover de la barra lateral */
  --eq-azul-600:#00265f;

  /* Teal marca */
  --eq-teal-50:#ddefed;
  --eq-teal-500:#1f6764;
  --eq-teal-700:#165552;

  /* Puente del degradado del logo (#00815c -> #1f376a medidos en logo.png) */
  --eq-puente:#00577a;

  /* Neutros (tinte frío del texto #14202b) */
  --eq-gris-0:#ffffff;
  --eq-gris-25:#f7f8f8;
  --eq-gris-40:#f4f6f5;
  --eq-gris-50:#f2f2f2;     /* fondo del sitio */
  --eq-gris-100:#e8eaea;
  --eq-gris-150:#e6eae8;
  --eq-gris-200:#dfe4e2;
  --eq-gris-300:#c9d0ce;
  --eq-gris-500:#7d8a94;    /* borde de campo: 3.54 sobre blanco */
  --eq-gris-550:#6b7680;    /* placeholder: 4.64 */
  --eq-gris-600:#5a6672;
  --eq-gris-700:#4b5763;
  --eq-gris-900:#14202b;

  /* Estados */
  --eq-rojo-50:#fdecea;
  --eq-rojo-500:#b3261e;
  --eq-rojo-600:#921d17;
  --eq-rojo-700:#8e1c16;
  --eq-ambar-50:#fff6e0;
  --eq-ambar-100:#fff1c7;
  --eq-ambar-500:#c98a00;   /* solo no-texto */
  --eq-ambar-800:#6b4400;
  --eq-violeta-50:#efe8fb;
  --eq-violeta-700:#553291;
}

/* --------------------------------------------------------------------------
   2. SEMÁNTICOS — lo que usan los componentes.
   -------------------------------------------------------------------------- */
:root{
  /* Superficies */
  --sup-app:var(--eq-gris-50);          /* fondo de página */
  --sup:var(--eq-gris-0);               /* tarjetas, tablas, modales */
  --sup-2:var(--eq-gris-25);            /* bloques secundarios dentro de tarjeta */
  --sup-hundida:var(--eq-gris-100);     /* inputs deshabilitados, pistas */
  --sup-hover:#f3f8f6;                  /* hover de fila / ítem (verde 4%) */
  --sup-resalte:#fff6dc;                /* fila "pendiente" */

  /* Texto */
  --tx:var(--eq-gris-900);              /* 16.52 blanco · 14.76 gris */
  --tx-2:var(--eq-gris-600);            /* 5.87 blanco · 5.24 gris */
  --tx-3:var(--eq-gris-550);            /* placeholder, metadatos chicos */
  --tx-enlace:var(--eq-azul-500);
  --tx-marca:var(--eq-verde-600);       /* verde como texto: NUNCA #008259 sobre gris (4.32) */
  --tx-titulo:var(--eq-azul-500);
  --tx-invertido:#ffffff;

  /* Bordes */
  --borde:var(--eq-gris-200);
  --borde-suave:var(--eq-gris-150);
  --borde-fuerte:var(--eq-gris-300);
  --borde-campo:var(--eq-gris-500);     /* 1.4.11: hoy #cfcfc8 = 1.5, falla */

  /* Primario (acciones) */
  --pri:var(--eq-verde-500);
  --pri-hover:var(--eq-verde-600);      /* reemplaza filter:brightness(1.08) que aclara a 4.27 */
  --pri-activo:var(--eq-verde-700);
  --pri-suave:var(--eq-verde-50);
  --sobre-pri:#ffffff;

  /* Acento (navegación, títulos, secundario) */
  --acento:var(--eq-azul-500);
  --acento-suave:var(--eq-azul-50);
  --sobre-acento:#ffffff;

  /* Peligro */
  --peligro:var(--eq-rojo-500);
  --peligro-hover:var(--eq-rojo-600);
  --sobre-peligro:#ffffff;

  /* Alertas (fondo / texto / borde izquierdo) */
  --ok-fondo:var(--eq-verde-50);     --ok-tx:var(--eq-verde-800);  --ok-borde:var(--eq-verde-500);
  --aviso-fondo:var(--eq-ambar-50);  --aviso-tx:var(--eq-ambar-800); --aviso-borde:var(--eq-ambar-500);
  --error-fondo:var(--eq-rojo-50);   --error-tx:var(--eq-rojo-700); --error-borde:var(--eq-rojo-500);
  --info-fondo:var(--eq-azul-50);    --info-tx:var(--eq-azul-500); --info-borde:var(--eq-azul-400);

  /* Chips de etapa del lead (fondo / texto / punto) */
  --et-nuevo-f:var(--eq-ambar-100);     --et-nuevo-t:var(--eq-ambar-800);  --et-nuevo-p:#e0a100;
  --et-contactado-f:var(--eq-azul-100); --et-contactado-t:#123e86;          --et-contactado-p:var(--eq-azul-400);
  --et-seguimiento-f:var(--eq-teal-50); --et-seguimiento-t:var(--eq-teal-700); --et-seguimiento-p:#1f8a84;
  --et-cotizado-f:var(--eq-violeta-50); --et-cotizado-t:var(--eq-violeta-700); --et-cotizado-p:#7c4dcc;
  --et-ganado-f:var(--eq-verde-100);    --et-ganado-t:var(--eq-verde-700); --et-ganado-p:var(--eq-verde-500);
  --et-perdido-f:var(--eq-rojo-50);     --et-perdido-t:#9f2019;             --et-perdido-p:#d1352b;
  --et-noresponde-f:#eceef0;            --et-noresponde-t:var(--eq-gris-700); --et-noresponde-p:#8a959e;

  /* KPI */
  --kpi-num:var(--eq-azul-500);
  --kpi-sube:var(--eq-verde-600);
  --kpi-baja:var(--eq-rojo-500);

  /* Tabla */
  --th-fondo:var(--eq-gris-40);
  --th-tx:var(--eq-gris-700);           /* 6.81 */

  /* Foco visible (2.4.7 / 2.4.11) */
  --foco:var(--eq-azul-500);            /* sobre claro: 12.71 */
  --foco-oscuro:#7fdcb4;                /* sobre la barra azul: 7.75 */
  --foco-ancho:3px;
  --foco-sep:2px;

  /* Marca: franja y banner */
  --franja:linear-gradient(90deg,var(--eq-verde-500),var(--eq-azul-500));
  --hero:linear-gradient(120deg,var(--eq-verde-600) 0%,var(--eq-puente) 55%,var(--eq-azul-500) 100%);
  --hero-sub:#e6f2ee;                   /* 5.42 en el punto más claro (#006f4c) */

  /* Forma, sombra, espacio, tipo */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --sombra-1:0 1px 2px rgba(20,32,43,.05),0 1px 1px rgba(20,32,43,.03);
  --sombra-2:0 1px 2px rgba(20,32,43,.05),0 6px 16px -4px rgba(20,32,43,.08),0 18px 40px -16px rgba(0,46,118,.14);
  --sombra-hero:0 18px 40px -18px rgba(0,46,118,.55);
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px;
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --t-chico:12px; --t-base:14px; --t-med:15px; --t-h2:17px; --t-h1:24px; --t-kpi:28px;

  /* Shell: riel fijo, sin barra lateral desplegable */
  --riel-ancho:64px;
  --topbar-alto:60px;
  --transicion:.28s cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   3. RIEL (decisión azul→teal) — paradas bloqueadas: #002e76 arriba, #1f6764 abajo.
      Las correcciones de contraste van en texto, ícono y superposición, nunca aquí.
   -------------------------------------------------------------------------- */
:root{
  --riel-fondo:linear-gradient(180deg,var(--eq-azul-500) 0%,var(--eq-teal-500) 100%); /* blanco: 12.71 arriba · 6.60 abajo */
  --riel-tx:var(--eq-gris-0);            /* 6.60 peor punto: teal 100 % */
  --riel-tx-2:var(--eq-azul-75);         /* 5.19 peor punto: teal 100 % (#9fb4d8 daba 3.14) */
  --riel-icono:var(--eq-gris-0);         /* 6.60 · 5.02 con hover · 4.59 con activo; peor: teal 100 % */
  --riel-hover:rgba(255,255,255,.12);    /* blanco encima 5.02 peor punto: teal 100 % */
  --riel-activo:rgba(255,255,255,.16);   /* blanco encima 4.59 peor punto: teal 100 % (#ffffff2b daba 4.47) */
  --riel-filete:var(--eq-verde-300);     /* 3.32 peor punto: teal 100 % (no-texto) */
  --riel-foco:var(--eq-gris-0);          /* 6.60 peor punto: teal 100 % (#7fdcb4 daba 4.02) */
}

/* --------------------------------------------------------------------------
   4. INSIGNIAS (contador sobre el riel)
   -------------------------------------------------------------------------- */
:root{
  --insignia-fondo:var(--eq-rojo-500);   /* blanco encima 6.54; contra el riel solo 1.01: lo separa el anillo */
  --insignia-tx:var(--eq-gris-0);        /* 6.54 sobre --insignia-fondo (#d33 daba 4.57) */
  --insignia-anillo:var(--eq-gris-0);    /* 2 px; 6.60 contra el riel (teal 100 %) · 6.54 contra la insignia */
}

/* --------------------------------------------------------------------------
   5. FLYOUT (tarjeta blanca junto al riel)
   -------------------------------------------------------------------------- */
:root{
  --flyout-fondo:var(--sup);
  --flyout-borde:var(--borde);           /* decorativo: la tarjeta se separa por la sombra */
  --flyout-tx:var(--tx);                 /* 16.52 */
  --flyout-rotulo:var(--tx-2);           /* 5.87 (#7a8a88 de la muestra daba 3.61) */
  --flyout-hover:var(--pri-suave);       /* fondo del enlace en hover */
  --flyout-hover-tx:var(--tx-marca);     /* 5.51 sobre --flyout-hover (#008259 sobre #e8f3ef daba 4.27) */
  --flyout-sombra:0 8px 28px rgba(20,32,43,.20);
  --cuenta-fondo:var(--pri);             /* 4.84 contra la tarjeta (no-texto) */
  --cuenta-tx:var(--sobre-pri);          /* 4.84 */
}

/* --------------------------------------------------------------------------
   6. PESTAÑAS DE SECCIÓN
   -------------------------------------------------------------------------- */
:root{
  --pestana-tx:var(--tx-2);              /* 5.24 peor: sobre --sup-app */
  --pestana-activa-tx:var(--tx-marca);   /* 5.55 peor: sobre --sup-app */
  --pestana-activa-borde:var(--pri);     /* 4.32 sobre --sup-app (no-texto) */
  --pestana-linea:var(--borde);          /* decorativa: no se mide */
}

}