/* =============================================================================
   Baer Asador — Panel de Reservas · Design System v3
   ─────────────────────────────────────────────────────────────────────────────
   Pattern : Data-Dense Operational Dashboard (ui-ux-pro-max informed)
   Style   : Warm-Earth Parrilla — premium yet inviting, neighborhood-with-heart
   Type    : Fira Sans (body, weight precision) + Fira Code (tabular numerics)
   Targets : Tablet landscape & desktop, used live during 4h dinner service
   WCAG    : AA verified (body text ratio ≈ 14:1, muted ≈ 5.2:1)
   ============================================================================= */

:root {
  /* ───── PALETTE ───────────────────────────────────────────────────────── */
  /* Brand brown ramp — from ember glow to charred steak */
  --brown-50:  #faf6ef;
  --brown-100: #f1e8d6;
  --brown-200: #e3d2b5;
  --brown-300: #d6cdbf;   /* hairlines */
  --brown-400: #b8a994;
  --brown-500: #93786011;
  --brown-600: #6b5b4e;   /* muted text */
  --brown-700: #4a3a2c;
  --brown-800: #2a1f17;   /* body text */
  --brown-900: #1a120c;

  /* Ember red-brown — primary brand action */
  --ember-50:  #fbf1ec;
  --ember-100: #f0d9cb;
  --ember-200: #d99a7c;
  --ember-500: #93421e;   /* hover */
  --ember-600: #7a3214;   /* primary */
  --ember-700: #5e2510;

  /* Gold — secondary CTA, "confirmed" hint */
  --gold-50:  #fbf6e8;
  --gold-100: #f3e3b4;
  --gold-500: #b07a1a;
  --gold-600: #8a6010;

  /* Status semantics */
  --ok-50:   #e7f3e7;
  --ok-500:  #2c6e2c;
  --ok-700:  #1f4f1f;
  --warn-50: #fff5dc;
  --warn-500:#c69a3a;
  --warn-700:#8a6010;
  --info-50: #e6efff;
  --info-500:#1d4ea0;
  --info-700:#143c7d;
  --err-50:  #fbe5e5;
  --err-500: #a02323;
  --err-700: #791919;

  /* ───── SEMANTIC ALIASES ──────────────────────────────────────────────── */
  --bg:          var(--brown-50);     /* page background */
  --surface:     #ffffff;             /* card surface */
  --surface-2:   #fbf9f4;             /* zebra / hover */
  --surface-3:   var(--brown-100);    /* deeper layer (occupancy bg) */
  --line:        var(--brown-300);
  --line-strong: var(--brown-400);
  --fg:          var(--brown-800);
  --fg-muted:    var(--brown-600);
  --fg-subtle:   #7a6859;   /* WCAG AA 4.6:1 on white surface */
  --accent:      var(--ember-600);
  --accent-hi:   var(--ember-500);
  --accent-soft: var(--ember-50);
  --cta:         var(--gold-500);
  --ok:          var(--ok-500);
  --ok-bg:       var(--ok-50);
  --warn:        var(--warn-500);
  --warn-bg:     var(--warn-50);
  --info:        var(--info-500);
  --info-bg:     var(--info-50);
  --err:         var(--err-500);
  --err-bg:      var(--err-50);

  /* ───── SPACING (4px base, geometric scale) ───────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;

  /* ───── RADIUS ────────────────────────────────────────────────────────── */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-full: 999px;

  /* ───── DEPTH (3-level shadow stack) ──────────────────────────────────── */
  /* Each shadow combines a tight ambient + a soft directional */
  --depth-0: 0 0 0 0 transparent;
  --depth-1: 0 1px 2px rgba(42, 31, 23, .06), 0 1px 1px rgba(42, 31, 23, .04);
  --depth-2: 0 2px 4px rgba(42, 31, 23, .08), 0 4px 12px rgba(42, 31, 23, .06);
  --depth-3: 0 4px 8px rgba(42, 31, 23, .10), 0 12px 28px rgba(42, 31, 23, .10);
  --depth-focus: 0 0 0 3px rgba(122, 50, 20, .22);

  /* ───── TYPE ──────────────────────────────────────────────────────────── */
  --font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: 'Fira Code', 'SF Mono', Menlo, ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs:    15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ───── MOTION ────────────────────────────────────────────────────────── */
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  300ms;
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* =============================================================================
   RESET & BASE
============================================================================= */

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--brown-400) transparent;
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs);
  line-height: var(--lh-base);
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ember-100); color: var(--brown-900); }

.mono, time, .mesa-id { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

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

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-hi); }

/* =============================================================================
   TOPBAR
============================================================================= */

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--s-5);
  height: 56px;
  background: linear-gradient(180deg, var(--ember-600) 0%, var(--ember-700) 100%);
  color: white;
  box-shadow: var(--depth-2);
  position: relative; z-index: 30;
}
.topbar .brand {
  color: white; text-decoration: none;
  font-weight: 700; font-size: var(--fs-md);
  letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: opacity var(--t-fast) var(--ease);
}
.topbar .brand:hover { opacity: .85; }
.topbar .brand svg { color: var(--gold-100); filter: drop-shadow(0 0 8px rgba(243, 227, 180, .55)); }
.topbar .brand-mark { height: 36px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(243, 227, 180, .35)); }
.topbar nav { display: flex; gap: var(--s-4); align-items: center; }
.topbar .op {
  opacity: .85; font-size: var(--fs-sm); font-family: var(--font-mono);
  letter-spacing: .3px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .12);
}
.topbar .link {
  background: none; border: 0; color: white; cursor: pointer;
  font: inherit; font-size: var(--fs-sm);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-1);
  transition: background var(--t-fast) var(--ease);
}
.topbar .link:hover { background: rgba(255, 255, 255, .12); }

/* =============================================================================
   NOTIF BELL (item 5.D backlog 2026-06-08)
============================================================================= */

/* :target highlight de la fila clickeada desde el dropdown del bell —
   el link es /?d=<fecha>#r-<id>. El browser scrollea (scroll-margin-top
   compensa la topbar) y la fila queda destacada para que Bianca/Nico la
   ubique al instante sin perder el contexto del día. Sebi 2026-06-08.

   Persistente (no fade) — el highlight queda mientras el hash esté
   presente. Útil mientras decide qué hacer; se va al navegar a otro
   día o limpiar el hash. !important porque la regla mobile-card
   `table.reservations tbody tr { background: var(--surface) }` (en
   @media max-width 640px) tiene specificity igual y gana por orden. */
table.reservations tbody tr[id] {
  scroll-margin-top: 80px;
}
table.reservations tbody tr[id]:target {
  background: var(--ember-100, #fef0d4) !important;
  outline: 2px solid var(--ember-500, #f97316);
  outline-offset: -2px;
  position: relative;
}

.notif-bell-wrap { position: relative; display: inline-flex; }
.notif-bell { position: relative; }
.notif-bell > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  color: white;
  background: rgba(255, 255, 255, .08);
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.notif-bell > summary::-webkit-details-marker { display: none; }
.notif-bell > summary:hover,
.notif-bell[open] > summary { background: rgba(255, 255, 255, .18); }
.notif-bell[data-has-pending="true"] > summary {
  /* Hint sutil de "hay algo nuevo" sin animar — Sebi's no-emoji + sin
     pulse para no llamar la atención excesivamente. */
  color: white;
  background: rgba(255, 255, 255, .14);
}

.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--err-500, #dc2626);
  color: white;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--ember-600);
  pointer-events: none;
}

