/* ============================================================
   BRAND LAYER — Mesa y Comanda (v1.0 · 22/10/2026)
   Capa de marca sobre admin.css: misma paleta, tipografía,
   iconos de línea y ritmo que mesaycomanda.com.
   Para volver al aspecto anterior basta con quitar el <link>.
   ============================================================ */

:root {
  /* Marca (idéntica a la web) */
  --navy: #151A40;
  --navy-2: #0F1226;
  --navy-3: #232A55;
  --navy-line: #2E3566;
  --lav: #9FB0FF;
  --lav-2: #C9D1FF;
  --lav-soft: #EEF0FF;
  --lav-ink: #3B4BB8;
  --mist: #EEF0F8;
  --line: #DCDFEA;
  --line-2: #C3C7D6;
  --ink: #151A40;
  --ink-2: #4A5070;
  --ink-3: #585E7E;
  --on-navy-2: #C4C9E4;

  /* Tokens del panel remapeados a la marca */
  --bg: #F4F5FA;
  --surface: #FFFFFF;
  --primary: var(--navy);
  --primary-dark: var(--navy-2);
  --primary-light: var(--navy-3);
  --primary-hover: var(--navy-3);
  --primary-alpha: rgba(21, 26, 64, 0.08);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border: var(--line);
  --border-light: #E8EAF2;
  --hover: #F6F7FB;
  --secondary-light: #FFFFFF;

  --success: #1F6B4A;
  --success-light: #E7F2EC;
  --warning: #C2581A;
  --warning-light: #FBEFE6;
  --danger: #B42318;
  --danger-light: #FBECEA;
  --info: var(--lav-ink);
  --info-light: var(--lav-soft);

  --st-pendiente-bg: #FBEFE6;   --st-pendiente: #B4500F;
  --st-confirmada-bg: #E7F2EC;  --st-confirmada: #1F6B4A;
  --st-cancelada-bg: #FBECEA;   --st-cancelada: #B42318;
  --st-avisada-bg: #EEF0FF;     --st-avisada: #3B4BB8;
  --st-menu-bg: #F1EEFF;        --st-menu: #5B4BB8;
  --st-reserva-bg: #EEF0F8;     --st-reserva: #151A40;
  --st-noshow-bg: #F4F5FA;      --st-noshow: #585E7E;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-xs: 0 1px 2px rgba(21, 26, 64, 0.05);
  --shadow: 0 1px 2px rgba(21, 26, 64, .06), 0 8px 24px -12px rgba(21, 26, 64, .14);
  --shadow-md: 0 1px 2px rgba(21, 26, 64, .06), 0 12px 32px -12px rgba(21, 26, 64, .18);
  --shadow-lg: 0 2px 6px rgba(15, 18, 38, .12), 0 30px 60px -20px rgba(15, 18, 38, .35);
  --shadow-hover: var(--shadow-md);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --focus: 0 0 0 3px rgba(159, 176, 255, .55);
}

/* ─── Tipografía: Lato en todo, cifras tabulares ─── */
body, button, input, select, textarea {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body { background: var(--bg); color: var(--ink); }
.stat-number, .day-nav-date, .res-time, .comanda-name, .inf-tabla td { font-variant-numeric: tabular-nums; }

/* ─── Iconos de línea (como en la web) ─── */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.mi {
  font-size: 1.1em !important;
  vertical-align: -0.2em;
  line-height: 1;
}

/* ─── Foco visible y accesible ─── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus) !important;
  border-radius: 8px;
}
::selection { background: var(--lav-2); color: var(--navy); }

/* ─────────────────────────────────────────────── */
/* LOGIN                                            */
/* ─────────────────────────────────────────────── */
.login-screen {
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(159, 176, 255, .22), transparent 60%),
    radial-gradient(700px 400px at 100% 110%, rgba(159, 176, 255, .10), transparent 60%),
    var(--navy);
}
.login-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px 32px;
}
.login-logo-container { flex-direction: column; gap: 12px; margin-bottom: 4px; }
.login-logo-img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 8px 24px -8px rgba(21, 26, 64, .45); }
.login-wordmark { font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; color: var(--navy); }
.login-subtitle { color: var(--ink-3); margin-bottom: 24px; }
.pin-label { color: var(--ink-3) !important; letter-spacing: .14em; }
.pin-dot { border-color: var(--navy); }
.pin-dot.filled { background: var(--navy); }
.pin-key {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(21, 26, 64, .06);
}
.pin-key:hover { border-color: var(--line-2); background: #F6F7FB; }
.pin-key:active, .pin-key.active { background: var(--lav-soft); border-color: var(--lav); color: var(--navy); }
.pin-key-action { background: var(--mist); color: var(--ink-2); }
.pin-key-action .material-symbols-rounded { font-size: 22px; }
.login-card .btn-primary { height: 52px; font-size: 1rem; border-radius: 999px; }
.login-error { background: var(--danger-light); color: var(--danger); border-radius: var(--radius-sm); }

/* ─────────────────────────────────────────────── */
/* SIDEBAR                                          */
/* ─────────────────────────────────────────────── */
.sidebar {
  background: var(--navy);
  box-shadow: none;
  border-right: 1px solid var(--navy-line);
}
.sidebar-header {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-brand-container { align-items: center; gap: 10px; }
.sidebar-logo-img { height: 34px; max-height: 34px; filter: none; }
.sidebar-logo-img:hover { transform: none; }
.sidebar-wordmark {
  color: #fff;
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.sidebar-nav { padding: 14px 12px; }
.nav-link {
  position: relative;
  color: var(--on-navy-2);
  font-weight: 700;
  font-size: .9rem;
  padding: 11px 14px;
  border-radius: 12px;
  margin: 2px 0;
}
.nav-link .nav-icon { font-size: 21px; opacity: .9; }
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.active {
  background: rgba(159, 176, 255, .14);
  color: #fff;
}
.nav-link.active .nav-icon { color: var(--lav); opacity: 1; }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lav);
}
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-plan-card {
  background: var(--navy-3);
  border: 1px solid var(--navy-line);
  border-radius: 14px;
}
.plan-card-btn {
  background: rgba(159, 176, 255, .14) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 0 !important;
}
.plan-card-btn:hover { background: rgba(159, 176, 255, .24) !important; }
.sidebar-footer .logout-btn { color: #F2B8B5; }
.sidebar-footer .logout-btn:hover { background: rgba(242, 184, 181, .08); color: #fff; }

/* ─────────────────────────────────────────────── */
/* CABECERAS DE PÁGINA Y SUPERFICIES                */
/* ─────────────────────────────────────────────── */
.main-content { padding: 28px 32px 40px; }
.page-header { margin-bottom: 20px; }
.page-title, .page-header h1 {
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--navy);
}
.page-title .material-symbols-rounded, .page-header h1 .material-symbols-rounded { color: var(--lav-ink); }
.section-header { border-bottom: 1px solid var(--line); }
.section-header h2 { font-weight: 900; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.section-header h2 .mi { color: var(--lav-ink); }

.day-navigator {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
}
.day-nav-date { font-weight: 900; letter-spacing: -.015em; }
.day-nav-cal-icon { color: var(--lav-ink); }
.day-nav-subtitle { color: var(--ink-3); }
.day-nav-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--navy);
}
.day-nav-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: none; box-shadow: none; }
.today-badge {
  background: var(--lav-soft);
  color: var(--lav-ink);
  letter-spacing: .12em;
  font-weight: 900;
}

