/* ============================================================================
   myvigia — Design tokens · Sistema "Atalaya" v2
   ----------------------------------------------------------------------------
   Fuente de verdad visual: DESIGN_BRIEF_MYVIGIA.md. Arquitectura en 4 capas:

     1. PRIMITIVOS   rampas de color crudas (único lugar con hex literales)
     2. SEMÁNTICOS   tokens de uso (light) — superficies, texto, marca, estado
     3. DARK         override completo bajo [data-theme="dark"]
     4. COMPAT       alias del sistema anterior (--bsc-*, --surface-0, etc.)

   El branding es POR TENANT: base.html inyecta --brand y --accent con los
   colores del tenant. Todos los derivados de marca (hover, tint, focus ring)
   se calculan con color-mix sobre --brand/--accent, así el re-skin es total
   con solo dos variables. Default del producto: Iris (--iris-500).
   Regla: CERO hex crudo fuera de la capa 1.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400..700&display=swap");

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 1 — PRIMITIVOS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --white: #FFFFFF;
  --black: #000000;

  /* Neutros light — cool gray, undertone azul */
  --gray-25:  #FBFBFD;   /* canvas */
  --gray-50:  #F6F7F9;   /* zonas hundidas */
  --gray-100: #EEF0F3;   /* hover de filas */
  --gray-150: #EBECF0;   /* hairline */
  --gray-200: #DDE0E6;   /* divisor fuerte */
  --gray-400: #9AA1AD;   /* placeholder */
  --gray-500: #6B7280;   /* secundario */
  --gray-700: #3A3F4B;   /* cuerpo */
  --gray-900: #12141A;   /* títulos */

  /* Neutros dark — dark-first, no un invert */
  --dusk-950: #0B0D12;   /* canvas */
  --dusk-900: #12151C;   /* surface */
  --dusk-850: #171B23;   /* surface-2 */
  --dusk-800: #1E2330;   /* surface-3 */
  --dusk-700: #242833;   /* hairline */
  --dusk-600: #2F3441;   /* divisor fuerte */
  --dusk-500: #5E6470;   /* subtle */
  --dusk-400: #8B919D;   /* muted */
  --dusk-200: #C6CAD3;   /* cuerpo */
  --dusk-50:  #F5F6F8;   /* títulos */

  /* Iris — marca myvigia (acento único, periwinkle-indigo) */
  --iris-50:  #EEF0FE;
  --iris-100: #E0E3FD;
  --iris-200: #C4C9FB;
  --iris-300: #A0A7F8;
  --iris-400: #7C83F6;
  --iris-500: #5B62F4;   /* primario */
  --iris-600: #464DE0;   /* hover */
  --iris-700: #3A40C2;   /* texto-link sobre claro */
  --iris-800: #2F34A0;
  --iris-900: #262A7D;

  /* Pulso — señal de tiempo real / vigilancia en vivo (uso exclusivo) */
  --pulse-400: #34D6EC;
  --pulse-500: #16C1DC;
  --pulse-600: #0EA5C4;

  /* Semánticos base */
  --green-600: #15803D;  /* fg AA sobre tinte claro */
  --green-500: #16A34A;
  --green-400: #22C55E;  /* variante dark */
  --green-50:  #E9F7EF;

  --rose-600:  #BE123C;  /* fg AA sobre tinte claro */
  --rose-500:  #E11D48;
  --rose-400:  #FB5474;  /* variante dark */
  --rose-50:   #FCEBEF;

  --amber-600: #B45309;  /* fg AA sobre tinte claro */
  --amber-500: #D97706;
  --amber-400: #F5A524;  /* variante dark */
  --amber-50:  #FDF2E3;

  --blue-600:  #0B6BB5;  /* fg AA sobre tinte claro */
  --blue-500:  #0F7DD4;
  --blue-400:  #45B0F5;  /* variante dark */
  --blue-50:   #E8F3FC;

  /* Paleta categórica para data-viz (series secundarias) */
  --chart-violet: #8B5CF6;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 2 — SEMÁNTICOS (light)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Marca (el tenant sobreescribe --brand/--accent en base.html) ── */
  --brand:  var(--iris-500);
  --accent: var(--pulse-500);

  /* Derivados de marca — calculados, sobreviven al re-skin por tenant */
  --brand-hover:       color-mix(in srgb, var(--brand) 86%, var(--black));
  --brand-active:      color-mix(in srgb, var(--brand) 76%, var(--black));
  --brand-tint:        color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-tint-strong: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-text:        color-mix(in srgb, var(--brand) 82%, var(--black));
  --on-brand:          var(--white);
  --accent-bg:         color-mix(in srgb, var(--accent) 10%, transparent);

  /* ── Superficies y bordes ── */
  --canvas:        var(--gray-25);
  --surface:       var(--white);
  --surface-2:     var(--gray-50);
  --surface-3:     var(--gray-100);
  --border:        var(--gray-150);
  --border-strong: var(--gray-200);

  /* ── Texto ── */
  --text-strong: var(--gray-900);
  --text:        var(--gray-700);
  --text-muted:  var(--gray-500);
  --text-subtle: var(--gray-400);

  /* ── Estado (fg = AA sobre tinte; base = sólidos/íconos) ── */
  --ok:        var(--green-500);
  --ok-fg:     var(--green-600);
  --ok-bg:     var(--green-50);
  --err:       var(--rose-500);
  --err-fg:    var(--rose-600);
  --err-bg:    var(--rose-50);
  --warn:      var(--amber-500);
  --warn-fg:   var(--amber-600);
  --warn-bg:   var(--amber-50);
  --info:      var(--blue-500);
  --info-fg:   var(--blue-600);
  --info-bg:   var(--blue-50);

  /* ── Pulso (tiempo real) ── */
  --live:    var(--pulse-600);
  --live-bg: color-mix(in srgb, var(--pulse-500) 12%, transparent);

  /* ── Elevación — hairline-first ── */
  --sh-xs:  0 1px 2px rgba(16, 18, 26, .05);
  --sh-sm:  0 1px 3px rgba(16, 18, 26, .06), 0 1px 2px rgba(16, 18, 26, .04);
  --sh-md:  0 4px 12px rgba(16, 18, 26, .08);
  --sh-lg:  0 12px 32px rgba(16, 18, 26, .12);
  --sh-pop: 0 8px 28px rgba(16, 18, 26, .14);
  --card-highlight: none;   /* en dark: highlight interno superior */

  /* Focus ring de marca — nunca el outline del navegador */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);

  /* Overlay de modales */
  --overlay: rgba(11, 13, 18, .5);

  /* ── Radios ── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-2xl:  20px;
  --r-full: 999px;

  /* ── Espaciado (grid 4px) ── */
  --sp-05: 2px;  --sp-1: 4px;   --sp-15: 6px;  --sp-2: 8px;
  --sp-25: 10px; --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;

  /* ── Tipografía ── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 32px;  --lh-display: 1.1;  --fw-display: 700;  --ls-display: -0.025em;
  --fs-h1: 22px;       --lh-h1: 1.2;       --fw-h1: 650;       --ls-h1: -0.02em;
  --fs-h2: 19px;       --lh-h2: 1.25;      --fw-h2: 600;       --ls-h2: -0.015em;
  --fs-h3: 16px;       --lh-h3: 1.4;       --fw-h3: 600;       --ls-h3: -0.01em;
  --fs-body: 14px;     --lh-body: 1.55;
  --fs-sm: 13px;       --lh-sm: 1.5;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-overline: 11px; --lh-overline: 1.3; --ls-overline: 0.05em;
  --fs-mono: 13px;

  /* ── Motion ── */
  --t-instant: 80ms;
  --t-fast:    130ms;
  --t-base:    190ms;
  --t-slow:    300ms;
  --ease:      cubic-bezier(.2, .6, .2, 1);
  --ease-emph: cubic-bezier(.16, 1, .3, 1);

  /* ── Layout shell ── */
  --sidebar-width: 248px;
  --sidebar-rail:  60px;
  --topbar-height: 56px;

  color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 3 — DARK  ([data-theme="dark"] en <html>; también funciona scoped
   en un contenedor, p. ej. los paneles de contraste de /estilo)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --canvas:        var(--dusk-950);
  --surface:       var(--dusk-900);
  --surface-2:     var(--dusk-850);
  --surface-3:     var(--dusk-800);
  --border:        var(--dusk-700);
  --border-strong: var(--dusk-600);

  --text-strong: var(--dusk-50);
  --text:        var(--dusk-200);
  --text-muted:  var(--dusk-400);
  --text-subtle: var(--dusk-500);

  /* Marca en dark: hover aclara, el texto-link sube de luminancia */
  --brand-hover:  color-mix(in srgb, var(--brand) 84%, var(--white));
  --brand-active: color-mix(in srgb, var(--brand) 72%, var(--white));
  --brand-tint:        color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-tint-strong: color-mix(in srgb, var(--brand) 22%, transparent);
  --brand-text:   color-mix(in srgb, var(--brand) 65%, var(--white));

  --ok:      var(--green-400);
  --ok-fg:   var(--green-400);
  --ok-bg:   color-mix(in srgb, var(--green-400) 14%, transparent);
  --err:     var(--rose-400);
  --err-fg:  var(--rose-400);
  --err-bg:  color-mix(in srgb, var(--rose-400) 14%, transparent);
  --warn:    var(--amber-400);
  --warn-fg: var(--amber-400);
  --warn-bg: color-mix(in srgb, var(--amber-400) 14%, transparent);
  --info:    var(--blue-400);
  --info-fg: var(--blue-400);
  --info-bg: color-mix(in srgb, var(--blue-400) 14%, transparent);

  --live:    var(--pulse-400);
  --live-bg: color-mix(in srgb, var(--pulse-400) 14%, transparent);

  /* Sombras casi nulas: la profundidad viene del surface escalonado */
  --sh-xs:  0 1px 2px rgba(0, 0, 0, .3);
  --sh-sm:  0 1px 3px rgba(0, 0, 0, .35);
  --sh-md:  0 4px 12px rgba(0, 0, 0, .4);
  --sh-lg:  0 12px 32px rgba(0, 0, 0, .5);
  --sh-pop: 0 8px 28px rgba(0, 0, 0, .55);
  --card-highlight: inset 0 1px 0 color-mix(in srgb, var(--white) 4%, transparent);

  --overlay: rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 4 — ALIAS DE COMPATIBILIDAD (pantallas portadas del sistema anterior)
   Mapean el vocabulario viejo a los tokens Atalaya: heredan dark mode y
   re-skin por tenant sin tocar esas pantallas.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --brand-light:  color-mix(in srgb, var(--brand) 78%, var(--white));
  --brand-dark:   color-mix(in srgb, var(--brand) 80%, var(--black));
  --accent-light: color-mix(in srgb, var(--accent) 78%, var(--white));
  --accent-dark:  color-mix(in srgb, var(--accent) 72%, var(--black));

  --bsc-navy:       var(--brand);
  --bsc-navy-light: var(--brand-light);
  --bsc-navy-dark:  var(--brand-dark);
  --bsc-gold:       var(--accent);
  --bsc-gold-light: var(--accent-light);
  --bsc-gold-dark:  var(--accent-dark);
  --bsc-gold-bg:    var(--accent-bg);

  --surface-0: var(--surface);
  --surface-1: var(--canvas);

  --text-primary:   var(--text-strong);
  --text-secondary: var(--text);
  --text-tertiary:  var(--text-subtle);
  --text-inverse:   var(--dusk-50);

  --border-light:   var(--border);
  --border-default: var(--border);

  --status-success: var(--ok);
  --status-warning: var(--warn);
  --status-danger:  var(--err);
  --status-info:    var(--info);

  --risk-alto-bg:   var(--err-bg);   --risk-alto-fg:   var(--err-fg);
  --risk-medio-bg:  var(--warn-bg);  --risk-medio-fg:  var(--warn-fg);
  --risk-bajo-bg:   var(--ok-bg);    --risk-bajo-fg:   var(--ok-fg);
  --risk-remoto-bg: var(--surface-3); --risk-remoto-fg: var(--text);

  --prio-urgente:    var(--err);
  --prio-importante: var(--warn);
  --prio-info:       var(--text-subtle);

  --banda-a: var(--ok);         --banda-a-bg: var(--ok-bg);
  --banda-b: var(--warn);       --banda-b-bg: var(--warn-bg);
  --banda-c: var(--text-muted); --banda-c-bg: var(--surface-3);

  --urg-crit: var(--err);        --urg-crit-bg: var(--err-bg);
  --urg-warn: var(--warn);       --urg-warn-bg: var(--warn-bg);
  --urg-ok:   var(--text-muted); --urg-ok-bg:   var(--surface-2);

  --accent-purple: var(--chart-violet);
  --accent-teal:   var(--pulse-600);
  --accent-indigo: var(--iris-500);
  --accent-rose:   var(--rose-500);

  --shadow-sm:    var(--sh-sm);
  --shadow-md:    var(--sh-md);
  --shadow-lg:    var(--sh-lg);
  --shadow-xl:    var(--sh-lg);
  --shadow-float: var(--sh-pop);
  --shadow-brand: var(--sh-md);

  --radius-xs: 4px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: 12px;
  --radius-2xl: var(--r-xl);
  --radius-3xl: 16px;
  --radius-pill: var(--r-full);

  --space-1: var(--sp-1);  --space-2: var(--sp-2);   --space-3: var(--sp-3);
  --space-4: var(--sp-4);  --space-5: var(--sp-5);   --space-6: var(--sp-6);
  --space-8: var(--sp-8);  --space-10: var(--sp-10); --space-12: var(--sp-12);
  --space-16: var(--sp-16);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE — reset mínimo y defaults del sistema
   ══════════════════════════════════════════════════════════════════════════ */
* { font-family: var(--font-sans); box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
}

/* Numerales tabulares: nada "baila" al actualizar cifras, fechas o radicados */
table, .tnum, time { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { color: var(--text-strong); margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }

a { color: var(--brand-text); }

::selection { background: var(--brand-tint-strong); }
::placeholder { color: var(--text-subtle); }

/* Focus ring de marca en todo lo enfocable; nunca el outline del navegador */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}