.notif-dropdown {
  /* Mobile-first: ancla al viewport (no a la campana) — la campana está
     casi pegada al borde derecho, y 280-360px anchorados ahí se escapan
     por la izquierda en celu (Sebi reportó 2026-06-08). position: fixed
     + right/left: 8px lo pega a los márgenes del viewport. El top
     (--notif-dropdown-top) lo setea base.html vía JS en cada open para
     que caiga justo debajo del bell, sin importar si está visible el
     DEV banner amarillo o no. */
  position: fixed;
  top: var(--notif-dropdown-top, 60px);
  right: 8px;
  left: 8px;
  z-index: 50;
  max-width: none;
  width: auto;
  max-height: calc(100vh - var(--notif-dropdown-top, 60px) - 16px);
  overflow-y: auto;
  background: white;
  color: var(--text-1, #1f2937);
  border-radius: var(--r-2);
  box-shadow: var(--depth-3, 0 10px 30px rgba(0,0,0,.18));
  padding: var(--s-3);
}
/* Desktop: vuelve al anchor sobre la campana (popover clásico). */
@media (min-width: 640px) {
  .notif-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 280px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: 60vh;
  }
}
.notif-dropdown h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2, #4b5563);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.notif-dropdown ul {
  list-style: none;
  margin: 0; padding: 0;
}
.notif-dropdown li + li {
  border-top: 1px solid var(--brown-100, #f1ece4);
}
.notif-dropdown li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-1);
  color: var(--text-1, #1f2937);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.notif-dropdown li a:hover { background: var(--brown-50, #faf8f6); }
.notif-dropdown li strong { font-weight: 600; }
.notif-dropdown .notif-meta {
  font-size: var(--fs-xs);
  color: var(--text-2, #4b5563);
  font-variant-numeric: tabular-nums;
}
.notif-dropdown .notif-empty {
  margin: 0; padding: var(--s-2) 0;
  color: var(--text-2, #4b5563);
  font-size: var(--fs-sm);
}

/* =============================================================================
   LAYOUT
============================================================================= */

main { max-width: 1280px; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-8); }

.flash {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  margin: var(--s-3) var(--s-5) 0;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  box-shadow: var(--depth-1);
  display: block;
  /* Multi-line conflict reports use \n + bullets — pre-wrap renders them. */
  white-space: pre-wrap;
  line-height: var(--lh-base);
}
.flash-ok  { background: var(--ok-bg); color: var(--ok-700); border-color: rgba(44, 110, 44, .25); }
.flash-err { background: var(--err-bg); color: var(--err-700); border-color: rgba(160, 35, 35, .25); }

/* =============================================================================
   DATE NAV + TODAY TAG
============================================================================= */

.date-nav {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.date-nav h1 {
  margin: 0; font-size: var(--fs-xl); flex: 1;
  font-weight: 700; letter-spacing: -.3px; line-height: var(--lh-tight);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.today-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: white;
  font-size: var(--fs-xs); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-weight: 700;
  box-shadow: var(--depth-1);
}
.today-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--gold-100); box-shadow: 0 0 6px var(--gold-100);
}

/* =============================================================================
   OCCUPANCY STRIP
============================================================================= */

.occ-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
  box-shadow: var(--depth-1);
}
.occ-bar {
  flex: 1;
  height: 12px;
  background: var(--brown-100);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(42, 31, 23, .08);
}
.occ-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--ember-600) 80%);
  border-radius: var(--r-full);
  transition: width var(--t-slow) var(--ease);
  min-width: 4px;
  box-shadow: 0 1px 2px rgba(122, 50, 20, .15);
}
.occ-stats {
  display: flex; gap: var(--s-4); font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-family: var(--font-mono); white-space: nowrap;
}
.occ-stat strong { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Reloj del salón (variant=dev) — destacarlo con accent color para que
   el ojo lo encuentre primero. */
.occ-clock { color: var(--accent); font-weight: 700; font-family: var(--font-mono); }
.occ-clock strong { color: var(--accent); }
.occ-pct strong { color: var(--accent); font-size: var(--fs-md); }

/* =============================================================================
   AVAILABILITY CHIPS
============================================================================= */

.availability {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  box-shadow: var(--depth-1);
}
/* Flexbox + wrap: chips fluyen horizontalmente y se acomodan en filas
   según el espacio disponible. Items siempre contiguos y centrados.
   Antes era un grid 2-col que dejaba huecos visuales cuando había 1 o
   2 chips (e.g. 4 pers con [10] y [15] separados en filas distintas). */
.avail-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: var(--s-1);
}
.avail-label {
  flex: 0 0 100%;
  color: var(--fg-muted); font-weight: 600;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .8px;
  text-align: center;
  margin-bottom: 2px;
}
.avail-empty { color: var(--fg-subtle); font-style: italic; font-size: var(--fs-xs); }

.chip {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  min-width: 38px;
  text-align: center;
  justify-content: center;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  display: inline-flex; align-items: center; gap: 4px;
}
a.chip:hover { transform: scale(1.05); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.chip-2p,
.chip-4p     { border-color: rgba(176, 122, 26, .4);  background: var(--gold-50);  color: var(--gold-600); }
.chip-bar    { border-color: var(--brown-200);        background: var(--brown-50); color: var(--fg); }
.chip-combo  {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--brown-50) 100%);
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  justify-content: center;
  line-height: 1.2;
  padding: 5px 12px;
}
.avail-4p .chip    { min-width: 56px; }
.avail-combos .chip { min-width: 100px; }

/* =============================================================================
   BUTTONS & INPUTS
============================================================================= */

.btn, button {
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  padding: 7px var(--s-3); min-height: 32px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn svg, button svg { flex-shrink: 0; vertical-align: middle; }
.btn:hover, button:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.btn:active, button:active { transform: translateY(0.5px); }
.btn:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--depth-focus);
}

.btn-primary {
  background: var(--accent); color: white; border-color: var(--accent);
  box-shadow: var(--depth-1);
}
.btn-primary:hover {
  background: var(--accent-hi); border-color: var(--accent-hi);
  box-shadow: var(--depth-2);
}

input[type="text"], input[type="number"], input[type="tel"],
input[type="password"], input[type="datetime-local"],
input[type="date"], input[type="time"],
select {
  font: inherit; font-size: var(--fs-sm);
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--fg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  min-height: 34px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--depth-focus);
}
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Native <select> falls back to browser styling — kill it and draw our own
   chevron so selects sit in the same visual ramp as text inputs. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a3a2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* =============================================================================
   NEW RESERVATION / WALK-IN FORMS
============================================================================= */

.new-reservation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  box-shadow: var(--depth-1);
  transition: box-shadow var(--t-base) var(--ease);
}
.new-reservation[open] { box-shadow: var(--depth-2); }
.new-reservation summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}
.new-reservation summary:hover { color: var(--accent); }
.new-reservation summary::-webkit-details-marker { display: none; }
.new-reservation summary::before {
  content: "＋";
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--accent);
  font-family: var(--font-mono); font-weight: 700;
  background: var(--accent-soft);
  border-radius: var(--r-full);
  transition: transform var(--t-base) var(--ease);
}
.new-reservation[open] summary::before { transform: rotate(45deg); }
.new-reservation .hint { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-xs); }
.new-reservation label.full-row { flex: 1 1 100%; }
.new-reservation form {
  /* Flex en vez de grid: ancho específico por campo. Personas/Hora/Minutos
     compactos (selects de 1-2 dígitos), Mesa más amplia para el label más
     largo ("— Asignación automática"). En desktop ≥1300px entra todo en una
     línea; debajo wraps suave. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3); margin-top: var(--s-3);
  align-items: end;
}
.new-reservation label {
  display: flex; flex-direction: column;
  flex: 1 1 128px;
  min-width: 0;
  max-width: 200px;
  font-size: var(--fs-xs); gap: 4px;
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.new-reservation label.field-compact { flex: 0 1 72px; max-width: 90px; }
.new-reservation label.field-date    { flex: 0 1 128px; max-width: 150px; }
.new-reservation label.field-mesa    { flex: 2 1 200px; max-width: none; }

/* Mobile: forms colapsan a 1 columna por defecto para que ningún campo se
   salga del card. Personas / Hora / Minutos pueden coexistir en línea
   (selects chicos). */
@media (max-width: 540px) {
  .new-reservation label,
  .new-reservation label.field-date,
  .new-reservation label.field-mesa {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .new-reservation label.field-compact {
    flex: 1 1 calc(33% - var(--s-3));
    max-width: none;
  }
  .new-reservation button[type=submit] { width: 100%; margin-top: var(--s-2); }
}
.new-reservation input,
.new-reservation select { min-width: 0; width: 100%; box-sizing: border-box; }
.new-reservation input { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--fg); }
.new-reservation input::placeholder { color: var(--fg-subtle); }
.new-reservation button[type=submit] {
  background: var(--accent); color: white; border-color: var(--accent);
  padding: 9px var(--s-5); font-weight: 600; min-height: 38px;
  box-shadow: var(--depth-1);
}
.new-reservation button[type=submit]:hover {
  background: var(--accent-hi); box-shadow: var(--depth-2);
}

/* =============================================================================
   ENTRY CARD — Nueva entrada con tabs (Reserva / Walk-in / Lista de espera)
   Audit P3 (2026-06-05): unifica los 3 <details> previos. Usa radio buttons
   ocultos + selector ~ para mostrar el panel activo (CSS-only, sin JS).
   Solo se renderiza con ?variant=dev. Default sigue usando .new-reservation.
============================================================================= */

.entry-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  margin-bottom: var(--s-4);
  box-shadow: var(--depth-1);
  transition: box-shadow var(--t-base) var(--ease);
  overflow: hidden;
}
.entry-card[open] { box-shadow: var(--depth-2); }

.entry-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-weight: 600;
  color: var(--fg);
  transition: color var(--t-fast) var(--ease);
}
.entry-summary:hover { color: var(--accent); }
.entry-summary::-webkit-details-marker { display: none; }
.entry-summary-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-full);
  transition: transform var(--t-base) var(--ease);
}
.entry-card[open] .entry-summary-icon { transform: rotate(45deg); }
.entry-summary-title { font-weight: 700; }
.entry-summary-hint {
  color: var(--fg-muted); font-weight: 400; font-size: var(--fs-xs);
  margin-left: 2px;
}

/* Badge "● 1 pendiente" — visible aún con la card cerrada cuando hay un
   walk-in en cola pendiente de decisión. Pulsa para llamar el ojo. */
.entry-summary-pending {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  background: var(--danger, #c1453a);
  color: white;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 0 0 4px rgba(193, 69, 58, .15);
  animation: entry-pending-pulse 1.8s ease-in-out infinite;
}
.entry-pending-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: white;
  border-radius: 50%;
}
@keyframes entry-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(193, 69, 58, .15); }
  50%      { box-shadow: 0 0 0 8px rgba(193, 69, 58, .04); }
}
/* Borde y depth-2 cuando hay pendiente — el card entero se siente activo. */
.entry-card-pending {
  border-color: var(--danger, #c1453a);
  box-shadow: 0 0 0 1px rgba(193, 69, 58, .25), var(--depth-2);
}

.entry-body {
  border-top: 1px solid var(--line);
  position: relative;
}

.entry-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
  margin: 0;
}

.entry-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 0;
  padding: 0 var(--s-2);
  background: var(--bg);
}