/* KPIs */
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.stat-card:hover { transform: none; box-shadow: var(--shadow); }
.stat-icon-box { border-radius: 12px; }
.stat-icon-navy   { background: var(--navy);     color: #fff; }
.stat-icon-mint   { background: var(--lav-soft); color: var(--lav-ink); }
.stat-icon-orange { background: var(--mist);     color: var(--navy); }
.stat-icon-blue   { background: var(--mist);     color: var(--ink-2); }
.stat-number { font-weight: 900; letter-spacing: -.02em; color: var(--navy); }
.stat-label { color: var(--navy); font-weight: 900; letter-spacing: .08em; }
.stat-sub { color: var(--ink-3); }

/* Tarjetas genéricas */
.reservation-card, .comanda-card, .export-card, .config-section, .wa-card, .card {
  border-color: var(--line);
  border-radius: var(--radius);
}
.reservation-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.reservation-card.expanded { border-color: var(--lav-2); box-shadow: var(--shadow-md); }

/* ─────────────────────────────────────────────── */
/* BOTONES                                          */
/* ─────────────────────────────────────────────── */
.btn { border-radius: 12px; font-weight: 700; letter-spacing: .005em; }
.btn-primary, .btn-navy {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.btn-primary:hover:not(:disabled), .btn-navy:hover:not(:disabled) {
  background: var(--navy-3) !important;
  border-color: var(--navy-3) !important;
  transform: none;
  box-shadow: 0 6px 16px -8px rgba(21, 26, 64, .5);
}
.btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.btn-secondary:hover:not(:disabled) { background: #F6F7FB; border-color: var(--line-2); }
.btn-danger {
  background: #fff !important;
  color: var(--danger) !important;
  border: 1px solid #EBC6C2 !important;
}
.btn-danger:hover:not(:disabled) { background: var(--danger-light) !important; border-color: var(--danger) !important; }
.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }

/* Acciones de tarjeta: una familia coherente */
.btn-action {
  border-radius: 10px;
  font-weight: 700;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-action:hover:not(:disabled) { background: #F6F7FB; border-color: var(--line-2); }
.btn-action .material-symbols-rounded, .btn-action .btn-ic { font-size: 18px !important; }
.btn-action.btn-act-primary,
.btn-action.btn-comanda {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
.btn-action.btn-act-primary:hover, .btn-action.btn-comanda:hover { background: var(--navy-3) !important; }
.btn-action.btn-edit { background: var(--lav-soft); color: var(--lav-ink); border-color: var(--lav-2); }
.btn-action.btn-edit:hover { background: #E2E6FF; }
.btn-action.btn-delete { background: #fff; color: var(--danger); border-color: #EBC6C2; padding: 10px 12px; }
.btn-action.btn-delete:hover { background: var(--danger-light); border-color: var(--danger); }
.btn-action.btn-print-comanda { background: #fff !important; color: var(--navy) !important; border: 1px solid var(--line) !important; }
.btn-whatsapp { background: #E7F2EC; color: #1F6B4A; border-color: #CFE4D8; }
.btn-whatsapp:hover:not(:disabled) { background: #D6EADF; }
.btn-cuenta { background: var(--lav-soft); color: var(--lav-ink); border-color: var(--lav-2); }
.btn-cuenta:hover:not(:disabled) { background: #E2E6FF; }

/* Filtros y conmutadores de vista */
.filter-btn { border-radius: 12px; border-color: var(--line); color: var(--navy); font-weight: 700; }
.filter-btn.active { background: var(--navy) !important; border-color: var(--navy) !important; box-shadow: none; }
.btn-view-mode.active { background: var(--navy) !important; color: #fff !important; }

/* Pestañas de configuración */
.config-tab { border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; background: #fff; }
.config-tab:hover { border-color: var(--line-2); color: var(--navy); }
.config-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ─────────────────────────────────────────────── */
/* ETIQUETAS Y ESTADOS                              */
/* ─────────────────────────────────────────────── */
.status-badge { border-radius: 999px; font-weight: 900; letter-spacing: .06em; }
.mesa-badge.mesa-assigned { background: #fff; color: var(--navy); border: 1px solid var(--line-2); box-shadow: none; }
.mesa-badge.mesa-assigned:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.mesa-badge.mesa-unassigned { background: #FBEFE6; color: #B4500F; border: 1px dashed #E3B08F; }
.mesa-badge.mesa-unassigned:hover { background: #B4500F; color: #fff; }
.origen-badge.origen-web { background: var(--lav-soft); color: var(--lav-ink); border: 1px solid var(--lav-2); box-shadow: none; }
.origen-badge.origen-web:hover { background: #E2E6FF; color: var(--lav-ink); }
.origen-badge.origen-interna { background: var(--mist); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.origen-badge.origen-interna:hover { background: #E3E6F2; color: var(--navy); }
.cuenta-badge.cuenta-pendiente { background: #FBF3DC; color: #8A5A00; border-color: #EBD7A2; box-shadow: none; }
.cuenta-badge.cuenta-pendiente:hover { background: #F2E2B4; color: #6B4600; }
.cuenta-badge.cuenta-cobrada { background: #E7F2EC; color: #1F6B4A; border-color: #CFE4D8; box-shadow: none; }
.cuenta-badge.cuenta-cobrada:hover { background: #1F6B4A; color: #fff; }
.cuenta-badge.cuenta-sin-calcular { background: var(--lav-soft); color: var(--lav-ink); border-color: var(--lav-2); }
.cuenta-badge.cuenta-sin-calcular:hover { background: var(--lav-ink); color: #fff; }
.comanda-estado-chip { border-radius: 999px; font-weight: 800; }

/* ─────────────────────────────────────────────── */
/* COMANDAS                                         */
/* ─────────────────────────────────────────────── */
.comanda-card { box-shadow: var(--shadow-xs); }
.comanda-card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--line);
}
.comanda-card-header .comanda-name { font-weight: 900; }
.comanda-card-actions { flex-wrap: wrap; align-items: center; }
.comanda-column { border-right-color: var(--border-light); }
.comanda-column-title { color: var(--ink-3); letter-spacing: .1em; border-bottom: 1px solid var(--line); }

/* ─────────────────────────────────────────────── */
/* TABLAS                                           */
/* ─────────────────────────────────────────────── */
.clients-table thead, .clients-table th, .clients-table thead .client-sticky-col {
  background: #F6F7FB !important;
}
.clients-table th { color: var(--ink-3); letter-spacing: .08em; font-weight: 900; border-bottom: 1px solid var(--line); }
.clients-table td { border-bottom-color: var(--border-light); }
.clients-table tbody tr:hover td { background: #FAFBFD; }

/* ─────────────────────────────────────────────── */
/* FORMULARIOS                                      */
/* ─────────────────────────────────────────────── */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input[type="password"], select, textarea {
  border-color: var(--line);
  border-radius: 12px;
  color: var(--navy);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--lav) !important;
  box-shadow: var(--focus) !important;
  outline: none;
}
.form-group label { color: var(--ink-2); letter-spacing: .06em; font-weight: 900; }
::placeholder { color: #9AA0BC; }
.toggle input:checked + .toggle-slider, .switch input:checked + .slider { background: var(--navy); }

/* ─────────────────────────────────────────────── */
/* MODALES Y AVISOS                                 */
/* ─────────────────────────────────────────────── */
.modal-overlay { background: rgba(15, 18, 38, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-title { font-weight: 900; letter-spacing: -.01em; color: var(--navy); }
.modal-close { border-radius: 999px; color: var(--ink-3); }
.modal-close:hover { background: var(--mist); color: var(--navy); }
.modal-footer { border-top: 1px solid var(--line); }
.toast {
  border-radius: 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  box-shadow: var(--shadow-md);
  color: var(--navy);
  font-weight: 700;
}

/* ─────────────────────────────────────────────── */
/* MÓVIL: barra superior de marca + navegación      */
/* ─────────────────────────────────────────────── */
.mobile-topbar { display: none; }

@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 8px 0;
    background: var(--navy);
    color: #fff;
    z-index: 999;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px -10px rgba(15, 18, 38, .6);
  }
  .mobile-topbar-brand {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff !important;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: -.01em;
  }
  .mobile-topbar-brand img { width: 28px; height: 28px; border-radius: 7px; }
  .mobile-topbar-spacer { width: 44px; flex-shrink: 0; }
  .mobile-topbar .hamburger-btn {
    position: static;
    display: flex;
    width: 44px;
    height: 44px;
    padding: 11px;
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .mobile-topbar .hamburger-btn span { background: #fff; width: 20px; }
  .mobile-topbar .hamburger-btn:active { background: rgba(255, 255, 255, .1); }

  .main-content {
    padding: 14px 12px;
    padding-top: calc(56px + env(safe-area-inset-top, 0px) + 14px);
    padding-bottom: calc(var(--bottom-nav-h) + 20px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -12px rgba(21, 26, 64, .25);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    padding-top: 6px;
  }
  .bottom-nav-item {
    min-width: 0;
    flex: 1;
    padding: 4px 2px;
    color: var(--ink-3);
    font-size: .66rem;
    font-weight: 700;
    gap: 3px;
  }
  .bottom-nav-item .bottom-nav-icon {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    font-size: 22px;
    transition: background .2s var(--ease);
  }
  .bottom-nav-item.active { color: var(--navy); }
  .bottom-nav-item.active .bottom-nav-icon { background: var(--lav-soft); color: var(--navy); }

  .page-title, .page-header h1 { font-size: 1.35rem; }
  .day-navigator { padding: 14px !important; }
  .day-nav-arrow { width: 40px; height: 40px; }
  .day-nav-date { font-size: 1.1rem; }

  /* Comandas: las acciones se reparten en filas sin cortarse */
  .comanda-card-header { padding: 14px; }
  .comanda-card-actions { width: 100%; gap: 6px; }
  .comanda-card-actions .comanda-estado-chip { flex-basis: 100%; justify-content: center; }
  .comanda-card-actions .btn-action { flex: 1 1 0; justify-content: center; padding: 10px 8px; min-width: 0; }
  .comanda-card-actions .btn-action.btn-delete { flex: 0 0 44px; }

  .modal { border-radius: 22px 22px 0 0; }
  .toast-container { left: 12px; right: 12px; }
}

@media (max-width: 400px) {
  .mobile-topbar-brand span { font-size: .95rem; }
  .bottom-nav-label { font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Impresión: la capa de marca no toca tickets ni hojas */
@media print {
  .mobile-topbar { display: none !important; }
}

/* Interruptores dentro de cabeceras de plantilla (antes heredaban el estilo de los campos de texto) */
.wa-card-header input.toggle-input,
input[type="checkbox"].toggle-input {
  flex: 0 0 44px;
  min-width: 44px;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--line-2);
  box-shadow: none !important;
}
input[type="checkbox"].toggle-input:checked { background: var(--navy); }
.btn-outline-danger { border-radius: 10px; color: var(--danger); border-color: #EBC6C2; background: #fff; }
.btn-outline-danger:hover { background: var(--danger-light); border-color: var(--danger); }

@media print { .comandas-actions { display: none !important; } }

/* ════════════════════════════════════════════════════════════════
   COMPACTO v1.1 — menos filas, menos huecos, toda la pantalla
   ════════════════════════════════════════════════════════════════ */

/* Contenido a ancho completo en pantallas grandes */
.main-content { max-width: none; }
.page-header { margin-bottom: 14px; }
.page-title, .page-header h1 { font-size: 1.5rem; }
.page-title .material-symbols-rounded, .page-header h1 .material-symbols-rounded { font-size: 1.6rem !important; }

/* ── Inicio y Comandas: barra de fecha grande en tablet y ordenador ── */
.dash-head { margin-bottom: 16px; }
.dash-head .day-navigator { margin-bottom: 14px !important; }
.dash-head .stats-grid { margin: 0 !important; gap: 14px; }
.day-navigator { padding: 16px 20px !important; gap: 12px; }
.day-nav-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.day-nav-date-wrap { display: flex; align-items: center; gap: 8px; justify-content: center; }
.day-nav-date { font-size: 1.5rem !important; line-height: 1.2; cursor: pointer; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.day-nav-date:hover { text-decoration: underline; text-decoration-color: var(--lav); }
.day-nav-subtitle { font-size: .8rem; }
.today-badge { margin-top: 2px !important; }
.day-nav-arrow { width: 46px !important; height: 46px !important; }
@media (min-width: 1000px) {
  .dash-head .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Botón para volver al día de hoy: visible siempre que se mira otra fecha */
.btn-volver-hoy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--lav-2);
  background: var(--lav-soft);
  color: var(--lav-ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-volver-hoy .material-symbols-rounded { font-size: 18px; }
.btn-volver-hoy:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-volver-hoy[hidden] { display: none !important; }

/* Comandas en ordenador: botones a la altura del título, fecha grande debajo */
@media (min-width: 901px) {
  #page-comandas { position: relative; }
  .comandas-head { display: block; }
  .comandas-head .day-navigator { flex: none; margin-bottom: 16px !important; }
  .comandas-head .comandas-actions { position: absolute; top: 0; right: 0; }
}

/* Barra del inicio: una fila en ordenador */
.dashboard-toolbar-line { margin-bottom: 14px; gap: 10px; }
.filter-btn { height: 40px !important; padding: 0 14px !important; }
.btn-view-mode { padding: 6px 10px; }
.toolbar-search-bar { min-width: 0; }

/* Tablet y móvil: dos filas como máximo
   fila 1: servicio (Todo/Comidas/Cenas) + vista
   fila 2: buscador + imprimir + bloquear */
@media (max-width: 1100px) {
  .dashboard-toolbar-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "filtros vista" "buscar acciones";
    gap: 8px;
  }
  .filter-pills-group { grid-area: filtros; order: 0 !important; width: auto !important; overflow: visible !important; padding: 0 !important; }
  .plano-view-selector { grid-area: vista; }
  .toolbar-search-bar { grid-area: buscar; order: 0 !important; min-width: 0 !important; flex: none !important; }
  .toolbar-actions-group { grid-area: acciones; order: 0 !important; width: auto !important; }
}

@media (max-width: 768px) {
  /* Fecha en una línea, cifras en una fila de cuatro */
  .dash-head { display: grid; gap: 8px; margin-bottom: 10px; }
  .dash-head .day-navigator { margin: 0 !important; }
  .dash-head .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .day-nav-subtitle { display: none !important; }
  .day-nav-center { padding: 0 4px; }
  .btn-volver-hoy { margin-top: 0; height: 28px; padding: 0 10px; font-size: .74rem; }
  .btn-volver-hoy .material-symbols-rounded { display: none; }
  .day-navigator { padding: 8px !important; border-radius: 14px !important; }
  .day-nav-cal-icon { display: none !important; }
  .day-nav-center { flex-direction: row; gap: 8px; }
  .day-nav-date { font-size: 1.02rem !important; }
  .day-nav-arrow { width: 36px !important; height: 36px !important; }

  .dash-head .stats-grid { gap: 6px; }
  .stat-card { padding: 8px 4px; gap: 0; flex-direction: column; justify-content: center; text-align: center; border-radius: 12px; }
  .stat-icon-box { display: none !important; }
  .stat-details { align-items: center; width: 100%; }
  .stat-number { font-size: 1.3rem; margin-bottom: 2px; }
  .stat-label { font-size: .56rem; letter-spacing: .04em; }
  .stat-sub { font-size: .62rem; letter-spacing: 0; }

  /* Filtros: control segmentado compacto, sin iconos */
  .filter-pills-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 3px !important;
  }
  .filter-btn {
    height: 34px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
    background: transparent;
    box-shadow: none !important;
  }
  .filter-btn .material-symbols-rounded { display: none; }
  /* Vista: solo iconos; la vista dividida no tiene sentido en un móvil */
  .plano-view-selector { padding: 3px; border-radius: 12px; }
  .btn-view-mode { padding: 0 8px; height: 34px; }
  .btn-view-mode .view-mode-label { display: none; }
  .btn-view-mode[data-view-mode="split"] { display: none !important; }
  .toolbar-search-bar { height: 42px; }
  .toolbar-actions-group { gap: 6px; }
  .toolbar-actions-group .btn { height: 42px !important; min-width: 42px; padding: 0 10px !important; }
  .btn-block-compact .btn-block-text { display: none; }
  .print-dropdown-menu { right: 0; left: auto; }

  /* Cabeceras de sección más cortas */
  .section-header { padding: 6px 0; margin-bottom: 8px; }
}

/* ── Comandas: cabecera de una sola franja con menú "Más" ── */
.comandas-head {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.comandas-head .day-navigator { margin: 0 !important; flex: 0 1 380px; }
.comandas-head .comandas-actions {
  display: flex !important;
  flex: 1 1 auto;
  gap: 8px !important;
  align-items: center;
  justify-content: flex-end;
  margin: 0 !important;
  flex-wrap: nowrap;
}
.comandas-actions .btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; white-space: nowrap; }

.more-menu { position: relative; }
.more-menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
}
.more-menu.open .more-menu-list { display: grid; gap: 2px; }
.more-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.more-menu-item:hover, .more-menu-item:focus-visible { background: var(--mist); }
.more-menu-item .material-symbols-rounded { font-size: 20px; color: var(--lav-ink); }
.more-menu.open .more-menu-btn { background: var(--mist); border-color: var(--line-2); }

@media (max-width: 900px) {
  .comandas-head .day-navigator { flex: 1 1 100%; }
  .comandas-head .comandas-actions { justify-content: stretch; }
  .comandas-head .comandas-actions > .btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 768px) {
  .comandas-head { gap: 8px; margin-bottom: 12px; }
  /* Anula la rejilla de la versión anterior */
  .comandas-head .comandas-actions { display: flex !important; flex-direction: row !important; flex: 1 1 100%; width: 100%; }
  .comandas-actions .btn { height: 44px; min-height: 0; padding: 0 10px; font-size: .82rem; }
  .more-menu-btn > span:last-child { display: none; }
  .more-menu-btn { width: 44px; padding: 0 !important; justify-content: center; }
  .more-menu-list { min-width: 230px; }
}
@media (max-width: 400px) {
  #print-comandas-btn > span:last-child { font-size: 0; }
  #print-comandas-btn > span:last-child::before { content: 'Imprimir día'; font-size: .82rem; }
  #abrir-mesa-btn > span:last-child { font-size: 0; }
  #abrir-mesa-btn > span:last-child::before { content: 'Abrir mesa'; font-size: .82rem; }
}

/* Tarjeta de comanda en móvil: estado y acciones en la misma fila */
@media (max-width: 768px) {
  .comanda-card-actions .comanda-estado-chip { flex-basis: auto !important; padding: 0 10px; height: 40px; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; }
  .comanda-card-actions { display: grid !important; grid-template-columns: auto minmax(0, 1fr) 44px 44px 44px; gap: 6px; }
  .comanda-card-actions .btn-act-primary { order: 1; }
  .comanda-card-actions .btn-act-primary .btn-ic { display: none; }
  .comanda-card-actions .btn-edit { order: 2; font-size: 0 !important; padding: 0 !important; justify-content: center; }
  .comanda-card-actions .btn-edit .material-symbols-rounded { font-size: 19px !important; }
  .comanda-card-actions .btn-print-comanda { order: 3; justify-content: center; }
  .comanda-card-actions .btn-delete { order: 4; justify-content: center; }
  .comanda-card-actions .btn-action { padding: 0 6px; height: 40px; min-height: 0; font-size: .8rem; }
  .comanda-card-actions .btn-print-comanda { font-size: 0 !important; padding: 0 !important; }
  .comanda-card-actions .btn-print-comanda .material-symbols-rounded { font-size: 19px !important; }
  .comanda-card-actions .btn-action.btn-delete { flex: none; }
  .comanda-card-header { gap: 8px; }
}

/* ── Configuración: menú lateral propio en ordenador, una fila desplazable en tablet/móvil ── */
@media (min-width: 1100px) {
  .config-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .config-tabs {
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 2px;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    position: sticky;
    top: 16px;
    overflow: visible;
  }
  .config-tab {
    border: 0 !important;
    border-radius: 10px !important;
    justify-content: flex-start;
    min-height: 40px;
    padding: 8px 12px;
    width: 100%;
    background: transparent;
    text-align: left;
    white-space: normal;
  }
  .config-tab:hover { background: var(--mist); }
  .config-tab.active { background: var(--navy); color: #fff; }
  .config-panel { padding: 20px 22px; }
}
@media (max-width: 1099px) {
  .config-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; margin-bottom: 12px; gap: 6px; }
  .config-tab { min-height: 38px; padding: 6px 12px; font-size: .82rem; }
}
@media (max-width: 768px) {
  .config-panel { padding: 14px; }
}

/* ── Informes y Clientes: cabeceras en una fila ── */
@media (max-width: 768px) {
  #page-clientes .page-header .btn { height: 40px; padding: 0 12px; font-size: .82rem; }
  .page-title, .page-header h1 { font-size: 1.2rem; }
  .page-header { margin-bottom: 10px; }
  .main-content { padding-top: calc(56px + env(safe-area-inset-top, 0px) + 10px); }
}

/* ── Tarjetas de reserva compactas: móvil y columna de la vista dividida ──
   hora a la izquierda, nombre y datos a todo el ancho, estado debajo */
@media (max-width: 768px) {
  .reservation-card .card-main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: "hora info" "hora estado";
    gap: 4px 10px;
    padding: 10px 12px;
    align-items: start;
  }
  .reservation-card .card-time { grid-area: hora; font-size: 1.05rem; min-width: 0; text-align: left; padding-top: 1px; }
  .reservation-card .card-info { grid-area: info; }
  .reservation-card .card-status-wrap { grid-area: estado; justify-self: start; }
  .reservation-card .card-name { white-space: normal; font-size: .95rem; font-weight: 700; line-height: 1.3; }
  .reservation-card .card-meta { font-size: .8rem; line-height: 1.9; margin-top: 2px; }
  .reservation-card .status-badge { font-size: .62rem; padding: 3px 9px; }
  .badge-comanda-indicator { font-size: .66rem; padding: 1px 6px; vertical-align: 1px; }
}
.view-mode-split .reservation-card .card-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "hora info" "hora estado";
  gap: 4px 10px;
  padding: 10px 12px;
  align-items: start;
}
.view-mode-split .reservation-card .card-time { grid-area: hora; font-size: 1.05rem; min-width: 0; text-align: left; }
.view-mode-split .reservation-card .card-info { grid-area: info; }
.view-mode-split .reservation-card .card-status-wrap { grid-area: estado; justify-self: start; }
.view-mode-split .reservation-card .card-name { white-space: normal; line-height: 1.3; font-weight: 700; }
.view-mode-split .reservation-card .card-meta { font-size: .8rem; line-height: 1.9; }
.view-mode-split .reservation-card .status-badge { font-size: .62rem; padding: 3px 9px; }

/* Tablet horizontal: menú lateral estrecho solo con iconos, sin el nombre */
@media (min-width: 769px) and (max-width: 1180px) {
  .sidebar-wordmark { display: none; }
  .sidebar-brand-container { justify-content: center; }
  .nav-link.active::before { left: -12px; }
}

/* ── Informes en móvil: atajos en una fila desplazable, botones en una fila, cifras compactas ── */
@media (max-width: 768px) {
  .inf-filtros { padding: 12px !important; }
  .inf-atajos {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 6px !important;
    scrollbar-width: none;
    margin-bottom: 10px !important;
  }
  .inf-atajos::-webkit-scrollbar { display: none; }
  .inf-atajo { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px !important; font-size: .8rem !important; }
  .inf-fechas {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .inf-fechas .form-group { margin: 0 !important; }
  .inf-fechas input[type="date"] { height: 42px; font-size: .9rem; }
  .inf-fechas #inf-ver-btn { grid-column: 1 / 2; height: 42px; }
  .inf-descargas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; grid-column: 2 / 3; }
  .inf-descargas .btn { height: 42px; padding: 0 6px !important; font-size: .82rem; justify-content: center; }
  .inf-kpis { gap: 8px !important; }
  .inf-kpis > * { padding: 10px 12px !important; }
  .inf-card { padding: 14px !important; }
}
@media (max-width: 768px) {
  .inf-kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .inf-kpis > * { padding: 8px 10px !important; min-width: 0; }
  .inf-kpi-top { font-size: .72rem !important; gap: 4px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inf-kpi-top .material-symbols-rounded { font-size: 15px !important; }
  .inf-kpi-valor { font-size: 1.2rem !important; margin: 2px 0 !important; }
  .inf-kpi-detalle { font-size: .66rem !important; line-height: 1.3; }
}
@media (max-width: 768px) {
  .inf-kpis > .inf-kpi:last-child { grid-column: span 2 !important; }

  /* Reserva rápida: campos emparejados en lugar de uno por fila */
  .reservation-form .form-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 10px !important;
  }
  .reservation-form .form-row > .form-group:empty { display: none; }
  .reservation-form .form-group { margin-bottom: 10px; min-width: 0; }
  .reservation-form .form-group label { font-size: .68rem; margin-bottom: 4px; }
  .reservation-form input, .reservation-form select { height: 42px; font-size: .95rem; min-width: 0; }
  .form-mode-toggle { margin-bottom: 10px !important; padding: 8px 12px !important; font-size: .8rem; }
}
@media (max-width: 768px) {
  #btn-fecha-hoy { font-size: 0 !important; padding: 0 10px !important; gap: 0 !important; }
  #btn-fecha-hoy .material-symbols-rounded { font-size: 20px !important; }
  #nr-fecha { min-width: 0; padding: 0 4px; font-size: .8rem; }
  .reservation-form .form-group:has(#nr-fecha) > div { gap: 6px !important; }
  .reservation-form .btn-lg, #btn-submit-normal, #btn-submit-print-contract { min-height: 48px; }
}

/* Comandas: barra de fecha a todo el ancho y reservas sin comanda con contraste completo */
@media (min-width: 901px) {
  .comandas-head .day-navigator { width: 100%; max-width: none; }
  #page-comandas .page-header { min-height: 44px; display: flex; align-items: center; }
}
.no-comanda-card { opacity: 1; padding: 12px 16px; margin-bottom: 8px; border-color: var(--line-2); }
.no-comanda-card:hover { border-color: var(--lav); box-shadow: var(--shadow); }
.no-comanda-name { font-weight: 900; }
@media (max-width: 768px) {
  .no-comanda-card { flex-wrap: wrap; }
  .no-comanda-card > div:last-child { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .no-comanda-card .btn { justify-content: center; height: 40px; }
}

/* Barra del inicio: misma altura para todos los controles */
@media (min-width: 769px) {
  .toolbar-actions-group .btn, .toolbar-search-bar { height: 40px !important; }
  .toolbar-actions-group .btn-icon-only { width: 40px; }
  .plano-view-selector { height: 40px; }
}
/* Cabecera de servicio en la columna de la vista dividida: el resumen debajo del título */
.view-mode-split .section-header { flex-wrap: wrap; gap: 2px 10px; }
.view-mode-split .section-header .section-count { flex-basis: 100%; margin-left: 0; text-align: left; }
@media (min-width: 901px) {
  .comandas-head { display: block; }
  .comandas-head .day-navigator { flex: none; margin-bottom: 16px !important; }
  .comandas-head .comandas-actions { position: absolute; top: 0; right: 0; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .usuario-actual { justify-content: center; padding: 10px 0; margin: 6px 10px; }
  .usuario-actual > :not(.material-symbols-rounded) { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   DESGLOSE DE RESERVA v1.3 — datos en rejilla, acciones agrupadas
   ════════════════════════════════════════════════════════════════ */
.reservation-card.expanded .card-details { max-height: 1600px; padding: 14px 16px 16px; }
.rd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.rd-cell {
  background: #fff;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rd-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rd-label .material-symbols-rounded { font-size: 15px; color: var(--lav-ink); }
.rd-value {
  font-size: .9rem;
  color: var(--navy);
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  overflow-wrap: anywhere;
}
.rd-value .email-link { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.rd-sub { color: var(--ink-3); font-size: .82rem; }
.rd-ok { color: var(--success); font-weight: 900; font-size: .82rem; display: inline-flex; align-items: center; gap: 3px; }
.rd-warn { color: #8A5A00; background: #FBF3DC; border-radius: 999px; padding: 1px 8px; font-weight: 900; font-size: .78rem; }
.rd-tag { font-size: .66rem; font-weight: 900; letter-spacing: .06em; background: var(--success-light); color: var(--success); border-radius: 999px; padding: 1px 7px; }
.rd-hint { font-weight: 700; opacity: .6; font-size: .7rem; margin-left: 2px; }
.rd-cell .mesa-badge { font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer; }
.rd-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  color: var(--lav-ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--lav-2);
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rd-link:hover { color: var(--navy); text-decoration-color: currentColor; }
.rd-link-danger { color: var(--danger); text-decoration-color: #EBC6C2; }
.rd-file { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--navy); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-file .material-symbols-rounded { font-size: 17px; color: var(--lav-ink); }

.rd-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FBF3DC;
  color: #4A3A10;
  font-size: .88rem;
  line-height: 1.45;
}
.rd-note .material-symbols-rounded { font-size: 18px; color: #8A5A00; flex-shrink: 0; }
.rd-note strong { color: #4A3A10; }

.rd-comanda { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #F6F7FB; }
.rd-comanda-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rd-comanda-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--navy); font-size: .9rem; }
.rd-comanda-title .material-symbols-rounded { font-size: 19px; color: var(--lav-ink); }
.rd-comanda-actions { display: inline-flex; gap: 6px; }
.rd-comanda-actions .btn-action { min-height: 34px; padding: 6px 12px; font-size: .8rem; }
.rd-comanda .comanda-mini-grid { background: #fff; margin: 8px 0 0; }
.rd-comanda-notas { font-size: .85rem; color: var(--ink-2); padding-top: 8px; }

.rd-actions { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rd-actions .btn-action { min-height: 40px; padding: 8px 14px; }
.rd-spacer { flex: 1; }

@media (max-width: 768px) {
  .reservation-card.expanded .card-details { padding: 10px 10px 12px; }
  .rd-grid { grid-template-columns: 1fr 1fr; }
  .rd-cell { padding: 8px 10px; }
  .rd-cell:has(.email-link), .rd-cell[id^="attach-display"] { grid-column: 1 / -1; }
  .rd-value { font-size: .85rem; }
  .rd-comanda-head { flex-direction: column; align-items: stretch; }
  .rd-comanda-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .rd-comanda-actions .btn-action { justify-content: center; }
  .rd-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .rd-actions .rd-spacer { display: none; }
  .rd-actions .btn-action { justify-content: center; padding: 8px; font-size: .82rem; }
}
/* Rejilla sin celdas vacías en gris: datos sueltos sobre fondo blanco */
.rd-grid { background: transparent; border: 0; border-radius: 0; gap: 12px 24px; overflow: visible; padding: 2px 2px 4px; }
.rd-cell { background: transparent; padding: 0; }
@media (max-width: 768px) { .rd-grid { gap: 10px 14px; } .rd-cell { padding: 0; } }
@media (max-width: 768px) {
  .rd-actions { display: flex !important; flex-wrap: nowrap; gap: 6px; }
  .rd-actions .btn-action { flex: 1 1 0; min-width: 0; padding: 6px; font-size: .78rem; line-height: 1.15; text-align: center; }
  .rd-actions .btn-action .material-symbols-rounded { font-size: 17px !important; }
  .rd-actions .btn-delete { flex: 0 0 44px; font-size: 0 !important; }
  .rd-actions .btn-delete .material-symbols-rounded { font-size: 19px !important; }
}
@media (max-width: 768px) { .rd-grid { grid-auto-flow: row dense; } }

/* ════════════════════════════════════════════════════════════════
   PLANO DE SALA v2 — mesas legibles, zoom, tamaño y salas
   ════════════════════════════════════════════════════════════════ */

/* La sala es una hoja con tamaño propio que se amplía o reduce con el zoom */
.plano-canvas-container { cursor: grab; touch-action: pan-x pan-y; padding: 12px; background-image: none; background-color: var(--mist); }
.plano-canvas-container.is-panning { cursor: grabbing; }
.plano-canvas {
  --z: 1;
  flex: none;
  margin: auto;
  min-width: 0 !important;
  min-height: 0 !important;
  background-color: #fff;
  background-image: radial-gradient(#D5D9E6 calc(1.2px * var(--z)), transparent calc(1.3px * var(--z)));
  background-size: calc(24px * var(--z)) calc(24px * var(--z));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}
.plano-canvas-container.mode-design .plano-canvas { cursor: default; outline: 2px dashed var(--lav); outline-offset: 4px; }
.plano-canvas-container.mode-design .plano-mesa,
.plano-canvas-container.mode-design .plano-elem { touch-action: none; }

.plano-elem-texto { font-size: calc(12px * var(--z, 1)); padding: .3em 1.1em; border-radius: .5em; }

/* Mesa */
.plano-mesa.pm {
  width: calc(var(--w) * var(--z, 1) * 1px);
  height: calc(var(--h) * var(--z, 1) * 1px);
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto;
  font-size: calc(13.5px * var(--z, 1));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45em .6em;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--line-2);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(21, 26, 64, .06), 0 6px 16px -10px rgba(21, 26, 64, .35);
  overflow: visible;
}
.plano-mesa.pm.plano-mesa-rect, .plano-mesa.pm.plano-mesa-cuadrada { border-radius: 1em; }
.plano-mesa.pm.plano-mesa-redonda { border-radius: 50%; padding: .6em; }
.plano-mesa.pm:hover { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.03); }
.plano-mesa.pm.is-dragging { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.05) !important; }
.plano-mesa.pm.highlight-pulse { animation: none; box-shadow: 0 0 0 4px var(--lav), 0 0 0 10px rgba(159, 176, 255, .35); }
.plano-mesa.pm.is-drop-target { outline: 3px solid var(--lav); outline-offset: 3px; }

/* Ocupada o confirmada: azul de marca; pendiente: lavanda; libre: blanca */
.plano-mesa.pm.status-libre .pm-name { color: var(--ink-3); font-weight: 700; }

.pm-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15em;
  max-width: 100%;
  min-width: 0;
  text-align: center;
  pointer-events: none;
}
.pm-name {
  font-weight: 900;
  font-size: 1.12em;
  line-height: 1.15;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pm-mas { font-size: .75em; font-weight: 900; opacity: .75; }
.pm-num { font-size: .85em; font-weight: 700; opacity: .72; white-space: nowrap; }

.pm-pax, .pm-hora {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .2em;
  padding: .15em .55em;
  border-radius: 999px;
  font-size: .95em;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(21, 26, 64, .18);
  pointer-events: none;
  z-index: 2;
}
.pm-pax .material-symbols-rounded, .pm-hora .material-symbols-rounded { font-size: 1.05em; }
.pm-pax { top: -.95em; left: -.95em; background: #fff; color: var(--navy); border: 1px solid var(--line-2); }
.pm-pax.is-cap { color: var(--ink-3); }
.pm-hora { bottom: -.95em; right: -.95em; background: var(--lav-soft); color: var(--lav-ink); border: 1px solid var(--lav-2); }
.plano-mesa-redonda .pm-pax { top: 0; left: 0; }
.plano-mesa-redonda .pm-hora { bottom: 0; right: 0; }

/* Botones de la mesa en «Diseñar sala»: reducir, agrandar, duplicar y eliminar */
.plano-mesa.pm .plano-mesa-quick-actions {
  top: -48px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(calc(-1 * var(--rot, 0deg)));
  gap: 4px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.plano-mesa.pm .btn-quick-action {
  width: 30px;
  height: 30px;
  box-shadow: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--navy);
  touch-action: none;
}
.plano-mesa.pm .btn-quick-action:hover { transform: none; background: var(--mist); box-shadow: none; }
.plano-mesa.pm .btn-quick-action:active { background: var(--lav-soft); transform: scale(.94); }
.plano-mesa.pm .btn-quick-action .material-symbols-rounded { font-size: 18px; }
.plano-mesa.pm .btn-quick-delete { color: var(--danger); }
.plano-mesa.pm .btn-quick-delete:hover { background: var(--danger-light); }
.plano-mesa.pm .btn-quick-size { color: var(--lav-ink); }

/* Controles de zoom flotantes */
.plano-zoom-controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.plano-zoom-controls button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.plano-zoom-controls button:hover { background: var(--mist); }
.plano-zoom-controls .material-symbols-rounded { font-size: 20px; }
.plano-zoom-label { min-width: 52px; text-align: center; font-size: .78rem; font-weight: 900; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#btn-plano-zoom-fit { border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; margin-left: 2px; }

/* Barra superior del plano */
.btn-plano-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: .82rem;
}
.btn-plano-tool:hover { background: #F6F7FB; border-color: var(--line-2); }
.btn-plano-tool .material-symbols-rounded { font-size: 18px; }
.plano-actions-bar { flex-wrap: wrap; gap: 8px; }
.plano-actions-bar .more-menu-list { min-width: 300px; }

/* Ventana «Salas del plano» */
.salas-ayuda { color: var(--ink-2); font-size: .9rem; margin: 0 0 12px; }
.salas-lista { display: grid; gap: 6px; margin-bottom: 14px; }
.salas-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
}
.salas-fila:hover { border-color: var(--line-2); background: #F6F7FB; }
.salas-fila input { width: 20px; height: 20px; accent-color: var(--navy); }
.salas-nombre { font-weight: 900; color: var(--navy); flex: 1; }
.salas-cap { color: var(--ink-3); font-size: .82rem; }

@media (max-width: 768px) {
  .btn-plano-tool-text { display: none; }
  .btn-plano-tool { width: 36px; padding: 0; justify-content: center; }
  .plano-zoom-controls { right: 10px; bottom: 10px; }
  .plano-zoom-controls button { width: 40px; height: 40px; }
  .plano-canvas-container { padding: 8px; }
}

/* Impresión del plano en A4 apaisado */
#plano-print { display: none; }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body.printing-plano > *:not(#plano-print) { display: none !important; }
  body.printing-plano { background: #fff !important; }
  body.printing-plano #plano-print {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .plano-print-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Lato', sans-serif;
    color: #151A40;
    font-size: 13pt;
    margin-bottom: 4mm;
    border-bottom: 1px solid #DCDFEA;
    padding-bottom: 2mm;
  }
  #plano-print-canvas { position: relative; margin: 0 auto; box-shadow: none; border: 1px solid #C3C7D6; }
  #plano-print-canvas .plano-mesa.pm:hover { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
}
/* Los botones de cada mesa solo aparecen en la mesa seleccionada (o al pasar el ratón) */
.mode-design .plano-mesa.pm .plano-mesa-quick-actions { display: none; }
.mode-design .plano-mesa.pm.is-selected .plano-mesa-quick-actions { display: inline-flex; }
@media (hover: hover) { .mode-design .plano-mesa.pm:hover .plano-mesa-quick-actions { display: inline-flex; } }
.mode-design .plano-mesa.pm.is-selected { outline: 3px solid var(--lav); outline-offset: 3px; z-index: 20; }
.mode-design .plano-mesa.pm:hover { z-index: 20; }
#btn-toggle-plano-mode.active { background: var(--lav-soft) !important; color: var(--lav-ink) !important; border-color: var(--lav) !important; opacity: 1; }
@media (max-width: 768px) {
  .plano-top-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .plano-zones-tabs { scrollbar-width: none; }
  .plano-zones-tabs::-webkit-scrollbar { display: none; }
  .plano-actions-bar { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .plano-actions-bar .btn-mode-text { display: none; }
  .plano-actions-bar .btn-plano-mode, .plano-actions-bar #btn-plano-fullscreen { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .plano-stats-pill { height: 36px; padding: 0 10px; font-size: .8rem; }
  .plano-design-tools { flex-wrap: wrap; gap: 6px; }
  .dashboard-content-grid.view-mode-mapa .dashboard-plano-panel { height: calc(100vh - 140px); min-height: 520px; }
}
@media (max-width: 768px) {
  .plano-actions-bar { flex-wrap: wrap; }
  .plano-design-tools { order: 10; width: 100%; }
  .plano-design-tools .btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 768px) {
  .plano-actions-bar { justify-content: flex-start; }
  .plano-actions-bar > * { flex: none; }
  .plano-actions-bar .plano-stats-pill { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .plano-design-tools { display: none; }
  .plano-design-tools[style*="inline-flex"] { display: flex !important; }
  .plano-design-tools .btn { min-width: 0; height: 38px; padding: 0 8px; font-size: .8rem; gap: 4px; }
  .plano-design-tools .btn .material-symbols-rounded { font-size: 18px; }
}
@media (max-width: 768px) {
  .plano-actions-bar > .btn, .plano-actions-bar > .more-menu > .btn, .plano-actions-bar #btn-plano-fullscreen {
    width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center;
  }
  .plano-actions-bar .plano-stats-pill { overflow: hidden; white-space: nowrap; }
  .plano-design-tools .btn { min-width: 0 !important; flex: 1 1 0 !important; }
  .plano-design-tools { min-width: 0; }
}
@media (max-width: 768px) {
  .dashboard-plano-panel { min-width: 0; max-width: 100%; }
  .plano-top-bar { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .plano-zones-tabs { min-width: 0; max-width: 100%; overflow-x: auto; }
  .plano-actions-bar { min-width: 0; max-width: 100%; }
}
/* Mesa pendiente: texto azul sobre lavanda */
.plano-mesa.pm.status-pendiente .pm-name, .plano-mesa.pm.status-pendiente .pm-num { color: var(--navy); }

/* Controles segmentados: los botones siempre caben dentro de su caja */
.plano-view-selector {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  padding: 3px !important;
  gap: 2px;
  border-radius: 12px;
  box-sizing: border-box;
}
.plano-view-selector .btn-view-mode {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  border-radius: 9px !important;
  border: 0 !important;
  margin: 0 !important;
  align-items: center;
  line-height: 1;
}
@media (max-width: 768px) {
  .plano-view-selector { height: 42px; }
  .plano-view-selector .btn-view-mode { padding: 0 10px !important; }
}
/* Tarjetas de Servicios y Espacios: en pantallas estrechas las acciones bajan a su propia fila */
.service-config-info, .zona-config-info { min-width: 0; }
.service-config-titles, .zona-config-titles { min-width: 0; }
@media (max-width: 640px) {
  .service-config-card, .zona-config-card { flex-wrap: wrap; gap: 10px 12px; }
  .service-config-info, .zona-config-info { flex: 1 1 100%; }
  .service-config-actions, .zona-config-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
  }
}
/* Cuenta y cobro en el móvil: la tabla del desglose cabe entera, sin barra lateral */
@media (max-width: 640px) {
  .cuenta-desglose-table { width: 100%; table-layout: fixed; font-size: .82rem; }
  .cuenta-desglose-table th { font-size: .6rem !important; padding: 6px 3px !important; white-space: nowrap; letter-spacing: .04em; }
  .cuenta-desglose-table td { padding: 6px 3px !important; }
  .cuenta-desglose-table th:nth-child(2), .cuenta-desglose-table td:nth-child(2) { width: 44px !important; }
  .cuenta-desglose-table th:nth-child(3), .cuenta-desglose-table td:nth-child(3) { width: 56px !important; }
  .cuenta-desglose-table th:nth-child(4), .cuenta-desglose-table td:nth-child(4) { width: 62px !important; }
  .cuenta-desglose-table th:nth-child(5), .cuenta-desglose-table td:nth-child(5) { width: 26px !important; }
  .cuenta-desglose-table input { width: 100% !important; min-width: 0 !important; padding: 4px !important; font-size: .82rem !important; height: 32px; box-sizing: border-box; }
  .cuenta-desglose-table .btn-delete-row { padding: 0 !important; }
}
@media (max-width: 640px) {
  div:has(> .btn-estado-toggle) { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .btn-estado-toggle { min-width: 0; padding: 8px 6px !important; justify-content: center; white-space: normal; line-height: 1.2; }
}

/* ════════════════════════════════════════════════════════════════
   CONFIGURACIÓN — un solo recuadro por pestaña, cabeceras iguales
   ════════════════════════════════════════════════════════════════ */
/* El recuadro blanco lo pone el panel; las secciones de dentro ya no dibujan otro */
.config-panel .config-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
}
.config-panel > div > div[style*="max-width"],
.config-panel > div > div > div[style*="max-width"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Varias secciones seguidas: separadas por una línea, no por cajas */
.config-panel .config-section + .config-section,
.config-panel .config-section ~ .config-section {
  border-top: 1px solid var(--line) !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}
.config-panel .carta-qr-grid { gap: 32px !important; }
.config-panel .carta-qr-grid > .config-section + .config-section { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
@media (min-width: 861px) {
  .config-panel .carta-qr-grid > .config-section + .config-section { border-left: 1px solid var(--line) !important; padding-left: 32px !important; }
}

/* Cabeceras de sección: misma letra, tamaño y separación en todas las pestañas */
.config-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
  color: var(--navy) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
}
.config-panel h3 + p, .config-panel h3 + .text-muted { color: var(--ink-3) !important; font-size: .88rem !important; margin: 0 0 18px !important; max-width: 70ch; }
.config-panel h3 .material-symbols-rounded { color: var(--lav-ink); font-size: 22px !important; }
.config-panel h4 { font-size: .95rem; font-weight: 900; color: var(--navy); }

/* Panel: más aire arriba y a los lados, igual en todas las pestañas */
.config-panel { padding: 24px 28px !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-xs) !important; }
.config-panel .config-panel { border: 0 !important; padding: 0 !important; box-shadow: none !important; }

/* Listas dentro del panel (servicios, espacios, menús, tipos, WhatsApp): filas limpias */
.config-panel .service-config-card,
.config-panel .zona-config-card,
.config-panel .wa-card,
.config-panel .config-item,
.config-panel .tipo-evento-item {
  box-shadow: none !important;
  border-color: var(--line) !important;
  border-radius: 12px !important;
}
.config-panel .service-config-card + .service-config-card,
.config-panel .zona-config-card + .zona-config-card { margin-top: 8px; }

@media (max-width: 768px) {
  .config-panel { padding: 16px !important; }
  .config-panel .config-section + .config-section, .config-panel .config-section ~ .config-section { padding-top: 18px !important; margin-top: 18px !important; }
}
/* Filas de lista en Configuración: el texto ocupa el espacio y los botones quedan a la derecha */
.config-panel .config-item { gap: 12px; }
.config-panel .config-item > div:last-child:has(> button, > .btn, > .btn-action) {
  flex: 0 0 auto !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.config-panel .config-item > div:first-child, .config-panel .config-item > div:nth-child(2):not(:last-child) { flex: 1 1 auto; min-width: 0; }
/* Campos para subir archivos con el estilo de la app */
input[type="file"] { font: inherit; font-size: .85rem; color: var(--ink-2); padding: 6px; border: 1px dashed var(--line-2); border-radius: 12px; background: #F6F7FB; width: 100%; max-width: 100%; box-sizing: border-box; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 900; font-size: .82rem; color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--mist); }

/* ── Plano: cada forma se reconoce a simple vista ── */
/* Sillas: rectangular con fila arriba y abajo; cuadrada con una a cada lado (arriba/abajo/izq./dcha.) */
.plano-mesa.pm::before, .plano-mesa.pm::after {
  content: '';
  position: absolute;
  background: var(--line-2);
  border-radius: 999px;
  pointer-events: none;
}
.plano-mesa.pm.plano-mesa-rect::before { left: 14%; right: 14%; top: calc(-6px * var(--z, 1) - 2px); height: calc(4px * var(--z, 1) + 1px); }
.plano-mesa.pm.plano-mesa-rect::after  { left: 14%; right: 14%; bottom: calc(-6px * var(--z, 1) - 2px); height: calc(4px * var(--z, 1) + 1px); }
.plano-mesa.pm.plano-mesa-cuadrada::before { left: 32%; right: 32%; top: calc(-6px * var(--z, 1) - 2px); height: calc(4px * var(--z, 1) + 1px); box-shadow: 0 calc(var(--h) * var(--z, 1) * 1px + 12px * var(--z, 1) + 2px) 0 var(--line-2); }
.plano-mesa.pm.plano-mesa-cuadrada::after  { top: 32%; bottom: 32%; left: calc(-6px * var(--z, 1) - 2px); width: calc(4px * var(--z, 1) + 1px); box-shadow: calc(var(--w) * var(--z, 1) * 1px + 12px * var(--z, 1) + 2px) 0 0 var(--line-2); }
.plano-mesa.pm.plano-mesa-redonda { box-shadow: 0 0 0 calc(5px * var(--z, 1)) #fff, 0 0 0 calc(5px * var(--z, 1) + 1.5px) var(--line), 0 6px 16px -10px rgba(21, 26, 64, .35); }
.plano-mesa.pm.plano-mesa-cuadrada { border-radius: .7em; }
.plano-mesa.pm.plano-mesa-rect { border-radius: 1.1em; }

/* Mesa girada: el texto y las etiquetas siguen derechos y caben en el lado corto */
.plano-mesa.pm .pm-center { transform: rotate(calc(-1 * var(--rot, 0deg))); max-width: calc(min(var(--w), var(--h)) * var(--z, 1) * 1px * 1.15); }
.plano-mesa.pm[style*="--rot"] .pm-center { max-width: calc(min(var(--w), var(--h)) * var(--z, 1) * 1px - .6em); }
.plano-mesa.pm .pm-pax, .plano-mesa.pm .pm-hora { transform: rotate(calc(-1 * var(--rot, 0deg))); }
.plano-mesa.pm .btn-quick-rotate { color: var(--navy); }

/* Lista de reservas: reserva sin sala */
.zone-tag.zone-tag--sin { background: #FBEFE6; color: #B4500F; border: 1px dashed #E3B08F; font-weight: 800; }

/* ── Plano v3: la forma gira, el texto y los botones no ── */
.plano-mesa.pm {
  width: calc(var(--bw, var(--w)) * var(--z, 1) * 1px) !important;
  height: calc(var(--bh, var(--h)) * var(--z, 1) * 1px) !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
}
.plano-mesa.pm:hover { transform: translate(-50%, -50%) scale(1.03) !important; }
.plano-mesa.pm.is-dragging { transform: translate(-50%, -50%) scale(1.05) !important; }
.plano-mesa.pm::before, .plano-mesa.pm::after { content: none !important; }

.pm-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--w) * var(--z, 1) * 1px);
  height: calc(var(--h) * var(--z, 1) * 1px);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(21, 26, 64, .06), 0 6px 16px -10px rgba(21, 26, 64, .35);
  transition: transform .15s ease;
  z-index: 0;
}
.plano-mesa-rect .pm-shape { border-radius: 1.1em; }
.plano-mesa-cuadrada .pm-shape { border-radius: .7em; }
.plano-mesa-redonda .pm-shape { border-radius: 50%; box-shadow: 0 0 0 calc(5px * var(--z, 1)) #fff, 0 0 0 calc(5px * var(--z, 1) + 1.5px) var(--line), 0 6px 16px -10px rgba(21, 26, 64, .35); }

/* Colores según el estado */
.plano-mesa.pm.status-confirmada .pm-shape, .plano-mesa.pm.status-ocupada .pm-shape { background: var(--navy); border-color: var(--navy); }
.plano-mesa.pm.status-pendiente .pm-shape { background: var(--lav-soft); border-color: var(--lav); }
.plano-mesa.pm.status-libre .pm-shape { background: #fff; }
.plano-mesa.pm.status-confirmada, .plano-mesa.pm.status-ocupada { color: #fff !important; }
.plano-mesa.pm.status-pendiente, .plano-mesa.pm.status-libre { color: var(--navy) !important; }

/* Sillas pegadas a la forma: rectangular con una fila arriba y otra abajo; cuadrada una por lado */
.pm-shape::before, .pm-shape::after { content: ''; position: absolute; background: var(--line-2); border-radius: 999px; }
.plano-mesa-rect .pm-shape::before { left: 12%; right: 12%; top: calc(-6px * var(--z, 1) - 3px); height: calc(4px * var(--z, 1) + 1px); }
.plano-mesa-rect .pm-shape::after  { left: 12%; right: 12%; bottom: calc(-6px * var(--z, 1) - 3px); height: calc(4px * var(--z, 1) + 1px); }
.plano-mesa-cuadrada .pm-shape::before { left: 30%; right: 30%; top: calc(-6px * var(--z, 1) - 3px); height: calc(4px * var(--z, 1) + 1px);
  box-shadow: 0 calc(var(--h) * var(--z, 1) * 1px + 12px * var(--z, 1) + 2px) 0 var(--line-2); }
.plano-mesa-cuadrada .pm-shape::after { top: 30%; bottom: 30%; left: calc(-6px * var(--z, 1) - 3px); width: calc(4px * var(--z, 1) + 1px);
  box-shadow: calc(var(--w) * var(--z, 1) * 1px + 12px * var(--z, 1) + 2px) 0 0 var(--line-2); }
.plano-mesa-redonda .pm-shape::before, .plano-mesa-redonda .pm-shape::after { content: none; }

/* Texto derecho, centrado y a la medida del lado corto */
.plano-mesa.pm .pm-center {
  position: relative;
  z-index: 1;
  transform: none !important;
  max-width: calc(var(--tw, var(--w)) * var(--z, 1) * 1px - .8em) !important;
}
.plano-mesa.pm .pm-pax, .plano-mesa.pm .pm-hora { transform: none !important; z-index: 3; }
.plano-mesa.pm .plano-mesa-quick-actions { transform: translateX(-50%) !important; top: -46px !important; z-index: 40; }
.plano-mesa-redonda.pm .pm-pax { top: 4%; left: 4%; }
.plano-mesa-redonda.pm .pm-hora { bottom: 4%; right: 4%; }

/* Selección y localizar mesa: el contorno va en la forma */
.mode-design .plano-mesa.pm.is-selected .pm-shape { outline: 3px solid var(--lav); outline-offset: 3px; }
.plano-mesa.pm.highlight-pulse .pm-shape { box-shadow: 0 0 0 4px var(--lav), 0 0 0 10px rgba(159, 176, 255, .35); }
.plano-mesa.pm.is-drop-target .pm-shape { outline: 3px solid var(--lav); outline-offset: 3px; }
#plano-print-canvas .plano-mesa.pm:hover { transform: translate(-50%, -50%) !important; }