/* NIVA OS — base visual compartida (rediseño 2026-10).
   Capas: 1) primitivos (valores crudos), 2) semánticos (para qué se usa cada color),
   3) componentes pequeños reutilizables. Las páginas solo deben usar los semánticos. */
:root{
  /* 1 · primitivos */
  --n-950:#0a1526; --n-900:#0f1e36; --n-800:#1B2A4A; --n-700:#2a3d63; --n-600:#3d5482;
  --g-600:#a8872f; --g-500:#C9A84C; --g-400:#dcc175; --g-100:#f6efd9;
  --s-0:#ffffff; --s-25:#fbfaf7; --s-50:#f5f4f0; --s-100:#ecebe6; --s-200:#dedcd4; --s-300:#c9c7bf;
  --s-500:#7d8290; --s-600:#5a6170; --s-700:#3b4252; --s-900:#151c2b;

  /* 2 · semánticos (tema claro: CRM y Arranca tu día) */
  --ui-bg:var(--s-50);
  --ui-surface:var(--s-0);
  --ui-surface-2:var(--s-25);
  --ui-sunken:var(--s-100);
  --ui-line:var(--s-200);
  --ui-line-strong:var(--s-300);
  --ui-text:var(--s-900);
  --ui-text-2:var(--s-600);
  --ui-text-3:var(--s-500);
  --ui-brand:var(--n-800);
  --ui-brand-deep:var(--n-900);
  --ui-accent:var(--g-500);
  --ui-accent-soft:var(--g-100);
  --ui-focus:var(--g-500);

  /* etapas del lead (mismo significado en todas las pantallas) */
  --st-new:#2b56c7;      --st-new-bg:#e8eefb;
  --st-active:#1a7a45;   --st-active-bg:#e5f3eb;
  --st-warm:#9a6410;     --st-warm-bg:#fbf0dc;
  --st-closed:#5a6170;   --st-closed-bg:#eceef1;
  --danger:#b42318;      --danger-bg:#fdecea;
  --wa:#128C4A;          --wa-bg:#e6f5ec;      /* verde WhatsApp con contraste AA sobre blanco */

  /* forma y profundidad */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,30,54,.06);
  --sh-2:0 1px 2px rgba(15,30,54,.05),0 6px 18px rgba(15,30,54,.07);
  --sh-3:0 18px 48px rgba(10,21,38,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* 3 · comunes */
:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.num-tab{font-variant-numeric:tabular-nums}
.ui-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ui-ico{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

html.oscuro:not(.claro){
  --s-0:rgba(22,40,72,.80); --s-25:rgba(255,255,255,.05); --s-50:transparent; --s-100:rgba(0,0,0,.22);
  --s-200:rgba(255,255,255,.12); --s-300:rgba(255,255,255,.22);
  --s-500:rgba(255,255,255,.55); --s-600:rgba(255,255,255,.72); --s-700:rgba(255,255,255,.82); --s-900:#F2F5FA;
  --g-100:rgba(201,168,76,.14);
  --ui-brand:#4F78CC; --ui-focus:#E8C96A;
  --st-new:#8FB0FF;    --st-new-bg:rgba(90,130,230,.18);
  --st-active:#5FD39A; --st-active-bg:rgba(60,190,120,.16);
  --st-warm:#F2C46B;   --st-warm-bg:rgba(230,170,60,.16);
  --st-closed:#B4BCCB; --st-closed-bg:rgba(255,255,255,.08);
  --danger:#FF8A80;    --danger-bg:rgba(240,80,70,.16);
  --wa:#3DDC84;        --wa-bg:rgba(37,211,102,.14);
  --sh-1:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px -16px rgba(0,0,0,.8);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 34px -18px rgba(0,0,0,.85);
  color-scheme:dark;
}
html.oscuro:not(.claro) input,html.oscuro:not(.claro) select,html.oscuro:not(.claro) textarea{color:#F2F5FA}
html.oscuro:not(.claro) input::placeholder,html.oscuro:not(.claro) textarea::placeholder{color:rgba(255,255,255,.4)}
html.oscuro:not(.claro) select option{background:#13233f; color:#F2F5FA}