.entry-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-3) var(--s-2);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  min-height: 60px;
  user-select: none;
}
.entry-tab:hover { color: var(--fg); background: rgba(0, 0, 0, .02); }
.entry-tab-icon { line-height: 1; display: inline-flex; }
.entry-tab-icon svg { width: 18px; height: 18px; }
.entry-tab-label { font-weight: 600; font-size: var(--fs-sm); line-height: 1.15; }
.entry-tab-hint { font-size: var(--fs-xs); color: var(--fg-subtle); line-height: 1.15; }

#em-res:checked    ~ .entry-tabs label[for="em-res"],
#em-walkin:checked ~ .entry-tabs label[for="em-walkin"],
#em-wl:checked     ~ .entry-tabs label[for="em-wl"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}
#em-res:checked    ~ .entry-tabs label[for="em-res"] .entry-tab-hint,
#em-walkin:checked ~ .entry-tabs label[for="em-walkin"] .entry-tab-hint,
#em-wl:checked     ~ .entry-tabs label[for="em-wl"] .entry-tab-hint {
  color: var(--accent);
}

#em-res:focus-visible    ~ .entry-tabs label[for="em-res"],
#em-walkin:focus-visible ~ .entry-tabs label[for="em-walkin"],
#em-wl:focus-visible     ~ .entry-tabs label[for="em-wl"] {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.entry-panels { padding: var(--s-4); }
.entry-panel { display: none; }
#em-res:checked    ~ .entry-panels .entry-panel-res,
#em-walkin:checked ~ .entry-panels .entry-panel-walkin,
#em-wl:checked     ~ .entry-panels .entry-panel-wl {
  display: block;
  animation: entry-fade-in var(--t-base) var(--ease);
}

@keyframes entry-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.entry-panel-blurb {
  margin: 0 0 var(--s-3);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-style: italic;
}

.entry-panel form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: end;
}
.entry-panel label {
  display: flex; flex-direction: column;
  flex: 1 1 128px;
  min-width: 0;
  max-width: 200px;
  font-size: var(--fs-xs); gap: 4px;
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.entry-panel label.full-row { flex: 1 1 100%; max-width: none; }
.entry-panel label.field-compact { flex: 0 1 72px; max-width: 90px; }
.entry-panel label.field-date    { flex: 0 1 128px; max-width: 150px; }
.entry-panel label.field-time    { flex: 0 1 108px; max-width: 130px; }
.entry-panel label.field-mesa    { flex: 2 1 200px; max-width: none; }
.entry-panel input,
.entry-panel select { min-width: 0; width: 100%; box-sizing: border-box; }
.entry-panel input {
  text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--fg);
}
.entry-panel input::placeholder { color: var(--fg-subtle); }
.entry-panel button[type=submit] {
  background: var(--accent); color: white; border-color: var(--accent);
  padding: 9px var(--s-5); font-weight: 600; min-height: 38px;
  box-shadow: var(--depth-1);
}
.entry-panel button[type=submit]:hover {
  background: var(--accent-hi); box-shadow: var(--depth-2);
}

/* Confirm modal (variant=dev) — pattern reusable, hoy solo usado para
   confirmar Cancelar reserva. Audit P3 (2026-06-05). */
.confirm-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(420px, calc(100% - 32px));
  width: 100%;
}
.confirm-modal::backdrop {
  background: rgba(20, 12, 6, .55);
  backdrop-filter: blur(2px);
}
.confirm-modal-card {
  background: var(--surface);
  border-radius: var(--r-3);
  padding: var(--s-4);
  box-shadow: var(--depth-3, 0 12px 32px rgba(0, 0, 0, .25));
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.confirm-modal-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--fg);
}
.confirm-modal-body {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.confirm-modal-body strong { color: var(--fg); font-weight: 700; }
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.confirm-modal-actions .btn { min-width: 88px; }


@media (max-width: 540px) {
  .entry-summary { padding: var(--s-3); }
  .entry-tabs { padding: 0; }
  .entry-tab { min-height: 52px; padding: var(--s-2) 4px; }
  .entry-tab-hint { display: none; }
  .entry-tab-icon svg { width: 16px; height: 16px; }
  .entry-tab-label { font-size: var(--fs-xs); }
  .entry-panels { padding: var(--s-3); }
  .entry-panel label,
  .entry-panel label.field-date,
  .entry-panel label.field-time,
  .entry-panel label.field-mesa {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .entry-panel label.field-compact {
    flex: 1 1 calc(33% - var(--s-3));
    max-width: none;
  }
  .entry-panel button[type=submit] { width: 100%; margin-top: var(--s-2); }
}

/* =============================================================================
   WAITLIST
============================================================================= */

.waitlist {
  background: linear-gradient(135deg, var(--warn-bg) 0%, var(--gold-50) 100%);
  border: 1px solid rgba(198, 154, 58, .35);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  box-shadow: var(--depth-1);
}
.waitlist h2 {
  margin: 0 0 var(--s-3); font-size: var(--fs-md); font-weight: 700;
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--warn-700);
}
.waitlist-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  background: var(--warn); color: white;
  border-radius: var(--r-full); font-size: var(--fs-xs);
  font-family: var(--font-mono); font-weight: 700;
}
.waitlist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.wait-entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
}
.wait-main { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.wait-name { font-weight: 600; }
.wait-pax {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--accent); font-weight: 700;
  padding: 2px 7px; background: var(--accent-soft); border-radius: var(--r-full);
}
.wait-notes { color: var(--fg-muted); font-size: var(--fs-sm); }
.wait-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: var(--fs-xs); color: var(--fg-muted);
}
.wait-time {
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--fs-sm); color: var(--warn-700);
}
.wait-phone { color: var(--fg-muted); }
.wait-actions { display: flex; gap: 4px; }
.wait-actions button { font-size: var(--fs-xs); padding: 4px 10px; min-height: 28px; }

/* "Entra ahora" — waitlist entries that fit current capacity */
.entra-banner {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  background: var(--ok-bg);
  color: var(--ok-700);
  border: 1px solid rgba(44, 110, 44, .3);
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.wait-entry.fits-now {
  border-color: rgba(44, 110, 44, .4);
  box-shadow: 0 0 0 1px rgba(44, 110, 44, .15);
}
.entra-badge {
  background: var(--ok-bg);
  color: var(--ok-700);
  border: 1px solid rgba(44, 110, 44, .3);
  font-weight: 700;
}
.wait-actions button.highlight {
  background: var(--ok-700);
  color: white;
  border-color: var(--ok-700);
}
.wait-actions button.highlight:hover {
  filter: brightness(1.08);
}

/* Walk-in → espera prefill banner */
.walkin-overflow-banner {
  background: var(--warn-bg);
  border: 1px solid rgba(198, 154, 58, .45);
  color: var(--warn-700);
  padding: var(--s-3) var(--s-3);
  border-radius: var(--r-2);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--s-2);
}
.walkin-overflow-banner strong { font-weight: 800; }
/* Audit P3 (2026-06-05): adentro del entry-card (variant=dev) el banner
   tiene texto + <strong> + texto como inline siblings, que con display:flex
   se rompen en columnas raras en mobile. Block layout deja que el texto
   wrappee como párrafo. */
.entry-panel-wl .walkin-overflow-banner {
  display: block;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .wait-entry { grid-template-columns: 1fr; gap: 4px; }
  .wait-meta { align-items: flex-start; }
  .wait-actions { width: 100%; }
  .wait-actions form, .wait-actions button { flex: 1; }
}

/* =============================================================================
   SERVICE SECTION + 2-COL GRID
============================================================================= */

/* PR-I (2026-06-08): banner verde de auto-reorganizaciones del día.
   V1 observabilidad — los chips de mov reorg arriba del plano. */
.auto-reorg-banner {
  margin: 0 0 var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: #e9f6ee;
  border: 1px solid #8fd3a8;
  border-left: 4px solid #2c7b48;
  border-radius: 8px;
}

.auto-reorg-banner h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: #2c7b48;
}

.auto-reorg-lede {
  margin: 0 0 var(--s-3);
  font-size: 0.92rem;
  line-height: 1.4;
}

.auto-reorg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-size: 0.92rem;
}

.auto-reorg-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.auto-reorg-list code {
  font-family: 'Fira Code', ui-monospace, monospace;
  background: white;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #8fd3a8;
}

.auto-reorg-ts {
  margin-left: auto;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.service { margin-bottom: var(--s-7); }
.service-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--line);
}
.service-head h2 {
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.2px;
  margin: 0;
}
.service-hint {
  color: var(--fg-muted); font-size: var(--fs-xs); font-weight: 400;
  margin: 0;
}
/* Backwards-compat: any leftover `.service h2` block on legacy templates still
   renders sensibly. */
.service h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-3); font-weight: 700; }

.service-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 1200px) {
  /* Plano takes less of the row so the reservations list has room for all
     5 action buttons + the Modificar label without overflowing horizontally. */
  .service-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
  }
  .service-floor { position: sticky; top: var(--s-4); }
  .service-floor .floor-wrap { margin-top: 0; }
  .service-list { min-width: 0; }
  .service-list table.reservations { font-size: var(--fs-sm); }
  .service-list table.reservations th,
  .service-list table.reservations td { padding: 6px 8px; }
  .service-list table.reservations td.actions { padding-left: 4px; padding-right: 8px; }
}

/* =============================================================================
   FLOOR WRAP
============================================================================= */

.floor-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-3);
  margin: var(--s-3) 0 var(--s-4);
  box-shadow: var(--depth-1);
}

/* =============================================================================
   FLOOR PLAN SVG — dark canvas + colored fills
   ─────────────────────────────────────────────────────────────────────────────
   Inspired by SevenRooms / OpenTable GuestCenter / Resy OS + Sebi's Nano
   banana mockup (2026-06-03): charcoal canvas, beige chairs around each
   table, gold/teal/red solid fills carry the status pre-attentively.
============================================================================= */

