/* ═══════════════════════════════════════════════════════════════
   TechHotelHub RMS — Design tokens  v3.1  (fuente única de verdad)
   ───────────────────────────────────────────────────────────────
   · Este fichero SOLO declara fuentes y variables: no aplica estilos
     a ningún elemento, así que se puede enlazar en cualquier página
     (también en las que no usan shared/styles.css) sin romper nada.
   · shared/styles.css lo importa, de modo que los módulos que ya
     cargan styles.css reciben los tokens automáticamente.
   · Los nombres antiguos (--bg, --text, --muted, --accent, --good…)
     se mantienen por compatibilidad.
   · Regla: no escribir colores hex sueltos en los módulos; usar
     estos tokens. En JS inyectado en páginas que quizá no cargan
     este fichero, usar fallback: var(--text, #e8f0ff).
   ═══════════════════════════════════════════════════════════════ */

/* ── Fuentes (auto-alojadas, sin Google Fonts → sin peticiones a
      terceros ni parpadeo por doble carga). Licencia SIL OFL 1.1. ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ── Tipografía: 2 familias ─────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: var(--font-sans);               /* alias usado por algunos módulos */

  /* Escala tipográfica (rem, base 16px) */
  --fs-2xs:  .6875rem;   /* 11px — etiquetas en mayúsculas, ejes */
  --fs-xs:   .75rem;     /* 12px — notas, badges */
  --fs-sm:   .8125rem;   /* 13px — tablas, texto secundario */
  --fs-base: .875rem;    /* 14px — texto de interfaz */
  --fs-md:   1rem;       /* 16px — títulos de tarjeta */
  --fs-lg:   1.25rem;    /* 20px — título de página */
  --fs-xl:   1.5rem;     /* 24px — cifras KPI medianas */
  --fs-2xl:  2rem;       /* 32px — cifras KPI grandes */
  --fs-3xl:  2.5rem;     /* 40px — hero */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;

  --lh-tight: 1.15;
  --lh-base:  1.5;

  /* ── Espaciado (múltiplos de 4px) ───────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;

  /* ── Breakpoints (documentación; @media no acepta var()) ──
     xl 1280px · lg 1024px · md 768px · sm 480px
     Úsalos así:  @media (max-width: 1024px) { … }            */
  --bp-xl: 1280px;
  --bp-lg: 1024px;
  --bp-md: 768px;
  --bp-sm: 480px;

  /* ── Capas (z-index con nombre) ─────────────────────── */
  --z-base:     1;
  --z-dropdown: 200;
  --z-sticky:   100;
  --z-topbar:   1000;
  --z-sidebar:  9000;
  --z-modal:    10000;
  --z-toast:    10500;
  --z-tooltip:  11000;

  /* ── Fondos y superficies ───────────────────────────── */
  --bg:        #070c18;   /* fondo de página */
  --bg2:       #0d1527;   /* franjas / barras secundarias */
  --surface:   #111827;   /* tarjeta sólida */
  --surface-2: #131d32;   /* tarjeta elevada, paneles desplegables */
  --surface-3: #1e293b;   /* inputs, hover, pistas de barras */
  --overlay:   rgba(7,12,24,.85);
  --glass:     rgba(255,255,255,.03);
  --glass-hi:  rgba(255,255,255,.06);

  /* ── Texto (contraste AA verificado sobre --bg y --surface) ── */
  --text-strong: #ffffff;  /* cifras y títulos destacados       */
  --text:        #e8f0ff;  /* 15.5:1 sobre --surface            */
  --muted:       #8ba3cc;  /*  6.9:1 sobre --surface            */
  --subtle:      #7186ad;  /*  4.8:1 sobre --surface (antes #4a5d80, 2.7:1 → no AA) */
  --text-on-accent: #ffffff;

  /* ── Bordes ─────────────────────────────────────────── */
  --border:    rgba(255,255,255,.09);
  --border-hi: rgba(255,255,255,.17);

  /* ── Marca (acento Aurora azul → violeta) ───────────── */
  --accent:        #7aa2ff;
  --accent2:       #a78bfa;
  --accent-glow:   rgba(122,162,255,.22);
  --primary:       #3b82f6;   /* botón primario sólido */
  --primary-hover: #2563eb;
  --primary-soft:  #93c5fd;
  --indigo:        #6366f1;
  --indigo-hover:  #4f46e5;
  --indigo-soft:   #a5b4fc;
  --violet:        #8b5cf6;
  --info:          #38bdf8;

  /* ── Semánticos (estado: siempre con icono + texto) ── */
  --good:      #22c55e;
  --good-soft: #86efac;
  --good-bg:   rgba(34,197,94,.12);
  --warn:      #f59e0b;
  --warn-soft: #fcd34d;
  --warn-bg:   rgba(245,158,11,.12);
  --bad:       #ef4444;
  --bad-soft:  #fca5a5;
  --bad-bg:    rgba(239,68,68,.12);

  /* ── Radios ─────────────────────────────────────────── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Sombras ────────────────────────────────────────── */
  --shadow:      0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --shadow-glow: 0 0 60px rgba(122,162,255,.07);
  --shadow-lift: 0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --shadow-pop:  0 14px 34px rgba(0,0,0,.45);

  /* ── Transiciones ───────────────────────────────────── */
  --ease:        180ms cubic-bezier(.4,0,.2,1);
  --ease-spring: 220ms cubic-bezier(.34,1.56,.64,1);
  --ease-out:    250ms ease-out;

  /* ═══ Data-viz ═══════════════════════════════════════
     Color asignado por FUNCIÓN, no "a ojo". Ver shared/chart_theme.js.
     Paleta categórica validada (daltonismo protan/deutan/tritan y
     contraste ≥3:1) sobre la superficie oscura #0f1729:
       peor ΔE CVD entre vecinas 8.4 · peor ΔE visión normal 19.3.
     Orden FIJO, nunca cíclico: a partir de la 9ª serie → "Otros".
     En dispersión/burbujas (todas las parejas visibles) usar ≤3 series. */
  --chart-1: #3987e5;   /* azul    */
  --chart-2: #d95926;   /* naranja */
  --chart-3: #199e70;   /* aguamarina */
  --chart-4: #c98500;   /* amarillo */
  --chart-5: #d55181;   /* magenta */
  --chart-6: #008300;   /* verde   */
  --chart-7: #9085e9;   /* violeta */
  --chart-8: #e66767;   /* rojo    */
  --chart-other: #6b7280; /* "Otros" */

  /* Secuencial (magnitud: ocupación, intensidad) — un solo tono azul */
  --chart-seq-100: #cde2fb;
  --chart-seq-200: #9ec5f4;
  --chart-seq-300: #6da7ec;
  --chart-seq-400: #3987e5;
  --chart-seq-500: #256abf;
  --chart-seq-600: #184f95;
  --chart-seq-700: #0d366b;

  /* Divergente (pickup +/−, desviación vs budget): azul ↔ rojo, centro gris neutro */
  --chart-div-neg: #e66767;
  --chart-div-mid: #3f4148;
  --chart-div-pos: #3987e5;

  /* Cromado del gráfico: recesivo; el texto NUNCA va en color de serie */
  --chart-grid: rgba(255,255,255,.06);
  --chart-axis: rgba(255,255,255,.14);
  --chart-text: var(--muted);
  --chart-tooltip-bg: rgba(13,21,39,.96);
}

