/* =========================================================
   tokens.css — única fuente de los colores de marca de Zeus.
   Se carga antes que cualquier otra hoja en todos los layouts.

   Regla de la app (2026-10-21): azul marino del logo + cobalto como
   acento. Las variables viejas (--zeus-cta, --listado-cta,
   --dash-primary…) apuntan acá, así que cambiar un color en este
   archivo lo cambia en toda la app.

   - navy:   lo seleccionado/activo (tabs, chips, bandas de marca, toasts).
   - accent: la acción principal (botones, links, foco).
   - Estados de mesa: los mismos colores que el catálogo de estados.
   ========================================================= */
:root {
  /* Marca */
  --zeus-navy: #13213F;
  --zeus-navy-2: #1D2F57;
  --zeus-navy-tint: #E8EBF3;
  --zeus-sky: #A5BBE9;
  --zeus-accent: #3157D5;
  --zeus-accent-hover: #2647B8;
  --zeus-accent-tint: #E9EEFC;
  --zeus-on-accent: #FFFFFF;

  /* Neutros (con un leve tono azul) */
  --zeus-ink: #0E1A33;
  --zeus-ink-soft: #56627A;
  --zeus-mute: #8A94A8;
  --zeus-bg: #F2F4F8;
  --zeus-surface: #FFFFFF;
  --zeus-surface-2: #F6F7FA;
  --zeus-line: #E2E6EE;
  --zeus-line-soft: #EDF0F5;

  /* Estados de mesa */
  --zeus-table-free: #16936A;
  --zeus-table-free-tint: #E3F4EC;
  --zeus-table-occupied: #D9472F;
  --zeus-table-occupied-tint: #FCEAE6;
  --zeus-table-reserved: #B97A12;
  --zeus-table-reserved-tint: #FBF0DC;
  --zeus-table-cleaning: #2A86C7;
  --zeus-table-cleaning-tint: #E3F0FA;
  --zeus-table-blocked: #69728A;
  --zeus-table-blocked-tint: #ECEEF2;

  /* Elevación */
  --zeus-shadow-sm: 0 1px 2px rgba(14, 26, 51, .06);
  --zeus-shadow: 0 2px 6px rgba(14, 26, 51, .04), 0 14px 36px rgba(14, 26, 51, .08);
  --zeus-shadow-lg: 0 30px 80px rgba(9, 16, 32, .28);

  --zeus-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Plano de la Sala en vivo */
  --zeus-floor-bg: #FAFBFD;
  --zeus-floor-dot: #D8DEE9;
  --zeus-chair: #D3D9E4;
}

/* =========================================================
   Modo oscuro (paleta del mockup). Lo prende layouts.zeus con
   data-theme="dark" en <html>, solo en las pantallas ya revisadas
   (@section('dark-ready')); "Automático" se resuelve con el sistema
   en el <head>. Con [data-theme] este bloque les gana a las copias de
   la paleta que todavía viven en zeus.css, listado.css y swal.css.
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --zeus-navy: #0C1834;
  --zeus-navy-2: #15284E;
  --zeus-navy-tint: #1A2A55;
  --zeus-accent: #5577E8;
  --zeus-accent-hover: #6A88EE;
  --zeus-accent-tint: #1A2A55;

  --zeus-ink: #E9EEF7;
  --zeus-ink-soft: #9DA9C1;
  --zeus-mute: #6E7B95;
  --zeus-bg: #090F1B;
  --zeus-surface: #101A2B;
  --zeus-surface-2: #142035;
  --zeus-line: #223049;
  --zeus-line-soft: #1A263A;

  --zeus-table-free: #43C795;
  --zeus-table-free-tint: #102D22;
  --zeus-table-occupied: #F07A63;
  --zeus-table-occupied-tint: #36190F;
  --zeus-table-reserved: #E4AC48;
  --zeus-table-reserved-tint: #33260C;
  --zeus-table-cleaning: #5DB0EA;
  --zeus-table-cleaning-tint: #0F2A40;
  --zeus-table-blocked: #8D96AC;
  --zeus-table-blocked-tint: #1E2839;

  --zeus-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --zeus-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 14px 36px rgba(0, 0, 0, .35);
  --zeus-shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);

  --zeus-floor-bg: #0D1626;
  --zeus-floor-dot: #1F2B42;
  --zeus-chair: #2B3954;

  /* Copias viejas de la paleta (zeus.css, listado.css, swal.css). */
  --zeus-white: var(--zeus-surface);
  --zeus-border: var(--zeus-line);
  --zeus-green: #43C795;
  --zeus-green-tint: #102D22;
  --zeus-warn: #F07A63;
  --zeus-warn-tint: #36190F;
  --zeus-amber: #E4AC48;
  --zeus-amber-tint: #33260C;
  --zeus-purple: #B9A2EE;
  --zeus-purple-tint: #2A2145;

  --listado-ink: var(--zeus-ink);
  --listado-ink-soft: var(--zeus-ink-soft);
  --listado-border: var(--zeus-line);
  --listado-bg: var(--zeus-bg);
  --listado-white: var(--zeus-surface);
  --listado-green: #43C795;
  --listado-green-tint: #102D22;
  --listado-warn: #F07A63;
  --listado-warn-tint: #36190F;

  --swal-ink-faint: var(--zeus-mute);
  --swal-foot: var(--zeus-surface-2);
  --swal-primary: var(--zeus-accent);
  --swal-primary-hover: var(--zeus-accent-hover);
  --swal-red-hover: #D9472F;
}