:root {
  --floor-canvas:       #1f1812;
  --floor-canvas-edge:  #15100b;
  --floor-table-libre:  #3a2e24;
  --floor-text-mute:    rgba(255, 255, 255, .55);
  --floor-text-fg:      #ffffff;
  --floor-wall:         rgba(255, 255, 255, .18);
  --floor-stroke:       rgba(255, 255, 255, .14);
  --floor-chair:        #a89177;
  --floor-bar-wood:     #6b4a2c;

  --floor-pendiente:    #c89342;
  --floor-confirmada:   #4a7ba8;
  --floor-sentados:     #4a8a5f;
  --floor-no_show:      #8a3a3a;
}

svg.floor-plan {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 760 / 480;
  height: auto;
  margin: var(--s-2) auto;
  background: radial-gradient(ellipse at 50% 40%,
              var(--floor-canvas) 0%,
              var(--floor-canvas-edge) 100%);
  border: 1px solid #3a2d22;
  border-radius: var(--r-3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    inset 0 1px 24px rgba(0, 0, 0, .35);
}
svg.floor-plan .zone-label {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: rgba(255, 255, 255, .35);
  letter-spacing: 2px;
  font-weight: 700;
}

svg.floor-plan .room-outline {
  fill: none;
  stroke: var(--floor-wall);
  stroke-width: 2;
  stroke-linejoin: round;
}

svg.floor-plan .service-area {
  fill: rgba(255, 255, 255, .03);
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
svg.floor-plan .service-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: rgba(255, 255, 255, .4);
  font-weight: 600;
  letter-spacing: .5px;
}

svg.floor-plan .bar-wood {
  fill: var(--floor-bar-wood);
  stroke: rgba(0, 0, 0, .4);
  stroke-width: 1;
  opacity: .92;
}

/* ---------- Tables ---------- */
svg.floor-plan .unit-rect {
  fill: var(--floor-table-libre);
  stroke: var(--floor-stroke);
  stroke-width: 1.5;
  transition: fill var(--t-base) var(--ease),
              stroke var(--t-base) var(--ease),
              stroke-width var(--t-base) var(--ease);
}
svg.floor-plan .midline {
  stroke: rgba(255, 255, 255, .12);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
svg.floor-plan .unit-id {
  font-family: var(--font-mono); font-weight: 700; font-size: 16px;
  fill: var(--floor-text-mute); letter-spacing: .5px;
  pointer-events: none;
}
svg.floor-plan .unit-name {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  fill: var(--floor-text-fg); pointer-events: none;
}
svg.floor-plan .unit-pax {
  font-family: var(--font-mono); font-size: 12px;
  fill: rgba(255, 255, 255, .8); font-weight: 600; pointer-events: none;
}
svg.floor-plan .unit-cap {
  font-family: var(--font-mono); font-size: 12px;
  fill: rgba(255, 255, 255, .4); letter-spacing: .5px;
  pointer-events: none;
}

/* ---------- Chairs ---------- */
svg.floor-plan .chair {
  fill: var(--floor-chair);
  stroke: rgba(0, 0, 0, .25);
  stroke-width: 1;
  transition: fill var(--t-base) var(--ease);
  pointer-events: none;
}

/* ---------- Bar stools ---------- */
svg.floor-plan .stool-circle {
  fill: var(--floor-chair);
  stroke: rgba(0, 0, 0, .25);
  stroke-width: 1.5;
  transition: fill var(--t-base) var(--ease), stroke var(--t-base) var(--ease);
}
svg.floor-plan .bar-label {
  font-family: var(--font-mono); font-size: 13px;
  fill: rgba(255, 255, 255, .55); font-weight: 700;
  letter-spacing: .5px; pointer-events: none;
}
/* Stool number — inside each circle. paint-order renders the stroke under
   the fill so the white digit gets a dark halo and stays readable on any
   stool fill (beige libre / gold / blue / green / red). */
svg.floor-plan .stool-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  fill: #ffffff;
  stroke: rgba(0, 0, 0, .55);
  stroke-width: 2.8;
  paint-order: stroke fill;
  pointer-events: none;
}

/* ---------- Status fills ---------- */
svg.floor-plan .status-pendiente .unit-rect,
svg.floor-plan .status-pendiente .stool-circle {
  fill: var(--floor-pendiente);
  stroke: rgba(255, 255, 255, .35);
  stroke-width: 1.5;
}
svg.floor-plan .status-confirmada .unit-rect,
svg.floor-plan .status-confirmada .stool-circle {
  fill: var(--floor-confirmada);
  stroke: rgba(255, 255, 255, .35);
  stroke-width: 1.5;
}
svg.floor-plan .status-sentados .unit-rect,
svg.floor-plan .status-sentados .stool-circle {
  fill: var(--floor-sentados);
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 2;
}
svg.floor-plan .status-no_show .unit-rect,
svg.floor-plan .status-no_show .stool-circle {
  fill: var(--floor-no_show);
  stroke: rgba(255, 255, 255, .3);
  stroke-dasharray: 4 3;
}

/* Chairs tint to match parent table (slightly darker so table stays primary). */
svg.floor-plan .chair.status-pendiente  { fill: #a8772f; }
svg.floor-plan .chair.status-confirmada { fill: #3d6890; }
svg.floor-plan .chair.status-sentados   { fill: #3d7350; }
svg.floor-plan .chair.status-no_show    { fill: #6f3030; }

/* Labels on occupied tables — bump contrast. */
svg.floor-plan .unit:not(.status-libre) .unit-id   { fill: rgba(255, 255, 255, .9); }
svg.floor-plan .unit:not(.status-libre) .unit-name { fill: #ffffff; }
svg.floor-plan .unit:not(.status-libre) .unit-pax  { fill: rgba(255, 255, 255, .92); }

/* ---------- Combos ---------- */
svg.floor-plan .combo-rect {
  stroke-width: 2.5;
  fill-opacity: .95;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .4));
}
svg.floor-plan .combo-id {
  font-family: var(--font-mono); font-weight: 700; font-size: 16px;
  fill: #ffffff; letter-spacing: .8px; pointer-events: none;
}

/* ---------- Bar combo capsule ---------- */
/* Rounded rect drawn behind the stool circles of a multi-stool reservation.
   Uses the same status fill as the stools so the group reads as one unit.
   Clickable via the wrapping <a> — clicks on the capsule (between stools)
   route to the reservation just like clicks on the stool circles do. */
svg.floor-plan .bar-combo-capsule {
  fill: var(--floor-chair);
  fill-opacity: .55;
  stroke: rgba(255, 255, 255, .35);
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
  transition: stroke var(--t-base) var(--ease),
              stroke-width var(--t-base) var(--ease),
              fill-opacity var(--t-base) var(--ease);
}
svg.floor-plan .unit-link:hover .bar-combo-capsule,
svg.floor-plan .unit-link:focus .bar-combo-capsule {
  stroke: var(--ember-200);
  stroke-width: 2.5;
  fill-opacity: .75;
}
svg.floor-plan .bar-combo.status-pendiente  .bar-combo-capsule {
  fill: var(--floor-pendiente); fill-opacity: .55;
}
svg.floor-plan .bar-combo.status-confirmada .bar-combo-capsule {
  fill: var(--floor-confirmada); fill-opacity: .55;
}
svg.floor-plan .bar-combo.status-sentados   .bar-combo-capsule {
  fill: var(--floor-sentados); fill-opacity: .60;
  stroke: rgba(255, 255, 255, .50);
}
svg.floor-plan .bar-combo.status-no_show    .bar-combo-capsule {
  fill: var(--floor-no_show); fill-opacity: .50;
  stroke-dasharray: 4 3;
}
svg.floor-plan .bar-combo-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: rgba(255, 255, 255, .92);
  letter-spacing: .3px;
  pointer-events: none;
}

/* ---------- Hover/focus — warm ember glow ---------- */
svg.floor-plan .unit-link { cursor: pointer; outline: none; }
svg.floor-plan .unit { transition: opacity var(--t-fast) var(--ease); }
svg.floor-plan .unit-link:hover .unit-rect,
svg.floor-plan .unit-link:focus .unit-rect {
  stroke: var(--ember-200);
  stroke-width: 2.5;
}
svg.floor-plan .unit-link:hover .stool-circle,
svg.floor-plan .unit-link:focus .stool-circle {
  stroke: var(--ember-200);
  stroke-width: 2.5;
}

/* =============================================================================
   FLOOR TOOLTIP CARD — floats next to whichever unit-link is hovered
============================================================================= */

.floor-tip {
  position: absolute;
  z-index: 20;
  min-width: 180px;
  max-width: 240px;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, #2d2218 0%, #1c140d 100%);
  color: #f5e8d4;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-3);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 0, 0, .3);
  font-size: var(--fs-sm);
  pointer-events: none;
  animation: floor-tip-in 120ms var(--ease);
}
.floor-tip[hidden] { display: none; }

@keyframes floor-tip-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.floor-tip-head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.floor-tip-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: .3px;
  color: #ffffff;
}
.floor-tip-status {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--floor-table-libre);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.floor-tip[data-status="pendiente"]  .floor-tip-status { background: var(--floor-pendiente);  }
.floor-tip[data-status="confirmada"] .floor-tip-status { background: var(--floor-confirmada); }
.floor-tip[data-status="sentados"]   .floor-tip-status { background: var(--floor-sentados);   }
.floor-tip[data-status="no_show"]    .floor-tip-status { background: var(--floor-no_show);    }
.floor-tip[data-status="libre"]      .floor-tip-status { background: var(--floor-chair);      }

.floor-tip-body { display: flex; flex-direction: column; gap: 4px; }
.floor-tip-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3);
}
.floor-tip-row[hidden] { display: none; }
.floor-tip-key {
  color: rgba(255, 255, 255, .55);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
}
.floor-tip-val {
  color: #ffffff;
  font-weight: 500;
  text-align: right;
}
.floor-tip-val.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.floor-tip-hint {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: .3px;
}