/* ═══════════════════════════════════════════════════════════════
   v3.1 · Sistema de producto (rama sv/producto)
   ───────────────────────────────────────────────────────────────
   Tokens SEMÁNTICOS y de COMPONENTE. Los componentes de
   shared/components.css solo usan estos nombres; así el modo
   claro solo tiene que redefinir este bloque.
   Documentación viva: design/index.html (raíz del repo).
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Superficies por función */
  --surface-page:    var(--bg);
  --surface-card:    var(--surface);
  --surface-raised:  var(--surface-2);     /* popovers, menús, modales      */
  --surface-sunken:  #0b1222;              /* pozos: inputs, pistas, código */
  --surface-hover:   rgba(255,255,255,.05);
  --surface-active:  rgba(122,162,255,.14);
  --surface-sidebar: #0a1020;

  /* Texto por función (alias legibles) */
  --text-primary:   var(--text);
  --text-secondary: var(--muted);
  --text-tertiary:  var(--subtle);
  --text-disabled:  #4b5a78;
  --text-link:      var(--primary-soft);

  /* Marca vs interacción
     · --brand: color de identidad (logotipo "Hotel" en verde, como la SPA).
       No se usa en controles: el verde ya significa "bien" en un RMS.
     · --action: color de los controles interactivos (selección, foco,
       botón primario). Azul, coherente con el rayo del favicon. */
  --brand:        #10b981;
  --brand-ink:    #34d399;
  --action:       #2563eb;   /* blanco encima: 5,2:1 (el #3b82f6 de --primary solo da 3,7:1) */
  --action-hover: #1d4ed8;
  --action-ink:   var(--primary-soft);       /* texto de acción sobre fondo  */
  --action-soft:  rgba(59,130,246,.16);       /* fondo de elemento elegido    */
  --focus-ring:   0 0 0 3px rgba(122,162,255,.45);

  /* Estado (4 niveles, siempre con icono + texto) */
  --serious:      #f97316;
  --serious-bg:   rgba(249,115,22,.12);
  --info-bg:      rgba(56,189,248,.12);
  --good-ink:     var(--good-soft);   /* texto de estado sobre fondo -bg */
  --warn-ink:     var(--warn-soft);
  --bad-ink:      var(--bad-soft);
  --info-ink:     #7dd3fc;
  --serious-ink:  #fdba74;
  /* Variación: dirección × si subir es bueno. El texto lleva signo y flecha. */
  --delta-up:     var(--good-soft);
  --delta-down:   var(--bad-soft);
  --delta-flat:   var(--muted);

  /* Medidas de componentes */
  --control-h-sm: 30px;
  --control-h:    36px;
  --control-h-lg: 44px;           /* objetivo táctil */
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:     56px;
  --content-max:  1480px;
  --page-pad:     var(--space-6);
  --card-pad:     var(--space-5);
  --table-row-h:  40px;
  --table-row-h-compact: 32px;
}

