/* ============================================================
   SinergIA 180 — Tokens · Presentación Planta Extractora
   Territorio claro y ESCALA MONOCROMA AZUL.
   Regla: todo el color estructural sale de la escala azul.
   El único color no azul es --critico, y solo para alerta real.
   ============================================================ */
:root{
  /* --- Escala azul: de la tinta al lavado --- */
  --azul-900:#0A1F52;
  --azul-800:#12327A;
  --azul-700:#1A45A8;
  --azul-ia :#2158E8;    /* acento de marca */
  --azul-500:#4B7BEE;
  --azul-400:#7BA1F3;
  --azul-300:#A9C3F8;
  --azul-200:#D3E0FB;
  --azul-100:#EDF2FE;
  --azul-50 :#F5F8FE;

  /* Alias en uso por los componentes */
  --azul-claro:var(--azul-500);
  --lavado:var(--azul-100);
  --azul-soft:rgba(33,88,232,.07);
  --azul-line:rgba(33,88,232,.28);

  /* --- Base --- */
  --fondo:#FFFFFF;
  --papel:#F7F9FC;
  --superficie:#FFFFFF;
  --superficie-2:#F5F7FA;
  --linea:#E6EBF2;
  --linea-2:#D4DCE7;

  /* --- Texto --- */
  --texto:#0D1424;      /* tinta */
  --texto-2:#3D4A5C;
  --texto-3:#8A95A3;

  /* --- Estados: distinguidos por luminosidad, no por matiz --- */
  --ok:var(--azul-500);          --ok-bg:rgba(75,123,238,.09);
  --ok-txt:var(--azul-700);      /* azul-500 no llega a 4.5:1 como texto */
  --atencion:var(--azul-800);    --atencion-bg:rgba(18,50,122,.07);
  --critico:#C7263C;             --critico-bg:rgba(199,38,60,.06);

  /* --- Aluminio y cuerpo de los dispositivos --- */
  --alu-1:#E9ECF1;
  --alu-2:#CBD2DC;
  --alu-3:#AAB3C0;
  --alu-borde:#B9C1CD;

  /* --- Tipografía: stack del sistema, sin dependencias --- */
  --f-body:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
           'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono:ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* --- Métrica --- */
  --max:1140px;
  --pad:clamp(22px, 5vw, 56px);
  --rail:0px;        /* el riel lateral está oculto */
  --r:16px;
  --r-lg:22px;
  --gap:clamp(16px, 2vw, 24px);

  /* --- Sombras --- */
  --s-1:0 1px 2px rgba(13,20,36,.04), 0 8px 24px -14px rgba(13,20,36,.14);
  --s-2:0 2px 6px rgba(13,20,36,.05), 0 20px 44px -22px rgba(13,20,36,.20);
  --s-dev:0 4px 10px rgba(13,20,36,.06), 0 40px 70px -30px rgba(13,20,36,.34);

  /* --- Movimiento --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --salida:cubic-bezier(.16,1,.3,1);
  --t:.28s var(--ease);
}