/* =============================================================================
   RESERVATIONS TABLE
============================================================================= */

table.reservations {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  /* No `overflow: hidden` acá — clipearía el popover absoluto del overflow
     menu (⋯). El border-radius se respeta en las esquinas externas vía
     border-radius en las celdas extremas, abajo. */
  margin-top: var(--s-2);
  box-shadow: var(--depth-1);
}
/* Esquinas redondeadas del table — celdas extremas solo. Sin overflow:hidden
   en la table; ver comentario arriba. */
table.reservations thead tr:first-child th:first-child { border-top-left-radius: var(--r-3); }
table.reservations thead tr:first-child th:last-child { border-top-right-radius: var(--r-3); }
table.reservations tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-3); }
table.reservations tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-3); }
table.reservations th, table.reservations td {
  padding: var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  height: 44px;
}
table.reservations thead th {
  background: var(--surface-2);
  font-weight: 700; font-size: var(--fs-xs);
  color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .8px;
  position: sticky; top: 0; z-index: 5;
  box-shadow: inset 0 -1px 0 var(--line);
  border-bottom-color: transparent;
}
table.reservations tbody tr {
  transition: background var(--t-fast) var(--ease);
}
table.reservations tbody tr:hover { background: var(--surface-2); }
table.reservations tr:last-child td { border-bottom: none; }
table.reservations td:nth-child(2),
table.reservations td:nth-child(4) {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
table.reservations td:nth-child(2) { font-weight: 600; }
table.reservations td.mesa-id {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
}

/* --- Batch reassignment --- */
.col-sel { width: 32px; text-align: center !important; padding-left: var(--s-2) !important; padding-right: 0 !important; }
.col-sel input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.list-toolbar { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); align-items: center; flex-wrap: wrap; }
.list-toolbar-filters { display: flex; gap: var(--s-2); }
/* S7 — chip-filter: toggle "Solo online" en la toolbar de la tabla. */
.chip-filter {
  text-decoration: none;
  background: var(--ember-50);
  color: var(--ember-700);
  border-color: rgba(122, 50, 20, .25);
  font-weight: 600;
  cursor: pointer;
}
.chip-filter:hover { background: var(--ember-100); }
.chip-filter-active {
  background: var(--ember-600);
  color: white;
  border-color: var(--ember-700);
}
.chip-filter-active:hover { background: var(--ember-500); }

table.reassign-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); overflow: hidden; margin: var(--s-3) 0;
  box-shadow: var(--depth-1);
}
table.reassign-table th, table.reassign-table td {
  padding: var(--s-3); text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.reassign-table thead th {
  background: var(--surface-2); font-weight: 700; font-size: var(--fs-xs);
  color: var(--fg-muted); text-transform: uppercase; letter-spacing: .8px;
}
table.reassign-table tr:last-child td { border-bottom: none; }
table.reassign-table select {
  font-family: var(--font-mono); padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); color: var(--fg);
}

tr.status-sentados   { background: rgba(44, 110, 44, .04); }
tr.status-sentados:hover { background: rgba(44, 110, 44, .10); }
tr.status-no_show    td { color: var(--fg-muted); }
tr.status-no_show    { background: rgba(160, 35, 35, .04); }
tr.status-completada td { color: var(--fg-muted); }
tr.status-completada { opacity: .6; }
tr.status-cancelada  { opacity: .55; text-decoration: line-through; text-decoration-color: var(--fg-muted); }

/* Non-chromatic status reinforcement — a colored bar on the first cell of
   the row so status reads at a glance and survives color-blindness / B&W
   print. Pairs with the badge in the Estado column. */
table.reservations tr.status-pendiente  td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.reservations tr.status-confirmada td:first-child { box-shadow: inset 3px 0 0 var(--info); }
table.reservations tr.status-sentados   td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
table.reservations tr.status-completada td:first-child { box-shadow: inset 3px 0 0 var(--brown-400); }
table.reservations tr.status-no_show    td:first-child { box-shadow: inset 3px 0 0 var(--err); }
table.reservations tr.status-cancelada  td:first-child { box-shadow: inset 3px 0 0 var(--brown-400); }

/* =============================================================================
   STATUS BADGES
============================================================================= */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .8px;
  border-radius: var(--r-full);
  border: 1px solid;
  font-weight: 600;
}
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: var(--r-full);
  background: currentColor; opacity: .85;
}
.badge-pendiente  { background: var(--warn-bg); color: var(--warn-700); border-color: rgba(198, 154, 58, .35); }
.badge-confirmada { background: var(--info-bg); color: var(--info-700); border-color: rgba(29, 78, 160, .25); }
.badge-sentados   { background: var(--ok-bg);   color: var(--ok-700);   border-color: rgba(44, 110, 44, .3); }
.badge-no_show    { background: var(--err-bg);  color: var(--err-700);  border-color: rgba(160, 35, 35, .3); }
.badge-completada { background: var(--brown-100); color: var(--fg-muted); border-color: var(--line); }
.badge-cancelada  { background: var(--brown-100); color: var(--fg-muted); border-color: var(--line); }
/* S7 — origen=online: reserva que entró por la página pública. Color
   ember para distinguirla a primera vista del color status (warn/info/ok).
   Letter-spacing + uppercase para que parezca "stamp", no estado. */