/* ── Modo claro ──────────────────────────────────────────────────
   Se activa con <html data-theme="light"> (THH.ui.theme.set('light')).
   No se activa solo con prefers-color-scheme porque los módulos
   antiguos aún tienen estilos en línea pensados para fondo oscuro:
   cada página que se migra declara data-theme-ready en <html> y
   entonces respeta la preferencia del sistema (ver components.js).
   Contrastes sobre #ffffff: texto 17,9:1 · secundario 7,6:1 ·
   terciario 5,4:1 (5,0:1 sobre el fondo de página) · acción 5,2:1 · good 5,0:1 · warn 5,0:1 · bad 6,5:1. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f4f6fa;
  --bg2:       #eef1f6;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef1f6;
  --overlay:   rgba(15,23,42,.45);
  --glass:     rgba(15,23,42,.025);
  --glass-hi:  rgba(15,23,42,.05);

  --text-strong: #020617;
  --text:        #0f172a;
  --muted:       #475569;
  --subtle:      #5b6b82;
  --text-on-accent: #ffffff;

  --border:    rgba(15,23,42,.10);
  --border-hi: rgba(15,23,42,.20);

  --accent:        #2563eb;
  --accent2:       #7c3aed;
  --accent-glow:   rgba(37,99,235,.12);
  --primary:       #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft:  #1d4ed8;
  --indigo-soft:   #4f46e5;
  --info:          #0284c7;

  --good:      #16a34a;
  --good-soft: #15803d;
  --good-bg:   rgba(22,163,74,.10);
  --warn:      #d97706;
  --warn-soft: #b45309;
  --warn-bg:   rgba(217,119,6,.12);
  --bad:       #dc2626;
  --bad-soft:  #b91c1c;
  --bad-bg:    rgba(220,38,38,.09);

  --shadow:      0 1px 2px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
  --shadow-glow: 0 0 0 transparent;
  --shadow-lift: 0 2px 4px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.10);
  --shadow-pop:  0 10px 30px rgba(15,23,42,.16);

  --surface-sunken:  #f1f4f9;
  --surface-hover:   rgba(15,23,42,.04);
  --surface-active:  rgba(37,99,235,.10);
  --surface-sidebar: #ffffff;
  --text-disabled:   #94a3b8;
  --brand:           #059669;
  --brand-ink:       #047857;
  --action-soft:     rgba(37,99,235,.10);
  --focus-ring:      0 0 0 3px rgba(37,99,235,.35);
  --serious:         #ea580c;
  --serious-bg:      rgba(234,88,12,.10);
  --info-bg:         rgba(2,132,199,.10);
  --info-ink:        #0369a1;
  --serious-ink:     #c2410c;

  /* Data-viz claro: mismos 8 tonos, pasos para fondo claro (validado
     sobre #ffffff: CVD peor vecino ΔE 9,1 · visión normal 19,6).
     3 tonos < 3:1 (aguamarina, amarillo, magenta) → regla de alivio:
     etiquetas directas visibles o vista de tabla. */
  --chart-1: #2a78d6;
  --chart-2: #eb6834;
  --chart-3: #1baf7a;
  --chart-4: #eda100;
  --chart-5: #e87ba4;
  --chart-6: #008300;
  --chart-7: #6250d6;
  --chart-8: #e34948;
  --chart-other: #9ca3af;
  --chart-div-neg: #e34948;
  --chart-div-mid: #e5e7eb;
  --chart-div-pos: #2a78d6;
  --chart-grid: rgba(15,23,42,.07);
  --chart-axis: rgba(15,23,42,.22);
  --chart-tooltip-bg: rgba(255,255,255,.98);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease:        1ms linear;
    --ease-spring: 1ms linear;
    --ease-out:    1ms linear;
  }
}