/* La base de la página (el body trae clases de Tailwind de fondo claro). */
:root[data-theme="dark"] body {
  background: var(--zeus-bg) !important;
  color: var(--zeus-ink);
}

/* Tipografía base de la app (las fuentes se cargan en cada layout). */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Pestañas Sala en vivo / Reservas (partials/room-nav) ---------- */
.room-nav-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.room-nav {
  display: flex;
  gap: 4px;
  background: var(--zeus-surface);
  border: 1px solid var(--zeus-line);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--zeus-shadow-sm);
  max-width: 100%;
  overflow-x: auto;
}

.room-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zeus-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.room-nav a:hover { color: var(--zeus-ink); background: var(--zeus-surface-2); }
.room-nav a.is-on { background: var(--zeus-navy); color: #fff; }
.room-nav-ic { width: 18px; height: 18px; flex: none; }

.room-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  background: var(--zeus-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px var(--zeus-accent);
  white-space: nowrap;
}

.room-nav-cta:hover { background: var(--zeus-accent-hover); color: #fff; }

@media (max-width: 760px) {
  .room-nav-wrap { width: 100%; }
  .room-nav { flex: 1; }
  .room-nav a { flex: 1; justify-content: center; padding: 8px 10px; }
  .room-nav-cta span { display: none; }
  .room-nav-cta { padding: 11px 14px; }
}

/* Modo oscuro de las ventanas de librerías externas que traen su propio
   fondo blanco: el calendario (flatpickr) y la lista de países del teléfono. */
:root[data-theme="dark"] .flatpickr-calendar { background: var(--zeus-surface); box-shadow: var(--zeus-shadow-lg); border: 1px solid var(--zeus-line); }
:root[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--zeus-surface); }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--zeus-surface); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] span.flatpickr-weekday,
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month { color: var(--zeus-ink); fill: var(--zeus-ink); background: transparent; }
:root[data-theme="dark"] .flatpickr-day { color: var(--zeus-ink); }
:root[data-theme="dark"] .flatpickr-day:hover { background: var(--zeus-surface-2); border-color: var(--zeus-surface-2); }
:root[data-theme="dark"] .flatpickr-day.today { border-color: var(--zeus-accent); }
:root[data-theme="dark"] .flatpickr-day.selected { background: var(--zeus-accent); border-color: var(--zeus-accent); color: #fff; }
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--zeus-mute); }
:root[data-theme="dark"] .iti__dropdown-content,
:root[data-theme="dark"] .iti__country-list { background: var(--zeus-surface); color: var(--zeus-ink); border-color: var(--zeus-line); }
:root[data-theme="dark"] .iti__search-input { background: var(--zeus-surface-2); color: var(--zeus-ink); }
:root[data-theme="dark"] .iti__country.iti__highlight { background: var(--zeus-surface-2); }