.badge-online {
  background: var(--ember-50);
  color: var(--ember-700);
  border-color: rgba(122, 50, 20, .35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72em;
}

/* Item 2026-06-09 PM: badge canal preferido (📧 Email / 💬 SMS /
   💬📧 WA+Email). Tono blue-ish neutral para distinguirlo del ONLINE
   stamp ember y de los status badges. */
.badge-canal {
  background: var(--info-bg, #e8eef9);
  color: var(--info-700, #1d4ea0);
  border-color: rgba(29, 78, 160, .25);
  font-size: 0.72em;
  letter-spacing: 0.01em;
}

/* Guest CRM (2026-06-21): badges de perfil del comensal en la vista del
   día. VIP/embajador en tono cálido, alergia en rojo de alerta. */
.badge-vip {
  background: var(--warn-bg, #faf2dc);
  color: var(--warn-700, #8a6116);
  border-color: rgba(198, 154, 58, .4);
  font-size: 0.72em;
  font-weight: 600;
}
.badge-embajador {
  background: var(--ember-50, #fbece4);
  color: var(--ember-700, #7a3214);
  border-color: rgba(122, 50, 20, .3);
  font-size: 0.72em;
  font-weight: 600;
}
.badge-alergia {
  background: var(--err-bg, #f7e6e6);
  color: var(--err-700, #a02323);
  border-color: rgba(160, 35, 35, .35);
  font-size: 0.72em;
  font-weight: 600;
}

/* Nombre clickeable que linkea a /cliente/{id}. Hereda el estilo de
   .customer-name pero con affordance de link (subraya en hover). */
.customer-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line, #d8cfc4);
}
.customer-name-link:hover { border-bottom-style: solid; }

/* Ficha del cliente — alerta de alergias/restricciones destacada arriba. */
.cliente-alert {
  background: var(--err-bg, #f7e6e6);
  border: 1px solid rgba(160, 35, 35, .25);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
}
.cliente-alert-line { margin: 2px 0; color: var(--err-700, #a02323); }
.cliente-section-title {
  font-size: var(--fs-md, 1rem);
  margin: 0 0 12px;
}
.cliente-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}
.checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
.cliente-historial { width: 100%; border-collapse: collapse; }
.cliente-historial th,
.cliente-historial td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, #e5ddd2);
}
.cliente-historial th { font-weight: 600; color: var(--fg-muted, #6b6157); }

/* =============================================================================
   ACTIONS CELL — Overflow Menu Pattern (Linear / Stripe / Notion)
   ────────────────────────────────────────────────────────────────
   3 elementos máximo por fila, siempre right-aligned, ritmo idéntico:

     [ Acción primaria ]  [ Modificar ]  [ ⋯ ]

   Por estado:
   - Pendiente   → ✓ Confirmar  + Modificar + ⋯ {Sentar, No-show, Cancelar}
   - Confirmada  → 🪑 Sentar     + Modificar + ⋯ {No-show, Cancelar}
   - Sentados    →               Modificar + ⋯ {Cancelar}
   - Terminal    → (nada — estado final)

   Ventaja vs grid 5-col anterior: las filas con menos acciones (sentados)
   no dejan slots vacíos a la izquierda — Modificar y ⋯ alinean verticalmente
   entre TODAS las filas, sin huecos visuales raros. Trade-off: 1 click extra
   para las acciones secundarias (no-show, cancel), que son las menos
   frecuentes operativamente.

   Regla CRÍTICA → memory/feedback-alignment-critical.md.
============================================================================= */

/* La celda se mantiene como table-cell (NO flex) para preservar el
   vertical-align: middle de table.reservations td. El flex container está
   adentro en .actions-row — sin esto, las filas con nombres largos (e.g.
   "Sebastian antonio carlos gonexz perez" wrappeado a 5 líneas) dejaban los
   botones pegados al borde superior. */
table.reservations td.actions {
  text-align: right;
}
.actions-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.actions-row form.inline {
  display: contents;
  margin: 0;
}
/* Alias para retro-compatibilidad — el form.inline directo dentro de .actions
   (sin pasar por .actions-row) se mantiene contents. */
.actions form.inline {
  display: contents;
  margin: 0;
}

/* Base: misma altura, borde y radio para TODAS las acciones inline.
   44×44 mínimo para touch target (WCAG 2.5.5 AAA / Apple HIG). */
.actions-row button,
.actions-row .btn,
.actions button,
.actions .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2);
  color: var(--fg);
  box-shadow: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.actions-row button svg,
.actions-row .btn svg,
.actions button svg,
.actions .btn svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* Acción primaria — con label, peso visual fuerte por estado.
   min-width garantiza que Confirmar (9 letras) y Sentar (6 letras) tengan
   exactamente el mismo ancho — sin esto, el ojo lee la diferencia como
   "los botones no están alineados". */
.actions .col-primary {
  padding: 0 var(--s-3);
  gap: 6px;
  font-weight: 600;
  min-width: 120px;
}
.actions .col-primary.col-confirm {
  background: var(--ok-bg) !important;
  border-color: rgba(44, 110, 44, .35) !important;
  color: var(--ok-700) !important;
}
.actions .col-primary.col-confirm:hover {
  background: #d1ebd1 !important;
  border-color: var(--ok) !important;
}
.actions .col-primary.col-seat {
  background: var(--accent-soft) !important;
  border-color: rgba(122, 50, 20, .3) !important;
  color: var(--accent) !important;
}
.actions .col-primary.col-seat:hover {
  background: var(--ember-100) !important;
  border-color: var(--accent) !important;
}
.actions .col-primary.col-finish {
  background: var(--brown-100, #f0ebe4) !important;
  border-color: rgba(120, 100, 70, .35) !important;
  color: var(--fg-muted) !important;
}
.actions .col-primary.col-finish:hover {
  background: #e4ddd3 !important;
  border-color: rgba(120, 100, 70, .6) !important;
  color: var(--fg) !important;
}

/* Modificar — icon-only 44×44, mismo tamaño que ⋯ y demás icon buttons.
   Tinte info-blue permanente para diferenciar de status actions. Sebi OK'd
   icon-only (sin label "Modificar") en esta iteración a cambio de consistencia
   visual: todos los icon buttons cuadrados, primary con label permanece más
   ancho. */
.actions .btn-modify {
  background: var(--info-bg) !important;
  border-color: rgba(29, 78, 160, .3) !important;
  color: var(--info-700) !important;
  padding: 0 var(--s-2);
  min-width: 44px;
}
.actions .btn-modify:hover {
  background: #d4e0f3 !important;
  border-color: var(--info, #1d4ea0) !important;
}
/* Si en algún sitio aún viene con label, escondelo silenciosamente. */
.actions .btn-modify .btn-label { display: none; }

/* Overflow trigger ⋯ — icon-only, 44×44 cuadrado, neutro. */
.overflow-menu {
  position: relative;
  display: inline-flex;
}
.overflow-menu > summary {
  list-style: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-2);
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-2);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.overflow-menu > summary::-webkit-details-marker { display: none; }
.overflow-menu > summary::marker { display: none; }
.overflow-menu > summary svg { width: 16px; height: 16px; }
.overflow-menu > summary:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--fg);
}
.overflow-menu[open] > summary {
  background: var(--brown-100) !important;
  border-color: var(--line-strong) !important;
  color: var(--fg);
}

/* Popover — se ancla al ⋯ y sale hacia abajo-izquierda. Visible SOLO cuando
   <details> está abierto. Sin esto, `display: flex` ganaba al hide nativo
   del browser para children non-summary de un <details> cerrado. */
.overflow-content {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--depth-2);
}
.overflow-menu[open] > .overflow-content { display: flex; }
.overflow-content form.inline { display: block; }

/* Item del popover — label completo, mínimo 44px alto para touch. */
.overflow-item {
  display: flex !important;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  justify-content: flex-start !important;
}
.overflow-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-muted); }
.overflow-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
.overflow-item-warn { color: var(--warn-700); }
.overflow-item-warn svg { color: var(--warn-700); }
.overflow-item-warn:hover { background: var(--warn-bg) !important; }
.overflow-item-danger { color: var(--err-700); }
.overflow-item-danger svg { color: var(--err-700); }
.overflow-item-danger:hover { background: var(--err-bg) !important; border-color: rgba(160, 35, 35, .2) !important; }

/* Focus ring común — accesibilidad. */
.actions button:focus-visible,
.actions .btn:focus-visible,
.overflow-menu > summary:focus-visible,
.overflow-item:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: var(--depth-focus) !important;
}

/* Reserve enough room para el patrón overflow menu: primary con label (~96) +
   Modificar 44 + ⋯ 44 + 2 gaps 16 = ~200px. Margen extra para padding. */
table.reservations td.actions,
table.reservations th:last-child {
  min-width: 220px;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Mobile: tabla → cards apiladas. Cada reserva es una card autónoma para que
     todas las acciones quepan sin scroll horizontal en 375px. */
  table.reservations,
  table.reservations thead,
  table.reservations tbody { display: block; box-shadow: none; }
  table.reservations { border: 0; background: transparent; }
  table.reservations thead { display: none; }
  table.reservations tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "sel time status"
      "name name name"
      "pax mesa mesa"
      "act act act";
    column-gap: var(--s-3);
    row-gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: var(--s-2) var(--s-3);
    margin-bottom: var(--s-2);
    box-shadow: var(--depth-1);
  }
  table.reservations tbody tr:hover { background: var(--surface); }
  table.reservations tbody tr td {
    display: block; border: 0; padding: 0; min-width: 0 !important;
  }
  table.reservations tbody td.col-sel { grid-area: sel; align-self: center; }
  table.reservations tbody td:nth-child(2) {
    grid-area: time;
    font-family: var(--font-mono); font-weight: 700;
    font-size: var(--fs-lg);
    align-self: center;
  }
  table.reservations tbody td:nth-child(3) {
    grid-area: name; font-weight: 700; font-size: var(--fs-md);
  }
  table.reservations tbody td:nth-child(4) {
    grid-area: pax; font-family: var(--font-mono); font-size: var(--fs);
    color: var(--fg); font-weight: 600;
  }
  table.reservations tbody td:nth-child(4)::before {
    content: 'Pax '; color: var(--fg-muted); font-weight: 400;
  }
  table.reservations tbody td:nth-child(5) {
    grid-area: mesa; font-family: var(--font-mono); font-size: var(--fs);
    color: var(--fg); font-weight: 600;
    text-align: left !important;
  }
  table.reservations tbody td:nth-child(5)::before {
    content: 'Mesa '; color: var(--fg-muted); font-weight: 400;
  }
  table.reservations tbody td:nth-child(6) {
    grid-area: status; text-align: right; align-self: center;
  }
  table.reservations tbody td.actions {
    grid-area: act;
    padding-top: var(--s-2); margin-top: 4px;
    text-align: left !important;
  }
  table.reservations tbody td.actions .actions-row {
    justify-content: flex-end; gap: var(--s-2);
  }
  table.reservations tbody td.actions .actions-row form { flex: 1; }
  table.reservations tbody td.actions .actions-row > .col-primary,
  table.reservations tbody td.actions .actions-row > form > .col-primary {
    width: 100%;
  }
  table.reservations tbody td.actions .col-modify,
  table.reservations tbody td.actions .overflow-menu > summary {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  table.reservations tbody td.actions .col-primary { min-height: 44px; }
  /* WA-link + Email-link más grandes para tap cómodo en cards.
     2026-06-09 PM Sebi: agregar email-link al selector para que los
     dos iconos compartan tamaño y queden alineados. */
  .cell-customer .wa-link,
  .cell-customer .email-link { width: 40px; height: 40px; }
  /* Chips de availability — bump touch target en mobile. */
  .availability .chip { min-height: 40px; padding: 8px 12px; }

  .availability .chip { min-height: 40px; padding: 8px 12px; }
  .avail-2p .chip { min-width: 56px; }


  /* ───── Card mobile — hora a color + badge inline ──────────────────────── */
  table.reservations tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: none;
    column-gap: var(--s-2); row-gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--depth-1);
    padding: var(--s-3) var(--s-3) var(--s-4);
    margin-bottom: var(--s-2);
    align-items: center;
  }
  table.reservations tbody tr:hover { background: var(--surface); }
  table.reservations tbody tr td {
    display: block; border: 0; padding: 0; min-width: 0 !important;
    height: auto;
  }
  table.reservations tr td:first-child {
    box-shadow: none !important;
  }

  table.reservations tbody td.col-sel {
    grid-column: 1; grid-row: 1;
    align-self: center; justify-self: center;
    padding-right: var(--s-2);
    display: inline-flex; align-items: center;
  }
  table.reservations tbody td.col-sel input[type="checkbox"] {
    width: 22px; height: 22px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
  }

  table.reservations tbody td:nth-child(2) {
    grid-column: 2; grid-row: 1;
    align-self: center;
    font-family: var(--font-body); font-weight: 700;
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1;
    white-space: nowrap;
  }
  table.reservations tbody td:nth-child(2)::before {
    content: '';
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--fg-muted);
    flex: 0 0 auto;
  }

  table.reservations tbody td:nth-child(3) {
    grid-column: 3; grid-row: 1;
    align-self: center;
    display: flex; align-items: center; gap: var(--s-2);
    min-width: 0;
    font-family: var(--font-body); font-weight: 700;
    font-size: var(--fs-md);
    color: var(--fg);
    line-height: 1;
  }
  table.reservations tbody td:nth-child(3) .customer-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1 1 auto;
  }
  table.reservations tbody td:nth-child(3) .wa-link,
  table.reservations tbody td:nth-child(3) .email-link {
    flex: 0 0 auto;
  }

  table.reservations tbody td:nth-child(4) {
    grid-column: 2; grid-row: 2;
    justify-self: end;
    align-self: center;
    font-family: var(--font-mono); font-size: var(--fs);
    color: var(--fg); font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  table.reservations tbody td:nth-child(4)::before {
    content: 'Pax '; color: var(--fg-muted); font-weight: 400;
  }

  table.reservations tbody td:nth-child(5) {
    grid-column: 3; grid-row: 2;
    align-self: center;
    font-family: var(--font-mono); font-size: var(--fs);
    color: var(--fg); font-weight: 600;
    text-align: left !important;
    line-height: 1;
    white-space: nowrap;
  }
  table.reservations tbody td:nth-child(5)::before {
    content: 'Mesa '; color: var(--fg-muted); font-weight: 400;
  }

  table.reservations tbody td:nth-child(6) {
    grid-column: 3; grid-row: 2;
    justify-self: end;
    align-self: center;
    display: inline-flex; align-items: center;
    line-height: 1;
    position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; white-space: normal;
    margin: 0; padding: 0; border: 0;
  }

  table.reservations tbody td.actions {
    grid-column: 1 / -1; grid-row: 3;
    padding-top: var(--s-3);
    margin-top: 0;
    border-top: 0 !important;
    text-align: left !important;
  }

  table.reservations tr.status-pendiente  td:nth-child(2) { color: var(--warn-700); }
  table.reservations tr.status-pendiente  td:nth-child(2)::before { background: var(--warn); }
  table.reservations tr.status-confirmada td:nth-child(2) { color: var(--info-700); }
  table.reservations tr.status-confirmada td:nth-child(2)::before { background: var(--info); }
  table.reservations tr.status-sentados   td:nth-child(2) { color: var(--ok-700); }
  table.reservations tr.status-sentados   td:nth-child(2)::before { background: var(--ok); }
  table.reservations tr.status-no_show    td:nth-child(2) {
    color: var(--err); text-decoration: line-through;
  }
  table.reservations tr.status-no_show    td:nth-child(2)::before { background: var(--err); }
  table.reservations tr.status-cancelada  td:nth-child(2) {
    color: var(--fg-muted); text-decoration: line-through;
  }
  table.reservations tr.status-cancelada  td:nth-child(2)::before { background: var(--fg-muted); }
}

form.inline { display: inline; margin: 0; }

/* =============================================================================
   EMPTY STATE
============================================================================= */

.empty {
  color: var(--fg-muted);
  font-style: italic;
  margin: var(--s-3) 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  text-align: center;
}

/* Empty state estructurado con icono + headline + sub + CTA.
   Reemplaza el "Sin reservas." genérico — da contexto y un siguiente paso. */
.empty-state {
  margin: var(--s-4) 0;
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.empty-state-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brown-100);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-2);
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg);
}
.empty-state p {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  max-width: 44ch;
}
.empty-state-cta {
  margin-top: var(--s-3);
  gap: 6px;
  min-height: 44px;
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}
.empty-state-cta svg { width: 16px; height: 16px; }

