/* ============================================================================
   GLIVOK — DESIGN SYSTEM (web/shared/design.css)
   Fuente única de identidad para tablero, consola y web. PORTA los tokens
   oficiales de marca: 07-Branding/Tokens/glivok-tokens.css v1.0 (Brand Bible v1.2).
   NO inventar colores/fuentes/espaciados aquí: si falta algo se propone como
   brand v1.1 y se actualizan los 3 archivos de marca (css/json/tailwind).

   CÓMO FUNCIONA:
   - :root declara los tokens CANÓNICOS --glivok-* (nombres nuevos, no chocan
     con las apps existentes).
   - html[data-theme="light"|"dark"] mapea las variables LEGACY de cada app
     (--ok, --bg, --acc, --obsidian…) a los canónicos. La especificidad de
     html[data-theme] (0,1,1) GANA sobre el :root inline de cada app (0,1,0),
     así los valores de marca prevalecen SIN renombrar ningún selector
     (validate-web sigue verde) y sin depender del orden de carga del DOM.
   - Tablero = tema LIGHT (admin de clínica). Consola = tema DARK (staff).
     Ambos son dos temas del MISMO sistema. La landing usa el dark de marca.

   Cambios visuales: NINGUNO hasta que cada app declare html[data-theme=…]
   (paso de cableado). Este archivo es ADITIVO.
   ============================================================================ */

:root {
  /* ---------- COLOR DE MARCA (80 / 15 / 5) — glivok-tokens.css v1.0 ---------- */
  --glivok-base-obsidian:  #111317; /* 80% — canvas / fondo / estructura */
  --glivok-contrast-white: #F8F9FA; /* 15% — tipografía principal */
  --glivok-accent-oxford:  #1F3A52; /* 5%  — acentos decorativos / hover de CTA */
  --glivok-accent-active:  #2E5A82; /*      — CTAs, estados activos (texto blanco encima) */
  --glivok-support-steel:  #7A828A; /*      — metadatos, líneas, secundario */
  --glivok-obsidian-90:    #1A1D22; /* fondos elevados / cards (dark) */
  --glivok-obsidian-80:    #232730; /* divisores (dark) */
  --glivok-white-90:       #E5E7EB; /* body (dark) / divisores (light) */
  --glivok-white-60:       #9CA3AF; /* captions / texto atenuado */

  /* Señales (alertas — solo si imprescindibles) */
  --glivok-signal-warn:  #C2A04A;
  --glivok-signal-error: #A6342E;
  --glivok-signal-ok:    #4A7C59;

  /* ---------- TIPOGRAFÍA — glivok-tokens.css v1.0 ---------- */
  --glivok-font-display: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --glivok-font-body:    "Inter", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --glivok-font-mono:    "JetBrains Mono", "Geist Mono", "SF Mono", Consolas, monospace;
  --glivok-weight-display: 900;
  --glivok-weight-body-regular: 400;
  --glivok-weight-body-medium: 500;
  --glivok-weight-body-bold: 700;
  --glivok-tracking-display: 0.15em;
  --glivok-tracking-loose:   0.06em;
  --glivok-lh-display: 1.0;
  --glivok-lh-body:    1.55;

  /* ---------- ESPACIADO (grid 8px) — glivok-tokens.css v1.0 ---------- */
  --glivok-space-1: 4px;   --glivok-space-2: 8px;   --glivok-space-3: 16px;
  --glivok-space-4: 24px;  --glivok-space-5: 32px;  --glivok-space-6: 48px;
  --glivok-space-7: 64px;  --glivok-space-8: 96px;

  /* ---------- BORDES / RADIO (GLIVOK es ortogonal) ---------- */
  --glivok-radius-0: 0;    /* default */
  --glivok-radius-1: 2px;  /* excepcional */

  /* ---------- MOTION ---------- */
  --glivok-duration-instant: 80ms;
  --glivok-duration-fast:    160ms;
  --glivok-duration-base:    240ms;
  --glivok-easing-standard:  cubic-bezier(0.2, 0, 0, 1);

  /* ---------- EXTENSIONES v1.1-CANDIDATAS (accesibilidad — ratificar en 07-Branding) ----------
     La marca v1.0 no define un acento legible como TEXTO sobre obsidian (su azul
     #2E5A82 es para fondo de CTA con texto blanco). Para enlaces/acentos sobre
     superficies oscuras se necesita un azul más claro que pase WCAG AA. Marcado
     como candidato a brand v1.1; lo valida el candado de contraste. */
  --glivok-accent-on-dark:       #6FA0D6; /* enlaces/acento en dark — 6.80:1 */
  --glivok-signal-ok-on-dark:    #5FAE7C; /* ok como texto en dark — 6.93:1  */
  --glivok-signal-error-on-dark: #D9645E; /* error como texto en dark — 5.26:1 */
  --glivok-focus-ring:           #6FA0D6; /* anillo de foco visible (a11y)   */
}