/* =============================================================================
   EDIT PAGE
============================================================================= */

.edit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  max-width: 860px;
  box-shadow: var(--depth-2);
}
.edit-card .muted { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0; }
.edit-card form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }

/* Desktop / wide tablet: form a 2 columnas. Nombre+Apellido pareados,
   Teléfono+Personas pareados, el resto full-width. nth-of-type ignora los
   <input type=hidden> que viven antes de los labels. */
@media (min-width: 760px) {
  .edit-card form.edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3) var(--s-5);
  }
  .edit-card form.edit-form > label:nth-of-type(n+5),
  .edit-card form.edit-form > .form-actions {
    grid-column: 1 / -1;
  }
  /* Variant=dev sub-flag edit_layout=2col: pares Fecha+Mesa también.
     Solo Notas (.full-row) y form-actions quedan full-width. */
  .edit-card form.edit-form.edit-form-2col > label:nth-of-type(n+5) {
    grid-column: auto;
  }
  .edit-card form.edit-form.edit-form-2col > label.full-row,
  .edit-card form.edit-form.edit-form-2col > .form-actions {
    grid-column: 1 / -1;
  }
}
.edit-card label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--fg-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.edit-card input { font-size: var(--fs); min-height: 38px; }
.edit-card input:focus {
  border-color: var(--accent); box-shadow: var(--depth-focus);
}
.edit-card .form-actions {
  display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-2);
}

.edit-card .context-block {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-4);
  margin: var(--s-3) 0 var(--s-2);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.edit-card .context-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); font-size: var(--fs-sm);
}
.edit-card .context-label {
  color: var(--fg-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  font-size: var(--fs-xs); flex-shrink: 0;
}
.edit-card .context-value {
  color: var(--fg); text-align: right;
}
.edit-card .context-value .badge { margin: 0; }

.edit-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3);
}
.edit-customer {
  font-size: var(--fs-lg); font-weight: 700; margin: 0; color: var(--fg);
}
.badge-lg { font-size: var(--fs-sm); padding: 4px 12px; }

.quick-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-1);
}
.quick-actions .btn { font-size: var(--fs-sm); gap: 4px; }
.quick-actions .btn svg { width: 14px; height: 14px; }
.btn-warn {
  color: var(--warn); border-color: var(--warn);
}
.btn-warn:hover { background: var(--warn); color: #fff; }
.btn-danger {
  color: var(--err); border-color: var(--err);
}
.btn-danger:hover { background: var(--err); color: #fff; }
.btn-sm { font-size: var(--fs-xs); padding: 2px 6px; min-height: 0; }
.btn-wa {
  background: #25d366; color: #fff; border: none; border-radius: var(--r-2);
  font-weight: 700; margin-left: var(--s-2); vertical-align: middle;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-wa:hover { background: #128c7e; color: #fff; }

/* Icon-only WA shortcut inside the reservations row, next to the customer
   name. Uses the WhatsApp green at low intensity so it doesn't shout from
   every row; the colour intensifies on hover. */
.cell-customer { display: flex; align-items: center; gap: var(--s-2); }
.cell-customer .customer-name { flex: 1; min-width: 0; }
.wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: #128c7e; background: transparent;
  text-decoration: none; transition: background 120ms, color 120ms;
  flex: 0 0 auto;
}
@media (hover: hover) {
  .wa-link:hover { background: #25d366; color: #fff; }
}
.wa-link:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }

/* Item 2026-06-09 PM: variante con logo WhatsApp oficial (fill, no stroke).
   Mismo container que wa-link pero color base whatsapp-green más visible
   porque el SVG es solid-fill. */
.wa-link-svg {
  color: #25d366;
}
@media (hover: hover) {
  .wa-link-svg:hover { background: rgba(37, 211, 102, 0.18); color: #128c7e; }
}

/* Email link — espejo del wa-link pero con la paleta info/blue del badge
   canal. Mismo tamaño 24px circle, hover intensifica.
   2026-06-21 (Sebi): el wa-link-svg es fill sólido y el mail es contorno fino,
   así que al lado se veía más chico/liviano y el azul oscuro (#1d4ea0) leía
   gris. Lo emparejamos: azul más vivo (#2563eb) + trazo más grueso + un pelo
   más grande de SVG para igualar el peso visual del WhatsApp. */
.email-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: #2563eb; background: transparent;
  text-decoration: none; transition: background 120ms, color 120ms;
  flex: 0 0 auto;
}
.email-link svg { width: 18px; height: 18px; stroke-width: 2.4; }
@media (hover: hover) {
  .email-link:hover { background: rgba(37, 99, 235, 0.15); color: #1d4ed8; }
}
.email-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* =============================================================================
   LOGIN
============================================================================= */

/* Login = única superficie con register brand. Wordmark grande sobre el cream
   firma la página; el card se concentra en saludo + form con copy rioplatense.
   Topbar wordmark queda visible arriba; no se duplica. Sin emoji, sin gradient
   text. */

.login-page {
  /* Alto restando topbar (56px) — centra el stack (wordmark + card) en el viewport. */
  min-height: calc(100vh - 56px);
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) calc(var(--s-8) * -1);
  padding: var(--s-7) var(--s-5);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(122, 50, 20, .04) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(176, 122, 26, .05) 0%, transparent 50%),
    var(--brown-50);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-6);
  position: relative;
}

/* Grano sutil de papel/madera — SVG noise inline, no asset extra */
.login-page::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/><feColorMatrix values='0 0 0 0 .15 0 0 0 0 .09 0 0 0 0 .05 0 0 0 .07 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

.login-wordmark {
  display: block;
  height: 96px;
  width: auto;
  position: relative;
  z-index: 1;
  /* Sobre el cream: solo highlight tenue, sin sombra que ensucie el fondo */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}

.login-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  padding: var(--s-8) var(--s-7) var(--s-7);
  border-radius: var(--r-4);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 1px 2px rgba(42, 31, 23, .06),
    0 12px 32px rgba(42, 31, 23, .12),
    0 32px 60px rgba(42, 31, 23, .10);
}

/* Línea ember-gold tenue arriba del card como "marca de servicio" */
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--ember-600));
  border-radius: 0 0 var(--r-2) var(--r-2);
}

.login-greet {
  margin: 0 0 var(--s-2);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.5px;
  color: var(--fg);
  line-height: 1.2;
}
.login-greet em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

.login-tagline {
  margin: 0 0 var(--s-6);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: .3px;
}

.login-flash {
  margin: 0 0 var(--s-4);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.login-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.login-card input {
  padding: var(--s-3) var(--s-4);
  min-height: 46px;
  font-size: var(--fs);
  background: var(--brown-50);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--fg);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.login-card input:hover { border-color: var(--line-strong); }
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: var(--depth-focus);
}

.login-card button {
  margin-top: var(--s-2);
  background: var(--accent);
  color: white;
  border: 1px solid var(--ember-700);
  padding: var(--s-3) var(--s-5);
  font-weight: 700;
  font-size: var(--fs);
  min-height: 48px;
  border-radius: var(--r-2);
  letter-spacing: .2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .15) inset,
    var(--depth-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.login-card button:hover {
  background: var(--accent-hi);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .15) inset,
    var(--depth-3);
}
.login-card button:active { transform: translateY(.5px); }
.login-card button:focus-visible {
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .15) inset,
    var(--depth-focus);
}

.login-hours {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--fg-subtle);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .login-page {
    padding: var(--s-5) var(--s-4);
  }
  .login-card {
    padding: var(--s-7) var(--s-5) var(--s-5);
  }
  .login-greet { font-size: 26px; }
}

/* =============================================================================
   SCROLLBAR (subtle but visible)
============================================================================= */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--brown-400);
  border: 2px solid var(--brown-100);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--brown-600); }

/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 900px) {
  main { padding: var(--s-3); }
  .availability { gap: var(--s-2); }
  .occ-strip { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .occ-stats { justify-content: space-between; }
}

@media (max-width: 640px) {
  main { padding: var(--s-3); }
  .date-nav h1 { font-size: var(--fs-md); }
  table.reservations th, table.reservations td { padding: 6px 8px; font-size: var(--fs-sm); }
  table.reservations { display: block; overflow-x: auto; }
  .topbar { padding: 0 var(--s-3); }
}

/* =============================================================================
   LAYOUT V2 — MOBILE-FIRST (ruta /v2)
   Scope: todo bajo .layout-v2 — la v1 (day.html sin esa clase) NO se toca.

   Estructura:
     - Base (sin @media) = phone ≤767px: plano oculto y accesible via dialog,
       tabla clásica (misma que v1), sticky bar apilada.
     - @media (min-width: 768px) = tablet/desktop: plano full-width in-flow,
       sticky bar 2-col.
     - @media (min-width: 1200px) ya cubierto por v2 desktop.
============================================================================= */

/* ---------- Base mobile ---------- */

/* Service tabs — special events with multiple turnos */
.service-tabs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  margin-bottom: var(--s-2);
  border-bottom: 2px solid var(--line);
}
.service-tabs-event {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ember-300, #c9510c);
  margin-right: var(--s-1);
}
.service-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius, 6px);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--fg-muted);
  background: var(--bg-soft, var(--bg));
  border: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.service-tab:hover { background: var(--bg-hover, #f5f5f5); color: var(--fg); }
.service-tab.active {
  background: var(--ember-500, #d94f00);
  color: #fff;
  border-color: var(--ember-500, #d94f00);
}

/* Nota: clase histórica "sticky-bar" — ya NO es sticky (Sebi pidió quitarlo
   2026-06-03; el contenido se mantiene pero no se pega al scroll). El name
   queda por inercia para no tocar todas las referencias. */
.layout-v2 .sticky-bar {
  background: var(--bg);
  padding: var(--s-2) 0;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.layout-v2 .sticky-bar .occ-strip,
.layout-v2 .sticky-bar .availability {
  margin: 0;
}
/* Availability chips: compact on mobile. */
.layout-v2 .sticky-bar .availability {
  scrollbar-width: none;  /* Firefox */
}
.layout-v2 .sticky-bar .availability::-webkit-scrollbar { display: none; }

/* Plano fijo in-flow también en mobile (Sebi 2026-06-03: prefiere verlo
   siempre que esconderlo detrás de un botón). Container compacto, SVG se
   escala al ancho disponible. El botón "Ver plano" y el dialog modal
   quedan en el DOM como fallback pero se ocultan vía CSS — el JS de
   modal abierto/cerrado igual funciona si alguna acción lo dispara. */
.layout-v2 .floor-wrap-v2 {
  display: block;
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--depth-1);
}
.layout-v2 .floor-wrap-v2 svg.floor-plan {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.layout-v2 .floor-open-btn { display: none; }
.layout-v2 .floor-modal { display: none; }
.layout-v2 .floor-modal[open] { display: none; }

/* La sección "Servicio" no debe agregar margin-bottom extra. */
.layout-v2 .service { margin-bottom: var(--s-4); }

/* ---------- Tablet/desktop (≥768px) — restaura v2 ---------- */

@media (min-width: 768px) {
  /* Sebi 2026-06-03: occ-strip arriba (full-width), chips debajo — mismo
     stack vertical que mobile pero con más respiración. Antes era
     side-by-side; quedaba más cargado visualmente. */
  .layout-v2 .sticky-bar {
    flex-direction: column;
    gap: var(--s-3);
    align-items: stretch;
  }
  .layout-v2 .sticky-bar .availability { overflow-x: visible; }

  /* Plano in-flow + botón / modal off. */
  .layout-v2 .floor-wrap-v2 {
    display: block;
    max-width: 1100px;
    margin: var(--s-4) auto;
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    box-shadow: var(--depth-1);
  }
  .layout-v2 svg.floor-plan { max-width: none; margin: 0 auto; }
  .layout-v2 .floor-open-btn { display: none; }
  /* El dialog no debe abrirse en desktop (el botón está oculto). Pero por las
     dudas (devtools, JS externo), lo neutralizamos. */
  .layout-v2 .floor-modal[open] { display: none; }

}

/* =============================================================================
   LAYOUT V2 — additions for: date-picker overlay, closed-day banner,
   responsive helpers (.hide-mobile, .desktop-only).
   Scope: todo bajo .layout-v2.
============================================================================= */

/* Title del día doblando como trigger del calendario nativo. El <input
   type=date> queda absolute, opacity 0, encima del <h1>. Tocarlo abre el
   picker del OS (iOS/Android/desktop). Cambia el cursor a pointer y el
   chevron sugiere que es clickeable. */
/* En mobile, la date-nav se ajusta con flex-wrap. El título queda en el row
   1 con las flechas; "Hoy"/"Planilla" pasan al row 2. El container ocupa
   exactamente el ancho del h1 (no expande), así el overlay del input nativo
   queda solo encima del título — no captura clicks en espacio vacío. */
.layout-v2 .date-nav {
  flex-wrap: wrap;
  row-gap: var(--s-2);
}
.layout-v2 .date-title {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.layout-v2 .date-title h1 {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  cursor: pointer;
  margin: 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-2);
  transition: background var(--t-fast) var(--ease);
}
.layout-v2 .date-title:hover h1 { background: var(--surface-2); }
.layout-v2 .date-title h1 svg {
  opacity: .55;
  width: 18px;
  height: 18px;
}
/* Date input overlay: cubre exactamente el área del h1, transparente,
   captura todos los clicks. El usuario ve el h1 (texto + chevron) y al
   tocarlo, el browser abre el picker nativo — sin JS, sin showPicker().
   Patrón canónico recomendado por MDN/Apple para iOS Safari. */
.layout-v2 .date-picker-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Evita zoom en iOS al recibir focus. */
  font-size: 16px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  z-index: 2;
  /* Algunos browsers heredan appearance/min-width que rompe el inset.
     Forzamos un reset blando. */
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}
/* Focus-visible feedback va al contenedor (no al input invisible). */
.layout-v2 .date-picker-overlay:focus-visible + ::before { /* sin uso */ }
.layout-v2 .date-title:focus-within h1 {
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

/* Banner prominente "no hay servicio" — solo lunes/martes. Se renderiza
   justo después del date-nav y reemplaza todo el contenido del día. */
.layout-v2 .closed-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6) var(--s-4);
  margin: var(--s-4) 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--depth-1);
}
.layout-v2 .closed-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  background: var(--brown-50);
  color: var(--brown-500);
}
.layout-v2 .closed-banner-icon svg {
  width: 28px;
  height: 28px;
}
.layout-v2 .closed-banner h2 {
  margin: 0 0 var(--s-1) 0;
  font-size: var(--fs-lg);
  font-weight: 700;
}
.layout-v2 .closed-banner p {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

/* Helpers responsivos. `.hide-mobile` se oculta a ≤767px (mobile); `.desktop-only`
   idem. Ambos son equivalentes — dejamos los dos nombres porque comunican
   intent distinto en el HTML ("texto opcional" vs "botón opcional"). */
.layout-v2 .hide-mobile,
.layout-v2 .desktop-only { display: none; }
@media (min-width: 768px) {
  .layout-v2 .hide-mobile { display: inline; }
  .layout-v2 .desktop-only { display: inline-flex; }
}

/* "Hoy" capitalized en mobile (cuando aparece solo), minúscula en desktop
   (cuando viene precedido por "Volver a "). */
.layout-v2 .today-label { text-transform: capitalize; }
@media (min-width: 768px) {
  .layout-v2 .today-label { text-transform: lowercase; }
}