/* ============================================================================
   TEMA LIGHT — TABLERO DEL CLIENTE
   El tablero ya está ~95% en marca (obsidian/oxford/active/steel/fuentes
   coinciden). Solo se reconcilian los SEMÁFOROS que driftaron y el hover.
   ============================================================================ */
html[data-theme="light"] {
  --ok:    var(--glivok-signal-ok);     /* era #3F9C63 → marca #4A7C59 */
  --gold:  var(--glivok-signal-warn);   /* era #B8862B → marca #C2A04A */
  --red:   var(--glivok-signal-error);  /* era #C25450 → marca #A6342E */
  --active-d: var(--glivok-accent-oxford); /* hover de CTA = oxford (intención de marca) */
  /* obsidian/white/oxford/active/steel/ink/line/bg ya coinciden con la marca: no se tocan. */
}

/* ============================================================================
   TEMA DARK — CONSOLA DEL STAFF
   La consola driftó fuerte (azul brillante, verde neón, esquinas 12px).
   Se trae ENTERA a la marca: superficies obsidian, acento oxford, ortogonal.
   ============================================================================ */
html[data-theme="dark"] {
  --bg:     var(--glivok-base-obsidian);   /* era #0b1020 */
  --panel:  var(--glivok-obsidian-90);     /* era #121a30 */
  --panel2: var(--glivok-obsidian-80);     /* era #0f1730 */
  --line:   var(--glivok-obsidian-80);     /* era #22304f */
  --txt:    var(--glivok-contrast-white);  /* era #e7ecf6 */
  --mut:    var(--glivok-white-60);        /* era #90a0c0 */
  /* Split de acento por contraste: --acc = fondo de CTA de marca (texto blanco, 6.87:1);
     --acc-on-dark = el acento legible como TEXTO/enlace sobre obsidian (6.80:1). */
  --acc:         var(--glivok-accent-active);         /* era #4f8cff → fondo de CTA de marca */
  --acc-on-dark: var(--glivok-accent-on-dark);        /* enlaces/acento como texto en dark */
  --ok:     var(--glivok-signal-ok-on-dark);    /* era #2fbf71 → verde accesible en dark */
  --warn:   var(--glivok-signal-warn);          /* era #f5a524 → ámbar de marca (7.46:1) */
  --err:    var(--glivok-signal-error-on-dark); /* era #ef4444 → rojo accesible en dark */
  --rad:    var(--glivok-radius-1);             /* era 12px → 2px (ortogonal de marca) */
}

/* ============================================================================
   BASE DE ACCESIBILIDAD (aplica a quien cargue design.css)
   ============================================================================ */
/* Foco siempre visible (nunca outline:none sin reponer). Anillo de marca. */
:focus-visible {
  outline: 2px solid var(--glivok-focus-ring);
  outline-offset: 2px;
}
/* Números tabulares para datos/contadores (legibilidad de cifras alineadas). */
.num, .mono, [class*="kpi"] .v, .kpi b { font-variant-numeric: tabular-nums; }

/* Respeto a usuarios con movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- DRILL-DOWN (data-drill) ----------
   Un agregado/KPI con data-drill="#sel" lleva a su detalle (resuelve dashboards muertos).
   El destello marca el detalle al que se llegó. */
[data-drill] { cursor: pointer; }
.gv-drill-flash { animation: gv-drill-flash 1.6s var(--glivok-easing-standard); }
@keyframes gv-drill-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  18%      { box-shadow: 0 0 0 3px var(--glivok-accent-active); }
}