:root {
      color-scheme: dark;
      --bg-chalkboard: #151D1A;
      --surface-card: #1D2824;
      --surface-card-hover: #24322D;
      --chalk-white: #FAFDFB;
      --chalk-gold: #ECC94B;
      --chalk-gold-dim: rgba(236, 201, 75, 0.15);
      --chalk-green: #48BB78;
      --chalk-muted: #CBD5E0;
      --chalk-dim: #8C9B95;
      --border-chalk: rgba(255, 255, 255, 0.12);
      --border-gold: rgba(236, 201, 75, 0.35);
      --font-chalk: 'Caveat', cursive, sans-serif;
      --font-body: 'Montserrat', system-ui, sans-serif;
      --font-heading: 'Playfair Display', Georgia, serif;
      --font-mono: 'IBM Plex Mono', monospace;
    }

    /* ============================================================
       ACCESSIBILITY & FOCUS VISIBLE (WCAG 2.1 AA)
       ============================================================ */
    *:focus-visible {
      outline: 3px solid var(--chalk-gold);
      outline-offset: 2px;
    }
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [role="button"]:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid var(--chalk-gold);
      outline-offset: 2px;
    }
    /* Skip link for keyboard navigation */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--chalk-gold);
      color: #0E1412;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 700;
      z-index: 9999;
      text-decoration: none;
      transition: top 0.2s;
    }
    .skip-link:focus {
      top: 10px;
    }
    /* Ensure focus styles don't show on mouse click (only keyboard) */
    :focus:not(:focus-visible) {
      outline: none;
    }
    /* Utilidad: contenido solo para lectores de pantalla (WCAG 1.3.1 / 2.4.1) */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* High contrast mode support */
    @media (prefers-contrast: high) {
      :root {
        --chalk-gold: #FFD700;
        --chalk-white: #FFFFFF;
        --border-chalk: rgba(255, 255, 255, 0.5);
      }
    }
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Touch: elimina el retraso de doble-tap en controles táctiles */
    button, a, [role="button"], input, select, textarea, label {
      touch-action: manipulation;
    }
    /* Anclas: deja aire bajo la barra sticky al saltar a una sección */
    [id] { scroll-margin-top: 96px; }

    /* ============================================================
       7 AUTHENTIC GASTRONOMIC THEMES + 7 NEW SPECIAL THEMES
       ============================================================ */
    /* ============================================================
       PIZARRÓN CLÁSICO — verde profundo, tiza y marco de madera
       La superficie ES el objeto: grano de tiza, borrones y viñeta,
       más un marco de madera fijo al viewport con su sombra interior.
       Las tarjetas son "cajas" dibujadas a mano (radios orgánicos),
       los títulos de categoría van escritos al paso (Caveat) con su
       subrayado ondulado, y las insignias usan tizas de color como
       TRAZO (texto + borde), nunca relleno saturado.
       Regla de la paleta:
         · --chalk-white crema #F4F1E6 → texto principal (~14:1)
         · --chalk-dim  gris-tiza #98A49C → secundario (~6.3:1)
         · --chalk-gold tiza amarilla #F2D27A → acento (~11:1)
       ============================================================ */
    body.theme-classic {
      --bg-chalkboard: #1A211D;
      --surface-card: #212A25;
      --surface-card-hover: #27332C;
      --chalk-white: #F4F1E6;
      --chalk-muted: #C7CCC2;
      --chalk-dim: #98A49C;
      --chalk-gold: #F2D27A;
      --chalk-rose: #F0B6C4;
      --chalk-leaf: #9FD3A5;
      --chalk-sky: #A9CBE8;
      --border-chalk: rgba(244, 241, 230, 0.14);
      --border-gold: rgba(242, 210, 122, 0.38);
      --wood: #6E4B31;
      --wood-dark: #4A3020;
      /* Grano de tiza compartido por la superficie y el marco */
      --chalk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
      background-color: var(--bg-chalkboard);
      /* Superficie: grano → borrones de tiza → marca de borrado → viñeta */
      background-image:
        var(--chalk-grain),
        radial-gradient(ellipse 46% 34% at 16% 10%, rgba(244, 241, 230, 0.05), transparent 68%),
        radial-gradient(ellipse 52% 36% at 86% 74%, rgba(244, 241, 230, 0.034), transparent 70%),
        linear-gradient(112deg, transparent 38%, rgba(244, 241, 230, 0.022) 44%, transparent 51%, rgba(244, 241, 230, 0.014) 58%, transparent 65%),
        radial-gradient(ellipse 130% 110% at 50% 40%, transparent 52%, rgba(6, 10, 8, 0.34) 100%);
      background-size: 160px 160px, auto, auto, auto, auto;
    }

    /* Sombra interior: la pizarra queda visualmente POR DEBAJO del marco */
    body.theme-classic::before {
      content: '';
      position: fixed;
      inset: 7px;
      z-index: 399;
      pointer-events: none;
      box-shadow: inset 0 0 30px rgba(4, 8, 6, 0.5), inset 0 0 7px rgba(4, 8, 6, 0.45);
    }
    /* Marco de madera fijo al viewport: delante del contenido, detrás
       de modales/overlays. Si el navegador no soporta mask-composite,
       no se pinta nada (jamás un rectángulo de madera tapando todo). */
    @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
      body.theme-classic::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 400;
        pointer-events: none;
        border: 7px solid transparent;
        background-image:
          var(--chalk-grain),
          linear-gradient(145deg, #7A5236 0%, #5E3E28 32%, #6E4B31 58%, #553823 80%, #46301F 100%);
        background-size: 160px 160px, auto;
        background-origin: border-box;
        background-clip: border-box;
        -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
      }
    }

    /* ── Cabecera: la misma pizarra, título a mano ─────────────── */
    body.theme-classic .menu-header {
      background: transparent;
      border-bottom: 0;
      box-shadow: none;
      --chalk-white: #F4F1E6;
      --chalk-muted: #C7CCC2;
      --chalk-dim: #A9B3AA;
    }
    /* Línea de tiza dibujada bajo la cabecera (reemplaza el borde recto) */
    body.theme-classic .menu-header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 9px;
      pointer-events: none;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='9'%3E%3Cpath d='M4 5.4C60 2.2 110 7.6 160 4.6S236 2.4 256 5.2' fill='none' stroke='%23F4F1E6' stroke-width='2.4' stroke-linecap='round' opacity='0.4'/%3E%3Cpath d='M52 4.4C96 2.6 150 2.6 196 4.8' fill='none' stroke='%23F4F1E6' stroke-width='3.6' stroke-linecap='round' opacity='0.13'/%3E%3C/svg%3E") repeat-x left calc(50% + 1px) / 260px 9px;
    }
    body.theme-classic .restaurant-logo {
      border: 2px solid rgba(244, 241, 230, 0.75);
      box-shadow: 0 0 0 5px rgba(244, 241, 230, 0.05), 0 6px 18px rgba(0, 0, 0, 0.45);
      background: #1E2722;
    }
    body.theme-classic .restaurant-title {
      text-shadow: 0 0 10px rgba(244, 241, 230, 0.14);
    }
    body.theme-classic .restaurant-slogan {
      color: var(--chalk-gold);
      transform: rotate(-0.35deg);
      text-shadow: 0 0 9px rgba(242, 210, 122, 0.2);
    }
    body.theme-classic .meta-chip {
      background: rgba(244, 241, 230, 0.05);
      border: 1.5px solid rgba(244, 241, 230, 0.22);
      border-radius: 10px 13px 10px 14px / 13px 10px 14px 10px;
      color: var(--chalk-muted);
    }
    body.theme-classic .btn-info-modal {
      background: rgba(244, 241, 230, 0.06);
      border: 1.5px solid rgba(244, 241, 230, 0.3);
      color: var(--chalk-white);
      border-radius: 10px 14px 11px 15px / 14px 11px 15px 10px;
    }
    body.theme-classic .social-btn-round {
      background: rgba(244, 241, 230, 0.06);
      border: 1.5px solid rgba(244, 241, 230, 0.28);
    }
    /* El estado va "escrito a mano", como una nota al margen */
    body.theme-classic .status-pill {
      font-family: var(--font-chalk);
      font-size: 0.98rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    /* ── Controles: buscador y filtros como cajas de tiza ──────── */
    body.theme-classic .controls-wrapper {
      background: rgba(23, 30, 26, 0.95);
      border-bottom: 1px solid rgba(244, 241, 230, 0.1);
      box-shadow: 0 10px 26px rgba(4, 8, 6, 0.35);
    }
    body.theme-classic .search-box {
      background: rgba(244, 241, 230, 0.05);
      border: 1.5px solid rgba(244, 241, 230, 0.26);
      border-radius: 12px 15px 11px 16px / 15px 11px 16px 12px;
      color: var(--chalk-white);
    }
    body.theme-classic .search-box::placeholder { color: rgba(244, 241, 230, 0.45); }
    body.theme-classic .search-box:focus {
      border-color: rgba(242, 210, 122, 0.75);
      box-shadow: 0 0 0 3px rgba(242, 210, 122, 0.13);
    }
    body.theme-classic .cat-pill {
      background: rgba(244, 241, 230, 0.045);
      border: 1.5px solid rgba(244, 241, 230, 0.22);
      color: var(--chalk-muted);
      border-radius: 11px 15px 11px 16px / 15px 11px 16px 11px;
    }
    body.theme-classic .cat-pill.active {
      background: rgba(242, 210, 122, 0.14);
      border-color: rgba(242, 210, 122, 0.58);
      color: #F5DC93;
    }
    body.theme-classic .cat-nav-icon-btn {
      background: rgba(244, 241, 230, 0.05);
      border: 1.5px solid rgba(244, 241, 230, 0.24);
      border-radius: 11px 14px 11px 15px / 14px 11px 15px 11px;
    }
    body.theme-classic .btn-a11y-tts {
      border: 1.5px solid rgba(242, 210, 122, 0.45);
      border-radius: 8px 11px 8px 12px / 11px 8px 12px 8px;
      color: var(--chalk-gold);
    }

    /* ── Categorías: título a mano con subrayado ondulado ──────── */
    body.theme-classic .category-title {
      font-family: var(--font-chalk);
      font-size: 1.72rem;
      font-weight: 700;
      letter-spacing: 0.015em;
      color: var(--chalk-white);
      border-bottom: 0;
      padding-bottom: 15px;
      text-shadow: 0 0 9px rgba(244, 241, 230, 0.12);
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='10'%3E%3Cpath d='M3 6.6C26 3.2 52 2.6 78 4.4s46 3.4 69-.8' fill='none' stroke='%23F2D27A' stroke-width='2.6' stroke-linecap='round' opacity='0.85'/%3E%3Cpath d='M12 8C42 5.8 74 5.6 102 6.6s30 .8 42-.4' fill='none' stroke='%23F4F1E6' stroke-width='4.4' stroke-linecap='round' opacity='0.1'/%3E%3C/svg%3E") no-repeat left calc(100% - 1px) / 150px 10px;
    }
    body.theme-classic .category-badge-count { color: var(--chalk-dim); }

    /* ── Platos: cajas de tiza con radios orgánicos ────────────── */
    body.theme-classic .dish-card {
      background: linear-gradient(180deg, rgba(244, 241, 230, 0.05), rgba(244, 241, 230, 0.018));
      border: 1.5px solid rgba(244, 241, 230, 0.17);
      border-radius: 14px 18px 13px 20px / 18px 13px 20px 14px;
    }
    body.theme-classic .dish-card:hover {
      background: linear-gradient(180deg, rgba(244, 241, 230, 0.075), rgba(244, 241, 230, 0.03));
      border-color: rgba(244, 241, 230, 0.3);
    }
    body.theme-classic .dish-thumb {
      border: 2px solid rgba(244, 241, 230, 0.22);
      border-radius: 9px 13px 8px 14px / 13px 8px 14px 9px;
      background: #1E2722;
    }
    body.theme-classic .dish-name { color: var(--chalk-white); }
    body.theme-classic .dish-desc { color: var(--chalk-dim); }
    /* Botón "+" como círculo dibujado con tiza amarilla */
    body.theme-classic .btn-add {
      background: rgba(242, 210, 122, 0.12);
      border: 2px solid rgba(242, 210, 122, 0.7);
      color: var(--chalk-gold);
      box-shadow: 0 0 0 3px rgba(242, 210, 122, 0.07);
    }
    body.theme-classic .btn-add:hover { background: rgba(242, 210, 122, 0.22); }
    /* Agotado / fuera de horario: botón "borrado" (vence al gris inline del JS) */
    body.theme-classic .btn-add[disabled] {
      background: rgba(244, 241, 230, 0.05) !important;
      border-color: rgba(244, 241, 230, 0.2) !important;
      color: rgba(244, 241, 230, 0.45) !important;
      box-shadow: none;
    }
    /* Tizas de color para las insignias (trazo, no relleno) */
    body.theme-classic .badge-veggie {
      background: rgba(159, 211, 165, 0.1);
      color: var(--chalk-leaf);
      border-color: rgba(159, 211, 165, 0.4);
    }
    body.theme-classic .badge-celiac {
      background: rgba(169, 203, 232, 0.1);
      color: var(--chalk-sky);
      border-color: rgba(169, 203, 232, 0.4);
    }
    body.theme-classic .badge-star {
      background: rgba(240, 182, 196, 0.1);
      color: var(--chalk-rose);
      border-color: rgba(240, 182, 196, 0.42);
    }
    /* "✕ AGOTADO HOY" y el precio "Agotado": el rojo pleno inline del JS
       se cambia por trazo de tiza roja (vence con important al inline) */
    body.theme-classic .dish-badge[style*="E53E3E"] {
      background: rgba(229, 62, 62, 0.16) !important;
      color: #F2A0A0 !important;
      border: 1px solid rgba(229, 62, 62, 0.45);
    }
    body.theme-classic .dish-price span[style*="E53E3E"] { color: #F2A0A0 !important; }

    /* ── Especiales del Chef: la "tablita" escrita aparte ──────── */
    body.theme-classic .chef-specials-section {
      background: linear-gradient(155deg, rgba(242, 210, 122, 0.08), rgba(20, 26, 23, 0.4) 68%);
      border: 2px dashed rgba(242, 210, 122, 0.42);
      border-radius: 16px 20px 15px 22px / 20px 15px 22px 16px;
    }
    body.theme-classic .chef-specials-title {
      font-size: 1.52rem;
      text-shadow: 0 0 9px rgba(242, 210, 122, 0.18);
    }
    body.theme-classic .chef-special-card {
      background: rgba(18, 24, 21, 0.74);
      border: 1.5px solid rgba(242, 210, 122, 0.32);
      border-radius: 13px 17px 12px 18px / 17px 12px 18px 13px;
      transform: rotate(-0.45deg);
    }
    body.theme-classic .chef-special-card:nth-child(2n) { transform: rotate(0.5deg); }
    body.theme-classic .chef-special-card:hover {
      transform: rotate(-0.45deg) translateY(-2px);
      border-color: rgba(242, 210, 122, 0.6);
    }
    body.theme-classic .chef-special-card:nth-child(2n):hover {
      transform: rotate(0.5deg) translateY(-2px);
    }
    body.theme-classic .chef-special-thumb { border: 2px solid rgba(244, 241, 230, 0.2); }
    body.theme-classic .chef-special-tag-ribbon { background: rgba(242, 210, 122, 0.94); color: #17201B; }

    /* ── Barra flotante y FABs: círculos y cajas de tiza ──────── */
    body.theme-classic .floating-cart-bar {
      background: rgba(26, 34, 29, 0.97);
      color: var(--chalk-white);
      border: 2px solid rgba(244, 241, 230, 0.32);
      border-radius: 26px 30px 25px 31px / 30px 25px 31px 26px;
      box-shadow: 0 14px 34px rgba(4, 8, 6, 0.55), 0 0 0 4px rgba(244, 241, 230, 0.05);
    }
    body.theme-classic .floating-cart-bar #cartTotalBadge { color: var(--chalk-gold); }
    /* Los FABs llevan fondos inline del HTML (azul/lila) → important */
    body.theme-classic .waiter-fab {
      background: rgba(23, 30, 26, 0.94) !important;
      border: 2px solid rgba(244, 241, 230, 0.38);
      color: var(--chalk-white);
      box-shadow: 0 8px 24px rgba(4, 8, 6, 0.5) !important;
    }
    body.theme-classic .waiter-fab:hover {
      border-color: rgba(244, 241, 230, 0.6);
      box-shadow: 0 10px 28px rgba(4, 8, 6, 0.6) !important;
    }

    /* ── Modales: pizarra chica con título a mano ──────────────── */
    body.theme-classic .modal-overlay {
      background: rgba(8, 12, 10, 0.74);
      backdrop-filter: blur(3px);
    }
    body.theme-classic .modal-box {
      background: linear-gradient(180deg, #242E28, #1F2823);
      border: 1.5px solid rgba(244, 241, 230, 0.18);
      border-radius: 18px 22px 17px 24px / 22px 17px 24px 18px;
      box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
    }
    body.theme-classic .modal-title {
      font-family: var(--font-chalk);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--chalk-white);
      border-bottom: 0;
      padding-bottom: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9'%3E%3Cpath d='M2 5.8C22 3 44 2.6 66 4.2s36 2.4 52-1.4' fill='none' stroke='%23F2D27A' stroke-width='2.4' stroke-linecap='round' opacity='0.85'/%3E%3Cpath d='M10 7.2C34 5.4 60 5.2 84 6.2s24 .6 30-.4' fill='none' stroke='%23F4F1E6' stroke-width='4' stroke-linecap='round' opacity='0.1'/%3E%3C/svg%3E") no-repeat left calc(100% - 2px) / 120px 9px;
    }
    /* Up-sell del mozo virtual: caja punteada, verde como trazo */
    body.theme-classic .dish-modal-upsell-box {
      background: rgba(242, 210, 122, 0.06);
      border: 1.5px dashed rgba(242, 210, 122, 0.32);
      border-radius: 12px 15px 11px 16px / 15px 11px 16px 12px;
    }
    body.theme-classic .btn-mozo-quick-add {
      background: rgba(159, 211, 165, 0.1);
      color: var(--chalk-leaf);
      border: 1.5px solid rgba(159, 211, 165, 0.42);
    }
    body.theme-classic .btn-mozo-quick-add:hover { background: rgba(159, 211, 165, 0.18); }
    body.theme-classic .btn-mozo-quick-add.added {
      background: rgba(169, 203, 232, 0.16);
      color: var(--chalk-sky);
      border-color: rgba(169, 203, 232, 0.42);
    }

    /* ── Pie: repisa con tizas y borrador ──────────────────────── */
    body.theme-classic footer::before {
      content: '';
      display: block;
      width: 250px;
      height: 42px;
      margin: 0 auto 12px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='42'%3E%3Cg fill='%23F4F1E6' opacity='0.16'%3E%3Ccircle cx='146' cy='31.5' r='0.9'/%3E%3Ccircle cx='153' cy='32.4' r='0.6'/%3E%3Ccircle cx='88' cy='31.8' r='0.7'/%3E%3C/g%3E%3Crect x='91' y='24.4' width='35' height='8' rx='3' fill='%23F4F1E6' opacity='0.92' transform='rotate(-4 108.5 28.4)'/%3E%3Crect x='130' y='26' width='28' height='7' rx='2.6' fill='%23F2D27A' opacity='0.95' transform='rotate(3 144 29.5)'/%3E%3Cg%3E%3Crect x='163' y='21' width='44' height='13' rx='3' fill='%237A5236'/%3E%3Crect x='163' y='26.6' width='44' height='7.4' rx='3' fill='%233A2B22'/%3E%3C/g%3E%3Crect x='12' y='32.6' width='226' height='6.4' rx='3.2' fill='%236E4B31'/%3E%3Crect x='18' y='33.8' width='214' height='1.6' rx='0.8' fill='%238A6040' opacity='0.85'/%3E%3Crect x='12' y='38.4' width='226' height='1.4' rx='0.7' fill='%234A3020'/%3E%3C/svg%3E") no-repeat center bottom / contain;
    }
    body.theme-classic ::selection {
      background: rgba(242, 210, 122, 0.32);
      color: #101614;
    }
    body.theme-emerald {
      /* EL BERILO: la paleta profundiza a beryl tallado. El tratamiento
         facetado completo vive más abajo (sección "EL BERILO"). */
      --bg-chalkboard: #0C2C21;
      --surface-card: #12382B;
      --surface-card-hover: #174233;
      --chalk-gold: #ECC94B;
      --chalk-white: #F2F8F4;
      --chalk-dim: #A9C8B8;
      --border-gold: rgba(236, 201, 75, 0.35);
      background-color: #0A271E;
    }
    body.theme-rustic {
      --bg-chalkboard: #1E1815;
      --surface-card: #28211D;
      --surface-card-hover: #342B26;
      --chalk-gold: #E2A03F;
      --border-gold: rgba(226, 160, 63, 0.4);
      background-color: #1E1815;
    }
    /* ============================================================
       TAQUERÍA — cálido artesanal moderno (tema CLARO)
       Crema de maíz, terracota profunda y óxido. Tarjetas limpias
       con micro-sombras, títulos editoriales, precios en óxido y
       cabecera oscura de contraste (marco de la escena).
       Regla de la paleta:
         · --chalk-gold  (maíz #E39B3C)  → FONDO de CTA/bordes, con
           tinta oscura encima (≈7.9:1). Nunca texto sobre crema.
         · --chalk-gold-ink (óxido #A3410F) → texto de acento sobre
           superficies claras (≈6.2:1 sobre tarjeta, ≈5.7:1 sobre
           el fondo). Los componentes base que pintan texto con
           --chalk-gold directo se re-apuntan abajo.
       ============================================================ */
    body.theme-taqueria {
      color-scheme: light;
      --bg-chalkboard: #FAF2E3;
      --surface-card: #FFFDF8;
      --surface-card-hover: #FBF3E6;
      --chalk-white: #2B1812;
      --chalk-muted: #6A4A3B;
      --chalk-dim: #7C5B4A;
      --chalk-gold: #E39B3C;
      --chalk-gold-ink: #A3410F;
      --chalk-gold-dim: rgba(163, 65, 15, 0.10);
      --chalk-green: #58994F;
      --border-chalk: rgba(163, 65, 15, 0.16);
      --border-gold: rgba(163, 65, 15, 0.34);
      background-color: var(--bg-chalkboard);
      /* Luz de horno: dos halos suaves + estampado artesanal de fondo
         (taco, chile, limón y banderín en line-art óxido, sutil) */
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23A3410F' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.11'%3E%3Cg transform='translate(14 16) rotate(-10 12 12)'%3E%3Cpath d='M4.3 15.9a7.7 7.5 0 0 1 15.4 0z'/%3E%3Cpath d='M7 12.2q1.3-1.8 2.6 0t2.6 0t2.6 0t2.6 0'/%3E%3C/g%3E%3Cg transform='translate(100 28) rotate(14 12 12)'%3E%3Cpath d='M13.6 4.1C15 8.2 13.4 12.6 9.4 15.5C8.2 16.4 7.2 16.9 6.2 17.1C9.6 18.8 14 16.6 15.6 12.8C16.9 9.7 16.2 6.4 13.6 4.1'/%3E%3Cpath d='M13.6 4.1C13.8 2.9 14.6 2.1 15.7 1.8'/%3E%3C/g%3E%3Cg transform='translate(28 98) rotate(-6 12 12)'%3E%3Ccircle cx='12' cy='12' r='7.6'/%3E%3Cpath d='M12 12L12 4.4M12 12L18.6 8.2M12 12L18.6 15.8M12 12L12 19.6M12 12L5.4 15.8M12 12L5.4 8.2'/%3E%3C/g%3E%3Cg transform='translate(108 110) rotate(10 12 12)'%3E%3Cpath d='M2 3h20v5.4l-3.33 3.4-3.34-3.4-3.33 3.4-3.34-3.4-3.33 3.4-3.33-3.4z'/%3E%3Cpath d='M12 5.6l1.7 2.1-1.7 2.1-1.7-2.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 12% 8%, rgba(227, 155, 60, 0.10) 0%, transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(163, 65, 15, 0.06) 0%, transparent 42%);
      background-size: 160px 160px, auto, auto;
    }
    /* Foco visible en óxido: el maíz no alcanza 3:1 sobre crema */
    body.theme-taqueria *:focus-visible {
      outline-color: var(--chalk-gold-ink);
    }

    /* ── Cabecera: terracota profunda con hilo de maíz ────────── */
    body.theme-taqueria .menu-header {
      /* Tejido sutil (chevron cálido) sobre el gradiente terracota */
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12'%3E%3Cpath d='M0 10L5.75 2L11.5 10L17.25 2L23 10L28.75 2L34.5 10L40.25 2L46 10' fill='none' stroke='%23F6CB8D' stroke-width='1' stroke-linecap='round' stroke-opacity='0.06'/%3E%3C/svg%3E"),
        linear-gradient(178deg, #2A1310 0%, #6E2A18 58%, #8A3A1C 100%);
      background-size: 46px 12px, auto;
      background-repeat: repeat, no-repeat;
      border-bottom: 3px solid var(--chalk-gold);
      box-shadow: 0 6px 26px rgba(58, 24, 14, 0.28);
      /* Tintas claras re-scopeadas a la gama cálida (todas ≥4.5:1
         sobre el punto más claro del gradiente, #8A3A1C) */
      --chalk-white: #FFF6EA;
      --chalk-muted: #E7C9B4;
      --chalk-dim: #DCC0AA;
      --chalk-gold: #F6CB8D;
      /* Sobre el header el tinte de los chips es OSCURO (no claro):
         aclararlo bajaba el ámbar a ~3.2:1. Así queda ≥7:1. */
      --chalk-gold-dim: rgba(42, 19, 16, 0.45);
      --border-chalk: rgba(255, 214, 170, 0.20);
      --border-gold: rgba(240, 180, 94, 0.45);
    }
    /* Borde de papel picado: banderines alternados (maíz/miel) con
       calados reales (even-odd) que cuelgan del hilo de la cabecera. */
    body.theme-taqueria .menu-header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -12px;
      height: 12px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='%23E39B3C' fill-rule='evenodd' d='M0 0h18L9 12zM7.55 4a1.45 1.45 0 1 0 2.9 0a1.45 1.45 0 1 0-2.9 0z'/%3E%3Cpath fill='%23C9801F' fill-rule='evenodd' d='M18 0h18L27 12zM25.55 4a1.45 1.45 0 1 0 2.9 0a1.45 1.45 0 1 0-2.9 0z'/%3E%3C/svg%3E") repeat-x;
      background-size: 36px 12px;
      pointer-events: none;
    }
    body.theme-taqueria .menu-header .btn-info-modal:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #FFE2B8;
    }
    /* Chips de contacto (ubicación/Wi-Fi/teléfono): el 6% blanco base
       aclaraba el chip y dejaba el texto a ~3.9:1 sobre el gradiente.
       Chip oscuro cálido: ≥7:1 y mejor jerarquía con el de Reservar. */
    body.theme-taqueria .menu-header .meta-chip {
      background: rgba(42, 19, 16, 0.55);
      border-color: rgba(255, 214, 170, 0.22);
    }
    body.theme-taqueria .restaurant-slogan {
      font-family: 'Permanent Marker', 'Caveat', cursive, sans-serif;
      color: #F6CB8D;
      letter-spacing: 0.02em;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
    body.theme-taqueria .restaurant-logo {
      background: #3A1B12;
      box-shadow: 0 3px 14px rgba(20, 8, 5, 0.35);
    }
    body.theme-taqueria .restaurant-cover-banner {
      background: linear-gradient(180deg, rgba(42, 19, 16, 0.35), #2A1310), url('/logo-scango.png') center/cover no-repeat;
    }

    /* ── Portada (hero): se funde con la cabecera, sin franja ──── */
    body.theme-taqueria .menu-banner-media { background: #2A1310; }
    body.theme-taqueria .menu-banner-overlay {
      background: linear-gradient(to bottom, rgba(42, 19, 16, 0.15) 0%, #2A1310 100%);
    }
    body.theme-taqueria.has-hero-banner .menu-banner-hero { margin-bottom: 0; }
    /* Festón de entrada: guirnalda colgando sobre la portada — cuerda
       curvada (crema + sombra para leerse sobre cualquier foto) con los
       mismos banderines calados, contorno tenue para fondos claros.
       z-index 2: pasa por detrás de la píldora de estado (z 3). */
    body.theme-taqueria.has-hero-banner .menu-banner-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 30px;
      z-index: 2;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30'%3E%3Cpath d='M0 6Q160 34 320 6' fill='none' stroke='%23FFF6EA' stroke-opacity='0.65' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0 6Q160 34 320 6' fill='none' stroke='%232A1310' stroke-opacity='0.4' stroke-width='0.9'/%3E%3Cpath fill='%23E39B3C' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M20.2 10.3h13l-6.5 8zM25.55 13a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3Cpath fill='%23C9801F' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M73.5 16.5h13l-6.5 8zM78.85 19.2a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3Cpath fill='%23E39B3C' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M126.8 19.6h13l-6.5 8zM132.15 22.3a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3Cpath fill='%23C9801F' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M180.2 19.6h13l-6.5 8zM185.55 22.3a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3Cpath fill='%23E39B3C' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M233.5 16.5h13l-6.5 8zM238.85 19.2a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3Cpath fill='%23C9801F' fill-rule='evenodd' stroke='%232A1310' stroke-opacity='0.28' stroke-width='0.7' d='M286.8 10.3h13l-6.5 8zM292.15 13a1.15 1.15 0 1 0 2.3 0a1.15 1.15 0 1 0-2.3 0z'/%3E%3C/svg%3E") repeat-x;
      background-size: 320px 30px;
      pointer-events: none;
    }
    /* Píldora de estado (hero con foto Y cabecera): el JS pinta fondo,
       borde y color inline según el estado (abierto/cerrado), por eso el
       override del tema necesita !important. Chip cálido sólido: el tinte
       ámbar translúcido base caía a ~1.9:1 sobre fotos claras del hero. */
    body.theme-taqueria .menu-banner-status-slot .status-pill,
    body.theme-taqueria .status-pill-row .status-pill {
      background: rgba(42, 19, 16, 0.82) !important;
      border-color: rgba(240, 180, 94, 0.45) !important;
    }
    body.theme-taqueria .menu-banner-status-slot .status-pill.open,
    body.theme-taqueria .status-pill-row .status-pill.open { color: #F6CB8D !important; }
    body.theme-taqueria .menu-banner-status-slot .status-pill.closed,
    body.theme-taqueria .status-pill-row .status-pill.closed { color: #FFB4A8 !important; }
    body.theme-taqueria .menu-banner-status-slot .status-pill.order-later,
    body.theme-taqueria .status-pill-row .status-pill.order-later { color: #E7C9B4 !important; }
    body.theme-taqueria .menu-banner-logo-slot .restaurant-logo {
      border-width: 3px;
      box-shadow: 0 6px 20px rgba(20, 8, 5, 0.45);
    }

    /* ── Barra de búsqueda y filtros ───────────────────────────── */
    body.theme-taqueria .controls-wrapper {
      background: rgba(250, 242, 227, 0.94);
      border-bottom: 1px solid var(--border-chalk);
      box-shadow: 0 8px 20px rgba(88, 40, 18, 0.06);
    }
    body.theme-taqueria .search-box {
      background: var(--surface-card);
      border-color: var(--border-chalk);
      border-radius: 12px;
      color: var(--chalk-white);
      box-shadow: inset 0 1px 2px rgba(88, 40, 18, 0.04);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    body.theme-taqueria .search-box::placeholder { color: #8A6A57; }
    body.theme-taqueria .search-box:focus {
      border-color: var(--chalk-gold);
      box-shadow: 0 0 0 3px rgba(227, 155, 60, 0.22);
    }
    body.theme-taqueria .cat-pill { box-shadow: 0 1px 2px rgba(88, 40, 18, 0.05); }
    body.theme-taqueria .cat-pill.active { box-shadow: 0 2px 8px rgba(163, 65, 15, 0.22); }

    /* ── Títulos de categoría: editorial + hilo de maíz ────────── */
    body.theme-taqueria .category-title {
      color: var(--chalk-gold-ink);
      font-size: 1.16rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--border-chalk);
      background: linear-gradient(90deg, var(--chalk-gold) 0 54px, transparent 54px) left bottom / 100% 3px no-repeat;
    }
    body.theme-taqueria .category-badge-count {
      color: var(--chalk-dim);
      letter-spacing: normal;
      text-transform: none;
    }

    /* ── Tarjetas de plato: papel con micro-sombra ─────────────── */
    body.theme-taqueria .dish-card {
      box-shadow: 0 1px 2px rgba(88, 40, 18, 0.04), 0 6px 18px rgba(88, 40, 18, 0.06);
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    @media (hover: hover) {
      body.theme-taqueria .dish-card:hover {
        border-color: var(--border-gold);
        box-shadow: 0 3px 8px rgba(88, 40, 18, 0.06), 0 14px 30px rgba(88, 40, 18, 0.10);
        transform: translateY(-1px);
      }
    }
    body.theme-taqueria .dish-thumb {
      background: #F3E2C9;
      border-radius: 12px;
    }
    body.theme-taqueria .dish-badge.badge-star { background: rgba(179, 38, 30, 0.10); color: #B3261E; border-color: rgba(179, 38, 30, 0.32); }
    body.theme-taqueria .dish-badge.badge-veggie { background: rgba(88, 153, 79, 0.12); color: #35702F; border-color: rgba(88, 153, 79, 0.34); }
    body.theme-taqueria .dish-badge.badge-celiac { background: rgba(138, 90, 0, 0.10); color: #8A5A00; border-color: rgba(138, 90, 0, 0.28); }
    body.theme-taqueria .qty-counter { color: var(--chalk-gold-ink); }
    body.theme-taqueria .btn-add {
      box-shadow: 0 2px 8px rgba(163, 65, 15, 0.35);
      transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
    }
    @media (hover: hover) {
      body.theme-taqueria .btn-add:hover {
        background: #D98A2B;
        box-shadow: 0 4px 14px rgba(163, 65, 15, 0.42);
      }
    }
    body.theme-taqueria .btn-add:active { transform: scale(0.92); box-shadow: 0 1px 4px rgba(163, 65, 15, 0.30); }

    /* ── Especiales del chef: recorte de recetario ─────────────── */
    body.theme-taqueria .chef-specials-section {
      background: linear-gradient(135deg, rgba(227, 155, 60, 0.16) 0%, var(--surface-card) 60%);
      border-color: rgba(163, 65, 15, 0.35);
    }
    body.theme-taqueria .chef-specials-title {
      font-family: 'Permanent Marker', 'Caveat', cursive, sans-serif;
      color: var(--chalk-gold-ink);
      text-shadow: none;
    }
    body.theme-taqueria .chef-badge-gold {
      background: rgba(163, 65, 15, 0.10);
      border-color: rgba(163, 65, 15, 0.30);
      color: var(--chalk-gold-ink);
    }
    body.theme-taqueria .chef-special-card {
      background: var(--surface-card);
      border-color: var(--border-chalk);
      box-shadow: 0 2px 6px rgba(88, 40, 18, 0.05), 0 10px 24px rgba(88, 40, 18, 0.06);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    body.theme-taqueria .chef-special-thumb { border-color: var(--border-chalk); }
    body.theme-taqueria .chef-special-tag-ribbon { background: #E39B3C; }
    @media (hover: hover) {
      body.theme-taqueria .chef-special-card:hover { border-color: var(--chalk-gold); }
    }
    /* Contador "N en carrito": el render lo pinta inline con
       var(--chalk-gold) (maíz sobre tarjeta clara ≈ 2.3:1) → óxido. */
    body.theme-taqueria .chef-special-card > div[style*="--chalk-gold"] {
      color: var(--chalk-gold-ink) !important;
    }
    body.theme-taqueria .chef-special-footer { border-top-color: var(--border-chalk); }
    body.theme-taqueria .chef-special-price { color: var(--chalk-gold-ink); font-family: var(--font-mono); }
    body.theme-taqueria .chef-specials-carousel { scrollbar-color: rgba(163, 65, 15, 0.35) transparent; }
    body.theme-taqueria .chef-specials-carousel::-webkit-scrollbar-thumb { background: rgba(163, 65, 15, 0.35); }

    /* ── Estado vacío y carga ──────────────────────────────────── */
    body.theme-taqueria .empty-state-card {
      background: var(--surface-card);
      border-color: rgba(163, 65, 15, 0.28);
      box-shadow: 0 6px 20px rgba(88, 40, 18, 0.05);
    }
    body.theme-taqueria .empty-state-title { color: var(--chalk-gold-ink); }
    body.theme-taqueria .empty-state-btn { border-color: var(--chalk-gold-ink); color: var(--chalk-gold-ink); }
    body.theme-taqueria .empty-state-btn:hover { background: var(--chalk-gold); border-color: var(--chalk-gold); color: #2B1812; }
    body.theme-taqueria .loading-spinner { color: var(--chalk-gold-ink); }

    /* ── Modales: superficie de papel, backdrop cálido ─────────── */
    body.theme-taqueria .modal-overlay { background: rgba(30, 13, 9, 0.78); }
    body.theme-taqueria .modal-box {
      border-color: var(--border-gold);
      box-shadow: 0 18px 50px rgba(43, 24, 18, 0.30);
    }
    body.theme-taqueria .form-select,
    body.theme-taqueria .form-input,
    body.theme-taqueria .form-textarea {
      background: var(--surface-card);
      color: var(--chalk-white);
      border-color: var(--border-chalk);
    }
    body.theme-taqueria .form-input::placeholder,
    body.theme-taqueria .form-textarea::placeholder { color: #8A6A57; }
    body.theme-taqueria .form-select:focus,
    body.theme-taqueria .form-input:focus,
    body.theme-taqueria .form-textarea:focus {
      border-color: var(--chalk-gold);
      box-shadow: 0 0 0 3px rgba(227, 155, 60, 0.20);
    }
    body.theme-taqueria .total-summary { background: #FBF3E6; border-color: var(--border-chalk); }
    body.theme-taqueria .summary-row.total-row { color: var(--chalk-white); }
    body.theme-taqueria .summary-row.total-row span.total-amount { color: var(--chalk-gold-ink); }
    body.theme-taqueria .cart-item-price { color: var(--chalk-gold-ink); }
    body.theme-taqueria .cart-note-edit { color: var(--chalk-gold-ink); }
    body.theme-taqueria .bill-splitter-box { background: rgba(163, 65, 15, 0.04); }
    body.theme-taqueria .dish-note-dish-name { color: var(--chalk-gold-ink); }
    body.theme-taqueria .dish-choice-price { color: var(--chalk-gold-ink); }
    body.theme-taqueria .dish-variant-total.invalid,
    body.theme-taqueria .dish-choice-error { color: #C0392B; }
    body.theme-taqueria .cart-item-ordered-by.is-own {
      color: #276749;
      background: rgba(56, 161, 105, 0.12);
      border-color: rgba(56, 161, 105, 0.30);
    }

    /* ── Modal de Información (horarios, servicios, señas) ─────── */
    body.theme-taqueria .info-modal-box {
      background: var(--surface-card);
      border-color: var(--border-gold);
      box-shadow: 0 18px 50px rgba(43, 24, 18, 0.35);
    }
    body.theme-taqueria .info-modal-title,
    body.theme-taqueria .info-section-title,
    body.theme-taqueria .service-title-group { color: var(--chalk-white); }
    body.theme-taqueria .info-action-btn {
      background: rgba(163, 65, 15, 0.07);
      color: var(--chalk-white);
    }
    body.theme-taqueria .info-address-box,
    body.theme-taqueria .service-card { background: rgba(163, 65, 15, 0.045); }
    body.theme-taqueria .info-directions-link {
      color: var(--chalk-gold-ink);
      background: rgba(163, 65, 15, 0.06);
    }
    body.theme-taqueria .info-modal-body { scrollbar-color: rgba(163, 65, 15, 0.35) transparent; }
    body.theme-taqueria .service-check { color: #276749; }
    body.theme-taqueria .service-subnote { color: #8A5A00; }
    body.theme-taqueria .schedule-day-row.today {
      background: rgba(163, 65, 15, 0.10);
      border-color: rgba(163, 65, 15, 0.30);
      color: var(--chalk-gold-ink);
    }
    body.theme-taqueria .schedule-day-hours.closed,
    body.theme-taqueria .schedule-closed { color: #C0392B; }

    /* ── Aviso push y mozo virtual ─────────────────────────────── */
    body.theme-taqueria .push-prompt-banner {
      background: rgba(255, 253, 248, 0.97);
      border-color: var(--border-gold);
      box-shadow: 0 10px 30px rgba(88, 40, 18, 0.25);
    }
    body.theme-taqueria .mozo-reason-banner {
      color: var(--chalk-gold-ink);
      background: rgba(163, 65, 15, 0.08);
      border-left-color: var(--chalk-gold);
    }
    body.theme-taqueria .mozo-header-text h4 { color: var(--chalk-gold-ink); }
    body.theme-taqueria .mozo-item-card {
      background: var(--surface-card);
      border-color: var(--border-chalk);
    }
    body.theme-taqueria .mozo-item-card:hover {
      background: var(--surface-card-hover);
      border-color: var(--border-gold);
    }
    body.theme-taqueria .mozo-item-thumb { background: #F3E2C9; }
    body.theme-taqueria .mozo-item-title { color: var(--chalk-white); }
    body.theme-taqueria .mozo-item-price { color: var(--chalk-gold-ink); }
    body.theme-taqueria .dish-modal-upsell-box {
      background: rgba(163, 65, 15, 0.05);
      border-color: rgba(163, 65, 15, 0.28);
    }
    body.theme-taqueria .dish-modal-upsell-title { color: var(--chalk-gold-ink); }

    /* ── Reseñas inteligentes ──────────────────────────────────── */
    body.theme-taqueria .smart-review-modal-box {
      background: var(--surface-card);
      border-color: var(--border-gold);
      box-shadow: 0 18px 50px rgba(43, 24, 18, 0.35);
    }
    body.theme-taqueria .star-btn { color: #7A6252; }
    body.theme-taqueria .star-btn:hover,
    body.theme-taqueria .star-btn.hover-active,
    body.theme-taqueria .star-btn.active {
      color: #B9691A;
      text-shadow: 0 0 12px rgba(185, 105, 26, 0.40);
    }
    body.theme-taqueria .review-success-banner,
    body.theme-taqueria .review-constructive-banner {
      background: rgba(163, 65, 15, 0.06);
      border-color: rgba(163, 65, 15, 0.25);
    }
    body.theme-taqueria .btn-feedback-dismiss { border-color: var(--border-chalk); }
    body.theme-taqueria .btn-feedback-dismiss:hover { background: rgba(163, 65, 15, 0.06); }

    /* ── Controles sueltos (switch, carrito flotante, avisos) ──── */
    body.theme-taqueria .slider-round {
      background-color: #E2C9A9;
      border-color: rgba(163, 65, 15, 0.28);
    }
    body.theme-taqueria .slider-round:before {
      background-color: #FFFDF8;
      box-shadow: 0 1px 3px rgba(88, 40, 18, 0.35);
    }
    body.theme-taqueria .switch-ui input:checked + .slider-round {
      background-color: var(--chalk-gold);
      border-color: var(--chalk-gold);
    }
    body.theme-taqueria .switch-ui input:checked + .slider-round:before { background-color: #2B1812; }
    body.theme-taqueria .floating-cart-bar { box-shadow: 0 10px 28px rgba(88, 40, 18, 0.35); }
    body.theme-taqueria .announcement-banner {
      background: linear-gradient(90deg, #E39B3C, #D98A2B);
      color: #2B1812;
      box-shadow: 0 2px 10px rgba(163, 65, 15, 0.18);
    }
    body.theme-taqueria .loyalty-top-bar {
      background: linear-gradient(90deg, #C9801F, #E39B3C);
      color: #2B1812;
      box-shadow: 0 2px 10px rgba(88, 40, 18, 0.20);
    }
    body.theme-taqueria .loyalty-user-btn { color: #2B1812; }
    body.theme-taqueria .waiter-fab {
      background: #E39B3C;
      color: #2B1812;
      box-shadow: 0 6px 20px rgba(163, 65, 15, 0.35);
    }
    body.theme-taqueria .waiter-fab:hover { box-shadow: 0 8px 28px rgba(163, 65, 15, 0.45); }

    /* ── Pedido grupal + Destacados ────────────────────────────── */
    body.theme-taqueria .group-toast-notification {
      background: rgba(43, 24, 18, 0.96);
      box-shadow: 0 8px 24px rgba(43, 24, 18, 0.45);
    }
    body.theme-taqueria .group-table-top-bar { background: linear-gradient(90deg, #3A1810, #8A3A1C); }
    body.theme-taqueria .btn-group-consolidate {
      background: rgba(163, 65, 15, 0.07);
      border-color: #A3410F;
      color: var(--chalk-gold-ink);
    }
    body.theme-taqueria .btn-group-consolidate:hover { background: rgba(163, 65, 15, 0.14); }
    body.theme-taqueria .destacado-img-wrap { background: #F3E2C9; }

    /* ── Propina, Mozo Virtual y cross-sell (colores inline) ─────
       El HTML/JS pinta estos controles con colores para superficie
       oscura (#fff, verde claro) → acá van a tinta/verde oscuro.
       Los textos inline con color:var(--chalk-gold) se corrigen
       re-scopando la variable en su subárbol (sin !important). */
    body.theme-taqueria #mozoToggleBar { --chalk-gold: var(--chalk-gold-ink); }
    body.theme-taqueria #mozoToggleBar .switch-ui input:checked + .slider-round {
      background-color: #E39B3C;
      border-color: #E39B3C;
    }
    body.theme-taqueria #crossSellSection { --chalk-gold: var(--chalk-gold-ink); }
    body.theme-taqueria .cross-sell-card {
      background: rgba(227, 155, 60, 0.10) !important;
      border-color: rgba(163, 65, 15, 0.28) !important;
    }
    body.theme-taqueria .cross-sell-card > div > div:nth-child(2) { color: var(--chalk-white) !important; }
    body.theme-taqueria .mozo-virtual-upsell-box {
      background: linear-gradient(135deg, rgba(227, 155, 60, 0.14) 0%, var(--surface-card) 65%);
      border-color: rgba(163, 65, 15, 0.35);
      box-shadow: 0 6px 18px rgba(88, 40, 18, 0.06);
    }
    body.theme-taqueria .mozo-badge-tag {
      color: #276749;
      background: rgba(56, 161, 105, 0.12);
      border-color: rgba(56, 161, 105, 0.30);
    }
    body.theme-taqueria .btn-mozo-quick-add { background: #2F855A; }
    body.theme-taqueria .btn-mozo-quick-add:hover { background: #276749; }
    body.theme-taqueria .btn-mozo-quick-add.added { background: #2B6CB0; }
    body.theme-taqueria [data-tip-pill] { color: var(--chalk-white) !important; }
    body.theme-taqueria #tipAmountDisplay,
    body.theme-taqueria #summaryDiscountRow,
    body.theme-taqueria #summaryTipRow { color: #276749 !important; }
    body.theme-taqueria #groupConsolidatedContainer {
      background: rgba(163, 65, 15, 0.05) !important;
      border-color: rgba(163, 65, 15, 0.28) !important;
    }

    /* ── Detalles decorativos ──────────────────────────────────── */
    /* Divisor del pie: taco flanqueado por hairlines y puntos. */
    body.theme-taqueria footer::before {
      content: '';
      display: block;
      width: 220px;
      height: 26px;
      margin: 0 auto 12px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='26'%3E%3Cg stroke='%23A3410F' stroke-width='1.3' fill='none' stroke-linecap='round' opacity='0.5'%3E%3Cline x1='4' y1='13' x2='88' y2='13'/%3E%3Cline x1='132' y1='13' x2='216' y2='13'/%3E%3Cg transform='translate(98 1)'%3E%3Cpath d='M4.3 15.9a7.7 7.5 0 0 1 15.4 0z'/%3E%3Cpath d='M7 12.2q1.3-1.8 2.6 0t2.6 0t2.6 0t2.6 0'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23A3410F' opacity='0.5'%3E%3Ccircle cx='92' cy='13' r='1.5'/%3E%3Ccircle cx='128' cy='13' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* ── Escritorio: carta más aireada ─────────────────────────── */
    @media (min-width: 900px) {
      body.theme-taqueria .menu-container { max-width: 840px; }
    }
    body.theme-bar {
      --bg-chalkboard: #121422;
      --surface-card: #1A1D30;
      --surface-card-hover: #242842;
      --chalk-gold: #B794F4;
      --border-gold: rgba(183, 148, 244, 0.4);
      background-color: #121422;
    }
    /* ============================================================
       MODERNA — "Cafetería Moderna" (especialidad, redesign oct-2026)
       Elegante y contemporánea: carbón negro mate con vena espresso,
       texto latte, acento cobre/bronce tenue. Minimalista y de venta
       rápida: CTA integrado, foto protagonista, radios suaves.

       Paleta (contraste verificado a mano, AA):
         · carbón mate  #171310 (fondo; latte encima ≈ 15.5:1)
         · espresso     #241B15 (cards; latte encima ≈ 13.9:1, cobre ≈ 5.7:1)
         · crema latte  #F3EADD (texto principal ≈ 15.5:1 bg / 13.9:1 card)
         · leche espuma #DCCDBB (secundario ≈ 9.6:1 bg / 8.6:1 card)
         · taza grande  #A99883 (terciario/dim ≈ 6.8:1 bg / 6.1:1 card)
         · cobre suave  #D6A171 (acento ≈ 8.1:1 bg / 7.3:1 card / 4.9:1 sobre tintes compuestos)
       NUNCA fuerza tipografía: el selector de fuente del dueño manda.
       ============================================================ */
    body.theme-moderna {
      --bg-chalkboard: #171310;
      --surface-card: #241B15;
      --surface-card-hover: #2F241D;
      --chalk-white: #F3EADD;
      --chalk-muted: #DCCDBB;
      --chalk-dim: #A99883;
      --chalk-gold: #D6A171;
      --chalk-gold-ink: #E5B078;
      --chalk-leaf: #A3B18A;
      --border-chalk: rgba(243, 234, 221, 0.12);
      --border-gold: rgba(214, 161, 113, 0.45);
      background-color: #171310;
      /* Luz cálida tenue: reflejo de vitrina, no un gradiente decorativo */
      background-image:
        radial-gradient(ellipse 60% 40% at 18% 6%, rgba(201, 138, 84, 0.05), transparent 70%),
        radial-gradient(ellipse 55% 45% at 85% 92%, rgba(120, 72, 40, 0.07), transparent 75%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.012) 0%, transparent 40%);
    }
    /* Tarjetas: radios suaves + sombra profunda sutil (rounded-2xl feel) */
    /* ============================================================
       MODERNA — "Cafetería Moderna" · concepto "LA CARTA DE LA BARRA"
       Rediseño morfológico oct-2026: la carta es TIPOGRAFÍA, no tarjetas.
       Referente: la lista corrida de las cafeterías de especialidad de
       barra fina (Wendelboe, Onibus, La Cabra): nombre + línea de puntos
       + precio tabular alineado en la misma línea, descripción en tinta
       calma debajo, meta-divisas como texto mínimo, y las fotos fuera de
       la fila (viven en el detalle/chef/stories). Cabeceras de categoría
       como palabras display con regla fina. El cobre queda RESERVADO a
       estados interactivos (activo de categoría, hover del CTA): nada de
       precios dorados — todos los demás temas son dorados.

       Paleta (contraste verificado a mano, AA):
         · carbón mate  #171310 (fondo; latte encima ~15.5:1)
         · espresso     #241B15 (modals/superficies; latte 13.9:1)
         · crema latte  #F3EADD (texto principal ~15.5:1 bg / 13.9:1 card)
         · leche espuma #DCCDBB (secundario ~9.6:1 bg / 8.6:1 card)
         · taza grande  #A99883 (terciario/dim ~6.8:1 bg / 6.1:1 card)
         · cobre suave  #D6A171 (acento ~8.1:1 bg; precio reforzado #E5B078)
       Voz tipográfica: Plus Jakarta Sans 800 (auto-hospedada) para el
       display del tema; el --font-heading del owner sigue mandando en lo
       demás (mantenemos su selector). Sin gradientes decorativos.
       La morfología de lista vive SOLO en layout-classic (patrón
       explosivo); el resto de layouts recibe únicamente la paleta.
       ============================================================ */
    body.theme-moderna {
      --bg-chalkboard: #171310;
      --surface-card: #241B15;
      --surface-card-hover: #2F241D;
      --chalk-white: #F3EADD;
      --chalk-muted: #DCCDBB;
      --chalk-dim: #A99883;
      --chalk-gold: #D6A171;
      --chalk-gold-ink: #E5B078;
      --chalk-leaf: #A3B18A;
      --border-chalk: rgba(243, 234, 221, 0.12);
      --border-gold: rgba(214, 161, 113, 0.45);
      background-color: #171310;
      background-image: none;
    }

    /* ── Identidad del tema (cualquier layout): header de barra + voz 800 ── */
    body.theme-moderna .menu-header {
      background: #171310;
      border-bottom: 1px solid rgba(214, 161, 113, 0.28);
      box-shadow: none;
      padding: 30px 16px 24px;
    }
    body.theme-moderna .restaurant-title {
      font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: clamp(1.85rem, 6.5vw, 2.35rem);
      letter-spacing: -0.025em;
      color: var(--chalk-white);
    }
    body.theme-moderna .restaurant-slogan {
      color: var(--chalk-muted);
      font-size: 1.15rem;
    }
    body.theme-moderna .restaurant-logo {
      width: 52px;
      height: 52px;
      border: 1px solid rgba(243, 234, 221, 0.25);
      background: #241B15;
    }
    /* Meta de la barra: sin píldoras ni cajitas — texto en calma */
    body.theme-moderna .meta-chip {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 4px 6px;
      color: var(--chalk-muted);
    }
    body.theme-moderna .meta-chip:hover {
      background: rgba(243, 234, 221, 0.06);
      color: var(--chalk-white);
    }
    body.theme-moderna .meta-chip-reserve {
      background: transparent;
      color: var(--chalk-gold);
      text-decoration: underline;
      text-decoration-color: rgba(214, 161, 113, 0.7);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 6px;
    }
    body.theme-moderna .meta-chip-reserve:hover { background: rgba(214, 161, 113, 0.1); }
    /* Anillos rápidos de categorías: hairline porcelana, nada de arcoíris */
    body.theme-moderna .st-ring-face {
      border-width: 1.5px;
      background:
        linear-gradient(#1B1613, #1B1613) padding-box,
        linear-gradient(180deg, rgba(243, 234, 221, 0.4), rgba(243, 234, 221, 0.1)) border-box;
    }
    body.theme-moderna .st-ring-label { color: var(--chalk-dim); }
    body.theme-moderna .st-ring:focus-visible {
      outline: 2px solid var(--chalk-gold);
      outline-offset: 2px;
      border-radius: 50%;
    }
    /* Mozo: puck espresso con anillo fino (nada de naranja chillón) */
    body.theme-moderna .waiter-fab {
      background: #241B15;
      color: var(--chalk-white);
      border: 1px solid rgba(243, 234, 221, 0.3);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }
    body.theme-moderna .waiter-fab:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
    }
    body.theme-moderna .announcement-banner {
      background: #241B15;
      color: var(--chalk-muted);
      font-weight: 600;
      border-bottom: 1px solid var(--border-chalk);
    }
    /* Barra sticky de controles: el base rgba(21,29,26,.96) es verdepetróleo
       hardcodeado — la compongo encima del carbón del tema (#171310). */
    body.theme-moderna .controls-wrapper { background: rgba(23, 19, 16, 0.96); }
    /* Buscador: una sola regla fina (input de barra, no cajita) */
    body.theme-moderna .search-box {
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--border-chalk);
      border-radius: 0;
      padding: 10px 2px;
      color: var(--chalk-white);
      font-size: 0.95rem;
    }
    body.theme-moderna .search-box:focus {
      border-bottom-color: var(--chalk-gold);
      outline: none;
    }
    body.theme-moderna .search-box::placeholder { color: var(--chalk-dim); }
    /* Categorías de la barra: texto, no píldoras. Activa = subrayado cobre. */
    body.theme-moderna .cat-pill {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 6px 10px;
      color: var(--chalk-dim);
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: 0.01em;
    }
    body.theme-moderna .cat-pill:hover { color: var(--chalk-muted); }
    body.theme-moderna .cat-pill.active {
      background: transparent;
      color: var(--chalk-white);
      font-weight: 700;
      text-decoration-line: underline;
      text-decoration-color: var(--chalk-gold);
      text-decoration-thickness: 2px;
      text-underline-offset: 10px;
    }
    body.theme-moderna .cat-pill:focus-visible {
      outline: 2px solid var(--chalk-gold);
      outline-offset: 4px;
    }
    /* Chef specials: franja editorial sin dorado chillón */
    body.theme-moderna .chef-specials-section {
      background: transparent;
      border: 0;
      border-top: 1px solid var(--border-chalk);
      border-bottom: 1px solid var(--border-chalk);
      border-radius: 0;
      padding: 16px 0;
    }
    body.theme-moderna .chef-specials-title {
      font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--chalk-white);
      text-shadow: none;
    }
    body.theme-moderna .chef-special-card {
      background: var(--surface-card);
      border-color: var(--border-chalk);
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
    }
    body.theme-moderna .chef-special-card:hover { border-color: var(--border-gold); }
    body.theme-moderna .chef-special-name {
      font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
    }
    body.theme-moderna .chef-special-price { color: var(--chalk-white); }
    body.theme-moderna .chef-badge-gold {
      background: transparent;
      border-color: var(--border-chalk);
      border-radius: 0;
    }
    body.theme-moderna .chef-specials-carousel { scrollbar-color: rgba(214, 161, 113, 0.35) transparent; }

    /* ============================================================
       "LA CARTA DE LA BARRA" — morfología de lista (solo layout-classic)
       ============================================================ */
    body.theme-moderna.layout-classic .menu-container { max-width: 620px; }
    body.theme-moderna.layout-classic .category-section { margin-bottom: 44px; }
    /* Cabecera de categoría: palabra display + regla fina completa */
    body.theme-moderna.layout-classic .category-title {
      font-family: 'Plus Jakarta Sans', 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: clamp(1.55rem, 5.5vw, 1.9rem);
      letter-spacing: -0.02em;
      color: var(--chalk-white);
      border-bottom: 1px solid rgba(243, 234, 221, 0.14);
      padding-bottom: 10px;
      margin-bottom: 4px;
    }
    body.theme-moderna.layout-classic .category-badge-count {
      font-family: inherit;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--chalk-dim);
    }
    body.theme-moderna.layout-classic .dishes-grid {
      display: block;
      gap: 0;
    }
    body.theme-moderna.layout-classic .dishes-grid .dish-card { contain-intrinsic-size: auto 108px; }
    /* La fila: tipografía corrida, hairline como único adorno */
    body.theme-moderna.layout-classic .dish-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 16px;
      row-gap: 2px;
      align-items: start;
      background: transparent;
      border: 0;
      border-radius: 0;
      border-bottom: 1px solid rgba(243, 234, 221, 0.08);
      box-shadow: none;
      padding: 18px 0;
      transition: border-color 0.2s ease;
    }
    body.theme-moderna.layout-classic .dish-card:hover {
      background: transparent;
      border-bottom-color: rgba(214, 161, 113, 0.35);
    }
    /* La foto no compite con el texto: vive en el detalle especial */
    body.theme-moderna.layout-classic .dish-thumb { display: none; }
    /* El cuerpo se disuelve: sus hijos pasan a la grilla de la fila */
    body.theme-moderna.layout-classic .dish-body,
    body.theme-moderna.layout-classic .dish-title-line { display: contents; }
    body.theme-moderna.layout-classic .dish-name {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      align-items: baseline;
      font-size: 1.06rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--chalk-white);
    }
    /* Línea de puntos del menú fino, entre texto y precio */
    body.theme-moderna.layout-classic .dish-name::after {
      content: "";
      flex: 1 1 12px;
      margin: 0 0 0 10px;
      border-bottom: 1px dotted rgba(243, 234, 221, 0.28);
      transform: translateY(-3px);
    }
    body.theme-moderna.layout-classic .dish-price {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: baseline;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--chalk-white);
      letter-spacing: 0.01em;
    }
    body.theme-moderna.layout-classic .dish-price span { color: var(--chalk-dim); }
    body.theme-moderna.layout-classic .dish-desc {
      grid-column: 1;
      grid-row: 2;
      margin: 5px 0 0;
      max-width: 46ch;
      color: var(--chalk-muted);
      font-size: 0.85rem;
      line-height: 1.45;
    }
    /* El +: circulito (puck de tamper), hairline — el cobre solo en hover */
    body.theme-moderna.layout-classic .dish-action {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
    }
    body.theme-moderna.layout-classic .dish-card .btn-add {
      background: transparent;
      color: var(--chalk-white);
      border: 1px solid rgba(243, 234, 221, 0.25);
      width: 34px;
      height: 34px;
      font-size: 1.05rem;
    }
    body.theme-moderna.layout-classic .dish-card .btn-add:hover {
      background: var(--chalk-white);
      color: #171310;
      border-color: transparent;
    }
    body.theme-moderna.layout-classic .qty-counter {
      color: var(--chalk-dim);
      font-weight: 500;
      font-size: 0.72rem;
    }
    /* Meta-divisas: texto mínimo en calma (el color del tema no grita) */
    body.theme-moderna.layout-classic .dish-badge {
      grid-column: 1 / -1;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
      margin: 6px 0 0;
      color: var(--chalk-dim) !important;
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      width: fit-content;
    }
    /* Agotado: tachado del nombre + texto en calma ya bastan */
    body.theme-moderna.layout-classic .dish-card.dish-sold .dish-badge {
      color: var(--chalk-muted) !important;
    }
    body.theme-foodtruck {
      --bg-chalkboard: #141414;
      --surface-card: #202020;
      --surface-card-hover: #2B2B2B;
      --chalk-gold: #FF6B35;
      --border-gold: rgba(255, 107, 53, 0.5);
      background-color: #141414;
    }

    /* NUEVOS TEMAS ESPECIALES */
    body.theme-gamer {
      --bg-chalkboard: #0A0E17;
      --surface-card: #111A29;
      --surface-card-hover: #18253B;
      --chalk-gold: #00F0FF;
      --chalk-green: #39FF14;
      --chalk-muted: #CBD5E0;
      --border-chalk: rgba(0, 240, 255, 0.25);
      --border-gold: rgba(0, 240, 255, 0.55);
      background-color: #0A0E17;
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(0,240,255,0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(57,255,20,0.04) 0%, transparent 40%),
        linear-gradient(rgba(255,255,255,0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
    }
    body.theme-gamer .restaurant-title {
      text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
    }

    body.theme-otaku {
      --bg-chalkboard: #18121F;
      --surface-card: #251B30;
      --surface-card-hover: #342544;
      --chalk-gold: #FF70A6;
      --chalk-green: #70D6FF;
      --chalk-muted: #E2D9F3;
      --border-chalk: rgba(255, 112, 166, 0.28);
      --border-gold: rgba(255, 112, 166, 0.55);
      background-color: #18121F;
      background-image: 
        radial-gradient(circle at 15% 15%, rgba(255,112,166,0.06) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(112,214,255,0.05) 0%, transparent 45%);
    }
    body.theme-otaku .dish-card { border-radius: 16px; }

    /* ============================================================
       EL BERILO — esmeralda tallada (theme-emerald)
       El fondo ES la piedra: facetas del crown dibujadas con
       conic-gradient de hard stops (cada faceta un plano de beryl,
       separadas por vetas de corte oscuras), el haz de luz que entra
       por la mesa, y las inclusiones del "jardín" como puntitos.

       body.theme-emerald          → paleta + talla (cualquier layout)
       body.theme-emerald.layout-classic → morfología facetada (sólo classic)

       Paleta (WCAG AA verificada): blanco #F2F8F4 y oro #ECC94B ≥7:1
       sobre la faceta más clara #16482F; dim #A9C8B8 4.6:1 idem.
         · beryl base     #0A271E → #0C2C21
         · 6 facetas      #0B2B21 #0D3326 #0F382B #11432F #124030 #16482F
         · veta de corte  #071911 (0.4deg entre facetas = el cuchillo)
         · inclusiones    puntitos rgba(226,252,240, .12/.07) — el jardín
         · oro engaste    #ECC94B (--chalk-gold intacto)
       Gotcha: pos/size/repeat por capa SÓLO en el shorthand background;
       background-color va al FINAL (el shorthand lo resetea).
        ============================================================ */

     /* ── La piedra tallada (aplica a cualquier layout) ─────────── */
     body.theme-emerald {
       background:
         linear-gradient(112deg, transparent 0 19%, rgba(214, 244, 230, 0.06) 30%, rgba(214, 244, 230, 0.02) 37%, transparent 46%) 0 0 / 100% 100% no-repeat,
         radial-gradient(ellipse 72% 30% at 50% 0%, rgba(206, 245, 222, 0.10), transparent 72%) 0 0 / 100% 100% no-repeat,
         radial-gradient(circle at 61px 97px, rgba(226, 252, 240, 0.12) 1.1px, transparent 2.6px) 0 0 / 137px 149px repeat,
         radial-gradient(circle at 143px 31px, rgba(226, 252, 240, 0.07) 1px, transparent 2.4px) 0 0 / 179px 131px repeat,
         conic-gradient(from 8deg at 50% 6%, #11432F 0deg 16.6deg, #071911 16.6deg 17deg, #0D3326 17deg 30.6deg, #071911 30.6deg 31deg, #16482F 31deg 43.6deg, #071911 43.6deg 44deg, #0B2B21 44deg 61.6deg, #071911 61.6deg 62deg, #124030 62deg 75.6deg, #071911 75.6deg 76deg, #0F382B 76deg 90.6deg, #071911 90.6deg 91deg, #11432F 91deg 106.6deg, #071911 106.6deg 107deg, #0D3326 107deg 121.6deg, #071911 121.6deg 122deg, #16482F 122deg 137.6deg, #071911 137.6deg 138deg, #0B2B21 138deg 150.6deg, #071911 150.6deg 151deg, #124030 151deg 167.6deg, #071911 167.6deg 168deg, #0F382B 168deg 182.6deg, #071911 182.6deg 183deg, #11432F 183deg 200.6deg, #071911 200.6deg 201deg, #0D3326 201deg 213.6deg, #071911 213.6deg 214deg, #16482F 214deg 230.6deg, #071911 230.6deg 231deg, #0B2B21 231deg 246.6deg, #071911 246.6deg 247deg, #124030 247deg 261.6deg, #071911 261.6deg 262deg, #0F382B 262deg 279.6deg, #071911 279.6deg 280deg, #11432F 280deg 294.6deg, #071911 294.6deg 295deg, #0D3326 295deg 310.6deg, #071911 310.6deg 311deg, #16482F 311deg 325.6deg, #071911 325.6deg 326deg, #0B2B21 326deg 340.6deg, #071911 340.6deg 341deg, #124030 341deg 359.6deg, #071911 359.6deg 360deg) 0 0 / 100% 100% no-repeat;
       background-color: #0A271E;
     }
     /* El contenedor va transparente para que el crown facetado
        se vea DETRÁS del contenido (las tarjetas son paneles facetados). */
     body.theme-emerald .menu-container { background: transparent; }
     /* Barra sticky = vidrio de gema (backdrop-filter base difumina
        las facetas detrás, como una piedra sumergida). */
     body.theme-emerald .controls-wrapper {
       background: rgba(10, 32, 24, 0.94);
       border-bottom: 1px solid rgba(236, 201, 75, 0.30);
     }

     /* ── Morfología facetada (sólo classic) ────────────────────── */
     body.theme-emerald.layout-classic .dish-card {
       /* Tarjeta = panel facetado: dos esquinas cortadas a diamante
          (step cut) y plano de luz arriba-izquierda. */
       clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
       border-radius: 0;
       background: linear-gradient(133deg, rgba(236, 201, 75, 0.10) 0 22%, rgba(0, 0, 0, 0) 22%), #12402F;
       border-color: rgba(236, 201, 75, 0.22);
       box-shadow: inset 0 1px 0 rgba(226, 252, 240, 0.09);
     }
     body.theme-emerald.layout-classic .dish-card:hover {
       background: linear-gradient(133deg, rgba(236, 201, 75, 0.14) 0 22%, rgba(0, 0, 0, 0) 22%), #174531;
     }
     body.theme-emerald.layout-classic .btn-add {
       /* El botón + = la gema engastada (corte de diamante, contenido
          derecho — el + nunca rota). */
       clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
       border-radius: 0;
       background: linear-gradient(135deg, #2FA97C 0 50%, #1B6E4F 50%);
       color: #F2F8F4;
     }
     body.theme-emerald.layout-classic .cat-pill {
       /* Pastillas con corte de talla (recorte diagonal). */
       clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
       border-radius: 0;
       border: 1px solid rgba(236, 201, 75, 0.30);
       background: rgba(18, 64, 48, 0.85);
     }
     body.theme-emerald.layout-classic .cat-pill.active,
     body.theme-emerald.layout-classic .cat-pill[aria-pressed="true"] {
       background: #ECC94B;
       color: #0A271E !important;
       border-color: #ECC94B;
     }
     body.theme-emerald.layout-classic .category-title {
       /* Cabecera de categoría: la gema engastada + filete de oro. */
       display: flex;
       align-items: center;
       gap: 10px;
       border-bottom: 1px solid rgba(236, 201, 75, 0.28);
     }
     body.theme-emerald.layout-classic .category-title::before {
       content: '';
       flex: 0 0 auto;
       width: 9px;
       height: 9px;
       transform: rotate(45deg);
       background: linear-gradient(135deg, #34B586 0 50%, #1D7A57 50%);
       box-shadow: 0 0 0 2px rgba(236, 201, 75, 0.35);
     }


    /* ============================================================
       EXPLOSIVO — fanzine punk / neobrutalismo explosivo
       Energía de afiche de rock, no una paleta pastel.

       body.theme-explosivo          → paleta y personalidad (cualquier layout)
       body.theme-explosivo.layout-classic → morfología estructural (sólo classic)

       Paleta (WCAG AA verificada):
         · negro tinta   #0B0B0B  (fondo, slab header, trazos, texto sobre crema)
         · papel crema   #FFF9E6  (tarjetas, papel, fondos de tarjeta)
         · amarillo ácido #FFE600 (acento, subrayados, sticker precio, texto sobre rojo)
         · rojo explosión #FF3344 (bordes, sombras, franjas decorativas — NUNCA fondo de texto pequeño)
         · rojo profundo #C81E2E (fondos con texto pequeño: pills activas, badges, botones)
         · azul eléctrico #00C2FF (sombra offset dura, acento secundario)

       Tipografía (auto-hospedadas, sin fuentes nuevas):
         · Montserrat 900 uppercase + skew/rotate + sombra dura offset rojo/azul (títulos)
         · IBM Plex Mono (precios, metadatos, descripción chica)
         · Nombres de platos: tracking agresivo
       ============================================================ */

    /* ── Paleta base del tema (aplica a cualquier layout) ────── */
    body.theme-explosivo {
      --bg-chalkboard: #0B0B0B;
      --chalk-gold: #FFE600;
      --chalk-green: #FF3344;
      --chalk-muted: #E8E0C8;
      --chalk-dim: #B8B0A0;
      --chalk-white: #FFF9E6;
      --border-gold: #00C2FF;
      --explosivo-red-deep: #C81E2E;
      background-color: #0B0B0B;
      background-image:
        linear-gradient(135deg, #0B0B0B 0%, #151515 55%, #0B0B0B 100%),
        radial-gradient(circle at 20% 20%, rgba(255, 230, 0, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(0, 194, 255, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(200, 30, 46, 0.06) 0%, transparent 50%);
      color: #FFF9E6;
    }
    /* Superficies/bordes de papel solo en classic: billboard, sticker y stories
       usan su propia superficie oscura; si el tema les impusiera crema, el
       texto claro de esos layouts quedaría ilegible sobre crema. */
    body.theme-explosivo.layout-classic {
      --surface-card: #FFF9E6;
      --surface-card-hover: #FFF3B0;
      --border-chalk: #0B0B0B;
    }
    /* color de texto solo en classic (los otros layouts llevan su propia paleta) */
    body.theme-explosivo.layout-classic .menu-header,
    body.theme-explosivo.layout-classic .controls-wrapper,
    body.theme-explosivo.layout-classic .modal-box,
    body.theme-explosivo.layout-classic .floating-cart-bar,
    body.theme-explosivo.layout-classic .chef-specials-section {
      color: #FFF9E6;
    }

    /* ── Header: slab negro + franjas de peligro diagonales (solo classic) ── */
    body.theme-explosivo.layout-classic .menu-header {
      background: #0B0B0B;
      border-bottom: 7px solid #FF3344;
      box-shadow: 0 9px 0 #00C2FF, 0 14px 28px rgba(0,0,0,0.7);
      position: relative;
      overflow: hidden;
    }
    body.theme-explosivo.layout-classic .menu-header::before {
      content: '';
      position: absolute;
      top: 0; left: -60%; right: -60%; bottom: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        #FF3344 14px,
        #FF3344 28px
      );
      opacity: 0.12;
      pointer-events: none;
      z-index: 0;
    }
    body.theme-explosivo.layout-classic .menu-header > * {
      position: relative;
      z-index: 1;
    }

    /* Logo en sticker rotado con borde negro grueso y esquinas cortadas */
    body.theme-explosivo.layout-classic .restaurant-logo {
      border: 5px solid #0B0B0B;
      border-radius: 0;
      clip-path: polygon(14% 4%, 86% 3%, 98% 22%, 96% 82%, 80% 98%, 24% 96%, 4% 78%, 6% 28%);
      background: #FFF9E6;
      box-shadow: 7px 7px 0 #00C2FF;
      transform: rotate(-7deg);
      display: block;
      margin: 0 auto 14px auto;
      width: 62px;
      height: 62px;
      object-fit: cover;
    }

    /* Título: Montserrat 900 uppercase, skew/rotate, doble sombra rojo/azul, subrayado amarillo */
    body.theme-explosivo.layout-classic .restaurant-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: clamp(1.9rem, 6vw, 2.8rem);
      color: #FFF9E6;
      letter-spacing: 0.08em;
      transform: skew(-3deg) rotate(-1.5deg);
      text-shadow:
        4px 4px 0 #FF3344,
        8px 8px 0 #00C2FF,
        0 0 16px rgba(255, 51, 68, 0.5);
      margin-bottom: 8px;
      position: relative;
      display: inline-block;
      line-height: 1.05;
    }
    body.theme-explosivo.layout-classic .restaurant-title::after {
      content: '';
      position: absolute;
      left: -5px; right: -5px; bottom: -7px; height: 9px;
      background: #FFE600;
      transform: skew(-3deg);
      z-index: -1;
    }

    /* Slogan en cinta amarilla con texto negro */
    body.theme-explosivo.layout-classic .restaurant-slogan {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      font-size: clamp(0.9rem, 2.5vw, 1.15rem);
      color: #0B0B0B;
      background: #FFE600;
      letter-spacing: 0.18em;
      padding: 5px 16px;
      display: inline-block;
      clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
      box-shadow: 5px 5px 0 #00C2FF;
      transform: rotate(-2deg);
      margin-bottom: 16px;
    }

    /* ── Estado y meta chips ── */
    body.theme-explosivo.layout-classic .status-pill {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFF9E6;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: 0.08em;
      border-radius: 0;
    }
    body.theme-explosivo.layout-classic .status-pill.open { background: var(--explosivo-red-deep, #C81E2E); }
    body.theme-explosivo.layout-classic .status-pill span { background: #FFF9E6 !important; }

    body.theme-explosivo.layout-classic .meta-chip {
      background: #FFF9E6;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      color: #0B0B0B;
      text-transform: uppercase;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      font-size: 0.8rem;
      border-radius: 0;
      padding: 7px 14px;
    }
    body.theme-explosivo.layout-classic .meta-chip:hover {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      border-color: var(--explosivo-red-deep, #C81E2E);
      box-shadow: 3px 3px 0 #00C2FF;
    }
    body.theme-explosivo.layout-classic .meta-chip-reserve {
      background: #FFE600;
      border-color: #0B0B0B;
      color: #0B0B0B;
      box-shadow: 5px 5px 0 #FF3344;
    }
    body.theme-explosivo.layout-classic .meta-chip-reserve:hover {
      background: #00C2FF;
      color: #0B0B0B;
      border-color: #00C2FF;
    }

    /* ── Controles: buscador y pills ── */
    body.theme-explosivo.layout-classic .controls-wrapper {
      background: #0B0B0B;
      border-bottom: 7px solid #FF3344;
      box-shadow: 0 9px 0 #00C2FF;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    body.theme-explosivo.layout-classic .search-box {
      background: #FFF9E6;
      border: 5px solid #0B0B0B;
      box-shadow: 6px 6px 0 #00C2FF;
      color: #0B0B0B;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      border-radius: 0;
      padding: 11px 16px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    body.theme-explosivo.layout-classic .search-box::placeholder {
      color: #555555;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
      opacity: 0.75;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    body.theme-explosivo.layout-classic .search-box:focus {
      outline: none;
      border-color: #FF3344;
      box-shadow: 6px 6px 0 #FF3344;
    }

    /* Pills rectangulares chunky, borde negro 4px, sombra dura, rotaciones alternadas */
    body.theme-explosivo.layout-classic .cat-pill {
      background: #FFF9E6;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      color: #0B0B0B;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.82rem;
      border-radius: 0;
      padding: 9px 18px;
      transition: translate 0.12s, box-shadow 0.12s;
    }
    body.theme-explosivo.layout-classic .cat-pill:nth-child(odd) { rotate: -2deg; }
    body.theme-explosivo.layout-classic .cat-pill:nth-child(even) { rotate: 2deg; }
    body.theme-explosivo.layout-classic .cat-pill:active {
      translate: 3px 3px;
      box-shadow: 2px 2px 0 #00C2FF;
    }

    /* Activo: rojo profundo con texto amarillo (WCAG AA ~5.4:1) y sombra "presionada" */
    body.theme-explosivo.layout-classic .cat-pill.active {
      background: var(--explosivo-red-deep, #C81E2E);
      border-color: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      box-shadow: 4px 4px 0 #0B0B0B, inset 3px 3px 0 rgba(0,0,0,0.35);
      rotate: 0deg;
    }

    /* ── Grilla asimétrica de 12 columnas (solo ≥700px, solo classic) ── */
    body.theme-explosivo.layout-classic .dishes-grid {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    @media (min-width: 700px) {
      body.theme-explosivo.layout-classic .dishes-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: auto;
        gap: 22px 18px;
        overflow-x: clip;
      }
    }

    /* ── Tarjetas: papel crema consistente en todos los viewports ── */
    body.theme-explosivo.layout-classic .dish-card {
      background: #FFF9E6;
      border: 4px solid #0B0B0B;
      box-shadow: 7px 7px 0 #FF3344, 13px 13px 0 #00C2FF;
      border-radius: 0;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: translate 0.12s, box-shadow 0.12s;
    }
    body.theme-explosivo.layout-classic .dish-card:hover {
      translate: -3px -3px;
      box-shadow: 10px 10px 0 #FF3344, 16px 16px 0 #00C2FF;
    }

    /* Asimetría 12 columnas: spans 7/5, 5/7, 4/4/4 con rotaciones individuales (no transform) */
    @media (min-width: 700px) {
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(4n+1) {
        grid-column: span 7;
        grid-row: span 2;
        rotate: -2deg;
      }
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(4n+2) {
        grid-column: span 5;
        rotate: 2deg;
      }
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(4n+3) {
        grid-column: span 4;
        grid-row: span 2;
        rotate: -1deg;
      }
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(4n+4) {
        grid-column: span 4;
        rotate: 1deg;
      }
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(8n+5) {
        grid-column: span 4;
        rotate: 1.5deg;
      }
      body.theme-explosivo.layout-classic .dishes-grid .dish-card:nth-child(8n+6) {
        grid-column: span 8;
        rotate: -1.5deg;
      }
    }

    /* ── Imagen: duotono + clip-path diagonal ── */
    body.theme-explosivo.layout-classic .dish-thumb,
    body.theme-explosivo.layout-classic .dish-image {
      width: 100%;
      height: 170px;
      object-fit: cover;
      border: 4px solid #0B0B0B;
      box-shadow: 6px 6px 0 #FF3344;
      border-radius: 0;
      clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
      background: #FF3344;
      display: block;
      filter: contrast(1.3) saturate(1.5) hue-rotate(-8deg);
    }

    /* ── Nombres y descripción ── */
    body.theme-explosivo.layout-classic .dish-name {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 1.15rem;
      color: #0B0B0B;
      letter-spacing: 0.14em;
      line-height: 1.05;
      margin: 0;
    }
    body.theme-explosivo.layout-classic .dish-desc {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      color: #333333;
      line-height: 1.25;
      margin: 2px 0 0 0;
    }

    /* ── Precio: cinta/etiqueta rotada ── */
    body.theme-explosivo.layout-classic .dish-price {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.25rem;
      font-weight: 800;
      color: #0B0B0B;
      background: #FFE600;
      border: 4px solid #0B0B0B;
      box-shadow: 6px 6px 0 #00C2FF;
      display: inline-block;
      padding: 5px 12px;
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      rotate: -3deg;
      margin-top: 6px;
      white-space: nowrap;
    }

    /* ── Botones + / −: discos rojo profundo con borde negro y sombra dura ── */
    body.theme-explosivo.layout-classic .btn-add {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      border: 5px solid #0B0B0B;
      box-shadow: 7px 7px 0 #00C2FF;
      width: 48px;
      height: 48px;
      border-radius: 0;
      font-size: 1.5rem;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: translate 0.1s, box-shadow 0.1s;
      font-family: 'Montserrat', system-ui, sans-serif;
      text-transform: uppercase;
    }
    body.theme-explosivo.layout-classic .btn-add:active,
    body.theme-explosivo.layout-classic .btn-add:focus-visible {
      translate: 3px 3px;
      box-shadow: 4px 4px 0 #00C2FF;
    }

    /* Qty counter y stepper − */
    body.theme-explosivo.layout-classic .qty-counter {
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 900;
      color: #0B0B0B;
      background: #FFE600;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      padding: 3px 10px;
      display: inline-block;
    }
    body.theme-explosivo.layout-classic .btn-qty {
      background: var(--explosivo-red-deep, #C81E2E);
      border: 5px solid #0B0B0B;
      box-shadow: 6px 6px 0 #00C2FF;
      color: #FFE600;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 900;
      width: 40px;
      height: 40px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    body.theme-explosivo.layout-classic .btn-qty:active {
      translate: 3px 3px;
      box-shadow: 4px 4px 0 #00C2FF;
    }

    /* ── Badges: rojo profundo con texto amarillo (WCAG AA) ── */
    body.theme-explosivo.layout-classic .dish-badge {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      border: 4px solid #0B0B0B;
      box-shadow: 6px 6px 0 #00C2FF;
      text-transform: uppercase;
      font-weight: 900;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-size: 0.68rem;
      padding: 4px 10px;
      border-radius: 0;
      clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    }

    /* ── Chef Specials: tarjeta amarillo tipo afiche con ribbon negro ── */
    body.theme-explosivo.layout-classic .chef-specials-section {
      background: #FFE600;
      border: 6px solid #0B0B0B;
      box-shadow: 10px 10px 0 #FF3344;
      border-radius: 0;
      position: relative;
      overflow: hidden;
      rotate: -1.5deg;
    }
    body.theme-explosivo.layout-classic .chef-specials-section::before {
      content: 'ESPECIAL';
      position: absolute;
      top: -18px; left: -50px;
      background: #0B0B0B;
      color: #FFE600;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 8px 40px;
      rotate: -45deg;
      box-shadow: 4px 4px 0 #FF3344;
      z-index: 2;
    }
    body.theme-explosivo.layout-classic .chef-specials-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      color: #0B0B0B;
      font-size: 1.8rem;
      letter-spacing: 0.15em;
      text-shadow: 4px 4px 0 #00C2FF;
    }
    body.theme-explosivo.layout-classic .chef-badge-gold {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      text-transform: uppercase;
      font-weight: 900;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.75rem;
      padding: 5px 12px;
      clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    }

    /* ── Barra flotante del carrito ── */
    body.theme-explosivo.layout-classic .floating-cart-bar {
      background: #FFF9E6;
      border: 5px solid #0B0B0B;
      box-shadow: 10px 10px 0 #FF3344;
      color: #0B0B0B;
      border-radius: 0;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    body.theme-explosivo.layout-classic .floating-cart-bar #cartTotalBadge {
      color: var(--explosivo-red-deep, #C81E2E);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 900;
    }

    /* ── Modales ── */
    body.theme-explosivo.layout-classic .modal-overlay {
      background: rgba(11, 11, 11, 0.92);
    }
    body.theme-explosivo.layout-classic .modal-box {
      background: #FFF9E6;
      border: 6px solid #0B0B0B;
      box-shadow: 12px 12px 0 #FF3344;
      border-radius: 0;
      color: #0B0B0B;
    }
    body.theme-explosivo.layout-classic .modal-close {
      background: var(--explosivo-red-deep, #C81E2E);
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
      color: #FFE600;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      width: 40px;
      height: 40px;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
    }
    body.theme-explosivo.layout-classic .modal-title {
      color: #0B0B0B;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-bottom: 5px solid #FFE600;
      text-shadow: 3px 3px 0 #00C2FF;
    }

    /* Los modales son de papel crema: las variables del tema (pensadas para
       el fondo negro del menú) dejarían títulos, labels y precios invisibles.
       Se re-scopean SOLO dentro del modal; los inputs oscuros no las usan. */
    body.theme-explosivo.layout-classic .modal-box {
      --chalk-white: #0B0B0B;
      --chalk-muted: #333333;
      --chalk-dim: #4A4A4A;
      --chalk-gold: #C81E2E;
      --border-chalk: rgba(11, 11, 11, 0.3);
    }
    /* El modal de Información tiene su propia superficie oscura y textos
       claros hardcodeados: se conserva tal cual (sobre el papel quedarían
       invisibles). */
    body.theme-explosivo.layout-classic .modal-box.info-modal-box {
      background: #16201C;
      border: 6px solid #0B0B0B;
      box-shadow: 12px 12px 0 #FF3344;
      color: #FFF9E6;
      --chalk-muted: #E8E0C8;
      --chalk-dim: #B8B0A0;
      --chalk-gold: #FFE600;
      --border-chalk: rgba(255, 249, 230, 0.25);
    }
    /* El panel del Mozo Virtual conserva su superficie oscura propia: el
       gradiente original es translúcido y sobre el papel crema dejaba el
       texto claro casi invisible. */
    body.theme-explosivo.layout-classic .modal-box .mozo-virtual-upsell-box {
      --chalk-gold: #FFE600;
      --chalk-muted: #E8E0C8;
      --chalk-dim: #B8B0A0;
      background: #141C19;
      border: 4px solid #0B0B0B;
      box-shadow: 5px 5px 0 #00C2FF;
    }
    body.theme-explosivo.layout-classic .modal-box .btn-mozo-quick-add {
      background: #2F855A;
    }
    /* El resumen conserva su caja oscura en el resto de temas; acá va en
       blanco para que los totales en tinta se lean. */
    body.theme-explosivo.layout-classic .modal-box .total-summary {
      background: #FFFFFF;
      border: 4px solid #0B0B0B;
      border-radius: 0;
      box-shadow: 5px 5px 0 #00C2FF;
    }
    body.theme-explosivo.layout-classic .modal-box #tipSectionBox {
      --chalk-gold: #FFE600;
    }
    body.theme-explosivo.layout-classic .modal-box [data-tip-pill] {
      color: #0B0B0B !important;
    }
    body.theme-explosivo.layout-classic .modal-box .btn-group-consolidate {
      background: #E8F4FF;
      border-color: #005A8C;
      color: #004E78;
    }
    body.theme-explosivo.layout-classic .modal-box .star-btn {
      color: #6B7280;
    }
    body.theme-explosivo.layout-classic .modal-box .star-btn:hover,
    body.theme-explosivo.layout-classic .modal-box .star-btn.hover-active,
    body.theme-explosivo.layout-classic .modal-box .star-btn.active {
      color: #A16207;
      text-shadow: none;
    }
    body.theme-explosivo.layout-classic .modal-box #tipAmountDisplay,
    body.theme-explosivo.layout-classic .modal-box #summaryDiscountRow,
    body.theme-explosivo.layout-classic .modal-box #summaryTipRow,
    body.theme-explosivo.layout-classic .modal-box #reviewSuccessTitle {
      color: #1E6B3A !important;
    }
    body.theme-explosivo.layout-classic .modal-box #reviewPrivateTitle {
      color: #9A4D00 !important;
    }
    body.theme-explosivo.layout-classic .modal-box #wifiSsidDisplay {
      color: #0B0B0B !important;
    }
    body.theme-explosivo.layout-classic .modal-box #btnExternalPay {
      color: #002B3D !important;
    }
    body.theme-explosivo.layout-classic .modal-box .res-form-error {
      color: #B00020 !important;
    }

    /* ── Summary / Total ── */
    body.theme-explosivo.layout-classic .summary-row {
      color: #333333;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 800;
    }
    body.theme-explosivo.layout-classic .summary-row.total-row {
      color: #0B0B0B;
      border-top: 5px solid #0B0B0B;
    }
    body.theme-explosivo.layout-classic .summary-row.total-row span.total-amount {
      color: var(--explosivo-red-deep, #C81E2E);
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 900;
      font-size: 1.5rem;
    }

    /* ── Botones de acción generales (WhatsApp, etc.) ── */
    body.theme-explosivo.layout-classic .btn-wa-submit {
      background: var(--explosivo-red-deep, #C81E2E);
      color: #FFE600;
      border: 5px solid #0B0B0B;
      box-shadow: 7px 7px 0 #00C2FF;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    body.theme-explosivo.layout-classic .btn-wa-submit:hover {
      background: #00C2FF;
      color: #0B0B0B;
      border-color: #00C2FF;
      box-shadow: 5px 5px 0 #FF3344;
    }

    /* ── Animaciones de entrada: slam con escala/rotación y stagger por nth-child ── */
    @keyframes explosivoSlam {
      0%   { opacity: 0; transform: scale(0.55) rotate(14deg) translateY(50px); }
      55%  { transform: scale(1.1) rotate(-3deg) translateY(-8px); }
      100% { opacity: 1; transform: scale(1) rotate(0) translateY(0); }
    }

    body.theme-explosivo.layout-classic .dish-card {
      animation: explosivoSlam 0.6s cubic-bezier(0.2, 1, 0.3, 1) both;
    }
    body.theme-explosivo.layout-classic .dish-card:nth-child(1)  { animation-delay: 0.06s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(2)  { animation-delay: 0.14s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(3)  { animation-delay: 0.22s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(4)  { animation-delay: 0.30s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(5)  { animation-delay: 0.38s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(6)  { animation-delay: 0.46s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(7)  { animation-delay: 0.54s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(8)  { animation-delay: 0.62s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(9)  { animation-delay: 0.70s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(10) { animation-delay: 0.78s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(11) { animation-delay: 0.86s; }
    body.theme-explosivo.layout-classic .dish-card:nth-child(12) { animation-delay: 0.94s; }

    /* ── prefers-reduced-motion: apagar animaciones, transiciones y rotaciones ── */
    @media (prefers-reduced-motion: reduce) {
      body.theme-explosivo.layout-classic .dish-card,
      body.theme-explosivo.layout-classic .cat-pill,
      body.theme-explosivo.layout-classic .cat-pill.active,
      body.theme-explosivo.layout-classic .restaurant-title,
      body.theme-explosivo.layout-classic .restaurant-slogan,
      body.theme-explosivo.layout-classic .chef-specials-section,
      body.theme-explosivo.layout-classic .dish-price,
      body.theme-explosivo.layout-classic .btn-add,
      body.theme-explosivo.layout-classic .btn-qty,
      body.theme-explosivo.layout-classic .dish-badge,
      body.theme-explosivo.layout-classic .floating-cart-bar,
      body.theme-explosivo.layout-classic .modal-box,
      body.theme-explosivo.layout-classic .meta-chip,
      body.theme-explosivo.layout-classic .search-box {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        rotate: none !important;
        translate: none !important;
      }
      body.theme-explosivo.layout-classic .dish-card { opacity: 1; }
    }

    /* ── Mobile: 1 columna, rotaciones/translate nulas, sin overflow horizontal ── */
    @media (max-width: 699px) {
      body.theme-explosivo.layout-classic .dishes-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      body.theme-explosivo.layout-classic .dish-card { rotate: none !important; translate: none !important; transform: none !important; }
      body.theme-explosivo.layout-classic .dish-thumb,
      body.theme-explosivo.layout-classic .dish-image {
        height: 130px;
        clip-path: none;
        border-radius: 0;
      }
      body.theme-explosivo.layout-classic .cat-pill,
      body.theme-explosivo.layout-classic .cat-pill.active {
        rotate: none !important;
        transform: none !important;
      }
      body.theme-explosivo.layout-classic .restaurant-title { rotate: none !important; transform: none !important; }
      body.theme-explosivo.layout-classic .restaurant-slogan { rotate: none !important; transform: none !important; }
      body.theme-explosivo.layout-classic .chef-specials-section { rotate: none !important; transform: none !important; }
      body.theme-explosivo.layout-classic .dish-price { rotate: none !important; transform: none !important; }
    }

    body.theme-infantil {
      --bg-chalkboard: #121D24;
      --surface-card: #1A2A35;
      --surface-card-hover: #233947;
      --chalk-gold: #FFD166;
      --chalk-green: #06D6A0;
      --chalk-muted: #D3EEF9;
      --border-chalk: rgba(255, 209, 102, 0.3);
      --border-gold: rgba(255, 209, 102, 0.6);
      background-color: #121D24;
    }
    body.theme-infantil .dish-card,
    body.theme-infantil .cat-pill,
    body.theme-infantil .search-box {
      border-radius: 20px;
    }

    body.theme-alegre {
      --bg-chalkboard: #1B160E;
      --surface-card: #292013;
      --surface-card-hover: #3A2E1A;
      --chalk-gold: #FFB703;
      --chalk-green: #52B788;
      --chalk-muted: #F8ECD7;
      --border-chalk: rgba(255, 183, 3, 0.3);
      --border-gold: rgba(255, 183, 3, 0.6);
      background-color: #1B160E;
      background-image: 
        radial-gradient(circle at 20% 20%, rgba(255,183,3,0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(82,183,136,0.04) 0%, transparent 50%);
    }

    /* ============================================================
       BASKETBALL — "LA CANCHA" (tema morfológico, oct-2026)
       Rediseño completo: el menú es la cancha. Base de madera dura
       de maple con vetas y marcas de cancha (círculo central + arco
       de 3 puntos pintados en tiza crema), tinta cacao sobre madera,
       y el NARANJA de la pelota reservado a lo funcional: la fila
       lleva riel de pintura (líneas de la zona "key"), el precio
       vive en un chip marcador de goma negra con dígitos LED ámbar
       (IBM Plex Mono, única voz mono del tema), el CTA "+" es la
       pelota (círculo naranja), las cabeceras de categoría son
       tableros de marcador (goma negra + Montserrat 800 caps + LED)
       y los insignias son fichas de box score.
       Morfología scoped a layout-classic (patrón explosivo/moderna);
       el resto de layouts recibe la paleta + identidad de marcador.

       Paleta (contraste verificado a mano, AA sobre madera #C79E63 ≈ L 0.375):
         · madera dura  #C79E63 (fondo; tinta encima ≈ 7:1)
         · tinta cacao  #26160D (texto principal ≈ 7:1 / sobre papel ≈ 13)
         · café medio   #452918 (secundario ≈ 4.8:1)
         · papel ficha  #F8F1E4 (modals/cartas; tinta encima ≈ 13:1)
         · goma negra   #1C1512 (chips/marcador; crema ≈ 15:1, LED ≈ 11:1)
         · bola naranja #E56A25 (fills con tinta ≈ 5.3:1; NUNCA texto sobre claro)
         · LED ámbar    #FFC048 (dígitos del marcador sobre goma ≈ 11:1)
         · chapa profunda #B14312 (acento texto sobre papel ≈ 5.7:1)
       Tipos: Montserrat 800 caps para el bloque varsity; la única voz
       mono es el precio-marcador. El --font-heading del dueño manda
       donde el tema no define su propia voz.
       ============================================================ */
    body.theme-basketball {
      --bg-chalkboard: #C79E63;
      --surface-card: #F8F1E4;
      --surface-card-hover: #EFE3CC;
      --chalk-white: #26160D;
      --chalk-muted: #452918;
      --chalk-dim: #452918;
      --chalk-gold: #E56A25;
      --chalk-gold-ink: #B14312;
      --chalk-gold-dim: rgba(229, 106, 37, 0.14);
      --chalk-green: #1B5E20;
      --border-chalk: rgba(38, 22, 13, 0.16);
      --border-gold: rgba(229, 106, 37, 0.55);
      /* ── LA CANCHA PINTADA ── Capas geográficas: media pista con
         círculo central, la zona ("key") a la izquierda con tiro libre,
         arco de tres puntos en la esquina inferior, línea de fondo, y
         las vetas de la tabla debajo. Tiza crema sobre madera.
         (Shorthand obligatorio: pos/size/repeat por capa solo valen en
         `background`, no dentro de `background-image`. El color va AL
         FINAL porque el shorthand resetea background-color.) */
      background:
        /* círculo de tiro libre (sobre el borde superior de la zona) */
        radial-gradient(circle 66px at 142px calc(100% - 300px), transparent 58px, rgba(248, 241, 228, 0.5) 62px 66px, transparent 69px) no-repeat,
        /* riel izquierdo de la zona */
        linear-gradient(rgba(248, 241, 228, 0.42), rgba(248, 241, 228, 0.42)) 30px bottom / 5px 300px no-repeat,
        /* riel derecho de la zona */
        linear-gradient(rgba(248, 241, 228, 0.42), rgba(248, 241, 228, 0.42)) 255px bottom / 5px 300px no-repeat,
        /* pintura de la zona: capa más oscura tipo caoba sutil */
        linear-gradient(90deg, transparent 0 30px, rgba(38, 22, 13, 0.11) 30px 255px, transparent 255px) 0 bottom / 100% 300px no-repeat,
        /* círculo central sobre la línea de medio campo */
        radial-gradient(circle 160px at 50% 260px, transparent 148px, rgba(248, 241, 228, 0.5) 152px 158px, transparent 161px) no-repeat,
        /* línea de medio campo */
        linear-gradient(rgba(248, 241, 228, 0.5), rgba(248, 241, 228, 0.5)) 0 258px / 100% 5px no-repeat,
        /* arco de tres puntos, esquina inferior (el aro queda fuera de cuadro) */
        radial-gradient(circle 330px at 97% 100%, transparent 312px, rgba(248, 241, 228, 0.4) 318px 324px, transparent 327px) no-repeat,
        /* línea de fondo */
        linear-gradient(rgba(248, 241, 228, 0.5), rgba(248, 241, 228, 0.5)) 0 bottom / 100% 5px no-repeat,
        /* vetas de la tabla: juntas + variación de tablón */
        repeating-linear-gradient(90deg, rgba(38, 22, 13, 0.06) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(90deg, rgba(248, 241, 228, 0.03) 0 46px, transparent 46px 92px);
      background-color: #C79E63;
    }

    /* El contenedor NO tapa el piso: la cancha vive en el body y el
       contenido flota sobre ella (en todos los layouts del tema). */
    body.theme-basketball .menu-container { background: transparent; }

    /* ── Cero emojis baratos en basketball: los emojis compartidos
       (.cart-bar-emoji, .pill-emoji, .i18n-currency-icon) salen de escena
       y el tema habla SOLO con tipografía y geometría dibujada. ── */
    body.theme-basketball .cart-bar-emoji,
    body.theme-basketball .pill-emoji,
    body.theme-basketball .meta-emoji,
    body.theme-basketball .i18n-currency-icon { display: none; }
    /* La barra del carrito = el SHOT CLOCK del tablero: goma negra con
       aro naranja y un chip "24" en dígitos LED (el reloj de 24 segundos,
       dibujado en mono — ningún emoji). */
    body.theme-basketball .floating-cart-bar {
      background: #1C1512;
      color: #F8F1E4;
      border: 2px solid #E56A25;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(38, 22, 13, 0.5);
      font-family: 'Montserrat', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.06em;
    }
    body.theme-basketball .floating-cart-bar::before {
      content: '24';
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-right: 4px;
      background: rgba(229, 106, 37, 0.14);
      border: 2px solid #E56A25;
      border-radius: 6px;
      color: #FFC048;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0;
    }
    body.theme-basketball .floating-cart-bar #cartTotalBadge {
      color: #FFC048;
      font-family: 'IBM Plex Mono', monospace;
      text-transform: none;
    }

    /* ── Identidad "LA CANCHA" (cualquier layout) ── */
    body.theme-basketball .menu-header {
      background: transparent;
      border-bottom: none;
      box-shadow: none;
      padding: 34px 16px 22px;
      /* El header base (.menu-header, ~línea 3990) re-scopea --chalk-white/
         --chalk-dim a tinta CLARO asumiendo "header siempre oscuro". Acá el
         header es transparente sobre madera → devolvemos tinta cacao. */
      --chalk-white: #26160D;
      --chalk-muted: #452918;
      --chalk-dim: #452918;
    }
    body.theme-basketball .restaurant-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 0.95;
      color: var(--chalk-white);
      margin-bottom: 6px;
    }
    body.theme-basketball .restaurant-logo {
      border: 3px solid #1C1512;
      box-shadow: 0 4px 14px rgba(38, 22, 13, 0.35);
      background: #F8F1E4;
    }
    body.theme-basketball .restaurant-slogan { color: #452918; }
    /* Con portada (overlay oscuro) la voz del tema sale en crema como el marcador */
    body.theme-basketball.has-hero-banner .restaurant-title {
      color: #F8F1E4;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
    }
    body.theme-basketball.has-hero-banner .restaurant-slogan { color: #F0E2C8; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
    body.theme-basketball.has-hero-banner .restaurant-logo {
      border-color: #F8F1E4;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    }
    /* Meta: fichas de goma negra (roster tags) */
    body.theme-basketball .meta-chip {
      background: #1C1512;
      border: 1px solid rgba(248, 241, 228, 0.22);
      color: #F8F1E4;
      border-radius: 4px;
      font-weight: 600;
    }
    body.theme-basketball .meta-chip:hover {
      border-color: rgba(248, 241, 228, 0.5);
      background: #2A1F16;
    }
    /* spans internos (ciudad, teléfono) viajan heredados, no gris legacy */
    body.theme-basketball .meta-chip span { color: inherit; }
    body.theme-basketball .meta-chip-reserve {
      background: #E56A25;
      border-color: transparent;
      color: #26160D;
      font-weight: 700;
    }
    body.theme-basketball .meta-chip-reserve:hover { background: #F07A33; }
    /* Barra sticky = el TABLERO de básquet: cristal ahumado con marco
       grabado y el aro naranja de 5px al pie. (El cuadrado del tiro
       libre NO flota en el wrapper: su altura varía con cada fila y se
       leía como un artefacto de selección; encuentra su ancla estable en
       el buscador, que es el elemento seguro del tablero.) */
    body.theme-basketball .controls-wrapper {
      position: relative;
      background: rgba(28, 21, 18, 0.94);
      border: 2px solid rgba(229, 106, 37, 0.5);
      border-bottom: 5px solid #E56A25; /* el aro */
      border-radius: 0 0 14px 14px;
    }
    body.theme-basketball .controls-wrapper::before {
      content: '';
      position: absolute;
      inset: 6px 9px 12px;
      border: 1.5px solid rgba(248, 241, 228, 0.2);
      border-radius: 9px;
      pointer-events: none;
      z-index: -1;
    }
    /* El buscador = el cuadrado pintado donde se apunta: marco naranja
       vivo. (La barra de idioma/moneda volvió a GOMA: su base usa
       var(--surface-card) y en este tema resolvía papel — una repisa
       crema que no pedía el tablero; en el resto de themes va oscura.) */
    body.theme-basketball .i18n-currency-bar {
      background: rgba(28, 21, 18, 0.9);
      border: 1px solid rgba(248, 241, 228, 0.16);
      border-radius: 8px;
    }
    /* el ícono 💵 pinta var(--chalk-dim) = tinta: sobre goma desaparece */
    body.theme-basketball .i18n-currency-icon { color: rgba(248, 241, 228, 0.72); }
    body.theme-basketball .search-box {
      background: rgba(248, 241, 228, 0.06);
      border: 2px solid rgba(229, 106, 37, 0.5);
      border-radius: 7px;
      padding: 10px 12px;
      color: #F8F1E4;
      font-size: 0.95rem;
    }
    body.theme-basketball .search-box:focus {
      border-color: #E56A25;
      background: rgba(248, 241, 228, 0.1);
      outline: none;
    }
    body.theme-basketball .search-box::placeholder { color: rgba(248, 241, 228, 0.55); }
    /* Categorías: fichas varsity caps; activa = pintada naranja con tinta.
       !important: "⭐ Populares" viaja con color inline desde menu.js
       (var(--chalk-gold-ink)); inline gana, entonces el tema fuerza su voz. */
    body.theme-basketball .cat-pill,
    body.theme-basketball .cat-pill[aria-pressed="true"] {
      background: transparent;
      color: rgba(248, 241, 228, 0.75) !important;
    }
    body.theme-basketball .cat-pill {
      background: transparent;
      border: 0;
      border-radius: 4px;
      padding: 6px 12px;
      color: rgba(248, 241, 228, 0.75);
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    body.theme-basketball .cat-pill:hover { color: #F8F1E4; }
    body.theme-basketball .cat-pill.active,
    body.theme-basketball .cat-pill[aria-pressed="true"] {
      background: #E56A25;
      color: #26160D !important;
      font-weight: 800;
    }
    body.theme-basketball .cat-pill:focus-visible {
      outline: 2px solid #E56A25;
      outline-offset: 3px;
    }
    /* Insignias = fichas de box score (goma negra + crema) */
    body.theme-basketball .dish-badge {
      background: #1C1512 !important;
      border: 0 !important;
      color: #F8F1E4 !important;
      border-radius: 3px !important;
      padding: 3px 7px !important;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 700;
      font-size: 0.6rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      width: fit-content;
    }
    body.theme-basketball .dish-badge.badge-star { background: #E56A25 !important; color: #26160D !important; }
    /* TTS accesible: tinta sobre madera (el bar no tiene superficie oscura) */
    body.theme-basketball .btn-a11y-tts {
      background: transparent;
      border: 1.5px solid rgba(38, 22, 13, 0.35);
      color: #26160D;
    }
    body.theme-basketball .a11y-bar { color: #26160D; }
    /* Anillos rápidos: aro del equipo (pintura → goma), nada de arcoíris */
    body.theme-basketball .st-ring-face {
      border-width: 2.5px;
      background:
        linear-gradient(#F8F1E4, #F8F1E4) padding-box,
        linear-gradient(180deg, #E56A25, #7A2E0E) border-box;
    }
    body.theme-basketball .st-ring-label { color: #F8F1E4; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
    /* Mozo: ficha de goma con aro naranja (la naranja queda para la pelota) */
    body.theme-basketball .waiter-fab {
      background: #1C1512;
      color: #F8F1E4;
      border: 2.5px solid #E56A25;
      box-shadow: 0 6px 20px rgba(38, 22, 13, 0.45);
    }
    /* Chip ℹ️ flotante sobre madera: tablero, no blanco legacy */
    body.theme-basketball .btn-info-modal {
      background: #1C1512;
      color: #F8F1E4;
      border: 1px solid rgba(248, 241, 228, 0.25);
    }
    body.theme-basketball .btn-info-modal:hover { background: #2A1F16; }
    /* Prompt de push = tablero fijo (bg literal oscuro): re-scope de tinta
       para que title/desc sigan en crema, lista de borde naranja. */
    body.theme-basketball .push-prompt-banner {
      --chalk-white: #F8F1E4;
      --chalk-dim: rgba(248, 241, 228, 0.72);
      border-color: rgba(229, 106, 37, 0.45);
      color: #F8F1E4;
    }
    /* Anuncio de demo: tablero, no banner amarillo */
    body.theme-basketball .announcement-banner {
      background: #1C1512;
      color: #F8F1E4;
      font-weight: 600;
      border-bottom: 2px solid rgba(229, 106, 37, 0.45);
    }
    /* Chef specials = "los titulares": franja de goma con fichas papel */
    body.theme-basketball .chef-specials-section {
      background: #1C1512;
      border: 0;
      border-radius: 10px;
      padding: 18px 14px;
    }
    body.theme-basketball .chef-specials-title {
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 800;
      font-size: 1.02rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #F8F1E4;
      text-shadow: none;
    }
    body.theme-basketball .chef-badge-gold {
      background: #E56A25;
      border: 0;
      border-radius: 3px;
      color: #26160D;
      letter-spacing: 0.06em;
    }
    body.theme-basketball .chef-special-card {
      background: #F8F1E4;
      border: 1px solid rgba(38, 22, 13, 0.14);
      box-shadow: none;
      backdrop-filter: none;
    }
    body.theme-basketball .chef-special-card:hover { border-color: #E56A25; }
    body.theme-basketball .chef-special-name { color: #26160D; font-weight: 700; }
    body.theme-basketball .chef-special-price { color: #26160D; }
    body.theme-basketball .chef-specials-carousel { scrollbar-color: rgba(229, 106, 37, 0.5) transparent; }
    /* Modales = papel de anotador (las variables ya invierten la tinta)
       El naranja de ficha rellena botones con tinta encima (5.3:1); los
       textos acento específicos van cubiertos caso por caso abajo. */
    body.theme-basketball .modal-box {
      border: 1px solid rgba(38, 22, 13, 0.2);
    }
    /* El modal de info viene "siempre oscuro" (literal #16201C + #fff):
       mismo tratamiento de papel que hace taquería. */
    body.theme-basketball .info-modal-box {
      background: var(--surface-card);
      border-color: rgba(38, 22, 13, 0.2);
      box-shadow: 0 18px 50px rgba(38, 22, 13, 0.35);
    }
    body.theme-basketball .info-modal-title,
    body.theme-basketball .info-section-title,
    body.theme-basketball .service-title-group { color: #26160D; }
    body.theme-basketball .info-action-btn {
      background: rgba(38, 22, 13, 0.06);
      border-color: rgba(38, 22, 13, 0.18);
      color: #26160D;
    }
    body.theme-basketball .info-action-btn:hover { background: #E56A25; color: #26160D; }
    body.theme-basketball .info-address-box,
    body.theme-basketball .service-card { background: rgba(38, 22, 13, 0.05); }
    body.theme-basketball .info-directions-link {
      color: #B14312;
      border-color: rgba(177, 67, 18, 0.45);
      background: rgba(177, 67, 18, 0.08);
    }
    body.theme-basketball .info-modal-body { scrollbar-color: rgba(177, 67, 18, 0.35) transparent; }
    body.theme-basketball .service-check { color: #276749; }
    body.theme-basketball .service-subnote { color: #8A5A00; }
    body.theme-basketball .schedule-day-row.today {
      background: rgba(177, 67, 18, 0.1);
      border-color: rgba(177, 67, 18, 0.3);
      color: #9A3307;
    }
    body.theme-basketball .schedule-day-hours.closed,
    body.theme-basketball .schedule-closed { color: #C0392B; }
    /* Nota del plato: input papel (venga dark literal) + acentos tintados */
    body.theme-basketball .form-textarea {
      background: #FFFFFF;
      border-color: rgba(38, 22, 13, 0.25);
      color: #26160D;
    }
    body.theme-basketball .dish-note-cancel {
      background: transparent;
      border-color: rgba(38, 22, 13, 0.3);
      color: #452918;
    }
    body.theme-basketball .modal-box .dish-note-dish-name { color: #B14312; }
    /* Resumen del checkout = el marcador: goma negra, labels crema y
       el total en LEDs ámbar mono (única voz monospace del tema). */
    body.theme-basketball .total-summary {
      background: #1C1512;
      border: 1px solid rgba(229, 106, 37, 0.4);
      border-radius: 8px;
    }
    body.theme-basketball .total-summary .summary-row,
    body.theme-basketball .total-summary .summary-row.total-row {
      color: #F8F1E4;
    }
    body.theme-basketball .total-summary .summary-row span.total-amount {
      color: #FFC048;
      font-weight: 700;
    }
    body.theme-basketball .empty-state-card { border-color: rgba(38, 22, 13, 0.16); }
    body.theme-basketball .empty-state-title { color: #B14312; }
    body.theme-basketball .empty-state-btn { border-color: #B14312; color: #B14312; }
    body.theme-basketball .empty-state-btn:hover { background: #B14312; color: #F8F1E4; }

    /* ============================================================
       "LA CANCHA" — morfología de filas con riel (solo layout-classic)
       ============================================================ */
    body.theme-basketball.layout-classic .menu-container { max-width: 640px; }
    body.theme-basketball.layout-classic .category-section {
      margin-bottom: 42px;
      counter-increment: cancha-cat;
    }
    /* Cabecera de categoría = pequeño tablero de marcador CON su número
       de camiseta: #01, #02… LED ámbar anclado a la derecha (los contadores
       CSS viven en los tabs del carrito/pedidos: los boards de la carta) */
    body.theme-basketball.layout-classic .menu-container { counter-reset: cancha-cat; }
    body.theme-basketball.layout-classic .category-title {
      position: relative;
      background: #1C1512;
      border: 0;
      border-left: 6px solid #E56A25;
      border-radius: 6px;
      padding: 12px 68px 12px 14px;
      margin-bottom: 14px;
      color: #F8F1E4;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 800;
      font-size: 0.98rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    /* El dorsal: número de camiseta del "equipo" (categoría) */
    body.theme-basketball.layout-classic .category-title::after {
      content: '#' counter(cancha-cat, decimal-leading-zero);
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #FFC048;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 0.88rem;
      letter-spacing: 0.03em;
    }
    body.theme-basketball.layout-classic .category-title > span:first-child { display: flex; align-items: center; gap: 8px; }
    /* La pelota minúscula delante del título — ahora con sus COSTURAS
       (dos líneas goma cruzadas dentro del círculo naranja) */
    body.theme-basketball.layout-classic .category-title > span:first-child::before {
      content: '';
      flex: 0 0 auto;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background:
        linear-gradient(90deg, transparent 0 4px, rgba(38, 22, 13, 0.5) 4px 4.8px, transparent 4.8px),
        linear-gradient(180deg, transparent 0 4px, rgba(38, 22, 13, 0.5) 4px 4.8px, transparent 4.8px),
        #E56A25;
      box-shadow: inset 0 0 0 2.5px rgba(38, 22, 13, 0.35);
    }
    body.theme-basketball.layout-classic .category-badge-count {
      color: #FFC048;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 500;
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      text-transform: none;
    }
    body.theme-basketball.layout-classic .dishes-grid {
      display: block;
      gap: 0;
    }
    /* La fila: riel de la zona ("key") pintado al costado */
    body.theme-basketball.layout-classic .dish-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      column-gap: 14px;
      row-gap: 4px;
      align-items: start;
      background: transparent;
      border: 0;
      border-radius: 0;
      border-left: 4px solid #C45A1D;
      box-shadow: none;
      padding: 16px 2px 16px 14px;
      margin-bottom: 10px;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    body.theme-basketball.layout-classic .dish-card:hover {
      background: rgba(248, 241, 228, 0.5);
      border-left-color: #E56A25;
    }
    body.theme-basketball.layout-classic .dish-thumb { display: none; }
    /* El cuerpo se disuelve: name/price en fila 1, desc r2, badges r3+ */
    body.theme-basketball.layout-classic .dish-body,
    body.theme-basketball.layout-classic .dish-title-line { display: contents; }
    body.theme-basketball.layout-classic .dish-name {
      grid-column: 1;
      grid-row: 1;
      font-family: 'Montserrat', system-ui, sans-serif;
      font-weight: 700;
      font-size: 1.02rem;
      letter-spacing: -0.005em;
      color: #26160D;
      align-self: center;
    }
    /* El precio = marcador: goma negra dígitos LED */
    body.theme-basketball.layout-classic .dish-price {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      background: #1C1512;
      color: #FFC048;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 4px 10px;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(38, 22, 13, 0.3);
    }
    /* Pedido sin costo: sin marcador vacío */
    body.theme-basketball.layout-classic .dish-price:empty { display: none; }
    body.theme-basketball.layout-classic .dish-price span {
      color: rgba(248, 241, 228, 0.66);
    }
    body.theme-basketball.layout-classic .dish-desc {
      grid-column: 1;
      grid-row: 2;
      margin: 2px 0 0;
      max-width: 46ch;
      color: #452918;
      font-size: 0.85rem;
      line-height: 1.45;
    }
    body.theme-basketball.layout-classic .dish-badge { grid-column: 1 / -1; margin: 6px 0 0; }
    /* El "+" es la pelota: naranja con surco de goma */
    body.theme-basketball.layout-classic .dish-action {
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
    }
    body.theme-basketball.layout-classic .dish-card .btn-add {
      background: #E56A25;
      color: #26160D;
      border: none;
      box-shadow: inset 0 0 0 2px rgba(38, 22, 13, 0.25), 0 2px 6px rgba(38, 22, 13, 0.25);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    body.theme-basketball.layout-classic .dish-card .btn-add:hover {
      transform: scale(1.1) rotate(-4deg);
      box-shadow: inset 0 0 0 2px rgba(38, 22, 13, 0.35), 0 4px 10px rgba(38, 22, 13, 0.35);
    }
    body.theme-basketball.layout-classic .qty-counter {
      color: #452918;
      font-weight: 600;
      font-size: 0.72rem;
      text-align: center;
    }

    body.theme-football {
      --bg-chalkboard: #0B1911;
      --surface-card: #11281A;
      --surface-card-hover: #193B26;
      --chalk-gold: #E0E722;
      --chalk-green: #25D366;
      --chalk-muted: #D3EBD9;
      --border-chalk: rgba(224, 231, 34, 0.28);
      --border-gold: rgba(224, 231, 34, 0.58);
      background-color: #0B1911;
      background-image:
        radial-gradient(circle at 50% 50%, transparent 80px, rgba(255,255,255,0.025) 81px, rgba(255,255,255,0.025) 83px, transparent 84px),
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
      background-size: 100% 100%, 100% 60px;
    }

    /* ============================================================
       SMASH URBAN — bottom-sheet blanco flotando sobre hero negro
       (hamburgueserías / delivery: estética "Larry's").
       El .menu-container ES la sheet: radio 32px + solape -56px +
       sombra profunda sobre el fondo negro del body.
       ============================================================ */
    body.theme-smash-urban {
      --bg-chalkboard: #070707;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F4F5F6;
      --chalk-gold: #0E9AA0;
      --chalk-gold-dim: rgba(14, 154, 160, 0.12);
      --chalk-green: #0E9AA0;
      --chalk-white: #141414;
      --chalk-muted: #5B6472;
      --chalk-dim: #8A94A6;
      --border-chalk: rgba(0, 0, 0, 0.08);
      --border-gold: rgba(14, 154, 160, 0.45);
      background-color: #070707;
      background-image:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
        radial-gradient(circle at 85% 30%, rgba(14, 154, 160, 0.10) 0%, transparent 45%);
    }
    body.theme-smash-urban .menu-header {
      background: transparent;
      border-bottom: none;
      box-shadow: none;
      padding: 20px 16px 88px;
    }
    body.theme-smash-urban .restaurant-title {
      font-family: 'Bungee', 'Anton', sans-serif;
      color: #FFFFFF;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: clamp(2rem, 8vw, 3.2rem);
      line-height: 0.95;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    }
    body.theme-smash-urban .restaurant-slogan { color: #D7DBE0; }
    body.theme-smash-urban .restaurant-logo {
      border-color: #FFFFFF;
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
    }
    body.theme-smash-urban .restaurant-meta-bar { color: #D7DBE0; }
    body.theme-smash-urban .meta-chip {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.22);
      color: #EDEFF2;
    }
    body.theme-smash-urban .meta-chip:hover {
      border-color: #FFFFFF;
      color: #FFFFFF;
      background: rgba(255, 255, 255, 0.14);
    }
    /* La sheet blanca */
    body.theme-smash-urban .menu-container {
      background: #FFFFFF;
      color: #141414;
      border-radius: 32px 32px 0 0;
      margin-top: -56px;
      position: relative;
      z-index: 2;
      box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
      max-width: 760px;
      padding: 10px 18px 40px;
    }
    body.theme-smash-urban .menu-container::before {
      content: '';
      display: block;
      width: 56px;
      height: 5px;
      border-radius: 99px;
      background: #E2E4E7;
      margin: 2px auto 12px;
    }
    body.theme-smash-urban .controls-wrapper {
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid #F0F1F3;
    }
    body.theme-smash-urban .search-box {
      background: #FFFFFF;
      border: 1px solid #E8EAED;
      border-radius: 16px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
      color: #141414;
      padding: 14px 16px;
    }
    body.theme-smash-urban .search-box::placeholder { color: #9AA3B2; }
    body.theme-smash-urban .category-pills { gap: 22px; }
    body.theme-smash-urban .cat-pill {
      background: none;
      border: none;
      border-radius: 0;
      color: #8A94A6;
      padding: 8px 2px;
      font-weight: 400;
    }
    body.theme-smash-urban .cat-pill.active {
      background: none;
      color: #0E9AA0;
      border-bottom: 2.5px solid #0E9AA0;
      border-radius: 0;
      font-weight: 600;
    }
    body.theme-smash-urban .category-title {
      color: #141414;
      border-bottom: 1px solid #F0F1F3;
    }
    body.theme-smash-urban .category-badge-count { color: #8A94A6; }
    body.theme-smash-urban .dishes-grid { gap: 26px; }
    body.theme-smash-urban .dish-card {
      background: #FFFFFF;
      border: none;
      box-shadow: none;
      padding: 0;
      align-items: flex-start;
      gap: 16px;
    }
    body.theme-smash-urban .dish-card:hover {
      background: #FFFFFF;
      border-color: transparent;
    }
    body.theme-smash-urban .dish-thumb {
      width: 148px;
      height: 148px;
      border-radius: 16px;
      border: none;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }
    body.theme-smash-urban .dish-name { color: #141414; font-weight: 500; }
    body.theme-smash-urban .dish-desc { color: #8A94A6; }
    body.theme-smash-urban .dish-price { color: #141414; }
    body.theme-smash-urban .dish-price s,
    body.theme-smash-urban .dish-old-price { color: #C9CDD3; font-weight: 400; }
    body.theme-smash-urban .btn-add {
      background: #0E9AA0;
      color: #FFFFFF;
      box-shadow: 0 6px 18px rgba(14, 154, 160, 0.45);
    }
    body.theme-smash-urban .qty-counter { color: #0E9AA0; }
    body.theme-smash-urban .dish-badge.badge-star { background: rgba(185, 28, 28, 0.12); color: #B91C1C; border-color: rgba(185, 28, 28, 0.32); }
    body.theme-smash-urban .dish-badge.badge-veggie { background: rgba(133, 77, 14, 0.12); color: #854D0E; border-color: rgba(133, 77, 14, 0.30); }
    body.theme-smash-urban .dish-badge.badge-celiac { background: rgba(133, 77, 14, 0.14); color: #854D0E; border-color: rgba(133, 77, 14, 0.32); }
    body.theme-smash-urban .floating-cart-bar {
      background: #0E9AA0;
      color: #FFFFFF;
      box-shadow: 0 12px 30px rgba(14, 154, 160, 0.5);
    }
    body.theme-smash-urban .a11y-bar {
      background: transparent;
      border: none;
      color: #0B6B70;
    }
    body.theme-smash-urban .btn-a11y-tts {
      border-color: rgba(14, 154, 160, 0.45);
      color: #0B6B70;
    }
    body.theme-smash-urban .empty-state-card { border-color: rgba(0, 0, 0, 0.12); background: #FAFBFC; }
    body.theme-smash-urban .empty-state-title { color: #0E9AA0; }
    body.theme-smash-urban .empty-state-desc { color: #8A94A6; }
    body.theme-smash-urban .empty-state-btn { border-color: #0E9AA0; color: #0E9AA0; }
    body.theme-smash-urban .empty-state-btn:hover { background: #0E9AA0; color: #FFFFFF; }
    body.theme-smash-urban .chef-specials-section {
      background: #F7F9FA;
      border: 1px dashed rgba(14, 154, 160, 0.5);
    }
    body.theme-smash-urban .chef-specials-title { color: #0E9AA0; text-shadow: none; }
    body.theme-smash-urban .chef-special-card {
      background: #FFFFFF;
      border: 1px solid #ECEEF1;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }
    @media (min-width: 900px) {
      body.theme-smash-urban .menu-container {
        border-radius: 28px;
        margin: -70px auto 40px;
        max-width: 1080px;
        padding: 18px 36px 48px;
      }
      body.theme-smash-urban .dishes-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 34px 48px;
      }
      body.theme-smash-urban .menu-header { padding-bottom: 110px; }
    }
    @media (max-width: 760px) {
      body.theme-smash-urban .dish-thumb { width: 124px; height: 124px; }
      body.theme-smash-urban .dish-name { font-size: 0.98rem; }
    }

    /* ============================================================
       GLASS GASTRO — vidrio multicapa sobre ambiente nocturno
       Capas: foto del local (si hay banner) + orbes cyan/magenta/ámbar
       que sangran tras el blur + highlight superior + acento lateral.
       100% CSS (backdrop-filter + saturate), sin librerías ni assets.
       ============================================================ */
    body.theme-glass-gastro {
      --bg-chalkboard: #070D18;
      --surface-card: rgba(255, 255, 255, 0.10);
      --surface-card-hover: rgba(255, 255, 255, 0.16);
      --chalk-gold: #22D3EE;
      --chalk-gold-dim: rgba(34, 211, 238, 0.14);
      --chalk-green: #34D399;
      --chalk-white: #F2F6FB;
      --chalk-muted: #C4CFDD;
      --chalk-dim: #8FA0B3;
      --border-chalk: rgba(255, 255, 255, 0.22);
      --border-gold: rgba(34, 211, 238, 0.45);
      background-color: #070D18;
      background-image:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 88% 22%, rgba(244, 114, 182, 0.18) 0%, transparent 46%),
        radial-gradient(circle at 50% 110%, rgba(245, 158, 11, 0.16) 0%, transparent 50%),
        linear-gradient(rgba(4, 8, 16, 0.55) 0%, rgba(4, 8, 16, 0.88) 100%);
      background-attachment: fixed;
    }
    body.theme-glass-gastro::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.10;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    }
    body.theme-glass-gastro .menu-header {
      --chalk-white: #F2F6FB;
      --chalk-muted: #C4CFDD;
      --chalk-dim: #8FA0B3;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 20px;
      margin: 12px 12px 0;
      padding: 22px 16px 20px;
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    body.theme-glass-gastro .restaurant-title {
      color: #FFFFFF;
      letter-spacing: 1.5px;
      text-shadow: 0 2px 18px rgba(34, 211, 238, 0.25);
    }
    body.theme-glass-gastro .restaurant-slogan { color: #7DD3FC; }
    body.theme-glass-gastro .restaurant-logo {
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    body.theme-glass-gastro .meta-chip {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.22);
      color: #DBE4EF;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    body.theme-glass-gastro .meta-chip:hover {
      border-color: #22D3EE;
      color: #22D3EE;
      background: rgba(34, 211, 238, 0.12);
    }
    body.theme-glass-gastro .menu-container {
      background: transparent;
      position: relative;
      z-index: 1;
    }
    body.theme-glass-gastro .controls-wrapper {
      background: rgba(10, 18, 32, 0.55);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      border: 1px solid rgba(255, 255, 255, 0.20);
      border-radius: 18px;
      box-shadow: 0 10px 34px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      margin: 12px 0 18px;
      padding: 12px 12px 10px;
    }
    body.theme-glass-gastro .search-box {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 14px;
      color: #FFFFFF;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    body.theme-glass-gastro .search-box::placeholder { color: #8FA0B3; }
    body.theme-glass-gastro .search-box:focus { border-color: #22D3EE; }
    body.theme-glass-gastro .category-pills { gap: 8px; }
    body.theme-glass-gastro .cat-pill {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.20);
      color: #DBE4EF;
      border-radius: 999px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    body.theme-glass-gastro .cat-pill.active {
      background: linear-gradient(135deg, #22D3EE 0%, #67E8F9 100%);
      border-color: transparent;
      color: #04222B;
      box-shadow: 0 6px 22px rgba(34, 211, 238, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    body.theme-glass-gastro .category-title {
      color: #EEF3F9;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    body.theme-glass-gastro .category-badge-count { color: #7DD3FC; }
    body.theme-glass-gastro .dish-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 60%);
      border: 1px solid rgba(255, 255, 255, 0.30);
      border-radius: 22px;
      backdrop-filter: blur(24px) saturate(170%);
      -webkit-backdrop-filter: blur(24px) saturate(170%);
      box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.40);
    }
    body.theme-glass-gastro .dish-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
      pointer-events: none;
    }
    body.theme-glass-gastro .dish-card::after {
      content: '';
      position: absolute;
      left: 0;
      top: 14px;
      bottom: 14px;
      width: 3px;
      border-radius: 99px;
      background: linear-gradient(#22D3EE, #F472B6);
      opacity: 0.9;
      pointer-events: none;
    }
    body.theme-glass-gastro .dish-card:hover {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.09) 60%);
      border-color: rgba(34, 211, 238, 0.55);
    }
    body.theme-glass-gastro .dish-thumb {
      width: 80px;
      height: 80px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    }
    body.theme-glass-gastro .dish-name { color: #FFFFFF; }
    body.theme-glass-gastro .dish-desc { color: #B9C6D8; }
    body.theme-glass-gastro .dish-price { color: #FFFFFF; }
    body.theme-glass-gastro .btn-add {
      background: linear-gradient(135deg, #22D3EE 0%, #0EA5E9 100%);
      color: #04222B;
      border-radius: 14px;
      width: 40px;
      height: 40px;
      box-shadow: 0 6px 20px rgba(34, 211, 238, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }
    body.theme-glass-gastro .qty-counter { color: #67E8F9; }
    body.theme-glass-gastro .floating-cart-bar {
      background: linear-gradient(135deg, rgba(20, 30, 48, 0.85), rgba(20, 30, 48, 0.60));
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #FFFFFF;
      backdrop-filter: blur(26px) saturate(170%);
      -webkit-backdrop-filter: blur(26px) saturate(170%);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    body.theme-glass-gastro .a11y-bar {
      background: transparent;
      border: none;
      color: #7DD3FC;
    }
    body.theme-glass-gastro .btn-a11y-tts { border-color: rgba(34, 211, 238, 0.45); color: #7DD3FC; }
    body.theme-glass-gastro .chef-specials-section {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
      border: 1px solid rgba(255, 255, 255, 0.26);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    body.theme-glass-gastro .chef-special-card {
      background: rgba(10, 18, 32, 0.60);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    body.theme-glass-gastro .empty-state-card {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.22);
    }
    @media (min-width: 900px) {
      body.theme-glass-gastro .menu-container { max-width: 900px; }
      body.theme-glass-gastro .dishes-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      body.theme-glass-gastro .menu-header { margin: 16px auto 0; max-width: 900px; }
    }
    @media (prefers-reduced-motion: reduce) {
      body.theme-glass-gastro .dish-card,
      body.theme-smash-urban .dish-card { transition: none; }
    }

    /* ============================================================
       TICKET TÉRMICO — recibo de mostrador (parrillas / cantinas).
       Papel angosto centrado con borde dentado, monoespaciada real,
       líneas punteadas, sellos por categoría y stub de total oscuro.
       ============================================================ */
    body.theme-ticket {
      --bg-chalkboard: #1C1917;
      --surface-card: #FAF6EE;
      --surface-card-hover: #F3EEDF;
      --chalk-gold: #B91C1C;
      --chalk-gold-dim: rgba(185, 28, 28, 0.10);
      --chalk-green: #1C1917;
      --chalk-white: #1C1917;
      --chalk-muted: #57534E;
      --chalk-dim: #78716C;
      --border-chalk: rgba(28, 25, 23, 0.18);
      --border-gold: rgba(185, 28, 28, 0.45);
      --font-heading: 'IBM Plex Mono', ui-monospace, monospace;
      --font-body: 'IBM Plex Mono', ui-monospace, monospace;
      background-color: #1C1917;
      background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    }
    body.theme-ticket .menu-header {
      background: #FAF6EE;
      border-bottom: 2px dashed #1C1917;
      box-shadow: none;
      padding: 26px 16px 18px;
    }
    body.theme-ticket .restaurant-title {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      color: #1C1917;
      letter-spacing: 2px;
      font-size: clamp(1.3rem, 5vw, 1.8rem);
    }
    body.theme-ticket .restaurant-slogan { color: #57534E; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
    body.theme-ticket .restaurant-logo {
      border-color: #1C1917;
      box-shadow: none;
      border-radius: 8px;
    }
    body.theme-ticket .restaurant-meta-bar { color: #57534E; }
    body.theme-ticket .meta-chip {
      background: transparent;
      border: 1.5px solid #1C1917;
      border-radius: 6px;
      color: #1C1917;
    }
    body.theme-ticket .meta-chip:hover {
      background: #1C1917;
      color: #FAF6EE;
      border-color: #1C1917;
    }
    body.theme-ticket .btn-info-modal,
    body.theme-ticket .header-top-row .social-btn-round {
      color: #1C1917;
      border-color: #1C1917;
    }
    /* El papel: columna angosta con dentado inferior */
    body.theme-ticket .menu-container {
      background: #FAF6EE;
      color: #1C1917;
      max-width: 480px;
      padding: 14px 22px 30px;
      position: relative;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    }
    body.theme-ticket .menu-container::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -13px;
      height: 14px;
      background: radial-gradient(circle at 10px -3px, transparent 12px, #FAF6EE 13px);
      background-size: 20px 14px;
    }
    body.theme-ticket .controls-wrapper {
      background: #FAF6EE;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 2px dashed #1C1917;
    }
    body.theme-ticket .search-box {
      background: #FFFFFF;
      border: 2px solid #1C1917;
      border-radius: 6px;
      color: #1C1917;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      box-shadow: 3px 3px 0 #1C1917;
    }
    body.theme-ticket .search-box::placeholder { color: #A8A29E; }
    body.theme-ticket .cat-pill {
      background: transparent;
      border: 2px solid #1C1917;
      border-radius: 6px;
      color: #1C1917;
      transform: rotate(-1.2deg);
    }
    body.theme-ticket .cat-pill:nth-child(even) { transform: rotate(1.2deg); }
    body.theme-ticket .cat-pill.active {
      background: #1C1917;
      color: #FAF6EE;
      border-color: #1C1917;
      transform: rotate(0);
    }
    body.theme-ticket .category-title {
      color: #1C1917;
      border-bottom: 2px dashed #1C1917;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      letter-spacing: 1px;
    }
    body.theme-ticket .category-badge-count { color: #78716C; }
    body.theme-ticket .dish-card {
      background: transparent;
      border: none;
      border-bottom: 2px dotted #A8A29E;
      border-radius: 0;
      padding: 10px 2px;
      align-items: center;
    }
    body.theme-ticket .dish-card:hover {
      background: transparent;
      border-color: #A8A29E;
    }
    body.theme-ticket .dish-thumb {
      width: 72px;
      height: 72px;
      border-radius: 6px;
      border: 2px solid #1C1917;
      background: #FFFFFF;
    }
    body.theme-ticket .dish-name { color: #1C1917; font-weight: 700; }
    body.theme-ticket .dish-desc { color: #57534E; }
    body.theme-ticket .dish-price { color: #1C1917; }
    body.theme-ticket .dish-badge.badge-star { background: rgba(185, 28, 28, 0.12); color: #B91C1C; border-color: rgba(185, 28, 28, 0.40); }
    body.theme-ticket .dish-badge.badge-veggie { background: rgba(133, 77, 14, 0.12); color: #854D0E; border-color: rgba(133, 77, 14, 0.35); }
    body.theme-ticket .dish-badge.badge-celiac { background: rgba(133, 77, 14, 0.14); color: #854D0E; border-color: rgba(133, 77, 14, 0.35); }
    body.theme-ticket .btn-add {
      background: transparent;
      color: #1C1917;
      border: 2px solid #1C1917;
      border-radius: 50%;
      box-shadow: 2px 2px 0 #1C1917;
    }
    body.theme-ticket .btn-add:active { transform: scale(0.9); box-shadow: none; }
    body.theme-ticket .qty-counter { color: #1C1917; }
    body.theme-ticket .floating-cart-bar {
      background: #0C0A09;
      color: #E7E5E4;
      border: 1px solid #B91C1C;
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
    }
    body.theme-ticket .a11y-bar {
      background: transparent;
      border: none;
      color: #57534E;
    }
    body.theme-ticket .btn-a11y-tts { border-color: #1C1917; color: #1C1917; }
    body.theme-ticket .empty-state-card { background: #FFFFFF; border-color: rgba(28, 25, 23, 0.25); }
    body.theme-ticket .empty-state-title { color: #1C1917; }
    body.theme-ticket .empty-state-desc { color: #57534E; }
    body.theme-ticket .empty-state-btn { border-color: #1C1917; color: #1C1917; }
    body.theme-ticket .empty-state-btn:hover { background: #1C1917; color: #FAF6EE; }
    body.theme-ticket .chef-specials-section {
      background: #FFFFFF;
      border: 2px dashed rgba(185, 28, 28, 0.55);
    }
    body.theme-ticket .chef-specials-title { color: #B91C1C; text-shadow: none; }
    body.theme-ticket .chef-special-card {
      background: #FAF6EE;
      border: 1.5px solid #1C1917;
      box-shadow: 3px 3px 0 #1C1917;
    }
    @media (min-width: 900px) {
      body.theme-ticket .menu-container { max-width: 520px; }
    }

    /* ============================================================
       ICE-CREAM THEMES (Heladería & Postres)
       Paletas pensadas para heladerías: entretenidas y coloridas
       (fiesta, menta, tropical) + formales (pastel, gelateria, cioccolato).
       ============================================================ */

    /* FIESTA DE HELADO — confeti sobre blanco: divertido, familiar y colorido */
    body.theme-helado-fiesta {
      --bg-chalkboard: #FFF7FB;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFF0F7;
      --chalk-gold: #FF5C8A;
      --chalk-gold-dim: rgba(255, 92, 138, 0.14);
      --border-gold: rgba(255, 92, 138, 0.35);
      --chalk-sky: #4CC9F0;
      --chalk-lemon: #FFD23F;
      --chalk-grape: #B892F0;
      --chalk-white: #3A1E33;
      --chalk-muted: #6B4A5E;
      --chalk-dim: #7A5C6A;
      --chalk-gold-ink: #B3204B;
      --border-chalk: rgba(58, 30, 51, 0.10);
      background-color: #FFF7FB;
    }
    body.theme-helado-fiesta .restaurant-title { color: #E23E6B; }
    body.theme-helado-fiesta .dish-name { color: #3A1E33; }
    body.theme-helado-fiesta .dish-badge { --chalk-gold: #FF5C8A; }
    body.theme-helado-fiesta .category-title { color: #D6336C; }
    body.theme-helado-fiesta .cat-pill { border-color: rgba(58, 30, 51, 0.12); }
    body.theme-helado-fiesta .empty-state-card { border-color: rgba(58, 30, 51, 0.10); }
    body.theme-helado-fiesta .empty-state-icon { color: #D6336C; }
    body.theme-helado-fiesta .dish-card { border-radius: 18px; }
    body.theme-helado-fiesta::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 92, 138, 0.10) 0%, transparent 34%),
        radial-gradient(circle at 86% 24%, rgba(76, 201, 240, 0.10) 0%, transparent 32%),
        radial-gradient(circle at 22% 82%, rgba(255, 210, 63, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 80% 84%, rgba(184, 146, 240, 0.10) 0%, transparent 32%);
    }

    /* GELATO CREMA — crema, menta, rosa y chocolate (bottega artigianale):
       claro cálido, serif expresiva, tarjetas redondeadas y lluvia de dots. */
    body.theme-helado-crema {
      --bg-chalkboard: #FAF3E0;
      --surface-card: #FFFDF9;
      --surface-card-hover: #FDF6E4;
      --chalk-gold: #D9777F;
      --chalk-gold-dim: rgba(217, 119, 127, 0.14);
      --border-gold: rgba(217, 119, 127, 0.35);
      --chalk-mint: #5FA98F;
      --chalk-white: #3D2C29;
      --chalk-muted: #7A5C50;
      --chalk-dim: #97816F;
      --chalk-gold-ink: #B44A52;
      --border-chalk: rgba(61, 44, 41, 0.10);
      background-color: #FAF3E0;
    }
    body.theme-helado-crema .restaurant-title { color: #B44A52; }
    body.theme-helado-crema .dish-name { color: #3D2C29; }
    body.theme-helado-crema .dish-badge { --chalk-gold: #D9777F; }
    body.theme-helado-crema .category-title { color: #B44A52; }
    body.theme-helado-crema .cat-pill { border-color: rgba(61, 44, 41, 0.12); }
    body.theme-helado-crema .empty-state-card { border-color: rgba(61, 44, 41, 0.10); }
    body.theme-helado-crema .empty-state-icon { color: #D9777F; }
    body.theme-helado-crema .dish-card { border-radius: 18px; box-shadow: 0 2px 12px rgba(217, 119, 127, 0.08); }
    body.theme-helado-crema::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(rgba(232, 165, 184, 0.35) 1px, transparent 1px),
        radial-gradient(rgba(163, 217, 201, 0.35) 1px, transparent 1px),
        radial-gradient(circle at 88% 12%, rgba(217, 119, 127, 0.10) 0%, transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(95, 169, 143, 0.10) 0%, transparent 30%);
      background-size: 40px 40px, 40px 40px, auto, auto;
      background-position: 0 0, 20px 20px, 0 0, 0 0;
    }

    /* MENTA GRANIZADA — verde menta con chips de chocolate: fresco y juguetón */
    body.theme-helado-menta {
      --bg-chalkboard: #F1FBF7;
      --surface-card: #FFFFFF;
      --surface-card-hover: #E4F7EF;
      --chalk-gold: #1FA97A;
      --chalk-gold-dim: rgba(31, 169, 122, 0.14);
      --border-gold: rgba(31, 169, 122, 0.35);
      --chalk-choco: #5A3A2E;
      --chalk-white: #16382C;
      --chalk-muted: #3F6B58;
      --chalk-dim: #4F6B60;
      --chalk-gold-ink: #0F6B4E;
      --border-chalk: rgba(22, 56, 44, 0.10);
      background-color: #F1FBF7;
    }
    body.theme-helado-menta .restaurant-title { color: #12805B; }
    body.theme-helado-menta .dish-name { color: #16382C; }
    body.theme-helado-menta .dish-badge { --chalk-gold: #1FA97A; }
    body.theme-helado-menta .category-title { color: #12805B; }
    body.theme-helado-menta .cat-pill { border-color: rgba(22, 56, 44, 0.12); }
    body.theme-helado-menta .empty-state-card { border-color: rgba(22, 56, 44, 0.10); }
    body.theme-helado-menta .empty-state-icon { color: #12805B; }
    body.theme-helado-menta .dish-card { border-radius: 16px; }
    body.theme-helado-menta::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 16% 22%, rgba(31, 169, 122, 0.08) 0%, transparent 36%),
        radial-gradient(circle at 84% 78%, rgba(90, 58, 46, 0.05) 0%, transparent 34%);
    }

    /* SORBETE TROPICAL — mango, coral y turquesa: verano vibrante y luminoso */
    body.theme-helado-tropical {
      --bg-chalkboard: #FFF8EE;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFEFDB;
      --chalk-gold: #FF7A00;
      --chalk-gold-dim: rgba(255, 122, 0, 0.14);
      --border-gold: rgba(255, 122, 0, 0.35);
      --chalk-coral: #FF5A5F;
      --chalk-teal: #17B8A6;
      --chalk-white: #3B2A1E;
      --chalk-muted: #6E523A;
      --chalk-dim: #7A6250;
      --chalk-gold-ink: #B34700;
      --border-chalk: rgba(59, 42, 30, 0.10);
      background-color: #FFF8EE;
    }
    body.theme-helado-tropical .restaurant-title { color: #E8590C; }
    body.theme-helado-tropical .dish-name { color: #3B2A1E; }
    body.theme-helado-tropical .dish-badge { --chalk-gold: #FF7A00; }
    body.theme-helado-tropical .category-title { color: #E8590C; }
    body.theme-helado-tropical .cat-pill { border-color: rgba(59, 42, 30, 0.12); }
    body.theme-helado-tropical .empty-state-card { border-color: rgba(59, 42, 30, 0.10); }
    body.theme-helado-tropical .empty-state-icon { color: #E8590C; }
    body.theme-helado-tropical .dish-card { border-radius: 16px; }
    body.theme-helado-tropical::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 14% 20%, rgba(255, 122, 0, 0.10) 0%, transparent 34%),
        radial-gradient(circle at 86% 30%, rgba(255, 90, 95, 0.09) 0%, transparent 32%),
        radial-gradient(circle at 24% 84%, rgba(23, 184, 166, 0.10) 0%, transparent 32%);
    }

    /* SORBETE PASTEL — lavanda, rosa y menta suaves: dulce, tierno y elegante */
    body.theme-helado-pastel {
      --bg-chalkboard: #FBF6FF;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F3ECFA;
      --chalk-gold: #9F7AEA;
      --chalk-gold-dim: rgba(159, 122, 234, 0.14);
      --border-gold: rgba(159, 122, 234, 0.35);
      --chalk-pink: #F6A5C0;
      --chalk-mint: #9FEBCB;
      --chalk-white: #463A5C;
      --chalk-muted: #6B5C86;
      --chalk-dim: #6E647C;
      --chalk-gold-ink: #5B3FA6;
      --border-chalk: rgba(70, 58, 92, 0.10);
      background-color: #FBF6FF;
    }
    body.theme-helado-pastel .restaurant-title { color: #7C5CBF; }
    body.theme-helado-pastel .dish-name { color: #463A5C; }
    body.theme-helado-pastel .dish-badge { --chalk-gold: #9F7AEA; }
    body.theme-helado-pastel .category-title { color: #7C5CBF; }
    body.theme-helado-pastel .cat-pill { border-color: rgba(70, 58, 92, 0.12); }
    body.theme-helado-pastel .empty-state-card { border-color: rgba(70, 58, 92, 0.10); }
    body.theme-helado-pastel .empty-state-icon { color: #7C5CBF; }
    body.theme-helado-pastel .dish-card { border-radius: 18px; }
    body.theme-helado-pastel::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 24%, rgba(246, 165, 192, 0.10) 0%, transparent 36%),
        radial-gradient(circle at 82% 76%, rgba(159, 235, 203, 0.12) 0%, transparent 34%);
    }

    /* GELATERIA ITALIANA — marfil, pistacho y terracota: artesanal y formal */
    body.theme-gelateria {
      --bg-chalkboard: #FBF6EE;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F4ECDF;
      --chalk-gold: #C56B4A;
      --chalk-gold-dim: rgba(197, 107, 74, 0.14);
      --border-gold: rgba(197, 107, 74, 0.35);
      --chalk-pistachio: #94A97A;
      --chalk-white: #3E2C23;
      --chalk-muted: #5C463A;
      --chalk-dim: #6F5A4C;
      --chalk-gold-ink: #A8522F;
      --border-chalk: rgba(62, 44, 35, 0.12);
      background-color: #FBF6EE;
    }
    body.theme-gelateria .restaurant-title { color: #A8522F; }
    body.theme-gelateria .dish-name { color: #3E2C23; }
    body.theme-gelateria .dish-badge { --chalk-gold: #C56B4A; }
    body.theme-gelateria .category-title { color: #A8522F; }
    body.theme-gelateria .cat-pill { border-color: rgba(62, 44, 35, 0.12); }
    body.theme-gelateria .empty-state-card { border-color: rgba(62, 44, 35, 0.10); }
    body.theme-gelateria .empty-state-icon { color: #A8522F; }
    body.theme-gelateria::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 20% 26%, rgba(197, 107, 74, 0.06) 0%, transparent 42%),
        radial-gradient(circle at 80% 74%, rgba(148, 169, 122, 0.08) 0%, transparent 42%);
    }

    /* CIOCCOLATO PREMIUM — cacao oscuro y oro: nocturno, intenso y formal */
    body.theme-cioccolato {
      --bg-chalkboard: #231410;
      --surface-card: #2E1B15;
      --surface-card-hover: #3B241B;
      --chalk-gold: #E0B04A;
      --chalk-gold-dim: rgba(224, 176, 74, 0.16);
      --border-gold: rgba(224, 176, 74, 0.38);
      --chalk-cream: #F5E6D3;
      --chalk-white: #F5E6D3;
      --chalk-muted: #D9C3A9;
      --chalk-dim: #A88C74;
      --border-chalk: rgba(245, 230, 211, 0.12);
      background-color: #231410;
      background-image:
        radial-gradient(circle at 50% 0%, rgba(224, 176, 74, 0.06) 0%, transparent 55%);
    }
    body.theme-cioccolato .restaurant-title { color: #E0B04A; }
    body.theme-cioccolato .dish-name { color: #F5E6D3; }
    body.theme-cioccolato .dish-badge { --chalk-gold: #E0B04A; }
    body.theme-cioccolato .category-title { color: #E0B04A; }
    body.theme-cioccolato .empty-state-icon { color: #E0B04A; }
    body.theme-cioccolato::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 20%, rgba(224, 176, 74, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 82% 80%, rgba(224, 176, 74, 0.04) 0%, transparent 45%);
    }

    /* ── NUEVOS TEMAS PREMIUM DE HELADERÍA (5) ───────────────────────────
       Todos se reconocen a golpe de vista como heladería: fondos cremosos,
       tintas comestibles y decoración de confeti / gotas / nubes sin assets
       externos (solo radial-gradients). Ninguno toca los 6 originales. */

    /* FRESA & CREMA — rosa frutilla sobre crema chantilly: dulce y femenino */
    body.theme-helado-fresa {
      --bg-chalkboard: #FFF5F7;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFE9F0;
      --chalk-gold: #E84A7A;
      --chalk-gold-dim: rgba(232, 74, 122, 0.14);
      --border-gold: rgba(232, 74, 122, 0.38);
      --chalk-berry: #B4235A;
      --chalk-cream: #FFF0F4;
      --chalk-white: #4A1F30;
      --chalk-muted: #7A4A5C;
      --chalk-dim: #8A5C6C;
      --chalk-gold-ink: #B4235A;
      --border-chalk: rgba(74, 31, 48, 0.10);
      background-color: #FFF5F7;
    }
    body.theme-helado-fresa .restaurant-title { color: #D42A62; }
    body.theme-helado-fresa .dish-name { color: #4A1F30; }
    body.theme-helado-fresa .dish-badge { --chalk-gold: #E84A7A; }
    body.theme-helado-fresa .category-title { color: #D42A62; }
    body.theme-helado-fresa .cat-pill { border-color: rgba(74, 31, 48, 0.12); }
    body.theme-helado-fresa .empty-state-card { border-color: rgba(74, 31, 48, 0.10); }
    body.theme-helado-fresa .empty-state-icon { color: #D42A62; }
    body.theme-helado-fresa .dish-card { border-radius: 18px; border-top: 3px solid rgba(232, 74, 122, 0.25); }
    body.theme-helado-fresa::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 12% 16%, rgba(232, 74, 122, 0.12) 0%, transparent 34%),
        radial-gradient(circle at 88% 22%, rgba(255, 143, 171, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 20% 84%, rgba(232, 74, 122, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 82% 86%, rgba(255, 205, 218, 0.20) 0%, transparent 32%);
    }

    /* DULCE DE LECHE ARTESANAL — caramelo y miel sobre vainilla tibia */
    body.theme-helado-dulce {
      --bg-chalkboard: #FFF9EF;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFF1DC;
      --chalk-gold: #C47A1A;
      --chalk-gold-dim: rgba(196, 122, 26, 0.14);
      --border-gold: rgba(196, 122, 26, 0.38);
      --chalk-caramel: #8A4B0E;
      --chalk-honey: #F0B429;
      --chalk-white: #4A2E12;
      --chalk-muted: #7A5A34;
      --chalk-dim: #8A6B4A;
      --chalk-gold-ink: #8A4B0E;
      --border-chalk: rgba(74, 46, 18, 0.10);
      background-color: #FFF9EF;
    }
    body.theme-helado-dulce .restaurant-title { color: #A05E12; }
    body.theme-helado-dulce .dish-name { color: #4A2E12; }
    body.theme-helado-dulce .dish-badge { --chalk-gold: #C47A1A; }
    body.theme-helado-dulce .category-title { color: #A05E12; }
    body.theme-helado-dulce .cat-pill { border-color: rgba(74, 46, 18, 0.12); }
    body.theme-helado-dulce .empty-state-card { border-color: rgba(74, 46, 18, 0.10); }
    body.theme-helado-dulce .empty-state-icon { color: #A05E12; }
    body.theme-helado-dulce .dish-card { border-radius: 16px; border-left: 4px solid rgba(196, 122, 26, 0.30); }
    body.theme-helado-dulce::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 16% 20%, rgba(196, 122, 26, 0.10) 0%, transparent 36%),
        radial-gradient(circle at 84% 28%, rgba(240, 180, 41, 0.12) 0%, transparent 32%),
        radial-gradient(circle at 24% 84%, rgba(138, 75, 14, 0.06) 0%, transparent 34%);
    }

    /* PISTACCHIO DI SICILIA — verde pistacho con cáscara tostada, elegante */
    body.theme-helado-pistacho {
      --bg-chalkboard: #F4F8F0;
      --surface-card: #FFFFFF;
      --surface-card-hover: #E8F2E2;
      --chalk-gold: #5B8C5A;
      --chalk-gold-dim: rgba(91, 140, 90, 0.14);
      --border-gold: rgba(91, 140, 90, 0.38);
      --chalk-shell: #8A6B3E;
      --chalk-leaf: #2F6B33;
      --chalk-white: #243A24;
      --chalk-muted: #4A634A;
      --chalk-dim: #5A705A;
      --chalk-gold-ink: #2F6B33;
      --border-chalk: rgba(36, 58, 36, 0.10);
      background-color: #F4F8F0;
    }
    body.theme-helado-pistacho .restaurant-title { color: #3E7A3E; }
    body.theme-helado-pistacho .dish-name { color: #243A24; }
    body.theme-helado-pistacho .dish-badge { --chalk-gold: #5B8C5A; }
    body.theme-helado-pistacho .category-title { color: #3E7A3E; }
    body.theme-helado-pistacho .cat-pill { border-color: rgba(36, 58, 36, 0.12); }
    body.theme-helado-pistacho .empty-state-card { border-color: rgba(36, 58, 36, 0.10); }
    body.theme-helado-pistacho .empty-state-icon { color: #3E7A3E; }
    body.theme-helado-pistacho .dish-card { border-radius: 16px; }
    body.theme-helado-pistacho::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 22%, rgba(91, 140, 90, 0.10) 0%, transparent 36%),
        radial-gradient(circle at 82% 78%, rgba(138, 107, 62, 0.08) 0%, transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(91, 140, 90, 0.04) 0%, transparent 55%);
    }

    /* CIELO HELADO — celeste cielo y nube de vainilla: aireado y fresco */
    body.theme-helado-cielo {
      --bg-chalkboard: #F0FAFF;
      --surface-card: #FFFFFF;
      --surface-card-hover: #E2F3FF;
      --chalk-gold: #1E9AC5;
      --chalk-gold-dim: rgba(30, 154, 197, 0.14);
      --border-gold: rgba(30, 154, 197, 0.38);
      --chalk-cloud: #BEE3F8;
      --chalk-deep: #0E6E8E;
      --chalk-white: #1E3440;
      --chalk-muted: #4A6A7A;
      --chalk-dim: #5A7A8A;
      --chalk-gold-ink: #0E6E8E;
      --border-chalk: rgba(30, 52, 64, 0.10);
      background-color: #F0FAFF;
    }
    body.theme-helado-cielo .restaurant-title { color: #1580A8; }
    body.theme-helado-cielo .dish-name { color: #1E3440; }
    body.theme-helado-cielo .dish-badge { --chalk-gold: #1E9AC5; }
    body.theme-helado-cielo .category-title { color: #1580A8; }
    body.theme-helado-cielo .cat-pill { border-color: rgba(30, 52, 64, 0.12); }
    body.theme-helado-cielo .empty-state-card { border-color: rgba(30, 52, 64, 0.10); }
    body.theme-helado-cielo .empty-state-icon { color: #1580A8; }
    body.theme-helado-cielo .dish-card { border-radius: 18px; box-shadow: 0 2px 12px rgba(30, 154, 197, 0.08); }
    body.theme-helado-cielo::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(ellipse at 20% 14%, rgba(190, 227, 248, 0.35) 0%, transparent 42%),
        radial-gradient(ellipse at 80% 24%, rgba(30, 154, 197, 0.10) 0%, transparent 38%),
        radial-gradient(ellipse at 30% 88%, rgba(190, 227, 248, 0.28) 0%, transparent 40%);
    }

    /* MORA NOCHE — violeta mora premium sobre noche crema: el oscuro dulce */
    body.theme-helado-mora {
      --bg-chalkboard: #241536;
      --surface-card: #2F1D46;
      --surface-card-hover: #3A2560;
      --chalk-gold: #C4B5FD;
      --chalk-gold-dim: rgba(196, 181, 253, 0.16);
      --border-gold: rgba(196, 181, 253, 0.40);
      --chalk-berry: #F0ABFC;
      --chalk-cream: #F5EFFF;
      --chalk-white: #F5EFFF;
      --chalk-muted: #C9BCE8;
      --chalk-dim: #9E8EC4;
      --border-chalk: rgba(245, 239, 255, 0.12);
      background-color: #241536;
      background-image:
        radial-gradient(circle at 50% 0%, rgba(196, 181, 253, 0.10) 0%, transparent 55%),
        radial-gradient(circle at 14% 82%, rgba(240, 171, 252, 0.08) 0%, transparent 40%);
    }
    body.theme-helado-mora .restaurant-title { color: #D8C8FF; }
    body.theme-helado-mora .dish-name { color: #F5EFFF; }
    body.theme-helado-mora .dish-badge { --chalk-gold: #C4B5FD; }
    body.theme-helado-mora .category-title { color: #C4B5FD; }
    body.theme-helado-mora .empty-state-icon { color: #C4B5FD; }
    body.theme-helado-mora .dish-card { border-radius: 16px; border: 1px solid rgba(196, 181, 253, 0.22); }
    body.theme-helado-mora::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 18%, rgba(196, 181, 253, 0.08) 0%, transparent 44%),
        radial-gradient(circle at 84% 80%, rgba(240, 171, 252, 0.07) 0%, transparent 44%);
    }

    /* Font Styles */
    body.font-serif { --font-heading: 'Playfair Display', Georgia, serif; }
    body.font-chalk { --font-heading: 'Caveat', cursive, sans-serif; }
    body.font-sans { --font-heading: 'Montserrat', system-ui, sans-serif; }
    body.font-marker { --font-heading: 'Permanent Marker', cursive, sans-serif; }
    body.font-urban { --font-heading: 'Bungee', cursive, sans-serif; }

    /* ============================================================
       EVENT VISUAL THEMES — Aplicados cuando businessType='events' 
       o ?event= parâmetro en la URL
       ============================================================ */

    /* BODAS / CASAMIOS: tonos blancos, marfil, marcos sutiles, serif elegante,
       detalles florales/botánicos suaves */
    body.theme-wedding {
      --bg-chalkboard: #FAFAFA;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F5F5F0;
      --chalk-gold: #D4A853;
      --chalk-gold-dim: rgba(212, 168, 83, 0.15);
      --border-gold: rgba(212, 168, 83, 0.35);
      --chalk-white: #101614;
      --chalk-dim: #6B7A85;
      --border-chalk: rgba(0,0,0,0.08);
      --font-heading: 'Playfair Display', Georgia, serif;
    }
    body.theme-wedding .restaurant-title {
      color: var(--chalk-white);
      text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    body.theme-wedding .dish-name { color: #101614; }
    body.theme-wedding .dish-badge { --chalk-gold: #D4A853; }
    body.theme-wedding .cat-pill { border-color: rgba(0,0,0,0.08); }
    body.theme-wedding .category-title { color: #D4A853; }
    body.theme-wedding .empty-state-card { border-color: rgba(0,0,0,0.1); }
    body.theme-wedding .empty-state-icon { color: #D4A853; }
    /* Sutilezas decorativas */
    body.theme-wedding::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image: 
        radial-gradient(circle at 20% 30%, rgba(212,168,83,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212,168,83,0.02) 0%, transparent 50%);
    }

    /* ── Itinerario visual de boda (línea de tiempo elegante) ─────────────
       Usa variables del tema activo (--chalk-gold, --surface-card, …) así se
       adapta solo a wedding / cumple15 / birthday / catering. Todo scropeado
       bajo .wed-it-*: cero impacto fuera de la sección. */
    .wed-it-section {
      position: relative;
      margin: 18px 0 8px;
      padding: 30px 24px 24px;
      background: var(--surface-card);
      border: 1px solid var(--border-gold, rgba(212, 168, 83, 0.35));
      border-radius: 14px;
      /* Doble marco que sigue el radio del borde */
      box-shadow: inset 0 0 0 4px var(--surface-card),
        inset 0 0 0 5px var(--border-gold, rgba(212, 168, 83, 0.35));
    }
    /* ── Tarjeta de bienvenida al invitado (eventos) ─────────────────────────
       Misma paleta que el itinerario: se adapta al tema de evento activo. */
    .guest-invite-hero {
      margin: 4px 0 14px;
    }
    .guest-invite-hero .guest-hero-inner {
      position: relative;
      padding: 22px 20px 18px;
      background: var(--surface-card);
      border: 1px solid var(--border-gold, rgba(212, 168, 83, 0.35));
      border-radius: 14px;
      text-align: center;
      box-shadow: inset 0 0 0 4px var(--surface-card),
        inset 0 0 0 5px var(--border-gold, rgba(212, 168, 83, 0.35));
    }
    .guest-hero-welcome {
      margin: 0 0 6px;
      font-size: 14px;
      color: var(--chalk-dim);
    }
    .guest-hero-welcome strong { color: var(--chalk-gold); }
    .guest-hero-title {
      margin: 0 0 8px;
      font-size: 24px;
      line-height: 1.25;
      color: var(--chalk-white, #fff);
    }
    .guest-hero-meta {
      margin: 0 0 10px;
      font-size: 13px;
      color: var(--chalk-dim);
    }
    .guest-hero-hint {
      margin: 0;
      font-size: 12.5px;
      color: var(--chalk-muted);
    }
    /* Esquinas botánicas doradas (SVG inline, sin imágenes externas) */
    .wed-it-corner {
      position: absolute;
      width: 104px;
      height: 104px;
      pointer-events: none;
      opacity: 0.9;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23D4A853' stroke-width='2' stroke-linecap='round' opacity='0.6'%3E%3Cpath d='M6 134 C 30 100, 44 70, 60 50 C 78 28, 100 16, 134 8'/%3E%3Cpath d='M34 96 C 28 84, 27 72, 30 62'/%3E%3Cpath d='M58 62 C 56 50, 58 40, 63 32'/%3E%3Cpath d='M88 36 C 90 28, 94 22, 100 18'/%3E%3C/g%3E%3Cg fill='%23D4A853' opacity='0.45'%3E%3Cellipse cx='30' cy='58' rx='9' ry='4.5' transform='rotate(-70 30 58)'/%3E%3Cellipse cx='63' cy='28' rx='9' ry='4.5' transform='rotate(-70 63 28)'/%3E%3Cellipse cx='104' cy='15' rx='9' ry='4.5' transform='rotate(-65 104 15)'/%3E%3Cellipse cx='20' cy='88' rx='8' ry='4' transform='rotate(-55 20 88)'/%3E%3Cellipse cx='46' cy='70' rx='8' ry='4' transform='rotate(-40 46 70)'/%3E%3Cellipse cx='76' cy='44' rx='8' ry='4' transform='rotate(-45 76 44)'/%3E%3Ccircle cx='122' cy='10' r='3'/%3E%3Ccircle cx='130' cy='16' r='2.2'/%3E%3Ccircle cx='114' cy='20' r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    }
    .wed-it-corner.is-tl { top: 9px; left: 9px; }
    .wed-it-corner.is-tr { top: 9px; right: 9px; transform: scaleX(-1); }
    .wed-it-corner.is-bl { bottom: 9px; left: 9px; transform: scaleY(-1); }
    .wed-it-corner.is-br { bottom: 9px; right: 9px; transform: scale(-1, -1); }
    /* Divisor floral entre encabezado y timeline */
    .wed-it-divider {
      height: 24px;
      margin: 10px auto 2px;
      max-width: 320px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='24' viewBox='0 0 320 24'%3E%3Cg stroke='%23D4A853' stroke-width='1.5' opacity='0.6'%3E%3Cline x1='0' y1='12' x2='128' y2='12'/%3E%3Cline x1='192' y1='12' x2='320' y2='12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23D4A853' stroke-width='1.5' opacity='0.5'%3E%3Cpath d='M146 12 q -6 -7 -14 -7'/%3E%3Cpath d='M174 12 q 6 -7 14 -7'/%3E%3C/g%3E%3Cg fill='%23D4A853' opacity='0.75'%3E%3Crect x='155' y='7' width='10' height='10' transform='rotate(45 160 12)'/%3E%3Ccircle cx='138' cy='12' r='2.5'/%3E%3Ccircle cx='182' cy='12' r='2.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    }
    .wed-it-head { text-align: center; margin-bottom: 6px; }
    .wed-it-date {
      font-size: 0.8rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--chalk-dim);
    }
    .wed-it-couple {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      margin-top: 4px;
      color: var(--chalk-white, #fff);
    }
    .wed-it-title {
      font-family: var(--font-heading);
      font-size: 1.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--chalk-gold);
      margin: 8px 0 4px;
    }
    .wed-it-timeline {
      list-style: none;
      margin: 18px 0 0;
      padding: 0;
      position: relative;
    }
    /* Espina central */
    .wed-it-timeline::before {
      content: '';
      position: absolute;
      top: 6px; bottom: 6px; left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: linear-gradient(var(--chalk-gold), var(--chalk-gold-dim, rgba(212,168,83,0.15)));
      opacity: 0.55;
      border-radius: 2px;
    }
    .wed-it-stop {
      position: relative;
      display: flex;
      align-items: center;
      margin: 0;
      padding: 10px 0;
      min-height: 64px;
    }
    .wed-it-stop.is-left { justify-content: flex-start; }
    .wed-it-stop.is-right { justify-content: flex-end; }
    .wed-it-card {
      width: calc(50% - 30px);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface-card-hover, rgba(255,255,255,0.03));
      border: 1px solid var(--border-chalk);
      border-radius: 12px;
      padding: 10px 12px;
    }
    .wed-it-stop.is-left .wed-it-card { flex-direction: row; text-align: left; }
    .wed-it-stop.is-right .wed-it-card { flex-direction: row-reverse; text-align: right; }
    .wed-it-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
    .wed-it-text { min-width: 0; }
    .wed-it-time {
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--chalk-gold);
      font-family: var(--font-mono, monospace);
    }
    .wed-it-moment {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--chalk-white, #fff);
      margin-top: 2px;
    }
    .wed-it-node {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1rem;
      line-height: 1;
      background: var(--surface-card);
      border-radius: 50%;
      padding: 2px;
    }
    .wed-it-venue {
      text-align: center;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border-chalk);
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--chalk-dim);
    }
    /* ── Estado en vivo: píldora, barra de avance y momentos ─────────── */
    .wed-it-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      background: var(--chalk-gold-dim, rgba(212,168,83,0.15));
      border: 1px solid var(--border-gold, rgba(212, 168, 83, 0.35));
      color: var(--chalk-gold);
    }
    .wed-it-live-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: #F56565;
      flex-shrink: 0;
      animation: wed-it-pulse 1.6s ease-in-out infinite;
    }
    @keyframes wed-it-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.8); }
    }
    .wed-it-progress {
      height: 6px;
      border-radius: 999px;
      background: var(--border-chalk);
      margin: 12px auto 0;
      max-width: 420px;
      overflow: hidden;
    }
    .wed-it-progress span {
      display: block;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--chalk-gold-dim, rgba(212,168,83,0.4)), var(--chalk-gold));
      transition: width 0.6s ease;
    }
    .wed-it-stop.is-past .wed-it-card { opacity: 0.55; }
    .wed-it-stop.is-past .wed-it-moment { color: var(--chalk-dim); }
    .wed-it-stop.is-now .wed-it-card {
      border-color: var(--chalk-gold);
      border-width: 2px;
      box-shadow: 0 0 0 3px var(--chalk-gold-dim, rgba(212,168,83,0.2)), 0 8px 24px rgba(0,0,0,0.12);
    }
    .wed-it-now-badge {
      display: inline-block;
      margin-top: 4px;
      padding: 1px 8px;
      border-radius: 999px;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      background: #F56565;
      color: #fff;
    }
    .wed-it-next-tag {
      display: inline-block;
      margin-top: 4px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--chalk-dim);
    }
    @media (prefers-reduced-motion: reduce) {
      .wed-it-live-dot { animation: none; }
      .wed-it-progress span { transition: none; }
    }
    /* Móvil: una sola columna con la espina a la izquierda */
    @media (max-width: 520px) {
      .wed-it-timeline::before { left: 14px; }
      .wed-it-stop.is-left, .wed-it-stop.is-right { justify-content: flex-end; }
      .wed-it-card { width: calc(100% - 44px); }
      .wed-it-stop.is-left .wed-it-card,
      .wed-it-stop.is-right .wed-it-card { flex-direction: row; text-align: left; }
      .wed-it-node { left: 14px; }
      .wed-it-title { font-size: 1.4rem; }
      .wed-it-corner { width: 72px; height: 72px; }
      .wed-it-section { padding: 26px 16px 20px; }
    }

    /* QUINCEAÑERA / CUMPLEAÑOS 15: colores pastel suaves, rosados sutiles,
       dorado champagne, tipografías finas, atmósfera sofisticada y festiva */
    body.theme-cumple15 {
      --bg-chalkboard: #F9F0F5;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F5E8F0;
      --chalk-gold: #D4A853;
      --chalk-gold-dim: rgba(212, 168, 83, 0.15);
      --border-gold: rgba(212, 168, 83, 0.35);
      --chalk-pink: #F4C2C2;
      --chalk-pink-dim: rgba(244, 194, 194, 0.15);
      --chalk-dim: #7D5A70;
      --border-chalk: rgba(244, 194, 194, 0.12);
      --font-heading: 'Playfair Display', Georgia, serif;
    }
    body.theme-cumple15 .restaurant-title { color: var(--chalk-white); }
    body.theme-cumple15 .dish-name { color: #7D5A70; }
    body.theme-cumple15 .dish-badge { --chalk-gold: #D4A853; --chalk-pink: #F4C2C2; }
    body.theme-cumple15 .cat-pill { border-color: rgba(244, 194, 194, 0.12); }
    body.theme-cumple15 .category-title { color: #D4A853; }
    body.theme-cumple15 .empty-state-card { border-color: rgba(244, 194, 194, 0.1); }
    body.theme-cumple15 .empty-state-icon { color: #D4A853; }
    /* Motivitos decorativos sutiles */
    body.theme-cumple15::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image: 
        radial-gradient(circle at 15% 25%, rgba(244,194,194,0.04) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(212,168,83,0.03) 0%, transparent 45%);
    }

    /* CUMPLEARES GENERALES: paleta suave festiva, elegante pero celebratorio */
    body.theme-birthday {
      --bg-chalkboard: #FAF8F5;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F5F0EB;
      --chalk-gold: #C9A867;
      --chalk-gold-dim: rgba(201, 168, 103, 0.15);
      --border-gold: rgba(201, 168, 103, 0.35);
      --chalk-mint: #A8D5C7;
      --chalk-mint-dim: rgba(168, 213, 199, 0.15);
      --chalk-dim: #6B7A85;
      --border-chalk: rgba(168, 213, 199, 0.12);
      --font-heading: 'Playfair Display', Georgia, serif;
    }
    body.theme-birthday .restaurant-title { color: var(--chalk-white); }
    body.theme-birthday .dish-name { color: #6B7A85; }
    body.theme-birthday .dish-badge { --chalk-gold: #C9A867; --chalk-mint: #A8D5C7; }
    body.theme-birthday .cat-pill { border-color: rgba(168, 213, 199, 0.12); }
    body.theme-birthday .category-title { color: #C9A867; }
    body.theme-birthday .empty-state-card { border-color: rgba(168, 213, 199, 0.1); }
    body.theme-birthday .empty-state-icon { color: #C9A867; }
    body.theme-birthday::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image: 
        radial-gradient(circle at 20% 20%, rgba(168,213,199,0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(201,168,103,0.03) 0%, transparent 40%);
    }

    /* CATERING: limpio, profesional, enfoque en comida, paleta neutral con acentos cálidos */
    body.theme-catering {
      --bg-chalkboard: #F7F4F0;
      --surface-card: #FFFFFF;
      --surface-card-hover: #F2EEEA;
      --chalk-gold: #C49A4A;
      --chalk-gold-dim: rgba(196, 154, 74, 0.15);
      --border-gold: rgba(196, 154, 74, 0.35);
      --chalk-umber: #A4753C;
      --chalk-umber-dim: rgba(164, 117, 60, 0.15);
      --chalk-dim: #5A4F46;
      --border-chalk: rgba(164, 117, 60, 0.10);
      --font-heading: 'Playfair Display', Georgia, serif;
    }
    body.theme-catering .restaurant-title { color: var(--chalk-white); }
    body.theme-catering .dish-name { color: #A4753C; }
    body.theme-catering .dish-badge { --chalk-gold: #C49A4A; --chalk-umber: #A4753C; }
    body.theme-catering .cat-pill { border-color: rgba(164, 117, 60, 0.10); }
    body.theme-catering .category-title { color: #C49A4A; }
    body.theme-catering .empty-state-card { border-color: rgba(164, 117, 60, 0.08); }
    body.theme-catering .empty-state-icon { color: #C49A4A; }
    body.theme-catering::before {
      content: '';
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      pointer-events: none;
      background-image: 
        radial-gradient(circle at 25% 25%, rgba(164,117,60,0.03) 0%, transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(196,154,74,0.03) 0%, transparent 45%);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* Native UI (selects, scrollbars, date pickers): oscuro por defecto;
       claro en los temas de fondo claro para que combine con la paleta. */
    body:is(.theme-helado-fiesta, .theme-helado-menta, .theme-helado-tropical, .theme-helado-pastel, .theme-gelateria, .theme-helado-fresa, .theme-helado-dulce, .theme-helado-pistacho, .theme-helado-cielo, .theme-wedding, .theme-cumple15, .theme-birthday, .theme-catering) {
      color-scheme: light;
    }
    body {
      background-color: var(--bg-chalkboard);
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.02) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(236,201,75,0.03) 0%, transparent 40%);
      color: var(--chalk-white);
      font-family: var(--font-body);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-bottom: 90px;
      -webkit-font-smoothing: antialiased;
    }

    /* Chalkboard Frame & Header */
    .menu-header {
      background: #101614;
      /* El header es SIEMPRE oscuro. Re-scopeamos las tintas de texto a valores
         claros para que sus controles (Información, estado, barra de meta) sean
         legibles incluso en los temas claros, donde --chalk-white/--chalk-dim
         se redefinen a tinta oscura sobre fondo marfil. */
      --chalk-white: #FAFDFB;
      --chalk-muted: #CBD5E0;
      --chalk-dim: #B7A99E;
      border-bottom: 2px solid var(--border-gold);
      padding: 24px 16px 20px 16px;
      text-align: center;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
    .restaurant-logo {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid var(--chalk-gold);
      object-fit: cover;
      margin: 0 auto 10px auto;
      display: block;
      background: #1C2723;
    }
    .restaurant-title {
      font-family: var(--font-heading);
      font-size: clamp(1.6rem, 5vw, 2.3rem);
      color: var(--chalk-white);
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .restaurant-slogan {
      font-family: var(--font-chalk);
      font-size: 1.25rem;
      color: var(--chalk-gold);
      margin-bottom: 12px;
    }
    .restaurant-meta-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 0.82rem;
      color: var(--chalk-dim);
    }
    .meta-chip {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--border-chalk);
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background-color 0.2s;
      text-decoration: none;
      color: inherit;
      font: inherit;
    }
    .meta-chip:hover {
      border-color: var(--chalk-gold);
      color: var(--chalk-gold);
      background: var(--chalk-gold-dim);
    }
    /* Chip de Reserva: destacado pero con el ACENTO DEL TEMA (dorado),
       nunca verde hardcodeado — así respeta los 17+ temas visuales. */
    .meta-chip-reserve {
      background: var(--chalk-gold-dim, rgba(236, 201, 75, 0.10));
      border-color: var(--chalk-gold, #E1A938);
      color: var(--chalk-gold, #E1A938);
      font-weight: 700;
    }
    .meta-chip-reserve:hover {
      background: var(--chalk-gold, #E1A938);
      color: var(--bg, #121A18);
      border-color: var(--chalk-gold, #E1A938);
    }

    /* Announcement Banner */
    .announcement-banner {
      background: linear-gradient(90deg, #ECC94B, #F6AD55);
      color: #101614;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 10px 16px;
      text-align: center;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 10px rgba(236,201,75,0.25);
    }

    /* Dish Thumbnail Image */
    .dish-thumb {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid var(--border-chalk);
      background: #151E1A;
    }

    /* Bill Splitter Tool in Cart */
    .bill-splitter-box {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-chalk);
      border-radius: 10px;
      padding: 10px 12px;
      margin-top: 10px;
      margin-bottom: 12px;
      font-size: 0.85rem;
    }

    /* Skeleton Loader Shimmer */
    .skeleton-grid {
      display: grid;
      gap: 12px;
      margin-top: 10px;
    }
    .skeleton-card {
      background: var(--bg-card);
      border: 1px solid var(--border-chalk);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      gap: 12px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .skeleton-shimmer {
      background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.03) 100%);
      background-size: 200% 100%;
      animation: shimmerAnimation 1.6s infinite;
      border-radius: 6px;
    }
    @keyframes shimmerAnimation {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton-thumb {
      width: 76px;
      height: 76px;
      border-radius: 10px;
      flex-shrink: 0;
    }
    .skeleton-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .skeleton-line {
      height: 14px;
    }
    .skeleton-line.title {
      width: 65%;
      height: 18px;
    }
    .skeleton-line.desc {
      width: 90%;
      height: 12px;
    }
    .skeleton-line.price {
      width: 30%;
      height: 16px;
    }

    /* Enhanced Empty State */
    .empty-state-card {
      text-align: center;
      padding: 48px 20px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed var(--border-chalk);
      border-radius: 16px;
      margin: 20px 0;
    }
    .empty-state-icon {
      font-size: 3.2rem;
      margin-bottom: 12px;
      display: inline-block;
      animation: floatPlate 3s ease-in-out infinite alternate;
    }
    .empty-state-title {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      color: var(--chalk-gold);
      margin-bottom: 8px;
      font-weight: 700;
    }
    .empty-state-desc {
      font-size: 0.88rem;
      color: var(--chalk-dim);
      max-width: 360px;
      margin: 0 auto 16px;
      line-height: 1.5;
    }
    .empty-state-btn {
      background: transparent;
      border: 1px solid var(--chalk-gold);
      color: var(--chalk-gold);
      font-size: 0.82rem;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .empty-state-btn:hover {
      background: var(--chalk-gold);
      color: #101614;
    }

    /* Container */
    .menu-container {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 16px;
    }

    /* Search & Filter Bar */
    .controls-wrapper {
      position: sticky;
      top: 0;
      background: rgba(21, 29, 26, 0.96);
      backdrop-filter: blur(10px);
      z-index: 100;
      padding: 12px 0 10px 0;
      border-bottom: 1px solid var(--border-chalk);
      margin-bottom: 18px;
    }
    .search-box {
      width: 100%;
      background: #0E1412;
      border: 1px solid var(--border-chalk);
      border-radius: 10px;
      padding: 10px 14px;
      color: #fff;
      font-size: 0.9rem;
      outline: none;
      margin-bottom: 10px;
      transition: border-color 0.2s;
    }
    .search-box:focus { border-color: var(--chalk-gold); }

    .category-pills {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }
    .category-pills::-webkit-scrollbar { display: none; }
    .cat-pill {
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      color: var(--chalk-muted);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.82rem;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .cat-pill.active {
      background: var(--chalk-gold);
      color: #101614;
      border-color: var(--chalk-gold);
      font-weight: 700;
    }

    /* Accessibility / Inclusive Notice */
    .a11y-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      background: transparent;
      border: none;
      padding: 2px 0;
      font-size: 0.78rem;
      color: var(--chalk-dim);
      margin-bottom: 10px;
    }
    .btn-a11y-tts {
      background: transparent;
      border: 1px solid var(--border-gold);
      color: var(--chalk-gold-ink, var(--chalk-gold));
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 0.75rem;
      cursor: pointer;
    }

    /* Categories & Dishes */
    .category-section {
      margin-bottom: 30px;
    }
    .category-title {
      font-family: var(--font-heading);
      font-size: 1.35rem;
      color: var(--chalk-gold);
      border-bottom: 1px solid var(--border-chalk);
      padding-bottom: 6px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .category-badge-count {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--chalk-dim);
      font-weight: normal;
    }

    .dishes-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .dish-card {
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .dish-card:hover {
      background: var(--surface-card-hover);
      border-color: rgba(255,255,255,0.2);
    }
    /* Render diferido de tarjetas (cartas de 400 platos): el navegador salta
       el pintado fuera de ventana. collectStories usa offsetParent (no se ve
       afectado) y scrollIntoView fuerza el render al enfocar. */
    .dishes-grid .dish-card {
      content-visibility: auto;
      contain-intrinsic-size: auto 140px;
    }
    .dish-body { flex: 1; min-width: 0; }
    .dish-title-line {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }
    .dish-name {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--chalk-white);
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .dish-badge {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
    }
    .badge-veggie { background: rgba(225, 169, 56, 0.16); color: var(--chalk-gold, #E1A938); border: 1px solid rgba(225, 169, 56, 0.4); }
    .badge-celiac { background: rgba(236, 201, 75, 0.2); color: #F6E05E; border: 1px solid rgba(236, 201, 75, 0.4); }
    .badge-star { background: rgba(229, 62, 62, 0.2); color: #FC8181; border: 1px solid rgba(229, 62, 62, 0.4); }
    /* Los colores de insignia de arriba están pensados para fondos oscuros; en los
       temas claros de heladería el contraste cae a ~1.8. Los oscurecemos ahí. */
    body:is(.theme-helado-fiesta,.theme-helado-menta,.theme-helado-tropical,.theme-helado-pastel,.theme-gelateria,.theme-helado-fresa,.theme-helado-dulce,.theme-helado-pistacho,.theme-helado-cielo) .dish-badge.badge-star { background: rgba(185, 28, 28, 0.12); color: #B91C1C; border-color: rgba(185, 28, 28, 0.32); }
    body:is(.theme-helado-fiesta,.theme-helado-menta,.theme-helado-tropical,.theme-helado-pastel,.theme-gelateria,.theme-helado-fresa,.theme-helado-dulce,.theme-helado-pistacho,.theme-helado-cielo) .dish-badge.badge-veggie { background: rgba(133, 77, 14, 0.12); color: #854D0E; border-color: rgba(133, 77, 14, 0.30); }
    body:is(.theme-helado-fiesta,.theme-helado-menta,.theme-helado-tropical,.theme-helado-pastel,.theme-gelateria,.theme-helado-fresa,.theme-helado-dulce,.theme-helado-pistacho,.theme-helado-cielo) .dish-badge.badge-celiac { background: rgba(133, 77, 14, 0.14); color: #854D0E; border-color: rgba(133, 77, 14, 0.32); }

    .dish-desc {
      font-size: 0.85rem;
      color: var(--chalk-dim);
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .dish-price {
      font-family: var(--font-mono);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--chalk-gold-ink, var(--chalk-gold));
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* Actions / Add button */
    .dish-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .dish-qty-controls {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-add {
      background: var(--chalk-gold);
      color: #0E1412;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 1.2rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s;
    }
    .btn-add:active { transform: scale(0.9); }
    .qty-counter {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--chalk-gold);
      font-weight: 700;
    }

    /* Bottom Floating Cart Bar */
    .floating-cart-bar {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 540px;
      background: #25D366;
      color: #0E1412;
      border-radius: 30px;
      padding: 12px 20px;
      display: none;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      cursor: pointer;
      z-index: 200;
      font-weight: 700;
      font-size: 0.95rem;
      animation: slideUp 0.3s ease;
    }
    .floating-cart-bar.active { display: flex; }

    /* Waiter Call Floating Button */
    .waiter-fab {
      position: fixed;
      bottom: 80px;
      right: 16px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #F6AD55;
      color: #0E1412;
      border: none;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(246, 173, 85, 0.5);
      cursor: pointer;
      z-index: 199;
      transition: transform 0.2s, box-shadow 0.2s, opacity 0.18s ease;
      animation: slideUp 0.3s ease;
    }
    /* Seguimiento del pedido: por encima del mozo. */
    #orderTrackingFab { bottom: 146px; }
    /* Mientras la barra de controles (sticky) cae en la zona del FAB al abrir
       el menú, el FAB se oculta para no tapar moneda/categorías/buscador.
       Al scrollear y dejar la barra arriba, vuelve a aparecer. */
    body.fab-blocked .waiter-fab {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .waiter-fab:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(246, 173, 85, 0.7); }

    /* Floating Loyalty FAB — "Mi Club en el Menú" (QW1) */
    .floating-loyalty-fab {
      position: fixed;
      bottom: 80px;
      left: 16px;
      width: auto;
      min-width: 56px;
      height: 56px;
      border-radius: 28px;
      background: linear-gradient(135deg, var(--chalk-gold), #E5A838);
      color: #0E1412;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      box-shadow: 0 6px 20px rgba(236, 201, 75, 0.5);
      cursor: pointer;
      z-index: 198;
      transition: transform 0.2s, box-shadow 0.2s, opacity 0.18s ease, min-width 0.2s;
      animation: slideUp 0.3s ease;
      font-weight: 700;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    .floating-loyalty-fab .fab-icon { font-size: 1.3rem; }
    .floating-loyalty-fab .fab-label { display: none; }
    .floating-loyalty-fab .fab-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 20px;
      height: 20px;
      background: #E53E3E;
      color: #fff;
      border-radius: 10px;
      font-size: 0.65rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      box-shadow: 0 2px 6px rgba(229, 62, 62, 0.5);
    }
    .floating-loyalty-fab:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 28px rgba(236, 201, 75, 0.7);
    }
    .floating-loyalty-fab:focus-visible {
      outline: 3px solid var(--chalk-gold);
      outline-offset: 2px;
    }
    /* Expanded state when customer is identified */
    .floating-loyalty-fab.expanded {
      min-width: 140px;
    }
    .floating-loyalty-fab.expanded .fab-label { display: inline; }
    /* Hide FAB when controls bar blocks the area (same as waiter-fab) */
    body.fab-blocked .floating-loyalty-fab {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .waiter-fab:active { transform: scale(0.95); }
    @keyframes slideUp {
      from { transform: translate(-50%, 40px); opacity: 0; }
      to { transform: translate(-50%, 0); opacity: 1; }
    }

    /* Chef Specials Carousel & Top Banner */
    .chef-specials-section {
      background: linear-gradient(135deg, rgba(236, 201, 75, 0.12) 0%, rgba(14, 20, 18, 0.6) 100%);
      border: 1px dashed rgba(236, 201, 75, 0.45);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
    }
    .chef-specials-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .chef-specials-title {
      font-family: var(--font-chalk);
      font-size: 1.4rem;
      color: var(--chalk-gold);
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .chef-badge-gold {
      background: rgba(236, 201, 75, 0.2);
      border: 1px solid rgba(236, 201, 75, 0.6);
      color: var(--chalk-gold);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .chef-specials-carousel {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 6px;
      scrollbar-width: thin;
      scrollbar-color: rgba(236,201,75,0.4) transparent;
      -webkit-overflow-scrolling: touch;
    }
    .chef-specials-carousel::-webkit-scrollbar {
      height: 4px;
    }
    .chef-specials-carousel::-webkit-scrollbar-thumb {
      background: rgba(236,201,75,0.4);
      border-radius: 4px;
    }
    .chef-special-card {
      min-width: 240px;
      max-width: 260px;
      flex-shrink: 0;
      background: rgba(21, 29, 26, 0.9);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(236, 201, 75, 0.35);
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
      position: relative;
      transition: transform 0.2s, border-color 0.2s;
    }
    .chef-special-card:hover {
      transform: translateY(-2px);
      border-color: var(--chalk-gold);
    }
    .chef-special-thumb {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 8px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .chef-special-tag-ribbon {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(236, 201, 75, 0.95);
      color: #101614;
      font-size: 0.68rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .chef-special-name {
      font-family: var(--font-chalk);
      font-size: 1.25rem;
      color: var(--chalk-white);
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .chef-special-desc {
      font-size: 0.78rem;
      color: var(--chalk-dim);
      line-height: 1.3;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .chef-special-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 6px;
      border-top: 1px dashed rgba(255,255,255,0.08);
    }
    .chef-special-price {
      font-weight: 700;
      color: var(--chalk-gold);
      font-size: 1rem;
    }

    /* Push Notification Floating Prompt */
    .push-prompt-banner {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 440px;
      background: rgba(21, 29, 26, 0.95);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(236, 201, 75, 0.4);
      border-radius: 14px;
      padding: 12px 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      z-index: 999;
      display: none;
      align-items: center;
      gap: 12px;
      animation: slideUp 0.3s ease;
    }
    .push-prompt-icon {
      font-size: 1.6rem;
      flex-shrink: 0;
    }
    .push-prompt-content {
      flex: 1;
      min-width: 0;
    }
    .push-prompt-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--chalk-white);
      margin-bottom: 2px;
    }
    .push-prompt-desc {
      font-size: 0.74rem;
      color: var(--chalk-dim);
      line-height: 1.2;
    }
    .push-prompt-actions {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
    }
    .btn-push-accept {
      background: var(--chalk-gold);
      color: #101614;
      border: none;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.2s;
    }
    .btn-push-accept:hover { opacity: 0.9; }
    .btn-push-dismiss {
      background: transparent;
      border: none;
      color: var(--chalk-dim);
      font-size: 0.72rem;
      cursor: pointer;
      padding: 3px 6px;
      text-align: center;
    }
    .btn-push-dismiss:hover { color: var(--chalk-white); }

    /* Buttons & Nav Pills */
    .btn-nav {
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      color: var(--chalk-white);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    }
    .btn-nav:hover {
      border-color: var(--chalk-gold);
      color: var(--chalk-gold);
    }
    .btn-nav-gold {
      background: var(--chalk-gold);
      color: #101614;
      border-color: var(--chalk-gold);
      font-weight: 700;
    }
    .btn-nav-gold:hover {
      background: #dfb83b;
      color: #101614;
    }

    /* ── Armador de helado: CTA protagonista + builder de una pantalla ── */
    .icecream-hero {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      margin-bottom: 14px;
      padding: 15px 18px;
      border: 1px solid var(--border-gold);
      border-radius: 16px;
      cursor: pointer;
      color: var(--chalk-white);
      font-family: inherit;
      /* Superficie del TEMA (antes: gradiente dorado→verde hardcodeado, que en los
         temas claros de heladería se veía como un recuadro verde aislado). */
      background: linear-gradient(120deg, var(--chalk-gold-dim), var(--surface-card));
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.2s;
    }
    .icecream-hero:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
      border-color: var(--chalk-gold);
    }
    .icecream-hero .icw-hero-emoji { font-size: 2.1rem; line-height: 1; }
    .icecream-hero .icw-hero-text { flex: 1; min-width: 0; }
    .icecream-hero .icw-hero-text strong {
      display: block;
      font-family: var(--font-heading);
      font-size: 1.05rem;
      line-height: 1.2;
    }
    .icecream-hero .icw-hero-text small {
      display: block;
      margin-top: 2px;
      color: var(--chalk-muted);
      font-size: 0.8rem;
    }
    .icecream-hero .icw-hero-cta {
      flex-shrink: 0;
      background: var(--chalk-gold);
      color: #101614;
      font-weight: 800;
      border-radius: 10px;
      padding: 9px 14px;
      font-size: 0.85rem;
      white-space: nowrap;
    }

    /* ── Estilos del botón armador (6 variantes premium de heladería) ──────
       Elegibles en Studio (restaurant.iceCreamButtonStyle → style-<clave>).
       Todos usan gradientes y brillos propios para que, de un vistazo, se lea
       "heladería artesanal" en cualquier theme claro u oscuro. `clasico`
       conserva el look anterior (superficie del tema). */
    .icecream-hero.style-clasico {
      background: linear-gradient(120deg, var(--chalk-gold-dim), var(--surface-card));
    }
    /* FIESTA: confeti rosa-celeste-limón sobre blanco, borde doble festivo */
    .icecream-hero.style-fiesta {
      background:
        radial-gradient(circle at 12% 20%, rgba(255, 92, 138, 0.22) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 18%, rgba(76, 201, 240, 0.22) 0 9px, transparent 10px),
        radial-gradient(circle at 22% 85%, rgba(255, 210, 63, 0.25) 0 8px, transparent 9px),
        radial-gradient(circle at 80% 82%, rgba(184, 146, 240, 0.22) 0 9px, transparent 10px),
        linear-gradient(120deg, #FFF0F6 0%, #FFFFFF 55%, #E8FBFF 100%);
      border: 2px solid #FF5C8A;
      box-shadow: 0 6px 22px rgba(255, 92, 138, 0.22);
      color: #4A1F30;
    }
    .icecream-hero.style-fiesta .icw-hero-text small { color: #7A4A5C; }
    .icecream-hero.style-fiesta .icw-hero-cta {
      background: linear-gradient(120deg, #FF5C8A, #FF8FAB);
      color: #fff;
      box-shadow: 0 4px 14px rgba(255, 92, 138, 0.45);
    }
    /* PREMIUM DORADO: crema marfil con filete oro, sello de gelateria italiana */
    .icecream-hero.style-premium {
      background: linear-gradient(120deg, #FBF3E2 0%, #FFFFFF 50%, #F6ECD8 100%);
      border: 2px solid #C9A227;
      box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(201, 162, 39, 0.5), 0 8px 24px rgba(160, 120, 30, 0.20);
      color: #3E2C14;
    }
    .icecream-hero.style-premium .icw-hero-text strong { letter-spacing: 0.02em; }
    .icecream-hero.style-premium .icw-hero-text small { color: #7A6234; }
    .icecream-hero.style-premium .icw-hero-cta {
      background: linear-gradient(120deg, #C9A227, #E8C35A);
      color: #241A05;
      border: 1px solid #9A7A1A;
    }
    /* TROPICAL: mango-coral-turquesa vibrante, energía de verano */
    .icecream-hero.style-tropical {
      background: linear-gradient(115deg, #FFF1DE 0%, #FFE3E3 45%, #DFFBF3 100%);
      border: 2px solid transparent;
      border-radius: 18px;
      background-clip: padding-box;
      position: relative;
      box-shadow: 0 8px 24px rgba(255, 122, 0, 0.22);
      color: #3B2A1E;
    }
    .icecream-hero.style-tropical::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 20px;
      padding: 2px;
      background: linear-gradient(115deg, #FF7A00, #FF5A5F 50%, #17B8A6);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .icecream-hero.style-tropical .icw-hero-text small { color: #6E523A; }
    .icecream-hero.style-tropical .icw-hero-cta {
      background: linear-gradient(120deg, #FF7A00, #FF5A5F);
      color: #fff;
      box-shadow: 0 4px 14px rgba(255, 90, 95, 0.45);
    }
    /* NUBE: vainilla y celeste aireado, bordes suaves de nube */
    .icecream-hero.style-nube {
      background: linear-gradient(120deg, #FFFFFF 0%, #F0FAFF 60%, #E2F3FF 100%);
      border: 2px dashed rgba(30, 154, 197, 0.55);
      border-radius: 22px;
      box-shadow: 0 6px 20px rgba(30, 154, 197, 0.16);
      color: #1E3440;
    }
    .icecream-hero.style-nube .icw-hero-text small { color: #4A6A7A; }
    .icecream-hero.style-nube .icw-hero-cta {
      background: linear-gradient(120deg, #1E9AC5, #4CC9F0);
      color: #fff;
      border-radius: 999px;
      box-shadow: 0 4px 14px rgba(30, 154, 197, 0.40);
    }
    /* NOCHE: cacao oscuro con brillo dorado, premium nocturno */
    .icecream-hero.style-noche {
      background: linear-gradient(120deg, #2A1A12 0%, #3B241B 55%, #241410 100%);
      border: 2px solid rgba(224, 176, 74, 0.65);
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(224, 176, 74, 0.25);
      color: #F5E6D3;
    }
    .icecream-hero.style-noche .icw-hero-text small { color: #D9C3A9; }
    .icecream-hero.style-noche .icw-hero-cta {
      background: linear-gradient(120deg, #E0B04A, #F6D47A);
      color: #241410;
      box-shadow: 0 4px 16px rgba(224, 176, 74, 0.45);
    }

    /* ── Barra de idioma (🌐 desplegable) y moneda: superficie del tema ──
       Antes la barra tenía fondo negro translúcido hardcodeado (bloque aislado
       en temas claros) y mostraba pastillas ES/EN/PT aunque el local no tuviera
       traducciones. Ahora: fondo/borde del tema y el selector de idioma es un
       ícono 🌐 que despliega las lenguas realmente disponibles (se oculta entero
       si no hay idiomas alternativos). */
    .i18n-currency-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 0.8rem;
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      border-radius: 20px;
      padding: 4px 12px;
    }
    .i18n-currency { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    /* Probador de temas de la demo: pastilla dentro de la barra sticky (no un
       FAB flotante), para no tapar el buscador, la moneda ni el botón del mozo. */
    .i18n-demo-theme {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.25);
      background: var(--chalk-gold);
      color: #101614;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.2px;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
      transition: transform 0.15s ease, filter 0.15s ease;
    }
    .i18n-demo-theme:hover { filter: brightness(1.07); transform: translateY(-1px); }
    .i18n-demo-theme:active { transform: translateY(0); }
    .i18n-demo-theme:focus-visible {
      outline: 2px solid var(--chalk-white);
      outline-offset: 2px;
    }
    /* Ticket térmico: su acento es rojo oscuro → texto claro encima. */
    body.theme-ticket .i18n-demo-theme { color: #FFF8F0; }
    /* El panel cuelga del <body> con position:fixed (lo posiciona menu.js):
       así ningún stacking context del tema lo tapa. */
    #demoThemePanel {
      position: fixed;
      z-index: 9000;
      width: min(320px, calc(100vw - 24px));
      max-height: 46vh;
      overflow-y: auto;
      background: #131B17;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      color: #EAF2EC;
    }
    /* Superficie PROPIA del panel (no var(--surface-card)): los temas que
       re-escopean esa variable a superficies claras (explosivo en classic =
       crema #FFF9E6) dejaban el panel crema-con-texto-crema (pills
       invisibles, bug oct-2026). El panel es de la APP, no del tema:
       fondo carbón fijo + texto claro explícito, tema-agnóstico.
       glass-gastro: base sólida propia (su overlay es translúcido). */
    body.theme-glass-gastro #demoThemePanel { background: #0C1626; }
    .i18n-demo-theme-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .i18n-demo-theme-head strong { font-size: 0.85rem; }
    .i18n-demo-theme-head button {
      background: none;
      border: none;
      color: inherit;
      font-size: 1rem;
      cursor: pointer;
      padding: 2px 4px;
    }
    #demoThemePills { display: flex; flex-wrap: wrap; gap: 6px; }
    .demo-theme-section { margin-top: 10px; }
    .demo-theme-section-label {
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      opacity: 0.75;
      margin-bottom: 6px;
      color: #EAF2EC;
    }
    .demo-neon-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
    .demo-neon-swatch {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.25);
      cursor: pointer;
      padding: 0;
      background: none;
      transition: transform 0.15s ease;
    }
    .demo-neon-swatch:hover { transform: scale(1.12); }
    .demo-neon-swatch[aria-pressed="true"] {
      border: 2px solid #EAF2EC;
      box-shadow: 0 0 0 3px rgba(234, 242, 236, 0.18);
    }
    .demo-neon-hexrow { display: flex; gap: 6px; align-items: center; }
    .demo-neon-hexrow input[type="color"] {
      width: 48px;
      height: 32px;
      padding: 2px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: transparent;
      cursor: pointer;
    }
    /* Pills del probador: clase propia (antes era 100% inline, sin trayecto
       de hover). Estados garantizados sobre la superficie fija del panel:
       inactivo = borde tenue claro; activo = estado a11y [aria-pressed] con
       el acento dorado del tema. Hover/focus siempre visibles. */
    .demo-theme-pill {
      padding: 6px 10px;
      border-radius: 16px;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: transparent;
      color: inherit;
      transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .demo-theme-pill:hover { background: rgba(255, 255, 255, 0.08); }
    .demo-theme-pill:active { transform: translateY(1px); }
    .demo-theme-pill:focus-visible { outline: 2px solid #EAF2EC; outline-offset: 2px; }
    .demo-theme-pill[aria-pressed="true"] {
      border-color: var(--border-gold, #D4A853);
      background: rgba(212, 168, 83, 0.2);
    }
    .i18n-demo-theme-foot { font-size: 0.7rem; opacity: 0.7; margin-top: 8px; }
    .i18n-currency-icon { color: var(--chalk-dim); }
    .i18n-currency-select {
      background: transparent;
      color: var(--chalk-gold-ink, var(--chalk-gold));
      border: 1px solid var(--border-gold);
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 6px;
      outline: none;
      cursor: pointer;
    }
    .i18n-lang { position: relative; display: flex; align-items: center; }
    .i18n-lang-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: 1px solid var(--border-gold);
      color: var(--chalk-gold-ink, var(--chalk-gold));
      border-radius: 12px;
      padding: 3px 9px;
      font-family: inherit;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
    }
    .i18n-lang-trigger:hover { background: var(--chalk-gold-dim); }
    .i18n-lang-caret { font-size: 0.6rem; }
    .i18n-lang-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 60;
      min-width: 160px;
      background: var(--surface-card);
      border: 1px solid var(--border-gold);
      border-radius: 12px;
      padding: 4px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
      display: none;
    }
    .i18n-lang-menu.is-open { display: block; }
    .i18n-lang-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      background: transparent;
      border: none;
      color: var(--chalk-white);
      font-family: inherit;
      font-size: 0.78rem;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
    }
    .i18n-lang-option:hover { background: var(--chalk-gold-dim); }
    .i18n-lang-option.is-active { color: var(--chalk-gold-ink, var(--chalk-gold)); font-weight: 700; }
    .i18n-lang-option .i18n-lang-check { color: var(--chalk-gold-ink, var(--chalk-gold)); }

    /* Armador: los pasos 2 y 3 recién aparecen tras elegir tamaño (menos ruido). */
    .icw-section[hidden] { display: none; }
    .icw-size-pending { margin: 10px 0 0; font-size: 0.78rem; color: var(--chalk-muted); }

    .ice-cream-wizard-box {
      max-width: 640px;
      max-height: 92dvh;
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .icw-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border-chalk);
    }
    .icw-title { font-family: var(--font-heading); font-size: 1.35rem; color: var(--chalk-white); margin: 0; }
    .icw-subtitle { margin: 4px 0 0; font-size: 0.82rem; color: var(--chalk-muted); }
    .icw-close { position: static; }
    .icw-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .icw-step {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      font-size: 1rem;
      font-weight: 700;
      color: var(--chalk-white);
    }
    .icw-step-num {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--chalk-gold);
      color: #101614;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 800;
      flex-shrink: 0;
    }
    .icw-counter { margin-left: auto; font-family: var(--font-mono); font-size: 0.82rem; color: var(--chalk-gold-ink, var(--chalk-gold)); }
    .icw-optional {
      margin-left: auto;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--chalk-dim);
    }

    .icw-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .icw-size {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 14px 10px 12px;
      background: var(--surface-card);
      border: 2px solid var(--border-chalk);
      border-radius: 14px;
      cursor: pointer;
      color: var(--chalk-white);
      font-family: inherit;
      transition: border-color 0.15s, background-color 0.15s;
    }
    .icw-size:hover { border-color: var(--border-gold); }
    .icw-size.is-selected { border-color: var(--chalk-gold); background: var(--chalk-gold-dim); }
    .icw-size-icon { font-size: 1.9rem; line-height: 1; }
    .icw-size-name { font-size: 0.85rem; font-weight: 700; text-align: center; }
    .icw-size-cap { font-size: 0.7rem; color: var(--chalk-muted); }
    .icw-size-price { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--chalk-gold-ink, var(--chalk-gold)); }
    .icw-size-badge {
      position: absolute;
      top: -8px; left: 10px;
      background: var(--chalk-gold);
      color: #0E1412;
      font-size: 0.62rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 10px;
    }

    .icw-chips {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 6px;
      margin-bottom: 12px;
      scrollbar-width: none;
    }
    .icw-chips::-webkit-scrollbar { display: none; }

    .icw-flavors { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
    .icw-flavor {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      text-align: left;
      padding: 11px 12px;
      background: var(--surface-card);
      border: 1.5px solid var(--border-chalk);
      border-radius: 12px;
      cursor: pointer;
      color: var(--chalk-white);
      font-family: inherit;
      transition: border-color 0.15s, background-color 0.15s;
    }
    .icw-flavor:hover { border-color: var(--border-gold); }
    .icw-flavor.is-selected { border-color: var(--chalk-gold); background: var(--chalk-gold-dim); }
    .icw-flavor.is-disabled { opacity: 0.45; cursor: not-allowed; }
    .icw-flavor-check {
      flex-shrink: 0;
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border-chalk);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.78rem;
      font-weight: 800;
      color: transparent;
    }
    .icw-flavor.is-selected .icw-flavor-check {
      background: var(--chalk-gold);
      border-color: var(--chalk-gold);
      color: #101614;
    }
    .icw-flavor-info { display: flex; flex-direction: column; min-width: 0; }
    .icw-flavor-name { font-size: 0.9rem; font-weight: 700; }
    .icw-flavor-desc { font-size: 0.76rem; color: var(--chalk-dim); margin-top: 2px; }
    .icw-flavor-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .icw-hint { margin: 10px 0 0; font-size: 0.78rem; color: var(--chalk-muted); }

    .icw-toppings-group { margin-bottom: 14px; }
    .icw-toppings-group:last-child { margin-bottom: 0; }
    .icw-toppings-group h4 {
      margin: 0 0 8px;
      font-size: 0.76rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--chalk-muted);
    }
    .icw-toppings { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
    .icw-topping {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      background: var(--surface-card);
      border: 1.5px solid var(--border-chalk);
      border-radius: 10px;
      cursor: pointer;
      color: var(--chalk-white);
      font-family: inherit;
      text-align: left;
      transition: border-color 0.15s, background-color 0.15s;
    }
    .icw-topping:hover { border-color: var(--border-gold); }
    .icw-topping.is-selected { border-color: var(--chalk-gold); background: var(--chalk-gold-dim); }
    .icw-topping-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .icw-topping-ico { font-size: 1.2rem; }
    .icw-topping-text { display: flex; flex-direction: column; }
    .icw-topping-name { font-size: 0.82rem; font-weight: 600; }
    .icw-topping-price { font-family: var(--font-mono); font-size: 0.74rem; color: var(--chalk-gold-ink, var(--chalk-gold)); }
    .icw-topping-check { color: var(--chalk-gold-ink, var(--chalk-gold)); font-weight: 800; }

    .icw-footer {
      position: sticky;
      bottom: 0;
      padding: 12px 20px 16px;
      background: var(--surface-card);
      border-top: 1px solid var(--border-gold);
      box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
    }
    .icw-summary { margin-bottom: 8px; font-size: 0.78rem; color: var(--chalk-muted); }
    .icw-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .icw-total { display: flex; flex-direction: column; }
    .icw-total span { font-size: 0.72rem; color: var(--chalk-muted); }
    .icw-total strong { font-family: var(--font-mono); font-size: 1.3rem; color: var(--chalk-gold-ink, var(--chalk-gold)); }
    .icw-add { width: auto; flex: 1; max-width: 250px; }
    .icw-add:disabled { opacity: 0.5; cursor: not-allowed; }

    @media (max-width: 420px) {
      .icw-sizes { grid-template-columns: repeat(2, 1fr); }
      .icw-flavors { grid-template-columns: 1fr; }
    }

    /* Modals (Cart & Wi-Fi) */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(8, 12, 10, 0.85);
      backdrop-filter: blur(8px);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .modal-overlay.active { display: flex; }
    #dishNoteModal { z-index: 1001; }
    #dishNoteModal .dish-note-modal {
      width: min(100%, 620px);
      max-height: min(90dvh, 780px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #dishChoiceContainer { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 5px 4px 0; }
    .modal-box {
      background: var(--surface-card);
      border: 1px solid var(--border-gold);
      border-radius: 16px;
      width: 100%;
      max-width: 500px;
      padding: 24px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }
    .modal-close {
      position: absolute;
      top: 14px; right: 16px;
      background: transparent;
      border: none;
      color: var(--chalk-dim);
      font-size: 20px;
      cursor: pointer;
    }
    .modal-title {
      font-family: var(--font-heading);
      font-size: 1.35rem;
      color: var(--chalk-white);
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border-chalk);
      padding-bottom: 8px;
    }

    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--border-chalk);
      gap: 10px;
    }
    .cart-item-title { font-size: 0.92rem; font-weight: 600; color: var(--chalk-white); }
    .cart-item-price { font-family: var(--font-mono); font-size: 0.88rem; color: var(--chalk-gold); }
    .cart-item-note {
      margin-top: 4px;
      color: var(--chalk-muted);
      font-size: 0.8rem;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .cart-note-edit {
      margin-top: 5px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--chalk-gold);
      font: inherit;
      font-size: 0.78rem;
      cursor: pointer;
    }
    .dish-note-dish-name {
      margin: -6px 0 18px;
      color: var(--chalk-gold);
      font-weight: 600;
      overflow-wrap: anywhere;
    }
    .dish-choice-group { margin: 0 0 16px; padding: 0; border: 0; }
    .dish-choice-legend { margin-bottom: 8px; color: var(--chalk-muted); font-size: 0.84rem; font-weight: 700; }
    .dish-choice-list { display: grid; gap: 7px; }
    .dish-choice-option {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border: 1px solid var(--border-chalk);
      border-radius: 6px;
      color: var(--chalk-white);
      font-size: 0.88rem;
      cursor: pointer;
    }
    .dish-choice-option input { accent-color: var(--chalk-gold); }
    .dish-choice-price { margin-left: auto; color: var(--chalk-gold); font-size: 0.8rem; }
    .dish-choice-quantity { justify-content: space-between; }
    .dish-choice-quantity > span { display: grid; gap: 3px; min-width: 0; }
    .dish-choice-quantity > span .dish-choice-price { margin: 0; }
    .dish-choice-stepper { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .dish-choice-step {
      width: 32px;
      height: 34px;
      border: 1px solid var(--border-chalk);
      border-radius: 6px;
      background: var(--bg-chalkboard);
      color: var(--chalk-white);
      font-size: 18px;
      cursor: pointer;
    }
    .dish-choice-step:disabled { opacity: 0.4; cursor: not-allowed; }
    .dish-variant-count { width: 54px; min-height: 34px; margin: 0; padding: 5px; text-align: center; }
    .dish-split-hint { margin: 0 0 5px; color: var(--chalk-dim); font-size: 0.76rem; }
    .dish-variant-total { display: block; margin-top: 7px; color: var(--chalk-muted); font-size: 0.8rem; font-weight: 700; text-align: right; }
    .dish-variant-total.invalid, .dish-choice-error { color: #FC8181; }
    .dish-choice-error { min-height: 1.1em; margin: 0 0 10px; font-size: 0.8rem; }
    .cart-item-options { margin-top: 4px; color: var(--chalk-muted); font-size: 0.8rem; }
    .dish-note-modal .form-textarea { resize: vertical; min-height: 88px; }
    .dish-note-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
    .dish-note-actions { flex: 0 0 auto; padding-top: 8px; background: var(--surface-card); }
    .dish-note-cancel, .dish-note-confirm {
      min-height: 40px;
      padding: 8px 14px;
      border-radius: 6px;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
    .dish-note-cancel { color: var(--chalk-muted); background: transparent; border: 1px solid var(--border-chalk); }
    .dish-note-confirm { color: #101614; background: var(--chalk-gold); border: 1px solid var(--chalk-gold); }
    .dish-note-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

    @media (max-width: 520px) {
      #dishNoteModal { padding: 10px; }
      #dishNoteModal .dish-note-modal { width: 100%; max-height: 92dvh; padding: 18px; }
      .dish-choice-option { gap: 7px; padding: 8px; }
      .dish-choice-quantity { align-items: center; }
      .dish-choice-step { width: 30px; }
      .dish-note-actions { display: grid; grid-template-columns: 1fr 1.4fr; }
      .dish-note-cancel, .dish-note-confirm { padding: 8px; font-size: 0.84rem; }
    }
    .cart-qty-ctrl {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-qty {
      background: var(--bg-chalkboard);
      border: 1px solid var(--border-chalk);
      color: var(--chalk-white);
      width: 26px; height: 26px;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }

    .form-section { margin-top: 16px; }
    .form-label {
      display: block;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--chalk-muted);
      margin-bottom: 6px;
    }
    .form-select, .form-input, .form-textarea {
      width: 100%;
      background: #0E1412;
      border: 1px solid var(--border-chalk);
      border-radius: 8px;
      padding: 10px 12px;
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.9rem;
      margin-bottom: 12px;
      outline: none;
    }
    .form-select:focus, .form-input:focus, .form-textarea:focus {
      border-color: var(--chalk-gold);
    }

    .total-summary {
      background: #111715;
      border: 1px solid var(--border-chalk);
      border-radius: 8px;
      padding: 12px 14px;
      margin: 16px 0;
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--chalk-muted);
      margin-bottom: 4px;
    }
    .summary-row.total-row {
      font-size: 1.1rem;
      font-weight: 700;
      color: #fff;
      border-top: 1px solid var(--border-chalk);
      padding-top: 8px;
      margin-top: 6px;
    }
    .summary-row.total-row span.total-amount { color: var(--chalk-gold); font-family: var(--font-mono); }

    .btn-wa-submit {
      width: 100%;
      background: #25D366;
      color: #0E1412;
      border: none;
      padding: 14px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .btn-wa-submit:hover { background: #20BA5A; }

    /* Empty state or Loading */
    .loading-spinner {
      text-align: center;
      padding: 60px 20px;
      color: var(--chalk-gold);
      font-family: var(--font-chalk);
      font-size: 1.6rem;
    }

    /* ============================================================
       VISUAL REFINEMENTS (Inspired by Uruguayan Restaurant References)
       ============================================================ */

    /* 1. Top Loyalty Bar (Tarjeta de Puntos & Recompensas) */
    .loyalty-top-bar {
      background: linear-gradient(90deg, #D49B00, #F59E0B);
      color: #0E1412;
      padding: 9px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      user-select: none;
      transition: opacity 0.2s, transform 0.2s;
    }
    .loyalty-top-bar:hover {
      opacity: 0.96;
    }
    .loyalty-top-content {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: 0.88rem;
      letter-spacing: 0.2px;
    }
    .loyalty-star-icon {
      font-size: 1.1rem;
    }
    .loyalty-user-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: #0E1412;
      transition: background-color 0.2s;
    }
    .loyalty-top-bar:hover .loyalty-user-btn {
      background: rgba(0, 0, 0, 0.25);
    }

    /* 2. Restaurant Header Refinements */
    .restaurant-cover-banner {
      width: 100%;
      height: 140px;
      background: linear-gradient(180deg, rgba(0,0,0,0.2), #101614), url('/logo-scango.png') center/cover no-repeat;
      position: relative;
    }
    .header-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .header-social-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .social-btn-round {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(255,255,255,0.4);
      color: #101614;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      line-height: 1;
      box-shadow: 0 2px 8px rgba(0,0,0,0.22);
      transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .social-btn-round img {
      width: 18px;
      height: 18px;
      display: block;
    }
    .social-btn-round:hover {
      transform: translateY(-2px);
      border-color: var(--chalk-gold);
      box-shadow: 0 5px 14px rgba(0,0,0,0.32);
    }
    .btn-info-modal {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 20px;
      padding: 6px 14px;
      color: var(--chalk-white);
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn-info-modal:hover {
      background: rgba(255,255,255,0.18);
      border-color: var(--chalk-gold);
      color: var(--chalk-gold);
    }
    .status-pill-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .status-pill {
      font-size: 0.76rem;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .status-pill.open { background: rgba(225, 169, 56, 0.18); color: #E1A938; border: 1px solid rgba(225, 169, 56, 0.4); }
    .status-pill.closed { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
    .status-pill.order-later { background: rgba(255, 255, 255, 0.08); color: var(--chalk-muted); border: 1px solid var(--border-chalk); }

    /* 3. Category Navigation Bar (Pills + Quick Buttons) */
    .category-nav-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .cat-nav-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      color: var(--chalk-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.2s, color 0.2s, background-color 0.2s;
    }
    .cat-nav-icon-btn:hover {
      border-color: var(--chalk-gold);
      color: var(--chalk-gold);
    }

    /* 4. Visual Destacados Carousel / Grid */
    .destacados-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 4px 2px 14px 2px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .destacados-grid::-webkit-scrollbar { display: none; }
    .destacado-card {
      min-width: 145px;
      max-width: 155px;
      flex-shrink: 0;
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      border-radius: 12px;
      overflow: hidden;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: transform 0.2s, border-color 0.2s;
    }
    .destacado-card:hover {
      transform: translateY(-2px);
      border-color: var(--chalk-gold);
    }
    .destacado-img-wrap {
      width: 100%;
      height: 125px;
      position: relative;
      background: #151E1A;
    }
    .destacado-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .destacado-logo-badge {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.4);
      background: #101614;
      object-fit: cover;
    }
    .destacado-btn-add {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #EF4444;
      color: #fff;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
      transition: transform 0.15s, background-color 0.15s;
    }
    .destacado-btn-add:hover {
      transform: scale(1.1);
      background: #DC2626;
    }
    .destacado-info {
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .destacado-price {
      font-size: 0.98rem;
      font-weight: 800;
      color: var(--chalk-white);
      font-family: var(--font-mono);
    }
    .destacado-name {
      font-size: 0.82rem;
      color: var(--chalk-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 5. Horizontal Dish Card with Photo on Right & Overlay Add Button */
    .dish-card-horizontal {
      background: var(--surface-card);
      border: 1px solid var(--border-chalk);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 14px;
      margin-bottom: 12px;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .dish-card-horizontal:hover {
      background: var(--surface-card-hover);
      border-color: rgba(255,255,255,0.2);
    }
    .dish-info-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
    }
    .dish-photo-col {
      width: 92px;
      height: 92px;
      position: relative;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
      background: #151E1A;
      border: 1px solid var(--border-chalk);
    }
    .dish-photo-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .btn-add-float {
      position: absolute;
      bottom: 5px;
      right: 5px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #EF4444;
      color: #fff;
      font-size: 1.15rem;
      font-weight: bold;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      transition: transform 0.15s, background-color 0.15s;
    }
    .btn-add-float:hover {
      transform: scale(1.1);
      background: #DC2626;
    }

    /* 6. General Info Modal Styles */
    .info-modal-box {
      max-width: 480px;
      padding: 22px;
      background: #16201C;
      border: 1px solid var(--border-chalk);
      border-radius: 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.7);
    }
    .info-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-chalk);
    }
    .info-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .info-modal-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }
    .info-header-actions {
      display: flex;
      gap: 6px;
    }
    .info-action-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border-chalk);
      color: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      transition: background-color 0.2s, color 0.2s;
    }
    .info-action-btn:hover {
      background: var(--chalk-gold);
      color: #101614;
    }
    .info-section {
      margin-bottom: 20px;
    }
    .info-section-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
    }
    .info-address-box {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: rgba(255,255,255,0.04);
      padding: 12px;
      border-radius: 10px;
      border: 1px solid var(--border-chalk);
      font-size: 0.88rem;
      line-height: 1.4;
      color: var(--chalk-muted);
    }
    .info-directions-link {
      display: inline-block;
      margin-top: 8px;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--chalk-gold);
      text-decoration: none;
      border: 1px solid var(--border-gold);
      border-radius: 8px;
      padding: 7px 12px;
      background: var(--chalk-gold-dim);
    }
    .info-directions-link:hover { filter: brightness(1.15); }
    .service-cards-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .service-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-chalk);
      border-radius: 10px;
      padding: 12px 14px;
    }
    .service-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    .service-title-group {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-size: 0.92rem;
    }
    .service-check {
      color: #4ade80;
      font-weight: 800;
      font-size: 1rem;
    }
    .service-detail {
      font-size: 0.8rem;
      color: var(--chalk-dim);
      margin-bottom: 2px;
    }
    .service-subnote {
      font-size: 0.75rem;
      color: #f59e0b;
    }
    .schedule-days-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .schedule-day-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 0.84rem;
      color: var(--chalk-muted);
    }
    .schedule-day-row.today {
      background: rgba(56, 178, 172, 0.18);
      border: 1px solid rgba(56, 178, 172, 0.5);
      color: #38bdf8;
      font-weight: 700;
    }
    .schedule-day-name {
      font-weight: 600;
      min-width: 80px;
    }
    .schedule-day-hours {
      font-family: var(--font-mono);
      font-size: 0.82rem;
    }
    .schedule-day-hours.closed {
      color: #f87171;
      font-weight: 600;
    }
    .schedule-time-val {
      font-family: var(--font-mono);
      font-size: 0.82rem;
    }
    .schedule-closed {
      color: #f87171;
      font-weight: 600;
    }
    .info-modal-body {
      max-height: 65vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.15) transparent;
    }

    /* ==========================================================================
       HERO BANNER (PORTADA SUPERIOR RESPONSIVA)
       ========================================================================== */
    .menu-banner-hero {
      position: relative;
      width: 100%;
      height: 250px;
      min-height: 220px;
      max-height: 280px;
      margin-bottom: 34px;
      overflow: visible;
    }
    .menu-banner-media {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #0E1412;
      border-bottom: 1px solid var(--border-chalk);
    }
    .menu-banner-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .menu-banner-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, #0E1412 100%);
      pointer-events: none;
      z-index: 1;
    }
    body.has-hero-banner .menu-header {
      padding-top: 44px;
      position: relative;
      z-index: 2;
    }
    .menu-banner-logo-slot {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: -34px;
      width: 76px;
      height: 76px;
      transform: translateX(-50%);
    }
    .menu-banner-logo-slot #restaurantLogoContainer,
    .menu-banner-logo-slot .restaurant-logo {
      width: 76px;
      height: 76px;
      margin: 0;
    }
    .menu-banner-logo-slot .restaurant-logo {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
      border-color: var(--chalk-gold);
    }
    .menu-banner-status-slot {
      position: absolute;
      z-index: 3;
      top: 12px;
      right: 12px;
      max-width: calc(100% - 24px);
    }
    .menu-banner-status-slot .status-pill {
      max-width: 100%;
      white-space: normal;
      text-align: center;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* ==========================================================================
       MORFOLOGÍA 1: BENTO GRID (MODERNA & MODULAR)
       Ideal para Cafeterías de especialidad, Brunch & Fast-Good
       ========================================================================== */
    body.layout-bento .dishes-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
    }
    body.layout-bento .dish-card {
      flex-direction: column !important;
      align-items: stretch !important;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 14px !important;
      background: rgba(22, 33, 28, 0.75) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    }
    body.layout-bento .dish-card:hover {
      transform: translateY(-3px);
      border-color: rgba(236, 201, 75, 0.4) !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    }
    body.layout-bento .dish-thumb {
      width: 100% !important;
      height: 140px !important;
      aspect-ratio: 16 / 9;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      object-fit: cover !important;
      display: block;
    }
    body.layout-bento .dish-body {
      padding: 14px 14px 8px 14px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    body.layout-bento .dish-title-line {
      margin-bottom: 6px;
    }
    body.layout-bento .dish-name {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--chalk-white);
    }
    body.layout-bento .dish-desc {
      font-size: 0.82rem;
      line-height: 1.4;
      color: var(--chalk-dim);
      margin-bottom: 10px;
      flex: 1;
    }
    body.layout-bento .dish-action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 14px 14px 14px;
      width: 100%;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    body.layout-bento .dish-price {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--chalk-gold);
    }
    body.layout-bento .btn-add {
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 0.95rem;
      height: 34px;
    }

    /* ==========================================================================
       MORFOLOGÍA 2: MINIMALIST → FINE DINING (EDITORIAL DE ALTA COCINA)
       Marfil editorial para alta cocina: el layout MANDA sobre los themes
       (redefine sus variables: los themes solo tiñen acentos puntuales).
       Filetes finos, serif Playfair, mono para precios y mucho aire, en una
       sola columna (max 760px) tipo carta impresa.
       Fotos: default `hero` (una foto protagonista por categoría); el dueño
       puede volver a `grid` (miniaturas) o `none` (pura tipografía).
       Ver imageMode en api/utils/themeManifest.js.
       ========================================================================== */
    body.layout-minimalist {
      --bg-chalkboard: #F7F4ED;
      --surface-card: transparent;
      --surface-card-hover: rgba(25, 23, 19, 0.04);
      --chalk-white: #191713;
      --chalk-muted: #4A463D;
      --chalk-dim: #6E6A5F;
      --chalk-gold: #8A6D3B;
      --border-chalk: rgba(25, 23, 19, 0.16);
      background-color: #F7F4ED !important;
      color: #191713;
    }
    body.layout-minimalist .menu-container { max-width: 760px; }
    body.layout-minimalist .menu-header {
      padding: 44px 20px 26px;
      border-bottom: 1px solid rgba(25, 23, 19, 0.16);
      margin-bottom: 30px;
      background: transparent !important;
      /* El base re-scopea las tintas a claro asumiendo header oscuro; acá el
         header va en papel → vuelven a tinta (Información y controles genéricos) */
      --chalk-white: #191713;
      --chalk-muted: #4A463D;
      --chalk-dim: #6E6A5F;
    }
    body.layout-minimalist .restaurant-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #191713 !important;
    }
    body.layout-minimalist .restaurant-slogan {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-style: italic;
      letter-spacing: 0.02em;
      color: #6E6A5F !important;
    }
    /* Estado abierto/cerrado legible sobre papel (los themes usan tinta clara) */
    body.layout-minimalist .status-pill.open {
      background: rgba(31, 111, 74, 0.1);
      color: #1F6F4A;
      border-color: rgba(31, 111, 74, 0.35);
    }
    body.layout-minimalist .status-pill.closed {
      background: rgba(160, 53, 53, 0.08);
      color: #A03535;
      border-color: rgba(160, 53, 53, 0.35);
    }
    body.layout-minimalist .status-pill.order-later {
      background: rgba(25, 23, 19, 0.06);
      color: #4A463D;
      border-color: rgba(25, 23, 19, 0.2);
    }
    /* Buscador y pills: papel con tinta (el base es oscuro pensando en pizarrón) */
    body.layout-minimalist .controls-wrapper {
      background: rgba(247, 244, 237, 0.96);
      border-bottom-color: rgba(25, 23, 19, 0.16);
    }
    body.layout-minimalist .search-box {
      background: #FFFDF8 !important;
      border: 1px solid rgba(25, 23, 19, 0.18) !important;
      color: #191713 !important;
    }
    body.layout-minimalist .search-box:focus { border-color: #191713 !important; }
    body.layout-minimalist .cat-pill {
      background: transparent !important;
      border: 1px solid rgba(25, 23, 19, 0.25) !important;
      color: #4A463D !important;
      border-radius: 999px;
    }
    body.layout-minimalist .cat-pill.active {
      background: #191713 !important;
      border-color: #191713 !important;
      color: #F7F4ED !important;
    }
    /* Botón Información: el base usa --chalk-white claro (temas oscuros) y
       vive DIRECTO sobre el papel de la cabecera → ilegible en marfil */
    body.layout-minimalist .btn-info-modal {
      background: rgba(25, 23, 19, 0.05);
      border: 1px solid rgba(25, 23, 19, 0.25);
      color: #4A463D;
    }
    body.layout-minimalist .btn-info-modal:hover {
      background: rgba(25, 23, 19, 0.1);
      border-color: #191713;
      color: #191713;
    }
    /* Stories y accesibilidad: el texto base es blanco (barra "pizarrón") */
    body.layout-minimalist .st-ring { color: #191713; }
    body.layout-minimalist .btn-a11y-tts { color: #6E6A5F; }
    body.layout-minimalist .i18n-currency-select { color: #6E6A5F; }
    body.layout-minimalist .category-block { margin-bottom: 36px; }
    body.layout-minimalist .category-header-row {
      border-bottom: 1px solid rgba(25, 23, 19, 0.28);
      padding-bottom: 8px;
      margin-bottom: 4px;
    }
    body.layout-minimalist .category-title {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 1.4rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #191713 !important;
      text-transform: none;
    }
    body.layout-minimalist .category-badge-count {
      color: #6E6A5F !important;
      font-weight: 400;
      letter-spacing: 0;
    }
    body.layout-minimalist .dishes-grid { gap: 0; }
    body.layout-minimalist .dish-card {
      background: transparent !important;
      border: none !important;
      border-bottom: 1px solid rgba(25, 23, 19, 0.1) !important;
      border-radius: 0 !important;
      padding: 18px 2px !important;
      box-shadow: none !important;
      align-items: center !important;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    body.layout-minimalist .dish-card:hover {
      background: rgba(25, 23, 19, 0.04) !important;
      border-bottom-color: rgba(25, 23, 19, 0.3) !important;
    }
    body.layout-minimalist .dish-thumb {
      width: 64px !important;
      height: 64px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(25, 23, 19, 0.14) !important;
      object-fit: cover !important;
      margin-right: 4px;
      filter: none;
    }
    body.layout-minimalist .dish-name {
      font-family: 'Playfair Display', Georgia, serif !important;
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: 0;
      color: #191713 !important;
    }
    body.layout-minimalist .dish-desc {
      font-size: 0.85rem;
      line-height: 1.55;
      color: #6E6A5F !important;
      margin-top: 3px;
      font-style: italic;
    }
    body.layout-minimalist .dish-price {
      font-family: 'IBM Plex Mono', monospace !important;
      font-size: 0.98rem;
      font-weight: 600;
      color: #191713 !important;
      letter-spacing: 0.02em;
    }
    body.layout-minimalist .btn-add {
      background: transparent !important;
      border: 1px solid rgba(25, 23, 19, 0.45) !important;
      color: #191713 !important;
      border-radius: 50% !important;
      width: 32px !important;
      height: 32px !important;
      font-size: 1rem;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    body.layout-minimalist .btn-add:hover {
      background: #191713 !important;
      border-color: #191713 !important;
      color: #F7F4ED !important;
    }
    /* Chips de contacto (reserva/wifi/social): filete fino, sin glass oscuro */
    body.layout-minimalist .meta-chip {
      background: transparent !important;
      border: 1px solid rgba(25, 23, 19, 0.2) !important;
      color: #4A463D !important;
    }

    /* ==========================================================================
       MORFOLOGÍA 3: NIGHTBAR — NEON NIGHTBAR (ULTRA-DARK CON GLOW LUMINOSO)
       Ideal para Coctelería, Bares, Cervecerías & Happy Hour.
       El acento de neón es elegible por local (restaurant.neonAccent):
       body.layout-neon.neon-<clave> define --neon/--neon-rgb.

       Concepto NIGHTBAR: el menú ES la barra a la 1 AM —
       · fondo = la sala a oscuras con bokeh de luces ambientales fuera
         de foco, el tinte del tubo en la pared y el contraluz del piso
       · header = la pared del cartel: tubo de bajada + parpadeo sutil
         de neón real (9s, desactivado con prefers-reduced-motion)
       · cabeceras de categoría = tubos de letrero con soporte de
         porcelana (::before) y barra de neón que se apaga al final
       · botón + = el tubo APAGADO: aro de neón sobre vidrio que se
         ENCIENDE al pasar el cursor (fondo se llena, glow sube)
       · pills = tubos en reposo; activa = encendida (ink sobre neón AA)
       · sticky/carrito/checkout/vidriera = vidrio con sub-glow
         (gotcha: pos/size/repeat por capa sólo en el shorthand background;
         background-color AL FINAL porque el shorthand lo resetea)
       ========================================================================== */
    body.layout-neon {
      --bg-chalkboard: #070B0A;
      --surface-card: #0F1614;
      --surface-card-hover: #15201D;
      --neon: #00F5D4;
      --neon-rgb: 0, 245, 212;
      --chalk-gold: var(--neon);
      --border-chalk: rgba(var(--neon-rgb), 0.25);
      background-color: #070B0A;
    }
    body.layout-neon.neon-mint { --neon: #00F5D4; --neon-rgb: 0, 245, 212; }
    body.layout-neon.neon-cyan { --neon: #38BDF8; --neon-rgb: 56, 189, 248; }
    body.layout-neon.neon-magenta { --neon: #FF3EA5; --neon-rgb: 255, 62, 165; }
    body.layout-neon.neon-amber { --neon: #FBBF24; --neon-rgb: 251, 191, 36; }
    body.layout-neon.neon-lime { --neon: #A3E635; --neon-rgb: 163, 230, 53; }
    body.layout-neon.neon-violet { --neon: #A78BFA; --neon-rgb: 167, 139, 250; }
    body.layout-neon .menu-header {
      background: #0B110F;
      border-bottom: 1px solid rgba(var(--neon-rgb), 0.35);
      box-shadow: 0 4px 20px rgba(var(--neon-rgb), 0.08);
    }
    body.layout-neon .restaurant-title {
      color: #F8FAFC;
      text-shadow: 0 0 12px rgba(var(--neon-rgb), 0.4);
    }
    body.layout-neon .category-title {
      color: var(--neon) !important;
      text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.45);
      letter-spacing: 0.5px;
    }
    body.layout-neon .dish-card {
      background: #0F1614 !important;
      border: 1px solid rgba(var(--neon-rgb), 0.22) !important;
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    body.layout-neon .dish-card:hover {
      border-color: var(--neon) !important;
      box-shadow: 0 0 20px rgba(var(--neon-rgb), 0.3), inset 0 0 8px rgba(var(--neon-rgb), 0.06);
      transform: translateY(-2px);
    }
    body.layout-neon .dish-thumb {
      border-color: rgba(var(--neon-rgb), 0.4) !important;
      box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.15);
    }
    body.layout-neon .dish-name {
      color: #F1F5F9;
    }
    body.layout-neon .dish-price {
      color: var(--neon);
      font-weight: 800;
      text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.4);
    }
    body.layout-neon .btn-add {
      /* El tubo APAGADO: aro de neón sobre vidrio. En hover se ENCIENDE. */
      background: #0B110F !important;
      color: var(--neon) !important;
      border: 2px solid var(--neon) !important;
      font-weight: 800;
      box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.4), inset 0 0 6px rgba(var(--neon-rgb), 0.18);
      transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    body.layout-neon .btn-add:hover {
      background: var(--neon) !important;
      color: #070B0A !important;
      filter: none;
      box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.75), inset 0 0 0 rgba(0, 0, 0, 0);
    }
    body.layout-neon .badge-star {
      background: rgba(244, 63, 94, 0.18) !important;
      color: #FB7185 !important;
      border: 1px solid #F43F5E !important;
      box-shadow: 0 0 10px rgba(244, 63, 94, 0.35);
    }

    /* ── NIGHTBAR: la sala a oscuras ────────────────────────────────
       Bokeh de luces ambientales fuera de foco (multicolor, alpha bajo),
       el tinte del tubo llena la pared arriba y el piso refleja el
       resplandor de la barra abajo. Todo en el shorthand (gotcha),
       background-color al final. */
    body.layout-neon {
      background:
        radial-gradient(9px circle at 12% 8%, rgba(255, 255, 255, 0.05) 0 3px, transparent 4.2px) 0 0 / 190px 220px repeat,
        radial-gradient(7px circle at 61% 33%, rgba(255, 255, 255, 0.04) 0 2.5px, transparent 3.6px) 0 0 / 260px 190px repeat,
        radial-gradient(11px circle at 85% 72%, rgba(255, 255, 255, 0.03) 0 4px, transparent 5.2px) 0 0 / 300px 260px repeat,
        radial-gradient(ellipse 85% 40% at 50% 0%, rgba(var(--neon-rgb), 0.08), transparent 70%) 0 0 / 100% 100% no-repeat,
        linear-gradient(180deg, transparent 0 78%, rgba(var(--neon-rgb), 0.04) 96%, rgba(var(--neon-rgb), 0.08) 100%) 0 0 / 100% 100% no-repeat;
      background-color: #070B0A;
    }

    /* ── NIGHTBAR: la pared del cartel ─────────────────────────────── */
    body.layout-neon .menu-header {
      background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.06), transparent 50%), #0B110F;
    }
    /* Tubo de bajada del cartel: barra de neón bajo el nombre. */
    body.layout-neon .restaurant-title::after {
      content: '';
      display: block;
      margin-top: 9px;
      width: 118px;
      height: 2px;
      border-radius: 2px;
      background: var(--neon);
      box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.85), 0 0 14px rgba(var(--neon-rgb), 0.5);
    }
    /* Parpadeo de neón real: muy ocasional y sutil (sólo el cartel,
       nunca el contenido). Con reduced-motion el tubo queda estable. */
    body.layout-neon .restaurant-title {
      animation: neonTubeFlicker 9s linear infinite;
    }
    @keyframes neonTubeFlicker {
      0%, 87.5%, 91.5%, 100% { opacity: 1; }
      88.5% { opacity: 0.8; }
      90% { opacity: 0.94; }
      90.8% { opacity: 0.85; }
    }
    @media (prefers-reduced-motion: reduce) {
      body.layout-neon .restaurant-title { animation: none; }
      body.layout-neon .restaurant-title::after { box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.85), 0 0 14px rgba(var(--neon-rgb), 0.5); }
    }

    /* ── NIGHTBAR: cabeceras = tubos de letrero ─────────────────────
       Soporte de porcelana (::before, el aislante que sostiene el
       tubo) + barra de neón que se apaga hacia la derecha (::after). */
    body.layout-neon .category-title {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    body.layout-neon .category-title::before {
      content: '';
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #D9E7E1;
      box-shadow: 0 0 0 2px rgba(11, 17, 15, 0.6), 0 0 8px rgba(var(--neon-rgb), 0.55);
    }
    body.layout-neon .category-title::after {
      content: '';
      flex: 1 1 auto;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--neon), rgba(var(--neon-rgb), 0.06));
      box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.55);
    }

    /* ── NIGHTBAR: vasos = bicó de vidrio con aro interior ────────── */
    body.layout-neon .dish-card {
      position: relative;
    }
    body.layout-neon .dish-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 22px rgba(var(--neon-rgb), 0.05);
    }

    /* ── NIGHTBAR: la barra sticky = counter de vidrio ────────────── */
    body.layout-neon .controls-wrapper {
      background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.055), transparent 60%), rgba(9, 14, 12, 0.93);
      border-bottom: 1px solid rgba(var(--neon-rgb), 0.30);
      border-radius: 0 0 14px 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    body.layout-neon .search-box {
      background: rgba(15, 22, 20, 0.88);
      border: 1px solid rgba(var(--neon-rgb), 0.28);
      color: #F8FAFC;
    }
    body.layout-neon .search-box:focus-visible {
      border-color: var(--neon);
      box-shadow: 0 0 12px rgba(var(--neon-rgb), 0.3);
    }
    body.layout-neon .meta-chip {
      background: rgba(15, 22, 20, 0.75);
      border: 1px solid rgba(var(--neon-rgb), 0.22);
      color: #EDF2F7;
    }

    /* ── NIGHTBAR: pills = tubos (reposo / encendido) ─────────────── */
    body.layout-neon .cat-pill {
      background: rgba(15, 22, 20, 0.8);
      border: 1.5px solid rgba(var(--neon-rgb), 0.35);
      color: #F1F5F9;
      box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.12);
    }
    body.layout-neon .cat-pill.active,
    body.layout-neon .cat-pill[aria-pressed="true"] {
      background: var(--neon) !important;
      color: #070B0A !important;
      border-color: var(--neon);
      text-shadow: none;
      box-shadow: 0 0 14px rgba(var(--neon-rgb), 0.5);
    }

    /* ── NIGHTBAR: anillos de historias con aro del acento ────────── */
    body.layout-neon .st-ring-face {
      background:
        linear-gradient(#0F1614, #0F1614) padding-box,
        linear-gradient(45deg, var(--neon), rgba(var(--neon-rgb), 0.15)) border-box;
    }

    /* ── NIGHTBAR: la vidriera (chef specials = promos del vidrio) ── */
    body.layout-neon .chef-specials-section {
      background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.065), transparent 55%), rgba(11, 17, 15, 0.7);
      border: 1px solid rgba(var(--neon-rgb), 0.25);
      border-radius: 16px;
      box-shadow: 0 0 24px rgba(var(--neon-rgb), 0.12);
    }
    body.layout-neon .chef-special-tag-ribbon {
      background: rgba(var(--neon-rgb), 0.14);
      color: var(--neon);
      border: 1px solid rgba(var(--neon-rgb), 0.4);
      text-shadow: none;
    }

    /* ── NIGHTBAR: carrito y checkout = vidrio con sub-glow ─────────
       La barra del carrito es el alumbrado de la barra: píldora negra
       con aro de neón y halo bajo el área de subtotal (LED del acento). */
    body.layout-neon .floating-cart-bar {
      background: rgba(11, 17, 15, 0.94);
      border: 1.5px solid var(--neon);
      border-radius: 999px;
      box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.35), 0 10px 30px rgba(0, 0, 0, 0.5);
      color: #F8FAFC;
    }
    body.layout-neon .floating-cart-bar #cartTotalBadge {
      color: var(--neon);
      text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.5);
    }
    body.layout-neon .total-summary {
      background: rgba(11, 17, 15, 0.92);
      border: 1px solid rgba(var(--neon-rgb), 0.35);
      border-radius: 12px;
      box-shadow: 0 0 16px rgba(var(--neon-rgb), 0.18);
    }
    body.layout-neon .total-summary .summary-row span.total-amount {
      color: var(--neon);
      text-shadow: 0 0 10px rgba(var(--neon-rgb), 0.5);
    }
    body.layout-neon .i18n-currency-bar {
      background: rgba(11, 17, 15, 0.9);
      border: 1px solid rgba(var(--neon-rgb), 0.25);
      color: #EDF2F7;
    }

    /* ==========================================================================
       RATIOS CONSISTENTES & EXCELENCIA RESPONSIVA (<360px & MÓVILES ESTRECHOS)
       ========================================================================== */
    .dish-thumb,
    .dish-photo-col img,
    .chef-special-card img {
      object-fit: cover !important;
      aspect-ratio: 1 / 1;
    }

    @media (max-width: 480px) {
      .menu-banner-hero {
        height: 230px;
      }
    }

    @media (max-width: 360px) {
      .menu-container {
        padding: 0 8px !important;
      }
      .menu-header {
        padding: 14px 10px !important;
      }
      .restaurant-title {
        font-size: 1.35rem !important;
      }
      .restaurant-slogan {
        font-size: 0.8rem !important;
      }
      .restaurant-meta-bar {
        gap: 4px !important;
      }
      .meta-chip {
        font-size: 9.5px !important;
        padding: 3px 6px !important;
      }
      .dish-card {
        padding: 10px !important;
        gap: 8px !important;
      }
      .dish-thumb {
        width: 62px !important;
        height: 62px !important;
        border-radius: 8px !important;
      }
      .dish-name {
        font-size: 0.92rem !important;
      }
      .dish-desc {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
      }
      .dish-price {
        font-size: 0.95rem !important;
      }
      .btn-add {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
      }
      .menu-banner-hero {
        height: 220px !important;
        min-height: 220px !important;
      }
      .menu-banner-status-slot { top: 8px; right: 8px; max-width: calc(100% - 16px); }
      .menu-banner-logo-slot { width: 68px; height: 68px; bottom: -30px; }
      .menu-banner-logo-slot #restaurantLogoContainer,
      .menu-banner-logo-slot .restaurant-logo { width: 68px; height: 68px; }
    }

    /* ==========================================================================
    /* Mozo Virtual: Interruptor Opcional (Toggle Switch) */
    .mozo-toggle-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      background: rgba(236, 201, 75, 0.04);
      border: 1px solid rgba(236, 201, 75, 0.18);
      border-radius: 10px;
      margin: 14px 0 10px 0;
    }
    .mozo-toggle-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }
    .switch-ui {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    .switch-ui input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider-round {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #2D3748;
      transition: 0.25s;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .slider-round:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 2px;
      bottom: 2px;
      background-color: #CBD5E0;
      transition: 0.25s;
      border-radius: 50%;
    }
    .switch-ui input:checked + .slider-round {
      background-color: #ECC94B;
    }
    .switch-ui input:checked + .slider-round:before {
      transform: translateX(20px);
      background-color: #0E1412;
    }
    .mozo-reason-banner {
      font-size: 0.8rem;
      color: #ECC94B;
      background: rgba(236, 201, 75, 0.1);
      border-left: 3px solid #ECC94B;
      padding: 6px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .mozo-badge-tag {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 700;
      color: #68D391;
      background: rgba(104, 211, 145, 0.15);
      border: 1px solid rgba(104, 211, 145, 0.3);
      padding: 1px 6px;
      border-radius: 4px;
      margin-bottom: 4px;
    }

    .mozo-virtual-upsell-box {
      margin: 10px 0 16px 0;
      padding: 12px 14px;
      background: linear-gradient(135deg, rgba(236, 201, 75, 0.08) 0%, rgba(20, 28, 25, 0.95) 100%);
      border: 1px dashed rgba(236, 201, 75, 0.35);
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .mozo-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .mozo-avatar {
      font-size: 1.6rem;
      background: rgba(236, 201, 75, 0.15);
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(236, 201, 75, 0.3);
      flex-shrink: 0;
    }
    .mozo-header-text h4 {
      margin: 0;
      font-size: 0.92rem;
      color: var(--chalk-gold);
      font-weight: 700;
      letter-spacing: 0.3px;
    }
    .mozo-header-text p {
      margin: 2px 0 0 0;
      font-size: 0.78rem;
      color: var(--chalk-muted);
    }
    .mozo-cards-carousel {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
      gap: 8px;
    }
    .mozo-item-card {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(14, 20, 18, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 8px 10px;
      transition: border-color 0.2s, transform 0.2s, background 0.2s;
    }
    @media (max-width: 480px) {
      .mozo-cards-carousel {
        grid-template-columns: minmax(0, 1fr);
      }
      .mozo-item-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        row-gap: 6px;
      }
      .mozo-item-thumb {
        grid-column: 1;
        grid-row: 1;
      }
      .mozo-item-info {
        grid-column: 2;
        grid-row: 1;
      }
      .btn-mozo-quick-add {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
      }
    }
    .mozo-item-card:hover {
      border-color: rgba(236, 201, 75, 0.4);
      background: rgba(20, 28, 25, 0.95);
      transform: translateY(-2px);
    }
    .mozo-item-thumb {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      object-fit: cover;
      aspect-ratio: 1 / 1;
      background: #1C2723;
      border: 1px solid rgba(255, 255, 255, 0.1);
      flex-shrink: 0;
    }
    .mozo-item-info {
      flex: 1;
      min-width: 0;
    }
    .mozo-item-title {
      font-size: 0.86rem;
      font-weight: 700;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .mozo-item-price {
      font-size: 0.82rem;
      color: var(--chalk-gold);
      font-weight: 700;
      font-family: var(--font-mono);
    }
    .btn-mozo-quick-add {
      background: #38A169;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, transform 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn-mozo-quick-add:hover {
      background: #2F855A;
      transform: scale(1.05);
    }
    .btn-mozo-quick-add:active {
      transform: scale(0.95);
    }
    .btn-mozo-quick-add.added {
      background: #3182CE;
    }

    /* Mini upsell inside Dish Personalization Modal */
    .dish-modal-upsell-box {
      margin: 12px 0;
      padding: 10px 12px;
      background: rgba(236, 201, 75, 0.05);
      border: 1px dashed rgba(236, 201, 75, 0.25);
      border-radius: 8px;
    }
    .dish-modal-upsell-title {
      font-size: 0.8rem;
      color: var(--chalk-gold);
      font-weight: 700;
      margin-bottom: 6px;
    }

    /* ==========================================================================
       SMART GOOGLE REVIEWS & FEEDBACK FILTER MODAL
       ========================================================================== */
    .smart-review-modal-box {
      max-width: 460px;
      text-align: center;
      padding: 24px 20px;
      background: #141C19;
      border: 1px solid rgba(236, 201, 75, 0.3);
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    }
    .smart-review-header {
      margin-bottom: 16px;
    }
    .smart-review-icon {
      font-size: 2.2rem;
      display: inline-block;
      margin-bottom: 6px;
      filter: drop-shadow(0 2px 8px rgba(236, 201, 75, 0.4));
    }
    .smart-review-sub {
      font-size: 0.88rem;
      color: var(--chalk-muted);
      margin: 4px 0 0 0;
    }
    .stars-selector-wrap {
      display: inline-flex;
      justify-content: center;
      gap: 8px;
      margin: 12px 0 6px 0;
    }
    .star-btn {
      background: transparent;
      border: none;
      font-size: 2.6rem;
      line-height: 1;
      color: #4A5568;
      cursor: pointer;
      transition: color 0.15s, transform 0.15s;
      padding: 0 4px;
    }
    .star-btn:hover,
    .star-btn.hover-active,
    .star-btn.active {
      color: #ECC94B;
      transform: scale(1.15);
      text-shadow: 0 0 12px rgba(236, 201, 75, 0.6);
    }
    .star-hint-text {
      font-size: 0.82rem;
      color: var(--chalk-dim);
      margin-bottom: 18px;
      min-height: 18px;
    }
    .review-branch-box {
      text-align: left;
      animation: fadeInScale 0.25s ease-out;
    }
    @keyframes fadeInScale {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }
    .review-success-banner {
      text-align: center;
      background: rgba(236, 201, 75, 0.08);
      border: 1px solid rgba(236, 201, 75, 0.25);
      border-radius: 12px;
      padding: 16px 14px;
      margin-bottom: 14px;
    }
    .btn-google-review-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      background: linear-gradient(135deg, #4285F4 0%, #1A73E8 100%);
      color: #fff !important;
      padding: 14px 16px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 0.96rem;
      text-decoration: none;
      box-shadow: 0 4px 14px rgba(66, 133, 244, 0.4);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
      margin-bottom: 10px;
    }
    .btn-google-review-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(66, 133, 244, 0.5);
      filter: brightness(1.08);
    }
    .btn-feedback-dismiss {
      display: block;
      width: 100%;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--chalk-dim);
      border-radius: 8px;
      padding: 10px;
      font-size: 0.85rem;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s, color 0.15s;
    }
    .btn-feedback-dismiss:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--chalk-white);
    }
    .review-constructive-banner {
      text-align: center;
      background: rgba(246, 173, 85, 0.08);
      border: 1px solid rgba(246, 173, 85, 0.25);
      border-radius: 12px;
      padding: 14px 12px;
      margin-bottom: 14px;
    }
    .btn-feedback-submit {
      width: 100%;
      background: #F6AD55;
      color: #0E1412;
      border: none;
      border-radius: 8px;
      padding: 12px;
      font-weight: 700;
      font-size: 0.92rem;
      cursor: pointer;
      transition: background 0.15s, transform 0.15s;
    }
    .btn-feedback-submit:hover {
      background: #ED8936;
      transform: translateY(-1px);
    }

    /* ========================================================
       PEDIDO GRUPAL COLABORATIVO EN TIEMPO REAL & ATRIBUCIÓN
       ======================================================== */
    .group-table-top-bar {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(90deg, #1A365D, #2B6CB0);
      color: #fff;
      padding: 8px 16px;
      font-size: 0.85rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      display: none;
    }
    .group-bar-content {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .group-pulse-dot {
      width: 9px;
      height: 9px;
      background: #4ade80;
      border-radius: 50%;
      display: inline-block;
      box-shadow: 0 0 8px #4ade80;
      animation: groupPulse 1.8s infinite;
    }
    @keyframes groupPulse {
      0% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.25); }
      100% { opacity: 1; transform: scale(1); }
    }
    .group-table-title {
      font-weight: 700;
      letter-spacing: 0.3px;
    }
    .group-user-tag {
      background: rgba(255, 255, 255, 0.18);
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 0.78rem;
    }
    .group-counter-tag {
      margin-left: auto;
      font-weight: 700;
      color: #ECC94B;
      font-family: var(--font-mono);
      font-size: 0.82rem;
    }
    .btn-group-name-edit {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      padding: 0 4px;
      opacity: 0.85;
      transition: opacity 0.2s, transform 0.2s;
    }
    .btn-group-name-edit:hover {
      opacity: 1;
      transform: scale(1.15);
    }
    .cart-item-ordered-by {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.74rem;
      font-weight: 700;
      color: #63B3ED;
      background: rgba(66, 153, 225, 0.15);
      border: 1px solid rgba(66, 153, 225, 0.35);
      border-radius: 5px;
      padding: 2px 7px;
      margin-top: 4px;
      margin-bottom: 2px;
    }
    .cart-item-ordered-by.is-own {
      color: #68D391;
      background: rgba(104, 211, 145, 0.15);
      border-color: rgba(104, 211, 145, 0.35);
    }
    .cart-qty-ctrl button.btn-qty:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      filter: grayscale(1);
    }
    .group-toast-notification {
      position: fixed;
      bottom: 74px;
      left: 50%;
      transform: translateX(-50%) translateY(30px);
      background: rgba(14, 20, 18, 0.95);
      border: 1px solid var(--chalk-gold);
      color: #fff;
      padding: 9px 18px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s;
      z-index: 999999;
      white-space: nowrap;
      max-width: 90vw;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .group-toast-notification.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    .btn-group-consolidate {
      width: 100%;
      background: rgba(43, 108, 176, 0.2);
      border: 1px dashed #63B3ED;
      color: #90CDF4;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.15s;
    }
    .btn-group-consolidate:hover {
      background: rgba(43, 108, 176, 0.35);
    }
    /* ==========================================================================
       MORFOLOGÍAS FASE E (Bloque 16): BILLBOARD · TICKER · STICKER
       Inspiradas en cadenas reales: menú board QSR (McDonald's), lista
       tipográfica (Five Guys / Starbucks) y board artesanal (In-N-Out).
       Son 100% CSS sobre el DOM compartido de .dish-card ─ no tocan HTML.
       ========================================================================== */

    /* --------------------------------------------------------------------------
       MORFOLOGÍA BILLBOARD — Menú Board estilo McDonald's / Shake Shack (QSR)
       Índices #1 #2 por categoría (CSS counters), foto arriba, precio display.
       -------------------------------------------------------------------------- */
    body.layout-billboard .dishes-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 14px;
    }
    body.layout-billboard .category-section {
      counter-reset: board;
    }
    body.layout-billboard .dish-card {
      position: relative;
      flex-direction: column !important;
      align-items: stretch !important;
      justify-content: flex-start !important;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 16px !important;
      background: var(--surface-card, rgba(22, 33, 28, 0.8)) !important;
      border: 1px solid var(--border-chalk, rgba(255, 255, 255, 0.12)) !important;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
      counter-increment: board;
    }
    body.layout-billboard .dish-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }
    body.layout-billboard .dish-card::before {
      content: "#" counter(board);
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
      background: var(--chalk-gold, #ECC94B);
      color: #101614;
      font-family: var(--font-mono, monospace);
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.5px;
      padding: 3px 10px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    body.layout-billboard .dish-thumb {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 4 / 3;
      border-radius: 0 !important;
      border: none !important;
      border-bottom: 1px solid var(--border-chalk, rgba(255, 255, 255, 0.08));
      flex-shrink: 0;
    }
    body.layout-billboard .dish-body {
      padding: 12px 12px 8px;
    }
    body.layout-billboard .dish-name {
      font-size: 1.02rem !important;
      font-weight: 800;
      letter-spacing: 0.2px;
      line-height: 1.25;
    }
    body.layout-billboard .dish-desc {
      font-size: 0.8rem !important;
      opacity: 0.85;
    }
    body.layout-billboard .dish-price {
      font-size: 1.4rem !important;
      font-weight: 900 !important;
      color: var(--chalk-gold, #ECC94B);
      margin-top: 6px;
      line-height: 1.1;
    }
    body.layout-billboard .dish-action {
      margin: 4px 12px 12px;
    }
    body.layout-billboard .btn-add {
      width: 100% !important;
      height: 38px !important;
      border-radius: 999px !important;
      font-size: 1rem !important;
      font-weight: 800;
    }
    body.layout-billboard .dish-badge {
      font-size: 0.68rem !important;
      padding: 2px 7px !important;
    }
    body.layout-billboard .category-title {
      border-bottom: 2px solid var(--border-gold, rgba(236, 201, 75, 0.35));
      padding-bottom: 8px;
    }

    /* --------------------------------------------------------------------------
       MORFOLOGÍA TICKER — Carta tipográfica estilo Five Guys / Starbucks.
       Sin tarjetas ni fotos: nombre · puntitos · precio con dot-leader.
       -------------------------------------------------------------------------- */
    body.layout-ticker .dishes-grid {
      display: block !important;
    }
    body.layout-ticker .category-title {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 0.92rem;
      border-bottom: 1px solid var(--border-gold, rgba(212, 175, 55, 0.35));
      padding-bottom: 8px;
      margin-bottom: 14px;
    }
    body.layout-ticker .dish-card {
      display: flex !important;
      background: transparent !important;
      border: none !important;
      border-bottom: 1px dashed var(--border-chalk, rgba(255, 255, 255, 0.12)) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 12px 2px !important;
      align-items: flex-start !important;
      gap: 12px;
    }
    body.layout-ticker .dish-thumb {
      display: none !important;
    }
    body.layout-ticker .dish-body {
      display: grid !important;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "title price"
        "desc desc";
      align-items: baseline;
      column-gap: 10px;
      flex: 1;
      min-width: 0;
    }
    body.layout-ticker .dish-title-line {
      grid-area: title;
      display: flex;
      align-items: baseline;
      min-width: 0;
      margin-bottom: 2px;
    }
    body.layout-ticker .dish-title-line::after {
      content: "";
      flex: 1;
      min-width: 24px;
      margin: 0 6px;
      border-bottom: 2px dotted var(--chalk-gold, rgba(236, 201, 75, 0.55));
      transform: translateY(-4px);
    }
    body.layout-ticker .dish-name {
      font-size: 1.05rem !important;
      font-weight: 700;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    body.layout-ticker .dish-price {
      grid-area: price;
      white-space: nowrap;
      font-weight: 800;
      font-size: 1.02rem !important;
      color: var(--chalk-gold, #ECC94B);
    }
    body.layout-ticker .dish-desc {
      grid-area: desc;
      font-size: 0.8rem !important;
      color: var(--chalk-dim, rgba(255,255,255,0.65));
      margin-top: 2px;
    }
    body.layout-ticker .dish-action {
      align-self: center;
    }
    body.layout-ticker .btn-add {
      width: 34px !important;
      height: 34px !important;
      border-radius: 50% !important;
      font-size: 1.05rem !important;
    }
    body.layout-ticker .qty-counter {
      font-size: 0.72rem !important;
    }

    /* --------------------------------------------------------------------------
       MORFOLOGÍA STICKER — Board artesanal tipo In-N-Out / tiendas de autor.
       Masonry real (CSS columns), foto grande con degradado y nombre encima,
       precio en sticker redondeado. Sin foto → etiqueta tipográfica elegante.
       -------------------------------------------------------------------------- */
    body.layout-sticker .dishes-grid {
      display: block !important;
      columns: 220px 2;
      column-gap: 14px;
    }
    body.layout-sticker .category-section {
      break-inside: avoid;
    }
    body.layout-sticker .dish-card {
      position: relative;
      display: block !important;
      break-inside: avoid;
      margin-bottom: 14px;
      padding: 0 !important;
      border-radius: 18px !important;
      overflow: hidden;
      background: var(--surface-card, rgba(255, 255, 255, 0.05)) !important;
      border: 1px solid var(--border-chalk, rgba(255, 255, 255, 0.12)) !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    body.layout-sticker .dish-thumb {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 4 / 5;
      border-radius: 0 !important;
      border: none !important;
      display: block;
    }
    body.layout-sticker .dish-action {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 4;
    }
    body.layout-sticker .btn-add {
      width: 40px !important;
      height: 40px !important;
      border-radius: 50% !important;
      background: var(--chalk-gold, #ECC94B) !important;
      color: #101614 !important;
      font-size: 1.2rem !important;
      border: none !important;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    }
    body.layout-sticker .qty-counter {
      position: absolute;
      top: -6px;
      right: -6px;
      background: #101614;
      border: 1px solid var(--chalk-gold, rgba(236, 201, 75, 0.6));
      color: var(--chalk-gold, #ECC94B);
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 7px;
      white-space: nowrap;
      display: block !important;
    }
    body.layout-sticker .dish-price {
      display: inline-block;
      background: var(--chalk-gold, #ECC94B);
      color: #101614;
      font-weight: 900;
      border-radius: 999px;
      padding: 5px 13px;
      font-size: 0.95rem !important;
      margin-top: 6px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      white-space: nowrap;
    }
    /* Overlay del nombre sobre la foto (solo cuando hay imagen): el JS agrega la
       clase condicional dish-has-photo (equivalente a dish-sold), sin :has() —
       funciona en cualquier WebView. Sin foto, degrada a tarjeta apilada. */
    body.layout-sticker .dish-card.dish-has-photo .dish-body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      padding: 46px 14px 14px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 40%, transparent);
    }
    body.layout-sticker .dish-card.dish-has-photo .dish-name {
      color: #ffffff !important;
      font-weight: 800;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    }
    body.layout-sticker .dish-card.dish-has-photo .dish-desc {
      color: rgba(255, 255, 255, 0.85) !important;
    }
    body.layout-sticker .dish-card.dish-has-photo .dish-title-line {
      margin-bottom: 4px;
    }
    body.layout-sticker .dish-card.dish-has-photo .dish-price {
      position: absolute;
      right: 12px;
      bottom: 12px;
      margin: 0;
    }
    body.layout-sticker .dish-card.dish-has-photo .dish-body {
      padding-right: 120px;
    }
    body.layout-sticker .dish-card:not(.dish-has-photo) {
      padding: 16px 14px !important;
    }
    body.layout-sticker .dish-card:not(.no-support) .dish-name {
      font-size: 1.05rem !important;
      font-weight: 800;
      letter-spacing: 0.2px;
      line-height: 1.25;
    }

    /* --------------------------------------------------------------------------
       CARRUSEL TÁCTIL DE "LOS MEJORES PLATOS" — scroll-snap para móviles
       (beneficia a todas las morfologías; se activa al inicio del menú).
       -------------------------------------------------------------------------- */
    .chef-specials-carousel {
      scroll-snap-type: x mandatory;
      scroll-padding-left: 6px;
      -webkit-overflow-scrolling: touch;
    }
    .chef-special-card {
      scroll-snap-align: start;
    }

    /* --------------------------------------------------------------------------
       RESPONSIVE DE LAS NUEVAS MORFOLOGÍAS
       -------------------------------------------------------------------------- */
    @media (max-width: 560px) {
      body.layout-sticker .dishes-grid {
        columns: 1;
      }
    }
    @media (max-width: 480px) {
      body.layout-billboard .dishes-grid {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        gap: 10px;
      }
      body.layout-ticker .dish-card {
        gap: 8px;
      }
      body.layout-billboard .dish-price {
        font-size: 1.15rem !important;
      }
    }

    /* --------------------------------------------------------------------------
       IMPRESIÓN / PDF — Carta del pizarrón limpia para imprimir o exportar.
       Oculta controles interactivos y fuerza la estructura de cada morfología.
       -------------------------------------------------------------------------- */
    @media print {
      body {
        background: #fff !important;
      }
      #i18nCurrencyBarContainer,
      #searchFilter,
      #btnClearSearch,
      .category-nav-wrapper,
      #dietaryFilterPills,
      .a11y-bar,
      #iceCreamHeroCTA,
      #btnTogglePerfumeryMode,
      .btn-nav,
      .floating-cart-bar,
      .waiter-fab,
      .modal-overlay,
      #cardModals,
      .dish-action,
      .qty-counter,
      .chef-special-footer .btn-add {
        display: none !important;
      }
      .dishes-grid,
      .chef-specials-carousel {
        overflow: visible !important;
      }
      .chef-specials-carousel {
        display: block !important;
      }
      .chef-special-card {
        display: inline-block !important;
        width: 220px;
        margin-right: 12px;
        vertical-align: top;
      }
      body.layout-billboard .dishes-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
      }
      body.layout-sticker .dishes-grid {
        columns: 2 !important;
      }
      .dish-card,
      .category-section,
      .chef-special-card {
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
      }
      body.layout-sticker .dish-card.dish-has-photo .dish-body {
        position: static !important;
        padding: 12px 14px !important;
        background: none !important;
      }
      body.layout-sticker .dish-card.dish-has-photo .dish-name {
        color: #101614 !important;
        text-shadow: none !important;
      }
      body.layout-sticker .dish-card.dish-has-photo .dish-desc {
        color: #555 !important;
      }
      body.layout-sticker .dish-card.dish-has-photo .dish-price {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 8px !important;
      }
      body.layout-sticker .dish-thumb {
        display: none !important;
      }
      body.layout-ticker .dish-card {
        page-break-inside: avoid !important;
      }
      body.layout-billboard .dish-card::before,
      body.layout-billboard .dish-price,
      .chef-special-price {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
    }
    /* --------------------------------------------------------------------------
       SOLD-OUT & CONTADOR en las morfologias Fase E — el badge rojo Agotado
       debe mantener contraste sobre el sticker dorado del precio.
       -------------------------------------------------------------------------- */
    body.layout-sticker .dish-card.dish-sold .dish-price {
      background: rgba(229, 62, 62, 0.16) !important;
      color: #E53E3E !important;
      border: 1px solid rgba(229, 62, 62, 0.5) !important;
    }
    body.layout-billboard .dish-card.dish-sold .dish-price,
    body.layout-ticker .dish-card.dish-sold .dish-price {
      color: #E53E3E !important;
    }
    body.layout-billboard .qty-counter {
      display: block;
      text-align: center;
      font-size: 0.72rem !important;
    }

    /* --------------------------------------------------------------------------
       MORFOLOGÍA DELIVERY — Estilo app de delivery (claro, tarjetas blancas).
       Hero con card superpuesta, lista horizontal con foto grande a la izquierda
       y botón + circular oscuro. Toque ScanGo: respeta --chalk-gold del tema
       para precios/badges y mantiene todos los flujos (WhatsApp, propina,
       tracking, fidelización). Solo re-estiliza, no cambia el DOM.
       -------------------------------------------------------------------------- */
    body.layout-delivery {
      --bg-chalkboard: #F3F4F6;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFFFFF;
      --chalk-white: #111827;
      --chalk-muted: #374151;
      --chalk-dim: #6B7280;
      --border-chalk: #E5E7EB;
      background-color: #F3F4F6;
      color: #111827;
    }
    body.layout-delivery .menu-banner-hero {
      height: 250px;
      min-height: 250px;
      border-radius: 0 0 24px 24px;
      overflow: hidden;
    }
    body.layout-delivery .menu-banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    body.layout-delivery .menu-header {
      background: #FFFFFF !important;
      --chalk-white: #111827;
      --chalk-muted: #374151;
      --chalk-dim: #6B7280;
      border: 1px solid #EDEEF1 !important;
      border-radius: 18px !important;
      box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08) !important;
      margin: -64px 14px 0 14px;
      padding: 18px 16px 16px 16px !important;
      text-align: left !important;
      z-index: 5;
    }
    body.layout-delivery.has-hero-banner .menu-header {
      margin-top: -64px;
    }
    body.layout-delivery .restaurant-title {
      color: #111827 !important;
      font-size: 1.35rem !important;
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    body.layout-delivery .restaurant-slogan {
      color: #6B7280 !important;
      font-family: var(--font-body) !important;
      font-size: 0.85rem !important;
      margin-bottom: 10px;
    }
    body.layout-delivery .restaurant-meta-bar {
      justify-content: flex-start !important;
      gap: 8px !important;
    }
    body.layout-delivery .meta-chip {
      background: #F3F4F6 !important;
      border: 1px solid #E5E7EB !important;
      color: #374151 !important;
      border-radius: 999px !important;
    }
    body.layout-delivery .meta-chip:hover {
      border-color: #D1D5DB !important;
      color: #111827 !important;
      background: #EDEEF1 !important;
    }
    body.layout-delivery .status-pill {
      border-radius: 999px !important;
      font-weight: 700;
    }
    body.layout-delivery .menu-container {
      padding: 14px 14px 24px 14px !important;
    }
    body.layout-delivery .controls-wrapper {
      background: transparent !important;
      border-bottom: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      padding: 4px 0 8px 0 !important;
      margin-bottom: 12px !important;
    }
    body.layout-delivery .search-box {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      color: #111827 !important;
      border-radius: 12px !important;
      box-shadow: 0 1px 4px rgba(17, 24, 39, 0.05);
    }
    body.layout-delivery .search-box::placeholder {
      color: #9CA3AF !important;
    }
    body.layout-delivery .cat-pill {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      color: #374151 !important;
      border-radius: 999px !important;
      box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
    }
    body.layout-delivery .cat-pill.active {
      background: #111827 !important;
      border-color: #111827 !important;
      color: #FFFFFF !important;
    }
    body.layout-delivery .category-nav-wrapper {
      position: sticky;
      top: 0;
      z-index: 90;
      background: rgba(243, 244, 246, 0.96);
      padding: 8px 0;
    }
    body.layout-delivery .category-title {
      color: #111827 !important;
      font-size: 1.12rem !important;
      font-weight: 800;
      border-bottom: none !important;
      padding-bottom: 0 !important;
      margin-bottom: 12px !important;
    }
    body.layout-delivery .category-badge-count {
      background: #EDEEF1;
      color: #6B7280 !important;
      border-radius: 999px;
      padding: 2px 9px;
      font-size: 0.7rem !important;
      font-weight: 700;
    }
    body.layout-delivery .dishes-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    body.layout-delivery .dish-card {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
      background: #FFFFFF !important;
      border: 1px solid #EDEEF1 !important;
      border-radius: 14px !important;
      padding: 10px !important;
      box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05) !important;
    }
    body.layout-delivery .dish-card:hover {
      background: #FFFFFF !important;
      border-color: #E0E2E7 !important;
      box-shadow: 0 4px 16px rgba(17, 24, 39, 0.08) !important;
    }
    body.layout-delivery .dish-thumb {
      width: 104px !important;
      height: 104px !important;
      min-width: 104px !important;
      border-radius: 10px !important;
      border: none !important;
      object-fit: cover !important;
      background: #F3F4F6 !important;
    }
    body.layout-delivery .dish-body {
      flex: 1;
      min-width: 0;
    }
    body.layout-delivery .dish-name {
      color: #111827 !important;
      font-size: 0.98rem !important;
      font-weight: 750;
      line-height: 1.3;
    }
    body.layout-delivery .dish-desc {
      color: #6B7280 !important;
      font-size: 0.8rem !important;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-top: 3px;
    }
    body.layout-delivery .dish-price {
      color: #111827 !important;
      font-weight: 800;
      font-size: 0.98rem !important;
      margin-top: 6px;
    }
    body.layout-delivery .dish-action {
      align-self: flex-end;
      flex-shrink: 0;
    }
    body.layout-delivery .btn-add {
      width: 36px !important;
      height: 36px !important;
      min-width: 36px !important;
      border-radius: 50% !important;
      background: #111827 !important;
      color: #FFFFFF !important;
      border: none !important;
      font-size: 1.15rem !important;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 3px 10px rgba(17, 24, 39, 0.25);
    }
    body.layout-delivery .btn-add:hover {
      background: #000000 !important;
      color: #FFFFFF !important;
    }
    body.layout-delivery .btn-add:disabled {
      background: #D1D5DB !important;
      color: #FFFFFF !important;
      box-shadow: none;
    }
    body.layout-delivery .qty-counter {
      font-size: 0.7rem !important;
      color: #374151 !important;
    }
    body.layout-delivery .dish-badge {
      font-size: 0.65rem !important;
    }
    body.layout-delivery .announcement-banner {
      background: #DCFCE7 !important;
      color: #15803D !important;
      box-shadow: none !important;
      border-bottom: 1px solid #BBF7D0;
    }
    body.layout-delivery .loyalty-top-bar {
      background: #FFFFFF !important;
      border: 1px solid #EDEEF1 !important;
      color: #111827 !important;
      box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
    }
    body.layout-delivery .a11y-bar {
      background: transparent !important;
      border: none !important;
      color: #6B7280 !important;
    }
    body.layout-delivery .empty-state-card {
      background: #FFFFFF !important;
      border: 1px dashed #D1D5DB !important;
    }
    body.layout-delivery .empty-state-title {
      color: #111827 !important;
    }
    body.layout-delivery .empty-state-desc {
      color: #6B7280 !important;
    }
    body.layout-delivery .chef-specials-section {
      background: transparent;
    }
    @media (max-width: 360px) {
      body.layout-delivery .menu-header {
        margin: -48px 8px 0 8px !important;
        padding: 14px 12px !important;
      }
      body.layout-delivery .dish-thumb {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
      }
      body.layout-delivery .dish-name {
        font-size: 0.9rem !important;
      }
    }
    @media print {
      body.layout-delivery .dish-card {
        break-inside: avoid !important;
      }
    }

    /* ============================================================
       LAYOUT STORIES — modo dual: carta clásica en mesa, historias en casa.
       El overlay #storiesOverlay (construido por storiesLayout.js desde las
       .dish-card reales) es un feed full-screen con scroll-snap, segmentos
       de progreso, tap izq/der y tarjeta glass. Hereda el acento del tema
       activo vía --chalk-gold. Funciona con CUALQUIER tema (no pisa la
       carta: la cubre con un diálogo fijo; Esc o ✕ vuelve a la carta).
       ============================================================ */
    body.layout-stories {
      --stories-accent: var(--chalk-gold);
    }
    body.stories-open {
      overscroll-behavior: none;
    }
    /* Chrome flotante de la página (consentimiento, install, loyalty, push)
       se difiere mientras el overlay inmersivo está abierto: no se descarta,
       solo se oculta; reaparece intacto al cerrar historias. */
    body.stories-open #scangoCookieBanner,
    body.stories-open #pwaInstallBanner,
    body.stories-open #pushPromptBanner,
    body.stories-open #loyaltyTopBanner {
      display: none !important;
    }
    #storiesOverlay {
      position: fixed;
      inset: 0;
      z-index: 500;
      background: #05070C;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }
    #storiesOverlay .st-feed {
      height: 100vh;
      height: 100dvh;
      width: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      scroll-snap-type: y mandatory;
      scrollbar-width: none;
      position: relative;
    }
    #storiesOverlay .st-feed::-webkit-scrollbar { display: none; }
    #storiesOverlay .st-story {
      position: relative;
      height: 100vh;
      height: 100dvh;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overflow: hidden;
      background: #0B111C;
    }
    #storiesOverlay .st-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #000;
    }
    #storiesOverlay .st-bg-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 96px;
      background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, var(--stories-accent, #22D3EE) 0%, transparent 55%),
        linear-gradient(160deg, #1B2536 0%, #0B111C 100%);
    }
    /* Slot de medios (virtualización): ocupa el fondo; el <img>/<video>
       se monta solo en ventana. Concha barata de alto fijo. */
    #storiesOverlay .st-media {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    #storiesOverlay .st-story::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 24%, transparent 46%, rgba(0, 0, 0, 0.84) 100%);
      pointer-events: none;
    }
    #storiesOverlay .st-segs {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      gap: 6px;
      z-index: 6;
    }
    #storiesOverlay .st-seg {
      flex: 1;
      height: 3px;
      border: none;
      padding: 0;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.35);
      overflow: hidden;
      cursor: pointer;
    }
    #storiesOverlay .st-seg i {
      display: block;
      height: 100%;
      width: 0;
      background: #FFFFFF;
      border-radius: 99px;
    }
    #storiesOverlay .st-top {
      position: absolute;
      top: 24px;
      left: 14px;
      right: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 6;
    }
    #storiesOverlay .st-logo {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      flex-shrink: 0;
      background: #000;
    }
    #storiesOverlay .st-brand {
      font-size: 13.5px;
      font-weight: 700;
      color: #FFFFFF;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
      min-width: 0;
    }
    #storiesOverlay .st-brand small {
      display: block;
      font-weight: 500;
      color: #C6D2E0;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 56vw;
    }
    #storiesOverlay .st-cart {
      margin-left: auto;
      position: relative;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #FFFFFF;
      font-size: 19px;
      cursor: pointer;
      flex-shrink: 0;
    }
    #storiesOverlay .st-cart i {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--stories-accent, #22D3EE);
      color: #04222B;
      font-style: normal;
      font-size: 11px;
      font-weight: 800;
      min-width: 20px;
      height: 20px;
      border-radius: 99px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
    }
    #storiesOverlay .st-tap {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 30%;
      z-index: 4;
    }
    #storiesOverlay .st-tap-prev { left: 0; }
    #storiesOverlay .st-tap-next { right: 0; }
    #storiesOverlay .st-info {
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 14px;
      z-index: 5;
      max-height: 48vh;
      max-height: 48dvh;
      overflow-y: auto;
      border-radius: 22px;
      padding: 16px;
      background: linear-gradient(135deg, rgba(12, 20, 34, 0.80), rgba(12, 20, 34, 0.55));
      border: 1px solid rgba(255, 255, 255, 0.28);
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    #storiesOverlay .st-cat {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: var(--stories-accent, #67E8F9);
      text-transform: uppercase;
    }
    #storiesOverlay .st-name {
      font-size: 21px;
      margin: 4px 0;
      color: #FFFFFF;
      line-height: 1.2;
    }
    #storiesOverlay .st-desc {
      font-size: 13px;
      color: #C2CEDD;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    #storiesOverlay .st-sold {
      font-size: 12px;
      font-weight: 700;
      color: #FCA5A5;
      margin-top: 6px;
    }
    #storiesOverlay .st-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }
    #storiesOverlay .st-price {
      font-size: 22px;
      font-weight: 800;
      color: #FFFFFF;
    }
    #storiesOverlay .st-add {
      margin-left: auto;
      border: none;
      cursor: pointer;
      font-weight: 800;
      font-size: 14px;
      font-family: inherit;
      color: #04222B;
      padding: 13px 22px;
      border-radius: 16px;
      background: var(--stories-accent, #22D3EE);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    #storiesOverlay .st-add:active { transform: scale(0.95); }
    #storiesOverlay .st-add:disabled { opacity: 0.55; cursor: default; }
    /* ── Modo Descubrir: me gusta + pedir en el local (sin carrito mixto) ─ */
    #storiesOverlay .st-like {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #FFFFFF;
      font-size: 18px;
      padding: 9px 14px;
      border-radius: 16px;
      cursor: pointer;
      font-family: inherit;
    }
    #storiesOverlay .st-like .st-like-count {
      font-size: 13px;
      font-weight: 800;
    }
    #storiesOverlay .st-like.on {
      border-color: #F472B6;
      color: #F9A8D4;
    }
    #storiesOverlay .st-order {
      border: none;
      cursor: pointer;
      font-weight: 800;
      font-size: 14px;
      font-family: inherit;
      text-decoration: none;
      color: #04222B;
      padding: 13px 20px;
      border-radius: 16px;
      background: var(--stories-accent, #22D3EE);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      white-space: nowrap;
    }
    #storiesOverlay .st-exit {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #FFFFFF;
      font-size: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }
    #storiesOverlay .st-exit:focus-visible {
      outline: 3px solid var(--stories-accent, #22D3EE);
      outline-offset: 2px;
    }
    @media (min-width: 900px) {
      #storiesOverlay { align-items: center; }
      #storiesOverlay .st-feed {
        height: 88vh;
        height: min(88dvh, 860px);
        width: 430px;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
      }
      #storiesOverlay .st-story { height: 88vh; height: min(88dvh, 860px); }
    }
    /* ── Pista de gestos (solo primera historia, se desvanece sola) ──── */
    #storiesOverlay .st-hint {
      position: absolute;
      left: 50%;
      bottom: 34%;
      transform: translateX(-50%);
      z-index: 6;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 700;
      color: #FFFFFF;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 8px 14px;
      border-radius: 99px;
      pointer-events: none;
      animation: stHintFade 6s ease forwards;
    }
    @keyframes stHintFade {
      0%, 70% { opacity: 1; }
      100% { opacity: 0; visibility: hidden; }
    }
    @media print {
      #storiesOverlay { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      #storiesOverlay .st-add:active { transform: none; }
    }

    /* ── Bandeja de destacados 📖 sobre la carta normal ────────────────
       Anillos estilo IG por categoría: tap → historias en ese punto. */
    .stories-tray {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 2px 0 10px;
    }
    .stories-tray-rings {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 2px;
      scrollbar-width: none;
      flex: 1;
    }
    .stories-tray-rings::-webkit-scrollbar { display: none; }
    /* Anillos de categorías CENTRADOS cuando sobra espacio (todos los temas).
       margin auto en primero/último: con espacio libre reparte a ambos lados
       (grupo centrado); al desbordar los márgenes colapsan a 0 y la fila vuelve
       a alinear al inicio con scroll completo — sin recorte a la izquierda. */
    .stories-tray-rings > .st-ring:first-child { margin-left: auto; }
    .stories-tray-rings > .st-ring:last-child { margin-right: auto; }
    .st-ring {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 2px;
      font-family: inherit;
    }
    .st-ring-face {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2.5px solid transparent;
      background:
        linear-gradient(var(--surface-card), var(--surface-card)) padding-box,
        linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7) border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-size: 22px;
    }
    .st-ring-face img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .st-ring-label {
      font-size: 0.62rem;
      font-weight: 600;
      color: var(--chalk-muted);
      max-width: 60px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .st-ring:focus-visible {
      outline: 3px solid var(--chalk-gold);
      outline-offset: 2px;
      border-radius: 12px;
    }
    /* ── Botón compartir por historia + deep-link a la carta ─────────── */
    #storiesOverlay .st-share {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.4);
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #FFFFFF;
      font-size: 18px;
      cursor: pointer;
      flex-shrink: 0;
    }
    #storiesOverlay .st-links { margin-top: 10px; }
    #storiesOverlay .st-goto {
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 700;
      color: #C2CEDD;
      text-decoration: underline;
      text-underline-offset: 3px;
      padding: 2px 0;
    }
    #storiesOverlay .st-goto:hover { color: #FFFFFF; }
    /* ── Flash del plato al volver de historias ("Ver en carta") ─────── */
    .dish-card.st-flash {
      animation: stFlash 1.6s ease;
      border-color: var(--chalk-gold) !important;
    }    @keyframes stFlash {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
      25%, 65% { box-shadow: 0 0 0 3px var(--chalk-gold); }
    }
    /* ── Badge 🎬 en la carta clásica (el plato tiene video en Stories) ─ */
    /* Sólido teal-700 + blanco: contrasta en temas oscuros Y claros. */
    /* Badge "🎬 Video" eliminado (decisión del dueño, oct-2026):
       el video solo se vive en Stories. Regla CSS muerta fuera. */
    @media (prefers-reduced-motion: reduce) {
      .dish-card.st-flash { animation: none; }
    }
    /* ── Barra de filtros configurable (fija / auto-oculta / compacta) ──
       El dueño elige en Studio → Estética. `filter-collapse` marca los 4
       bloques (buscador, historias, categorías, dieta). */
    body.filter-autohide .filter-collapse {
      max-height: 220px;
      opacity: 1;
      transition: max-height .32s ease, opacity .25s ease, margin .32s ease, padding .32s ease, visibility 0s;
    }
    body.filter-autohide.filter-hidden .filter-collapse {
      max-height: 0;
      opacity: 0;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      visibility: hidden;
    }
    @media (prefers-reduced-motion: reduce) {
      body.filter-autohide .filter-collapse { transition: none; }
    }
    /* Compacta: todo más chico en una sola fila con scroll horizontal. */
    body.filter-compact .category-nav-wrapper { margin-bottom: 6px; gap: 6px; }
    body.filter-compact .cat-nav-icon-btn { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 8px; }
    body.filter-compact .cat-pill { padding: 3px 10px; font-size: 0.72rem; }
    body.filter-compact #dietaryFilterPills { padding-top: 2px; gap: 4px; }
    body.filter-compact .stories-tray { margin: 0 0 6px; gap: 6px; }
    body.filter-compact .search-box { padding: 7px 12px; font-size: 0.82rem; }

    /* ==========================================================================
       MORFOLOGÍA 10: BRUTALISTA (NEO-BRUTALISMO TIPOGRÁFICO)
       Papel crudo, tinta plana, bordes duros de 3px, sombras sólidas sin
       difuminar y mayúsculas. Sin fuentes nuevas: Montserrat (ya en
       menu.html) para titulares e IBM Plex Mono para precios. El layout manda
       sobre los themes (misma estrategia que Fine Dining): los themes solo
       tiñen el acento (--chalk-gold) y paletas puntuales.
       ========================================================================== */
    body.layout-brutalist {
      --bg-chalkboard: #F2EFE4;
      --surface-card: #FFFFFF;
      --surface-card-hover: #FFF9EC;
      --chalk-white: #141414;
      --chalk-muted: #2E2B24;
      --chalk-dim: #6B675C;
      --chalk-gold: #FF4D00;
      --border-chalk: #141414;
      background-color: #F2EFE4 !important;
      color: #141414;
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    }
    body.layout-brutalist .menu-container { max-width: 860px; }
    body.layout-brutalist .menu-header {
      padding: 34px 18px 22px;
      border-bottom: 4px solid #141414;
      margin-bottom: 26px;
      background: transparent !important;
      /* El base re-scopea las tintas a claro asumiendo header oscuro; acá el
         header va en papel → vuelven a tinta (Información y controles genéricos) */
      --chalk-white: #141414;
      --chalk-muted: #2E2B24;
      --chalk-dim: #6B675C;
    }
    body.layout-brutalist .btn-info-modal {
      background: #FFFFFF;
      border: 2px solid #141414;
      color: #141414;
      box-shadow: 3px 3px 0 #141414;
    }
    body.layout-brutalist .btn-info-modal:hover {
      background: var(--chalk-gold, #FF4D00);
      border-color: #141414;
      color: #141414;
    }
    body.layout-brutalist .btn-a11y-tts { color: #141414; }
    body.layout-brutalist .i18n-currency-select { color: #141414; }
    body.layout-brutalist .restaurant-title {
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      color: #141414 !important;
    }
    body.layout-brutalist .restaurant-slogan {
      font-family: 'IBM Plex Mono', monospace !important;
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 0.78rem;
      color: #2E2B24 !important;
    }
    body.layout-brutalist .status-pill {
      border-radius: 0 !important;
      font-family: 'IBM Plex Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.7rem;
    }
    body.layout-brutalist .status-pill.open {
      background: #C6F24E !important;
      color: #141414 !important;
      border: 2px solid #141414 !important;
    }
    body.layout-brutalist .status-pill.closed {
      background: #FF8FA3 !important;
      color: #141414 !important;
      border: 2px solid #141414 !important;
    }
    body.layout-brutalist .status-pill.order-later {
      background: #FFFFFF !important;
      color: #141414 !important;
      border: 2px solid #141414 !important;
    }
    body.layout-brutalist .search-box {
      background: #FFFFFF !important;
      border: 3px solid #141414 !important;
      border-radius: 0 !important;
      color: #141414 !important;
      font-weight: 600;
      box-shadow: 6px 6px 0 #141414;
    }
    body.layout-brutalist .search-box:focus {
      border-color: #141414 !important;
      box-shadow: 6px 6px 0 var(--chalk-gold, #FF4D00);
    }
    body.layout-brutalist .cat-pill {
      background: #FFFFFF !important;
      border: 2px solid #141414 !important;
      border-radius: 0 !important;
      color: #141414 !important;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.04em;
      box-shadow: 3px 3px 0 #141414;
    }
    body.layout-brutalist .cat-pill.active {
      background: var(--chalk-gold, #FF4D00) !important;
      color: #141414 !important;
      border-color: #141414 !important;
      box-shadow: 1px 1px 0 #141414;
    }
    body.layout-brutalist .category-header-row {
      border-bottom: 4px solid #141414;
      padding-bottom: 6px;
      margin-bottom: 14px;
    }
    body.layout-brutalist .category-title {
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      font-size: 1.35rem;
      color: #141414 !important;
    }
    body.layout-brutalist .category-badge-count {
      background: #141414;
      color: #F2EFE4 !important;
      border-radius: 0;
      padding: 2px 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
    }
    body.layout-brutalist .dish-card {
      background: #FFFFFF !important;
      border: 3px solid #141414 !important;
      border-radius: 0 !important;
      box-shadow: 6px 6px 0 #141414 !important;
      padding: 14px 16px !important;
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    body.layout-brutalist .dish-card:hover {
      background: #FFFDF4 !important;
      transform: translate(-2px, -2px);
      box-shadow: 8px 8px 0 #141414 !important;
    }
    body.layout-brutalist .dish-name {
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
      font-weight: 700 !important;
      text-transform: uppercase;
      letter-spacing: -0.01em;
      color: #141414 !important;
    }
    body.layout-brutalist .dish-desc {
      color: #4A463D !important;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.78rem;
    }
    body.layout-brutalist .dish-price {
      font-family: 'IBM Plex Mono', monospace !important;
      font-weight: 700;
      color: #141414 !important;
      background: var(--chalk-gold, #FF4D00);
      padding: 2px 8px;
      border: 2px solid #141414;
    }
    body.layout-brutalist .btn-add {
      background: #141414 !important;
      color: #F2EFE4 !important;
      border: 3px solid #141414 !important;
      border-radius: 0 !important;
      font-weight: 700;
      width: 36px !important;
      height: 36px !important;
      box-shadow: 4px 4px 0 var(--chalk-gold, #FF4D00);
    }
    body.layout-brutalist .btn-add:hover {
      background: var(--chalk-gold, #FF4D00) !important;
      color: #141414 !important;
    }
    body.layout-brutalist .dish-thumb {
      border: 3px solid #141414 !important;
      border-radius: 0 !important;
      box-shadow: 4px 4px 0 #141414;
    }
    body.layout-brutalist .meta-chip {
      background: #FFFFFF !important;
      border: 2px solid #141414 !important;
      border-radius: 0 !important;
      color: #141414 !important;
      box-shadow: 3px 3px 0 #141414;
    }
    body.layout-brutalist .dish-badge {
      border-radius: 0 !important;
      border: 2px solid #141414;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    body.layout-brutalist .floating-cart-bar {
      background: #141414 !important;
      color: #F2EFE4 !important;
      border-radius: 0 !important;
      border-top: 4px solid var(--chalk-gold, #FF4D00);
    }
    body.layout-brutalist .empty-state-card {
      background: #FFFFFF !important;
      border: 3px dashed #141414 !important;
      border-radius: 0 !important;
    }

    /* ==========================================================================
       MOTOR DE PLANTILLAS · IMAGE-MODE (api/utils/themeManifest.js)
       'grid' NO agrega clase (las miniaturas ya las da cada layout: cero
       regresión para los menús existentes). Estas clases solo aparecen cuando
       el modo difiere del default de la morfología (resuelve menuHeader.js).
       ========================================================================== */
    /* Sin fotos: miniaturas, carrusel de especialidades del chef y bandeja de
       stories ocultos — la carta queda puramente tipográfica. */
    body.image-none .dish-thumb,
    body.image-none .chef-specials-section,
    body.image-none .stories-tray { display: none !important; }

    /* Foto protagonista por categoría: sin miniatura por plato; el render
       inyecta UN <img class="category-hero-img"> por sección (prefer chef). */
    body.image-hero .dish-thumb,
    body.image-hero .chef-specials-section { display: none !important; }

    .category-hero-img {
      display: block;
      width: 100%;
      height: clamp(180px, 30vw, 320px);
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid rgba(128, 128, 128, 0.35);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
      margin: 0 0 16px;
      background: rgba(128, 128, 128, 0.12);
    }
    body.layout-minimalist .category-hero-img {
      border-radius: 0 !important;
      border-color: rgba(25, 23, 19, 0.2) !important;
      box-shadow: none !important;
      margin-bottom: 10px;
    }
    body.layout-brutalist .category-hero-img {
      border: 3px solid #141414 !important;
      border-radius: 0 !important;
      box-shadow: 6px 6px 0 #141414 !important;
    }

    /* image-grid sobre un layout cuyo default NO es grid (Fine Dining): las
       miniaturas cuadradas vuelven con el estilo propio del layout. */
    body.layout-minimalist.image-grid .dish-thumb { display: block !important; }

    /* ==========================================================================
       MOTOR DE PLANTILLAS · SIZING POR POPULARIDAD (menuSizing=popularity)
       El server adjunta data-pop-tier (2 grande / 1 normal / 0 chico) y solo
       agrega body.sizing-popularity si la morfología lo soporta (manifest;
       ticker/sticker/delivery/stories quedan afuera). El tier lo define el
       server: acá solo hay reglas de ancho, cero animación de layout.
       ========================================================================== */
    /* Énfasis de jerarquía a cualquier anchura (en móvil no hay span, así que
       esto es lo que hace visible la diferencia): el destacado respira más,
       el tier 0 se apiña. Nada de opacidad: no se toca contraste WCAG. */
    body.sizing-popularity.layout-classic .dishes-grid .dish-card[data-pop-tier="2"],
    body.sizing-popularity.layout-neon .dishes-grid .dish-card[data-pop-tier="2"],
    body.sizing-popularity.layout-minimalist .dishes-grid .dish-card[data-pop-tier="2"],
    body.sizing-popularity.layout-brutalist .dishes-grid .dish-card[data-pop-tier="2"] {
      padding-top: 22px !important;
      padding-bottom: 22px !important;
    }
    body.sizing-popularity.layout-classic .dishes-grid .dish-card[data-pop-tier="2"] .dish-name,
    body.sizing-popularity.layout-neon .dishes-grid .dish-card[data-pop-tier="2"] .dish-name,
    body.sizing-popularity.layout-brutalist .dishes-grid .dish-card[data-pop-tier="2"] .dish-name {
      font-size: 1.12em;
      font-weight: 700;
    }
    body.sizing-popularity.layout-classic .dishes-grid .dish-card[data-pop-tier="0"],
    body.sizing-popularity.layout-neon .dishes-grid .dish-card[data-pop-tier="0"],
    body.sizing-popularity.layout-minimalist .dishes-grid .dish-card[data-pop-tier="0"],
    body.sizing-popularity.layout-brutalist .dishes-grid .dish-card[data-pop-tier="0"] {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }
    /* ≥700px: los grids de una columna pasan a 2 y el tier 2 ocupa ambas.
       En 1 columna móvil NO se hace grid (span 2 crearía una columna
       implícita); en bento/billboard (ya son grids) solo aplica el span. */
    @media (min-width: 700px) {
      body.sizing-popularity.layout-classic .dishes-grid,
      body.sizing-popularity.layout-neon .dishes-grid,
      body.sizing-popularity.layout-minimalist .dishes-grid,
      body.sizing-popularity.layout-brutalist .dishes-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      body.sizing-popularity.layout-minimalist .dishes-grid { gap: 0 28px; }
      body.sizing-popularity .dishes-grid .dish-card[data-pop-tier="2"] {
        grid-column: span 2;
      }
    }

/* ============================================================
   BISTR� N�RDICO (theme-nordico) � oct-2026
   Copia estructural del est�ndar de carta moderna de referencia:
   p�gina off-white #F8F8F6, tinta #121212, tarjetas blancas con
   radio 20px + borde hairline #E9E9EA, miniatura a la izquierda,
   fila horizontal, nav de categor�as sticky blanca, tachado de
   precio viejo y kicker de horario en texto plano. Nada de pizarra,
   dorados ni sombras duras: minimalismo n�rdico de juice bar.
   La paleta viste TODOS los layouts; la morfolog�a (filas JOE)
   vive en layout-classic (patr�n moderno/explosivo).
   ============================================================ */

/* Kicker de horario (dato latente del plato: schedule.timeStart/End).
   Oculto por defecto para TODOS los temas; s�lo el nordico lo pinta. */
.dish-schedule-kicker { display: none; }

/* ---- Paleta (todos los layouts) ---- */
body.theme-nordico {
  --bg-chalkboard: #F8F8F6;
  --surface-card: #FFFFFF;
  --surface-card-hover: #FDFDFB;
  --chalk-white: #121212;              /* la tinta ES el texto del tema claro */
  --chalk-muted: #4A4A4A;
  --chalk-dim: #6E6E6E;                /* 4.9:1 sobre blanco � AA */
  --chalk-gold: #121212;               /* CTA/acento = tinta (nada dorado) */
  --chalk-gold-ink: #121212;
  --chalk-leaf: #2F7D33;
  --border-chalk: #E9E9EA;             /* hairline opaco, la firma n�rdica */
  --border-gold: rgba(18, 18, 18, 0.55);
  --nordico-radius-card: 20px;
  --nordico-radius-thumb: 8px;
  background-color: #F8F8F6;
  color: #121212;
  font-family: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
}
/* El men�-container deja ver el off-white del body (transparente!) */
body.theme-nordico .menu-container { background: #F8F8F6; box-shadow: none; }
/* El header base asume fondo oscuro; el claro re-scopes a tinta */
body.theme-nordico .menu-header { --chalk-white: #121212; --chalk-dim: #6E6E6E; }

/* ---- Cabecera de tienda: nombre grande, slogan en tinta suave ---- */
body.theme-nordico .restaurant-title { color: #121212; }
body.theme-nordico .restaurant-slogan { color: #6E6E6E; }
body.theme-nordico .menu-header { background: #F8F8F6; }
/* Con portada: scrim claro para que la tinta se mantenga legible */
body.theme-nordico.has-hero-banner .menu-header {
  background: linear-gradient(180deg, rgba(248, 248, 246, 0.92) 0%, rgba(248, 248, 246, 0.96) 100%);
}

/* ---- Barra sticky de controles: card blanca con hairline ---- */
body.theme-nordico .controls-wrapper {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #E9E9EA;
  border-radius: var(--nordico-radius-card);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.04);
}
body.theme-nordico .controls-wrapper .search-box {
  background: #FFFFFF;
  border: 1px solid #E9E9EA;
  color: #121212;
  border-radius: 12px;
}
body.theme-nordico .controls-wrapper .search-box::placeholder { color: #9A9A9E; }

/* Pills (categor�as + dietas): texto plano, activa en tinta plena */
body.theme-nordico .cat-pill {
  background: #FFFFFF;
  border: 1px solid #E9E9EA;
  color: #121212;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-nordico .cat-pill:hover { background: #F1F1EE; }
body.theme-nordico .cat-pill.active,
body.theme-nordico .cat-pill[aria-pressed="true"] {
  background: #121212;
  color: #FFFFFF;
  border-color: #121212;
}
body.theme-nordico .pill-emoji { opacity: 0.9; }

/* ---- Cabecera de categor�a: fila editorial sin joyas ni tizas ---- */
body.theme-nordico .category-title {
  color: #121212;
  font-weight: 700;
  letter-spacing: -0.2px;
}
body.theme-nordico .category-title::before,
body.theme-nordico .category-title::after { content: none; }
body.theme-nordico .category-title .category-count,
body.theme-nordico .cat-count { color: #6E6E6E; font-weight: 500; }

/* ---- Tarjeta de plato: fila horizontal estilo juice bar ---- */
body.theme-nordico.layout-classic .dish-card {
  background: #FFFFFF;
  border: 1px solid #E9E9EA;
  border-radius: var(--nordico-radius-card);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-nordico.layout-classic .dish-card:not(.dish-has-photo) {
  grid-template-columns: 1fr auto;
}
body.theme-nordico.layout-classic .dish-card:hover {
  border-color: #D9D9DC;
  box-shadow: 0 2px 10px rgba(18, 18, 18, 0.06);
}
/* Miniatura: 112px, radio 8 (la figura JOE), columna 1 de punta a punta */
body.theme-nordico.layout-classic .dish-thumb {
  width: 112px;
  height: 140px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: var(--nordico-radius-thumb);
  grid-row: 1;
  grid-column: 1;
}
/* Cuerpo: celda central apilada natural (kicker → título → desc → precio) */
body.theme-nordico.layout-classic .dish-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.theme-nordico.layout-classic .dish-name {
  color: #121212;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}
body.theme-nordico.layout-classic .dish-desc {
  color: #6E6E6E;
  font-size: 0.82rem;
  line-height: 1.45;
}
body.theme-nordico.layout-classic .dish-price {
  margin-top: auto;
  color: #121212;
  font-weight: 700;
  font-size: 0.95rem;
}
body.theme-nordico.layout-classic .dish-action {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
}
/* Badges: texto m�nimo, sin chips de color chill�n (kicker n�rdico) */
body.theme-nordico .dish-badge {
  background: none !important;
  border: none !important;
  color: #6E6E6E !important;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  padding: 0;
}
/* El badge AGOTADO conserva su gravedad roja (informaci�n, no adorno) */
body.theme-nordico .dish-badge[style*="background:#E53E3E"] {
  background: #E53E3E !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
}
/* Kicker de horario: SOLO DE 08:00 A 12:00 � texto plano sobre el nombre */
body.theme-nordico .dish-schedule-kicker {
  display: block;
  color: #6E6E6E;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
/* Bot�n +: c�rculo de tinta (el �nico punto negro de la fila) */
body.theme-nordico .btn-add {
  background: #121212;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 600;
}
body.theme-nordico .btn-add:hover { background: #333336; }
body.theme-nordico .qty-counter { color: #6E6E6E; font-weight: 500; }
body.theme-nordico .dish-qty-controls {
  border: none;
  background: none;
  padding: 0;
  gap: 8px;
}

/* ---- Chef specials: mismas tarjetas fila (combo offers JOE) ---- */
body.theme-nordico .chef-specials-title { color: #121212; font-weight: 700; }
body.theme-nordico .chef-badge-gold {
  background: none;
  border: 1px solid #E9E9EA;
  color: #6E6E6E;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-nordico.layout-classic .chef-special-card {
  background: #FFFFFF;
  border: 1px solid #E9E9EA;
  border-radius: var(--nordico-radius-card);
  box-shadow: none;
}
body.theme-nordico .chef-special-thumb {
  border-radius: var(--nordico-radius-thumb);
}
body.theme-nordico .chef-special-tag-ribbon {
  color: #121212;
  border-color: #E9E9EA;
}
body.theme-nordico .chef-special-name { color: #121212; font-weight: 700; }
body.theme-nordico .chef-special-desc { color: #6E6E6E; }
body.theme-nordico .chef-special-price { color: #121212; font-weight: 700; }

/* ---- Carrito flotante: barra blanca hairline (basket JOE) ---- */
body.theme-nordico #floatingCart {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #E9E9EA;
  color: #121212;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(18, 18, 18, 0.10);
}
body.theme-nordico #floatingCart .cart-total,
body.theme-nordico #cartTotalBadge {
  color: #121212;
}
body.theme-nordico #cartTotalBadge {
  background: #121212;
  color: #FFFFFF;
  border-radius: 999px;
}

/* ---- Checkout y resumen: tarjetas blancas hairline ---- */
body.theme-nordico .total-summary,
body.theme-nordico [class*="checkout"],
body.theme-nordico .checkout-summary-box {
  background: #FFFFFF;
  border-color: #E9E9EA;
}
body.theme-nordico .summary-row { color: #6E6E6E; }
body.theme-nordico .summary-row.total-row {
  color: #121212;
  border-color: #E9E9EA;
}
body.theme-nordico .summary-row.total-row span.total-amount { color: #121212; }
body.theme-nordico .total-amount { color: #121212; }
/* Pill activa de propina: el JS pinta fondo --chalk-gold (tinta en nordico
   con texto literal #101614) → inversa por presencia del estilo inline */
body.theme-nordico button[data-tip-pill][style*="chalk-gold"] {
  background: #121212 !important;
  color: #FFFFFF !important;
  border-color: #121212 !important;
}
/* CTA del modal de nota (mismo patrón: bg --chalk-gold + texto literal) */
body.theme-nordico .dish-note-confirm {
  background: #121212;
  color: #FFFFFF;
}

/* ---- CTA principal: pill con radio, sin sombra dura ---- */
body.theme-nordico .btn-wa-submit {
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

/* ---- Modales: superficie blanca radio 20, overlays suaves ---- */
body.theme-nordico .modal-overlay { background: rgba(18, 18, 18, 0.34); }
body.theme-nordico .modal-box,
body.theme-nordico .modal-content,
body.theme-nordico .modal {
  background: #FFFFFF;
  border-radius: var(--nordico-radius-card);
  color: #121212;
  box-shadow: none;
}
body.theme-nordico .modal-box h2,
body.theme-nordico .modal-box h3,
body.theme-nordico .modal h2 { color: #121212; }
body.theme-nordico .modal-box input,
body.theme-nordico .modal-box textarea,
body.theme-nordico .modal-box select {
  background: #F8F8F6;
  border: 1px solid #E9E9EA;
  color: #121212;
}

/* ---- Chips de meta (horario/tel�fono/zona): texto plano dim ---- */
body.theme-nordico .meta-chip,
body.theme-nordico .dish-meta {
  background: none;
  border: none;
  color: #6E6E6E;
  padding-left: 0;
}
body.theme-nordico .meta-emoji { opacity: 0.75; }

/* ---- Anillos de historias: hairline neutro, activa en tinta ---- */
body.theme-nordico .st-ring {
  border-color: #D9D9DC;
}
body.theme-nordico .st-ring.active { border-color: #121212; }

/* ---- Estado vac�o: misma tarjeta hairline ---- */
body.theme-nordico .empty-state-card {
  background: #FFFFFF;
  border: 1px solid #E9E9EA;
  border-radius: var(--nordico-radius-card);
  box-shadow: none;
}
body.theme-nordico .empty-state-title { color: #121212; }
body.theme-nordico .empty-state-desc { color: #6E6E6E; }
body.theme-nordico .empty-state-btn {
  background: #121212;
  color: #FFFFFF;
  border-radius: 999px;
}

/* ---- Foco visible: tinta sobre papeler�a clara ---- */
body.theme-nordico :focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
}
body.theme-nordico .btn-wa-submit:focus-visible,
body.theme-nordico .btn-add:focus-visible,
body.theme-nordico .cat-pill:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

/* Movimiento honesto: hover estado (transici�n) bajo reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-nordico .dish-card,
  body.theme-nordico .btn-add,
  body.theme-nordico .cat-pill { transition: none; }
}

/* Superficies de la APP que asumen header/superficie oscura � el nordico
   es claro: re-scope expl�cito (patr�n �52 de tintas en papel). */
body.theme-nordico .skip-link { background: #121212; color: #F8F8F6; }
/* badge de estado abierto/cerrado: color inline desde JS → gana !important
   (patrón layout-minimalist/brutalist) */
body.theme-nordico .status-pill.open {
  background: rgba(47, 125, 51, 0.08) !important;
  border-color: rgba(47, 125, 51, 0.35) !important;
  color: #2F7D33 !important;
}
body.theme-nordico .status-pill.closed,
body.theme-nordico .status-pill.order-later { color: #C53030 !important; }
body.theme-nordico .i18n-demo-theme,
body.theme-nordico .btn-push-accept { background: #121212; color: #FFFFFF; }

/* ============================================================
   PERFUMERÍA — SOCLES DE FRAGANCIA (oct-2026)
   Perfumería es rubro de primera clase pero NUNCA tuvo estética
   propia (la demo Casa Aromas usaba un id de tema inexistente).
   Dos paletas exclusivas del rubro, misma arquitectura que las
   12 de heladería: la paleta viste TODOS los layouts y la
   morfología especial vive SOLO en layout-classic (patrón
   moderna/explosivo/nordico).
   ============================================================ */

/* ------------------------------------------------------------
   1) theme-perfu-farmacia — BOTICA DERMATO (claro)
   Farmacia/dermatología-botica: porcelana fría #F4F7F6, tinta
   sapogreen #1E2D2A, acento EUCALIPTO #3D7C68 (AA 4.9:1 sobre
   blanco), tarjeta blanca hairline #E2E8E5. Firma: cabeceras de
   categoría como ETIQUETAS DE ALBARELO (uppercase + doble filete
   fino) y nombre del local en serif (etiqueta de botica). Sin
   beige+latón (el cliché premium) NI dorados: botica limpia.
   ------------------------------------------------------------ */
body.theme-perfu-farmacia {
  --bg-chalkboard: #F4F7F6;
  --surface-card: #FFFFFF;
  --surface-card-hover: #FBFDFC;
  --chalk-white: #1E2D2A;              /* tinta sapoverde ≈ 13:1 s/ porcelana */
  --chalk-muted: #43524E;
  --chalk-dim: #5C6B67;                /* 5.6:1 sobre blanco — AA */
  --chalk-gold: #3D7C68;               /* acento botica = eucalipto (4.9:1) */
  --chalk-gold-ink: #1E2D2A;
  --chalk-leaf: #3D7C68;
  --border-chalk: #E2E8E5;             /* hairline fria, la firma de la botica */
  --border-gold: rgba(61, 124, 104, 0.55);
  --perfu-radius-card: 14px;
  --perfu-radius-thumb: 6px;
  background-color: #F4F7F6;
  color: #1E2D2A;
  font-family: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
}
body.theme-perfu-farmacia .menu-container { background: #F4F7F6; box-shadow: none; }
/* El header base asume fondo oscuro; el claro re-scopea a tinta */
body.theme-perfu-farmacia .menu-header { --chalk-white: #1E2D2A; --chalk-dim: #5C6B67; }

body.theme-perfu-farmacia .restaurant-title {
  color: #1E2D2A;
  font-family: 'Playfair Display', serif;   /* etiqueta de botica */
  letter-spacing: 0.01em;
}
body.theme-perfu-farmacia .restaurant-slogan { color: #5C6B67; }
body.theme-perfu-farmacia .menu-header { background: #F4F7F6; }
/* Con portada: scrim porcelana para mantener legible la tinta */
body.theme-perfu-farmacia.has-hero-banner .menu-header {
  background: linear-gradient(180deg, rgba(244, 247, 246, 0.93) 0%, rgba(244, 247, 246, 0.97) 100%);
}

body.theme-perfu-farmacia .controls-wrapper {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #E2E8E5;
  border-radius: var(--perfu-radius-card);
  box-shadow: 0 1px 2px rgba(30, 45, 42, 0.04);
}
body.theme-perfu-farmacia .controls-wrapper .search-box {
  background: #FFFFFF;
  border: 1px solid #E2E8E5;
  color: #1E2D2A;
  border-radius: 10px;
}
body.theme-perfu-farmacia .controls-wrapper .search-box::placeholder { color: #8FA0A0; }

body.theme-perfu-farmacia .cat-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8E5;
  color: #1E2D2A;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-perfu-farmacia .cat-pill:hover { background: #EEF4F2; }
body.theme-perfu-farmacia .cat-pill.active,
body.theme-perfu-farmacia .cat-pill[aria-pressed="true"] {
  background: #3D7C68;
  color: #FFFFFF;
  border-color: #3D7C68;
}

/* Firma de la botica: cabecera de categoría como ALBARELO —
   uppercase micro-label + doble filete fino (libro de contabilidad) */
body.theme-perfu-farmacia .category-title {
  color: #1E2D2A;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding-bottom: 8px;
  border-bottom: 3px double #CBDAD5;
}
body.theme-perfu-farmacia .category-title::before,
body.theme-perfu-farmacia .category-title::after { content: none; }
body.theme-perfu-farmacia .category-title .category-count,
body.theme-perfu-farmacia .cat-count { color: #5C6B67; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Tarjeta de plato: fila horizontal blanca hairline (cuadrícula albarelera) */
body.theme-perfu-farmacia.layout-classic .dish-card {
  background: #FFFFFF;
  border: 1px solid #E2E8E5;
  border-radius: var(--perfu-radius-card);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-perfu-farmacia.layout-classic .dish-card:not(.dish-has-photo) {
  grid-template-columns: 1fr auto;
}
body.theme-perfu-farmacia.layout-classic .dish-card:hover {
  border-color: #C4D4CF;
  box-shadow: 0 2px 10px rgba(30, 45, 42, 0.05);
}
body.theme-perfu-farmacia.layout-classic .dish-thumb {
  width: 104px;
  height: 132px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: var(--perfu-radius-thumb);
  grid-row: 1;
  grid-column: 1;
}
body.theme-perfu-farmacia.layout-classic .dish-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.theme-perfu-farmacia.layout-classic .dish-name {
  color: #1E2D2A;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.1px;
}
body.theme-perfu-farmacia.layout-classic .dish-desc { color: #5C6B67; font-size: 0.82rem; line-height: 1.45; }
/* El precio SALE SÓLO de la etiqueta: eucalipto, la tinta de marca */
body.theme-perfu-farmacia.layout-classic .dish-price {
  margin-top: auto;
  color: #2F6353;
  font-weight: 700;
  font-size: 0.95rem;
}
body.theme-perfu-farmacia.layout-classic .dish-action { grid-column: 3; grid-row: 1; align-self: end; }

body.theme-perfu-farmacia .dish-badge {
  background: none !important;
  border: none !important;
  color: #5C6B67 !important;
  font-weight: 500;
  font-size: 0.7rem;
  padding: 0;
}
/* El AGOTADO conserva su gravedad roja (información, no adorno) */
body.theme-perfu-farmacia .dish-badge[style*="background:#E53E3E"] {
  background: #E53E3E !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
}

body.theme-perfu-farmacia .btn-add {
  background: #3D7C68;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 600;
}
body.theme-perfu-farmacia .btn-add:hover { background: #2F6353; }
body.theme-perfu-farmacia .qty-counter { color: #5C6B67; font-weight: 500; }
body.theme-perfu-farmacia .dish-qty-controls { border: none; background: none; padding: 0; gap: 8px; }

body.theme-perfu-farmacia .chef-specials-title { color: #1E2D2A; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
body.theme-perfu-farmacia .chef-badge-gold {
  background: none;
  border: 1px solid #E2E8E5;
  color: #5C6B67;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-perfu-farmacia.layout-classic .chef-special-card {
  background: #FFFFFF;
  border: 1px solid #E2E8E5;
  border-radius: var(--perfu-radius-card);
  box-shadow: none;
}
body.theme-perfu-farmacia .chef-special-thumb { border-radius: var(--perfu-radius-thumb); }
body.theme-perfu-farmacia .chef-special-tag-ribbon { color: #1E2D2A; border-color: #E2E8E5; }
body.theme-perfu-farmacia .chef-special-name { color: #1E2D2A; font-weight: 700; }
body.theme-perfu-farmacia .chef-special-desc { color: #5C6B67; }
body.theme-perfu-farmacia .chef-special-price { color: #2F6353; font-weight: 700; }

body.theme-perfu-farmacia #floatingCart {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #E2E8E5;
  color: #1E2D2A;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(30, 45, 42, 0.10);
}
body.theme-perfu-farmacia #floatingCart .cart-total,
body.theme-perfu-farmacia #cartTotalBadge { color: #1E2D2A; }
body.theme-perfu-farmacia #cartTotalBadge {
  background: #3D7C68;
  color: #FFFFFF;
  border-radius: 999px;
}

body.theme-perfu-farmacia .total-summary,
body.theme-perfu-farmacia [class*="checkout"],
body.theme-perfu-farmacia .checkout-summary-box {
  background: #FFFFFF;
  border-color: #E2E8E5;
}
body.theme-perfu-farmacia .summary-row { color: #5C6B67; }
body.theme-perfu-farmacia .summary-row.total-row { color: #1E2D2A; border-color: #E2E8E5; }
body.theme-perfu-farmacia .summary-row.total-row span.total-amount { color: #1E2D2A; }
body.theme-perfu-farmacia .total-amount { color: #1E2D2A; }
/* Pill activa de propina: el JS pinta bg var(--chalk-gold) + texto literal;
   en la botica (eucalipto) la inversa correcta es texto blanco */
body.theme-perfu-farmacia button[data-tip-pill][style*="chalk-gold"] {
  background: #3D7C68 !important;
  color: #FFFFFF !important;
  border-color: #3D7C68 !important;
}
body.theme-perfu-farmacia .dish-note-confirm { background: #3D7C68; color: #FFFFFF; }

body.theme-perfu-farmacia .btn-wa-submit { border-radius: 999px; box-shadow: none; font-weight: 700; }

body.theme-perfu-farmacia .modal-overlay { background: rgba(30, 45, 42, 0.34); }
body.theme-perfu-farmacia .modal-box,
body.theme-perfu-farmacia .modal-content,
body.theme-perfu-farmacia .modal {
  background: #FFFFFF;
  border-radius: var(--perfu-radius-card);
  color: #1E2D2A;
  box-shadow: none;
}
body.theme-perfu-farmacia .modal-box h2,
body.theme-perfu-farmacia .modal-box h3,
body.theme-perfu-farmacia .modal h2 { color: #1E2D2A; }
body.theme-perfu-farmacia .modal-box input,
body.theme-perfu-farmacia .modal-box textarea,
body.theme-perfu-farmacia .modal-box select {
  background: #F4F7F6;
  border: 1px solid #E2E8E5;
  color: #1E2D2A;
}

body.theme-perfu-farmacia .meta-chip,
body.theme-perfu-farmacia .dish-meta { background: none; border: none; color: #5C6B67; padding-left: 0; }
body.theme-perfu-farmacia .meta-emoji { opacity: 0.75; }

body.theme-perfu-farmacia .st-ring { border-color: #C4D4CF; }
body.theme-perfu-farmacia .st-ring.active { border-color: #3D7C68; }

body.theme-perfu-farmacia .empty-state-card {
  background: #FFFFFF;
  border: 1px solid #E2E8E5;
  border-radius: var(--perfu-radius-card);
  box-shadow: none;
}
body.theme-perfu-farmacia .empty-state-title { color: #1E2D2A; }
body.theme-perfu-farmacia .empty-state-desc { color: #5C6B67; }
body.theme-perfu-farmacia .empty-state-btn { background: #3D7C68; color: #FFFFFF; border-radius: 999px; }

/* Barra especial de perfumería (Modo Perfumería): hairline de botica */
body.theme-perfu-farmacia #specialActionsBar { background: #FFFFFF; border: 1px solid #E2E8E5; border-radius: var(--perfu-radius-card); }
body.theme-perfu-farmacia #btnTogglePerfumeryMode { background: #EEF4F2; color: #2F6353; border: 1px solid #CBDAD5; }

body.theme-perfu-farmacia :focus-visible { outline: 2px solid #2F6353; outline-offset: 2px; }
body.theme-perfu-farmacia .btn-wa-submit:focus-visible,
body.theme-perfu-farmacia .btn-add:focus-visible,
body.theme-perfu-farmacia .cat-pill:focus-visible { outline: 2px solid #2F6353; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.theme-perfu-farmacia .dish-card,
  body.theme-perfu-farmacia .btn-add,
  body.theme-perfu-farmacia .cat-pill { transition: none; }
}

/* Superficies de la APP que asumen header/superficie oscura — la botica
   es clara: re-scope explícito (patrón §52 de tintas en papel). */
body.theme-perfu-farmacia .skip-link { background: #1E2D2A; color: #F4F7F6; }
body.theme-perfu-farmacia .status-pill.open {
  background: rgba(61, 124, 104, 0.08) !important;
  border-color: rgba(61, 124, 104, 0.35) !important;
  color: #2F6353 !important;
}
body.theme-perfu-farmacia .status-pill.closed,
body.theme-perfu-farmacia .status-pill.order-later { color: #C53030 !important; }
body.theme-perfu-farmacia .i18n-demo-theme,
body.theme-perfu-farmacia .btn-push-accept { background: #1E2D2A; color: #FFFFFF; }

/* ------------------------------------------------------------
   2) theme-perfu-noir — PARFUM NOIR (oscuro)
   Frasco de perfume en la noche: aubergine #180E1A con blush
   #E2A9BB y superficies #221527. Firma: tipografía de caja de
   perfume (MAISON) — labels mayúsculas de amplio tracking con
   filetes finos, y precio como gajo rubí-gris. Nada de neón:
   la noche de la perfumería es mate, sin tubos.
   Contrastar sobre #180E1A: texto #F3E9F0 ≈16:1, dim #B9A3B4 ≈8:1,
   blush #E2A9BB ≈9.5:1 — AA holgado.
   ------------------------------------------------------------ */
body.theme-perfu-noir {
  --bg-chalkboard: #180E1A;
  --surface-card: #221527;
  --surface-card-hover: #2A1B30;
  --chalk-white: #F3E9F0;
  --chalk-muted: #D9C5CF;
  --chalk-dim: #B9A3B4;
  --chalk-gold: #E2A9BB;               /* acento = blusa del perfume */
  --chalk-gold-ink: #180E1A;
  --chalk-leaf: #A7C4B5;
  --border-chalk: rgba(226, 169, 187, 0.22);
  --border-gold: rgba(226, 169, 187, 0.45);
  --perfu-noir-radius: 10px;
  background-color: #180E1A;
  color: #F3E9F0;
  font-family: 'Montserrat', system-ui, sans-serif;
}
/* Vahído de la noche: dos capas suaves (sin neón, mate) */
body.theme-perfu-noir {
  background-image:
    radial-gradient(ellipse 80% 40% at 20% -10%, rgba(226, 169, 187, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 35% at 90% 110%, rgba(151, 118, 167, 0.07), transparent 65%);
}
body.theme-perfu-noir .menu-container { background: transparent; box-shadow: none; }

/* Nombre del local: label de maison (serif + tracking amplio) */
body.theme-perfu-noir .restaurant-title {
  color: #F3E9F0;
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.06em;
}
body.theme-perfu-noir .restaurant-slogan { color: #B9A3B4; letter-spacing: 0.04em; }

/* Firma MAISON: cabecera de categoría como caja de perfume —
   label mayúscula con filete fino ARRIBA y ABAJO (tapas del frasco) */
body.theme-perfu-noir .category-title {
  color: #E2A9BB;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 10px 0;
  border-top: 1px solid var(--border-chalk);
  border-bottom: 1px solid var(--border-chalk);
  margin-top: 18px;
}
body.theme-perfu-noir .category-title::before,
body.theme-perfu-noir .category-title::after { content: none; }
body.theme-perfu-noir .category-title .category-count,
body.theme-perfu-noir .cat-count { color: #B9A3B4; font-weight: 500; text-transform: none; letter-spacing: 0.04em; }

/* Fila de plato: superficie frasca con filete blush scrim */
body.theme-perfu-noir.layout-classic .dish-card {
  background: #221527;
  border: 1px solid var(--border-chalk);
  border-radius: var(--perfu-noir-radius);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-perfu-noir.layout-classic .dish-card:not(.dish-has-photo) { grid-template-columns: 1fr auto; }
body.theme-perfu-noir.layout-classic .dish-card:hover { border-color: rgba(226, 169, 187, 0.45); }
body.theme-perfu-noir.layout-classic .dish-thumb {
  width: 104px;
  height: 132px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: 6px;
  grid-row: 1;
  grid-column: 1;
  filter: saturate(0.92);
}
body.theme-perfu-noir.layout-classic .dish-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-perfu-noir.layout-classic .dish-name { color: #F3E9F0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
body.theme-perfu-noir.layout-classic .dish-desc { color: #B9A3B4; font-size: 0.82rem; line-height: 1.45; }
/* Precio como gajo del frasco: blush, tracking fino (label grabada) */
body.theme-perfu-noir.layout-classic .dish-price {
  margin-top: auto;
  color: #E2A9BB;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
body.theme-perfu-noir.layout-classic .dish-action { grid-column: 3; grid-row: 1; align-self: end; }

body.theme-perfu-noir .dish-badge {
  background: rgba(226, 169, 187, 0.12) !important;
  border: 1px solid var(--border-chalk) !important;
  color: #E2A9BB !important;
  font-weight: 500;
  font-size: 0.7rem;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}
/* El AGOTADO conserva su gravedad roja (información, no adorno) */
body.theme-perfu-noir .dish-badge[style*="background:#E53E3E"] {
  background: #E53E3E !important;
  color: #FFFFFF !important;
}

/* El botón + es el TAPÓN del frasco: blush mate, nunca neón */
body.theme-perfu-noir .btn-add {
  background: #E2A9BB;
  color: #180E1A;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 600;
}
body.theme-perfu-noir .btn-add:hover { background: #EFC4D2; }
body.theme-perfu-noir .qty-counter { color: #B9A3B4; font-weight: 500; }
body.theme-perfu-noir .dish-qty-controls { border: none; background: none; padding: 0; gap: 8px; }

body.theme-perfu-noir .chef-specials-title { color: #F3E9F0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; }
body.theme-perfu-noir .chef-badge-gold {
  background: rgba(226, 169, 187, 0.12);
  border: 1px solid var(--border-chalk);
  color: #E2A9BB;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-perfu-noir.layout-classic .chef-special-card {
  background: #221527;
  border: 1px solid var(--border-chalk);
  border-radius: var(--perfu-noir-radius);
  box-shadow: none;
}
body.theme-perfu-noir .chef-special-thumb { border-radius: 6px; }
body.theme-perfu-noir .chef-special-tag-ribbon { color: #E2A9BB; border-color: var(--border-chalk); }
body.theme-perfu-noir .chef-special-name { color: #F3E9F0; font-weight: 600; }
body.theme-perfu-noir .chef-special-desc { color: #B9A3B4; }
body.theme-perfu-noir .chef-special-price { color: #E2A9BB; font-weight: 700; }

body.theme-perfu-noir #floatingCart {
  background: rgba(34, 21, 39, 0.96);
  border: 1px solid var(--border-chalk);
  color: #F3E9F0;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}
body.theme-perfu-noir #floatingCart .cart-total,
body.theme-perfu-noir #cartTotalBadge { color: #E2A9BB; }
body.theme-perfu-noir #cartTotalBadge {
  background: #E2A9BB;
  color: #180E1A;
  border-radius: 999px;
}

body.theme-perfu-noir .total-summary,
body.theme-perfu-noir [class*="checkout"],
body.theme-perfu-noir .checkout-summary-box {
  background: #221527;
  border-color: var(--border-chalk);
}
body.theme-perfu-noir .summary-row { color: #B9A3B4; }
body.theme-perfu-noir .summary-row.total-row { color: #F3E9F0; border-color: var(--border-chalk); }
body.theme-perfu-noir .summary-row.total-row span.total-amount { color: #E2A9BB; }
body.theme-perfu-noir .total-amount { color: #E2A9BB; }
/* Pill activa de propina: JS pinta bg var(--chalk-gold) = blush con tinta */
body.theme-perfu-noir button[data-tip-pill][style*="chalk-gold"] {
  background: #E2A9BB !important;
  color: #180E1A !important;
  border-color: #E2A9BB !important;
}
body.theme-perfu-noir .dish-note-confirm { background: #E2A9BB; color: #180E1A; }

body.theme-perfu-noir .btn-wa-submit { border-radius: 999px; box-shadow: none; font-weight: 700; }

body.theme-perfu-noir .modal-overlay { background: rgba(10, 5, 12, 0.62); }
body.theme-perfu-noir .modal-box,
body.theme-perfu-noir .modal-content,
body.theme-perfu-noir .modal {
  background: #221527;
  border: 1px solid var(--border-chalk);
  border-radius: 14px;
  color: #F3E9F0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
body.theme-perfu-noir .modal-box h2,
body.theme-perfu-noir .modal-box h3,
body.theme-perfu-noir .modal h2 { color: #F3E9F0; }
body.theme-perfu-noir .modal-box input,
body.theme-perfu-noir .modal-box textarea,
body.theme-perfu-noir .modal-box select {
  background: #180E1A;
  border: 1px solid var(--border-chalk);
  color: #F3E9F0;
}

body.theme-perfu-noir .meta-chip,
body.theme-perfu-noir .dish-meta { background: rgba(226, 169, 187, 0.08); border: 1px solid var(--border-chalk); color: #D9C5CF; }
body.theme-perfu-noir .meta-emoji { opacity: 0.8; }

body.theme-perfu-noir .st-ring { border-color: rgba(226, 169, 187, 0.3); }
body.theme-perfu-noir .st-ring.active { border-color: #E2A9BB; }

body.theme-perfu-noir .empty-state-card {
  background: #221527;
  border: 1px solid var(--border-chalk);
  border-radius: 14px;
  box-shadow: none;
}
body.theme-perfu-noir .empty-state-title { color: #F3E9F0; }
body.theme-perfu-noir .empty-state-desc { color: #B9A3B4; }
body.theme-perfu-noir .empty-state-btn { background: #E2A9BB; color: #180E1A; border-radius: 999px; }

body.theme-perfu-noir #specialActionsBar { background: rgba(34, 21, 39, 0.96); border: 1px solid var(--border-chalk); border-radius: 14px; backdrop-filter: blur(6px); }
body.theme-perfu-noir #btnTogglePerfumeryMode { background: rgba(226, 169, 187, 0.12); color: #E2A9BB; border: 1px solid var(--border-chalk); }

body.theme-perfu-noir :focus-visible { outline: 2px solid #E2A9BB; outline-offset: 2px; }
body.theme-perfu-noir .btn-wa-submit:focus-visible,
body.theme-perfu-noir .btn-add:focus-visible,
body.theme-perfu-noir .cat-pill:focus-visible { outline: 2px solid #E2A9BB; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.theme-perfu-noir .dish-card,
  body.theme-perfu-noir .btn-add,
  body.theme-perfu-noir .cat-pill { transition: none; }
}

/* El tema ES oscuro: header/superficies base ya lo asumen — solo
   garantizamos las pills de estado y el foco en dark (patrón cioccolato). */
body.theme-perfu-noir .status-pill.open {
  background: rgba(167, 196, 181, 0.12) !important;
  border-color: rgba(167, 196, 181, 0.4) !important;
  color: #A7C4B5 !important;
}
body.theme-perfu-noir .status-pill.closed,
body.theme-perfu-noir .status-pill.order-later { color: #F2A3A3 !important; }

/* ------------------------------------------------------------
   THEME-FUEGO — PIZZA AL FUEGO (oscuro, oct-2026 batch 2)
   Pizzería de leña: masa de carbón #201812 con el respiro del
   horno (dos brasas radiales al pie) y acento ember #E8853B.
   Firma: cabecera de categoría = cartel de hornada (title 800
   uppercase + barrita ember de 46×4px) y botón + círculo ember
   con tinta de masa.  AA sobre #201812: ink #F5EBDD ≈14:1,
   dim #BCAB92 ≈7.8:1, ember #E8853B ≈6.6:1 — holgado.
   ------------------------------------------------------------ */
body.theme-fuego {
  --bg-chalkboard: #201812;
  --surface-card: #2A2018;
  --surface-card-hover: #32261A;
  --chalk-white: #F5EBDD;
  --chalk-muted: #E4D6C2;
  --chalk-dim: #BCAB92;
  --chalk-gold: #E8853B;               /* acento = brasa del horno */
  --chalk-gold-ink: #201812;
  --chalk-leaf: #8FA96B;
  --border-chalk: rgba(245, 235, 221, 0.14);
  --border-gold: rgba(232, 133, 59, 0.5);
  --fuego-radius: 12px;
  background-color: #201812;
  color: #F5EBDD;
  font-family: 'Montserrat', system-ui, sans-serif;
}
/* La boca del horno: brasas suaves al pie de la sala */
body.theme-fuego {
  background-image:
    radial-gradient(ellipse 70% 38% at 50% 108%, rgba(232, 133, 59, 0.16), transparent 62%),
    radial-gradient(ellipse 90% 50% at 50% 118%, rgba(229, 90, 43, 0.10), transparent 68%),
    radial-gradient(ellipse 60% 30% at 88% -8%, rgba(232, 133, 59, 0.05), transparent 60%);
}
body.theme-fuego .menu-container { background: transparent; box-shadow: none; }
body.theme-fuego.has-hero-banner .menu-header {
  background: linear-gradient(180deg, rgba(32, 24, 18, 0.55) 0%, rgba(32, 24, 18, 0.86) 100%);
}

body.theme-fuego .restaurant-title { color: #F5EBDD; font-weight: 900; letter-spacing: 0.01em; }
body.theme-fuego .restaurant-slogan { color: #BCAB92; }

body.theme-fuego .controls-wrapper {
  background: rgba(42, 32, 24, 0.96);
  border: 1px solid var(--border-chalk);
  border-radius: var(--fuego-radius);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
body.theme-fuego .controls-wrapper .search-box {
  background: #241B15;
  border: 1px solid var(--border-chalk);
  color: #F5EBDD;
  border-radius: 10px;
}
body.theme-fuego .controls-wrapper .search-box::placeholder { color: #BCAB92; }

body.theme-fuego .cat-pill {
  background: #2A2018;
  border: 1px solid var(--border-chalk);
  color: #E4D6C2;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-fuego .cat-pill:hover { background: #32261A; }
body.theme-fuego .cat-pill.active,
body.theme-fuego .cat-pill[aria-pressed="true"] {
  background: #E8853B;
  color: #201812;
  border-color: #E8853B;
}

/* Firma: cabecera de categoría = CARTEL DE HORNADA (título con
   barrita ember de fierro) */
body.theme-fuego .category-title {
  color: #F5EBDD;
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-bottom: 10px;
}
body.theme-fuego .category-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, #E8853B, rgba(232, 133, 59, 0.25));
}
body.theme-fuego .category-title::before { content: none; }
body.theme-fuego .category-title .category-count,
body.theme-fuego .cat-count { color: #BCAB92; font-weight: 500; text-transform: none; letter-spacing: 0.02em; }

/* Fila de plato: carta de hornada (104 izquierda, precio ember) */
body.theme-fuego.layout-classic .dish-card {
  background: #2A2018;
  border: 1px solid var(--border-chalk);
  border-radius: var(--fuego-radius);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-fuego.layout-classic .dish-card:not(.dish-has-photo) { grid-template-columns: 1fr auto; }
body.theme-fuego.layout-classic .dish-card:hover { border-color: rgba(232, 133, 59, 0.45); }
body.theme-fuego.layout-classic .dish-thumb {
  width: 104px;
  height: 132px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: 8px;
  grid-row: 1;
  grid-column: 1;
  filter: saturate(1.05) contrast(1.02);
}
body.theme-fuego.layout-classic .dish-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-fuego.layout-classic .dish-name { color: #F5EBDD; font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
body.theme-fuego.layout-classic .dish-desc { color: #BCAB92; font-size: 0.82rem; line-height: 1.45; }
body.theme-fuego.layout-classic .dish-price {
  margin-top: auto;
  color: #E8853B;
  font-weight: 800;
  font-size: 0.95rem;
}
body.theme-fuego.layout-classic .dish-action { grid-column: 3; grid-row: 1; align-self: end; }

body.theme-fuego .dish-badge {
  background: rgba(232, 133, 59, 0.10) !important;
  border: 1px solid rgba(232, 133, 59, 0.35) !important;
  color: #E8853B !important;
  font-weight: 600;
  font-size: 0.68rem;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.theme-fuego .dish-badge[style*="background:#E53E3E"] {
  background: #E53E3E !important;
  color: #FFFFFF !important;
}

/* El botón + es la BRASA: ember redondo, tinta de masa */
body.theme-fuego .btn-add {
  background: #E8853B;
  color: #201812;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 800;
}
body.theme-fuego .btn-add:hover { background: #D0712C; color: #201812; }
body.theme-fuego .qty-counter { color: #BCAB92; font-weight: 600; }
body.theme-fuego .dish-qty-controls { border: none; background: none; padding: 0; gap: 8px; }

body.theme-fuego .chef-specials-title { color: #F5EBDD; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; }
body.theme-fuego .chef-badge-gold {
  background: rgba(232, 133, 59, 0.12);
  border: 1px solid rgba(232, 133, 59, 0.4);
  color: #E8853B;
  border-radius: 999px;
  font-weight: 700;
}
body.theme-fuego.layout-classic .chef-special-card {
  background: #2A2018;
  border: 1px solid var(--border-chalk);
  border-radius: var(--fuego-radius);
  box-shadow: none;
}
body.theme-fuego .chef-special-thumb { border-radius: 8px; }
body.theme-fuego .chef-special-tag-ribbon { color: #E8853B; border-color: rgba(232, 133, 59, 0.4); }
body.theme-fuego .chef-special-name { color: #F5EBDD; font-weight: 700; }
body.theme-fuego .chef-special-desc { color: #BCAB92; }
body.theme-fuego .chef-special-price { color: #E8853B; font-weight: 800; }

body.theme-fuego #floatingCart {
  background: rgba(42, 32, 24, 0.96);
  border: 1px solid var(--border-chalk);
  color: #F5EBDD;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}
body.theme-fuego #floatingCart .cart-total,
body.theme-fuego #cartTotalBadge { color: #E8853B; }
body.theme-fuego #cartTotalBadge {
  background: #E8853B;
  color: #201812;
  border-radius: 999px;
}

body.theme-fuego .total-summary,
body.theme-fuego [class*="checkout"],
body.theme-fuego .checkout-summary-box {
  background: #2A2018;
  border-color: var(--border-chalk);
}
body.theme-fuego .summary-row { color: #BCAB92; }
body.theme-fuego .summary-row.total-row { color: #F5EBDD; border-color: var(--border-chalk); }
body.theme-fuego .summary-row.total-row span.total-amount { color: #E8853B; }
body.theme-fuego .total-amount { color: #E8853B; }
/* Pill activa de propina: JS pinta bg var(--chalk-gold) = ember con tinta */
body.theme-fuego button[data-tip-pill][style*="chalk-gold"] {
  background: #E8853B !important;
  color: #201812 !important;
  border-color: #E8853B !important;
}
body.theme-fuego .dish-note-confirm { background: #E8853B; color: #201812; }

body.theme-fuego .btn-wa-submit { border-radius: 999px; box-shadow: none; font-weight: 700; }

body.theme-fuego .modal-overlay { background: rgba(14, 9, 5, 0.62); }
body.theme-fuego .modal-box,
body.theme-fuego .modal-content,
body.theme-fuego .modal {
  background: #2A2018;
  border: 1px solid var(--border-chalk);
  border-radius: 14px;
  color: #F5EBDD;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
body.theme-fuego .modal-box h2,
body.theme-fuego .modal-box h3,
body.theme-fuego .modal h2 { color: #F5EBDD; }
body.theme-fuego .modal-box input,
body.theme-fuego .modal-box textarea,
body.theme-fuego .modal-box select {
  background: #241B15;
  border: 1px solid var(--border-chalk);
  color: #F5EBDD;
}

body.theme-fuego .meta-chip,
body.theme-fuego .dish-meta { background: rgba(232, 133, 59, 0.08); border: 1px solid var(--border-chalk); color: #E4D6C2; }
body.theme-fuego .meta-emoji { opacity: 0.8; }

body.theme-fuego .st-ring { border-color: rgba(232, 133, 59, 0.3); }
body.theme-fuego .st-ring.active { border-color: #E8853B; }

body.theme-fuego .empty-state-card {
  background: #2A2018;
  border: 1px solid var(--border-chalk);
  border-radius: 14px;
  box-shadow: none;
}
body.theme-fuego .empty-state-title { color: #F5EBDD; }
body.theme-fuego .empty-state-desc { color: #BCAB92; }
body.theme-fuego .empty-state-btn { background: #E8853B; color: #201812; border-radius: 999px; }

body.theme-fuego #specialActionsBar { background: rgba(42, 32, 24, 0.96); border: 1px solid var(--border-chalk); border-radius: 14px; backdrop-filter: blur(6px); }
body.theme-fuego #btnTogglePerfumeryMode { background: rgba(232, 133, 59, 0.12); color: #E8853B; border: 1px solid rgba(232, 133, 59, 0.4); }

body.theme-fuego :focus-visible { outline: 2px solid #E8853B; outline-offset: 2px; }
body.theme-fuego .btn-wa-submit:focus-visible,
body.theme-fuego .btn-add:focus-visible,
body.theme-fuego .cat-pill:focus-visible { outline: 2px solid #E8853B; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.theme-fuego .dish-card,
  body.theme-fuego .btn-add,
  body.theme-fuego .cat-pill { transition: none; }
}

body.theme-fuego .status-pill.open {
  background: rgba(143, 169, 107, 0.12) !important;
  border-color: rgba(143, 169, 107, 0.4) !important;
  color: #A9C58A !important;
}
body.theme-fuego .status-pill.closed,
body.theme-fuego .status-pill.order-later { color: #F2A3A3 !important; }

/* ------------------------------------------------------------
   THEME-BURGER — BURGER & BRASA (claro, oct-2026 batch 2)
   Hamburguesería de barrio: papel kraft #F3ECE0, tinta calada
   #241D15, MOSTAZA #E3A81F (relleno con tinta encima, 7.5:1) y
   KÉTCHUP #C0392B reservado a AGOTADO/hover/foco. Firma: franja
   de cuadros (checker ketchup-mostaza) bajo el título de
   categoría y nombre de plato uppercase 800.
   ------------------------------------------------------------ */
body.theme-burger {
  --bg-chalkboard: #F3ECE0;
  --surface-card: #FFFFFF;
  --surface-card-hover: #FBF6EC;
  --chalk-white: #241D15;
  --chalk-muted: #4A4136;
  --chalk-dim: #6E6355;
  --chalk-gold: #E3A81F;               /* acento relleno = mostaza */
  --chalk-gold-ink: #241D15;
  --chalk-leaf: #C0392B;
  --border-chalk: #E6DAC6;
  --border-gold: rgba(227, 168, 31, 0.55);
  --burger-radius: 10px;
  background-color: #F3ECE0;
  color: #241D15;
  font-family: 'Montserrat', system-ui, sans-serif;
}
body.theme-burger .menu-container { background: #F3ECE0; box-shadow: none; }
/* El header base asume fondo oscuro; el papel kraft re-scopea a tinta */
body.theme-burger .menu-header { --chalk-white: #241D15; --chalk-dim: #6E6355; }

body.theme-burger .restaurant-title { color: #241D15; font-weight: 900; letter-spacing: -0.01em; }
body.theme-burger .restaurant-slogan { color: #6E6355; }
body.theme-burger .menu-header { background: #F3ECE0; }
/* Con portada: scrim kraft para sostener la tinta */
body.theme-burger.has-hero-banner .menu-header {
  background: linear-gradient(180deg, rgba(243, 236, 224, 0.92) 0%, rgba(243, 236, 224, 0.97) 100%);
}

body.theme-burger .controls-wrapper {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #E6DAC6;
  border-radius: var(--burger-radius);
  box-shadow: 0 1px 2px rgba(36, 29, 21, 0.04);
}
body.theme-burger .controls-wrapper .search-box {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  color: #241D15;
  border-radius: 10px;
}
body.theme-burger .controls-wrapper .search-box::placeholder { color: #6E6355; }

body.theme-burger .cat-pill {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  color: #241D15;
  border-radius: 999px;
  font-weight: 700;
}
body.theme-burger .cat-pill:hover { background: #FBF6EC; }
body.theme-burger .cat-pill.active,
body.theme-burger .cat-pill[aria-pressed="true"] {
  background: #E3A81F;
  color: #241D15;
  border-color: #E3A81F;
}

/* Firma de la hamburguesería: franja de CUADROS (ketchup y
   mostaza, manteles de kiosco) bajo el título de categoría */
body.theme-burger .category-title {
  color: #241D15;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 10px;
}
body.theme-burger .category-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin-top: 7px;
  border-radius: 2px;
  background: conic-gradient(#C0392B 25%, #E3A81F 0 50%, #C0392B 0 75%, #E3A81F 0) 0 0 / 8px 8px;
}
body.theme-burger .category-title::before { content: none; }
body.theme-burger .category-title .category-count,
body.theme-burger .cat-count { color: #6E6355; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Fila de plato: carta de pizarra blanca, nombre calado 800 */
body.theme-burger.layout-classic .dish-card {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  border-radius: var(--burger-radius);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-burger.layout-classic .dish-card:not(.dish-has-photo) { grid-template-columns: 1fr auto; }
body.theme-burger.layout-classic .dish-card:hover { border-color: #C0392B; box-shadow: 0 2px 10px rgba(36, 29, 21, 0.06); }
body.theme-burger.layout-classic .dish-thumb {
  width: 104px;
  height: 132px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: 8px;
  grid-row: 1;
  grid-column: 1;
  filter: saturate(1.05);
}
body.theme-burger.layout-classic .dish-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-burger.layout-classic .dish-name { color: #241D15; font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
body.theme-burger.layout-classic .dish-desc { color: #6E6355; font-size: 0.82rem; line-height: 1.45; text-transform: none; }
body.theme-burger.layout-classic .dish-price {
  margin-top: auto;
  color: #241D15;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
body.theme-burger.layout-classic .dish-action { grid-column: 3; grid-row: 1; align-self: end; }

/* Badges: texto mínimo en mostaza oscura (tinta de sello) */
body.theme-burger .dish-badge {
  background: none !important;
  border: none !important;
  color: #8A5600 !important;
  font-weight: 700;
  font-size: 0.66rem;
  padding: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* El AGOTADO pide su gravedad: chip ketchup con blanco (5.4:1) */
body.theme-burger .dish-badge[style*="background:#E53E3E"] {
  background: #C0392B !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

/* El botón + es el SILLÓN de tinta con mostaza, hover ketchup */
body.theme-burger .btn-add {
  background: #241D15;
  color: #E3A81F;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 800;
}
body.theme-burger .btn-add:hover { background: #C0392B; color: #FFFFFF; }
body.theme-burger .qty-counter { color: #241D15; font-weight: 700; }
body.theme-burger .dish-qty-controls { border: none; background: none; padding: 0; gap: 8px; }

body.theme-burger .chef-specials-title { color: #241D15; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; }
body.theme-burger .chef-badge-gold {
  background: rgba(227, 168, 31, 0.16);
  border: 1px solid rgba(227, 168, 31, 0.5);
  color: #8A5600;
  border-radius: 999px;
  font-weight: 700;
}
body.theme-burger.layout-classic .chef-special-card {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  border-radius: var(--burger-radius);
  box-shadow: none;
}
body.theme-burger .chef-special-thumb { border-radius: 8px; }
body.theme-burger .chef-special-tag-ribbon { color: #C0392B; border-color: rgba(192, 57, 43, 0.4); }
body.theme-burger .chef-special-name { color: #241D15; font-weight: 800; }
body.theme-burger .chef-special-desc { color: #6E6355; }
body.theme-burger .chef-special-price { color: #241D15; font-weight: 800; }

body.theme-burger #floatingCart {
  background: #241D15;
  border: 1px solid #241D15;
  color: #F3ECE0;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(36, 29, 21, 0.35);
}
body.theme-burger #floatingCart .cart-total,
body.theme-burger #cartTotalBadge { color: #F3ECE0; }
body.theme-burger #cartTotalBadge {
  background: #E3A81F;
  color: #241D15;
  border-radius: 999px;
}

body.theme-burger .total-summary,
body.theme-burger [class*="checkout"],
body.theme-burger .checkout-summary-box {
  background: #FFFFFF;
  border-color: #E6DAC6;
}
body.theme-burger .summary-row { color: #6E6355; }
body.theme-burger .summary-row.total-row { color: #241D15; border-color: #E6DAC6; }
body.theme-burger .summary-row.total-row span.total-amount { color: #241D15; }
body.theme-burger .total-amount { color: #241D15; }
/* Pill activa de propina: JS pinta bg var(--chalk-gold) = mostaza con tinta */
body.theme-burger button[data-tip-pill][style*="chalk-gold"] {
  background: #E3A81F !important;
  color: #241D15 !important;
  border-color: #E3A81F !important;
}
body.theme-burger .dish-note-confirm { background: #241D15; color: #E3A81F; }

body.theme-burger .btn-wa-submit { border-radius: 999px; box-shadow: none; font-weight: 700; }

body.theme-burger .modal-overlay { background: rgba(36, 29, 21, 0.45); }
body.theme-burger .modal-box,
body.theme-burger .modal-content,
body.theme-burger .modal {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  border-radius: 14px;
  color: #241D15;
  box-shadow: 0 18px 48px rgba(36, 29, 21, 0.22);
}
body.theme-burger .modal-box h2,
body.theme-burger .modal-box h3,
body.theme-burger .modal h2 { color: #241D15; }
body.theme-burger .modal-box input,
body.theme-burger .modal-box textarea,
body.theme-burger .modal-box select {
  background: #FAF5EB;
  border: 1px solid #E6DAC6;
  color: #241D15;
}

body.theme-burger .meta-chip,
body.theme-burger .dish-meta { background: #FFFFFF; border: 1px solid #E6DAC6; color: #4A4136; }
body.theme-burger .meta-emoji { opacity: 0.8; }

body.theme-burger .st-ring { border-color: rgba(227, 168, 31, 0.6); }
body.theme-burger .st-ring.active { border-color: #E3A81F; }

body.theme-burger .empty-state-card {
  background: #FFFFFF;
  border: 1px solid #E6DAC6;
  border-radius: var(--burger-radius);
  box-shadow: none;
}
body.theme-burger .empty-state-title { color: #241D15; }
body.theme-burger .empty-state-desc { color: #6E6355; }
body.theme-burger .empty-state-btn { background: #E3A81F; color: #241D15; border-radius: 999px; }

body.theme-burger #specialActionsBar { background: #FFFFFF; border: 1px solid #E6DAC6; border-radius: var(--burger-radius); }
body.theme-burger #btnTogglePerfumeryMode { background: rgba(227, 168, 31, 0.14); color: #8A5600; border: 1px solid rgba(227, 168, 31, 0.5); }

body.theme-burger :focus-visible { outline: 2px solid #C0392B; outline-offset: 2px; }
body.theme-burger .btn-wa-submit:focus-visible,
body.theme-burger .btn-add:focus-visible,
body.theme-burger .cat-pill:focus-visible { outline: 2px solid #C0392B; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.theme-burger .dish-card,
  body.theme-burger .btn-add,
  body.theme-burger .cat-pill { transition: none; }
}

body.theme-burger .skip-link { background: #241D15; color: #F3ECE0; }
body.theme-burger .i18n-demo-theme,
body.theme-burger .btn-push-accept { background: #241D15; color: #F3ECE0; }
body.theme-burger .status-pill.open {
  background: rgba(47, 107, 52, 0.08) !important;
  border-color: rgba(47, 107, 52, 0.35) !important;
  color: #2F6B34 !important;
}
body.theme-burger .status-pill.closed {
  background: rgba(192, 57, 43, 0.08) !important;
  border-color: rgba(192, 57, 43, 0.35) !important;
  color: #C0392B !important;
}
body.theme-burger .status-pill.order-later { color: #8A5600 !important; }

/* ------------------------------------------------------------
   THEME-VEGGIE — HUERTA FRESCA (claro, oct-2026 batch 2)
   Vegetariana/veggie: avena #F7F5EC, tinta bosque #26332B, y
   HOJA #3F6B34 (6.2:1 en ambas direcciones) como único acento.
   Firma: brote de tallo rotado (teardrop CSS) junto al título
   de categoría y tarjetas de radio 16 suaves como huerta.
   ------------------------------------------------------------ */
body.theme-veggie {
  --bg-chalkboard: #F7F5EC;
  --surface-card: #FFFFFF;
  --surface-card-hover: #F2F6EE;
  --chalk-white: #26332B;
  --chalk-muted: #46554A;
  --chalk-dim: #5F6F60;
  --chalk-gold: #3F6B34;               /* acento = hoja huerta */
  --chalk-gold-ink: #FFFFFF;
  --chalk-leaf: #3F6B34;
  --border-chalk: #E4E8DD;
  --border-gold: rgba(63, 107, 52, 0.45);
  --veggie-radius: 16px;
  background-color: #F7F5EC;
  color: #26332B;
  font-family: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
}
body.theme-veggie .menu-container { background: #F7F5EC; box-shadow: none; }
/* El header base asume fondo oscuro; la huerta re-scopea a tinta */
body.theme-veggie .menu-header { --chalk-white: #26332B; --chalk-dim: #5F6F60; }

body.theme-veggie .restaurant-title { color: #26332B; font-weight: 700; letter-spacing: -0.2px; }
body.theme-veggie .restaurant-slogan { color: #5F6F60; }
body.theme-veggie .menu-header { background: #F7F5EC; }
/* Con portada: scrim avena para sostener la tinta */
body.theme-veggie.has-hero-banner .menu-header {
  background: linear-gradient(180deg, rgba(247, 245, 236, 0.93) 0%, rgba(247, 245, 236, 0.97) 100%);
}

body.theme-veggie .controls-wrapper {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #E4E8DD;
  border-radius: var(--veggie-radius);
  box-shadow: 0 1px 2px rgba(38, 51, 43, 0.04);
}
body.theme-veggie .controls-wrapper .search-box {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  color: #26332B;
  border-radius: 12px;
}
body.theme-veggie .controls-wrapper .search-box::placeholder { color: #5F6F60; }

body.theme-veggie .cat-pill {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  color: #26332B;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-veggie .cat-pill:hover { background: #F2F6EE; }
body.theme-veggie .cat-pill.active,
body.theme-veggie .cat-pill[aria-pressed="true"] {
  background: #3F6B34;
  color: #FFFFFF;
  border-color: #3F6B34;
}

/* Firma de la huerta: brote de tallo (teardrop CSS rotado -45°)
   al costado del título de categoría — la cosquilla del brote */
body.theme-veggie .category-title {
  color: #26332B;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.1px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.theme-veggie .category-title::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(-45deg);
  background: #3F6B34;
}
body.theme-veggie .category-title::after { content: none; }
body.theme-veggie .category-title .category-count,
body.theme-veggie .cat-count { color: #5F6F60; font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: auto; }

/* Fila de plato: huerta de tarjeta blanca radio 16 */
body.theme-veggie.layout-classic .dish-card {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  border-radius: var(--veggie-radius);
  box-shadow: none;
  padding: 14px;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 0 14px;
  align-items: start;
}
body.theme-veggie.layout-classic .dish-card:not(.dish-has-photo) { grid-template-columns: 1fr auto; }
body.theme-veggie.layout-classic .dish-card:hover { border-color: rgba(63, 107, 52, 0.5); box-shadow: 0 2px 12px rgba(38, 51, 43, 0.06); }
body.theme-veggie.layout-classic .dish-thumb {
  width: 104px;
  height: 132px;
  aspect-ratio: auto !important;
  object-fit: cover;
  border-radius: 10px;
  grid-row: 1;
  grid-column: 1;
  filter: saturate(1.05);
}
body.theme-veggie.layout-classic .dish-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-veggie.layout-classic .dish-name { color: #26332B; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.1px; }
body.theme-veggie.layout-classic .dish-desc { color: #5F6F60; font-size: 0.82rem; line-height: 1.45; }
body.theme-veggie.layout-classic .dish-price {
  margin-top: auto;
  color: #3F6B34;
  font-weight: 700;
  font-size: 0.95rem;
}
body.theme-veggie.layout-classic .dish-action { grid-column: 3; grid-row: 1; align-self: end; }

/* Badges: texto mínimo en hoja oscura */
body.theme-veggie .dish-badge {
  background: none !important;
  border: none !important;
  color: #3F6B34 !important;
  font-weight: 700;
  font-size: 0.66rem;
  padding: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
/* El AGOTADO conserva su gravedad: chip tomate con blanco (4.7:1) */
body.theme-veggie .dish-badge[style*="background:#E53E3E"] {
  background: #C24E3A !important;
  border: none !important;
  color: #FFFFFF !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

/* El botón + es el BROTE: hoja redonda con blanco */
body.theme-veggie .btn-add {
  background: #3F6B34;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  width: 34px;
  height: 34px;
  font-weight: 700;
}
body.theme-veggie .btn-add:hover { background: #35572B; color: #FFFFFF; }
body.theme-veggie .qty-counter { color: #5F6F60; font-weight: 600; }
body.theme-veggie .dish-qty-controls { border: none; background: none; padding: 0; gap: 8px; }

body.theme-veggie .chef-specials-title { color: #26332B; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; }
body.theme-veggie .chef-badge-gold {
  background: rgba(63, 107, 52, 0.1);
  border: 1px solid rgba(63, 107, 52, 0.35);
  color: #3F6B34;
  border-radius: 999px;
  font-weight: 600;
}
body.theme-veggie.layout-classic .chef-special-card {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  border-radius: var(--veggie-radius);
  box-shadow: none;
}
body.theme-veggie .chef-special-thumb { border-radius: 10px; }
body.theme-veggie .chef-special-tag-ribbon { color: #3F6B34; border-color: rgba(63, 107, 52, 0.4); }
body.theme-veggie .chef-special-name { color: #26332B; font-weight: 700; }
body.theme-veggie .chef-special-desc { color: #5F6F60; }
body.theme-veggie .chef-special-price { color: #3F6B34; font-weight: 700; }

body.theme-veggie #floatingCart {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  color: #26332B;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(38, 51, 43, 0.14);
}
body.theme-veggie #floatingCart .cart-total,
body.theme-veggie #cartTotalBadge { color: #3F6B34; }
body.theme-veggie #cartTotalBadge {
  background: #3F6B34;
  color: #FFFFFF;
  border-radius: 999px;
}

body.theme-veggie .total-summary,
body.theme-veggie [class*="checkout"],
body.theme-veggie .checkout-summary-box {
  background: #FFFFFF;
  border-color: #E4E8DD;
}
body.theme-veggie .summary-row { color: #5F6F60; }
body.theme-veggie .summary-row.total-row { color: #26332B; border-color: #E4E8DD; }
body.theme-veggie .summary-row.total-row span.total-amount { color: #3F6B34; }
body.theme-veggie .total-amount { color: #3F6B34; }
/* Pill activa de propina: JS pinta bg var(--chalk-gold) = hoja con blanco */
body.theme-veggie button[data-tip-pill][style*="chalk-gold"] {
  background: #3F6B34 !important;
  color: #FFFFFF !important;
  border-color: #3F6B34 !important;
}
body.theme-veggie .dish-note-confirm { background: #3F6B34; color: #FFFFFF; }

body.theme-veggie .btn-wa-submit { border-radius: 999px; box-shadow: none; font-weight: 700; }

body.theme-veggie .modal-overlay { background: rgba(38, 51, 43, 0.42); }
body.theme-veggie .modal-box,
body.theme-veggie .modal-content,
body.theme-veggie .modal {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  border-radius: var(--veggie-radius);
  color: #26332B;
  box-shadow: 0 18px 48px rgba(38, 51, 43, 0.18);
}
body.theme-veggie .modal-box h2,
body.theme-veggie .modal-box h3,
body.theme-veggie .modal h2 { color: #26332B; }
body.theme-veggie .modal-box input,
body.theme-veggie .modal-box textarea,
body.theme-veggie .modal-box select {
  background: #F7F5EC;
  border: 1px solid #E4E8DD;
  color: #26332B;
}

body.theme-veggie .meta-chip,
body.theme-veggie .dish-meta { background: #FFFFFF; border: 1px solid #E4E8DD; color: #46554A; }
body.theme-veggie .meta-emoji { opacity: 0.8; }

body.theme-veggie .st-ring { border-color: rgba(63, 107, 52, 0.3); }
body.theme-veggie .st-ring.active { border-color: #3F6B34; }

body.theme-veggie .empty-state-card {
  background: #FFFFFF;
  border: 1px solid #E4E8DD;
  border-radius: var(--veggie-radius);
  box-shadow: none;
}
body.theme-veggie .empty-state-title { color: #26332B; }
body.theme-veggie .empty-state-desc { color: #5F6F60; }
body.theme-veggie .empty-state-btn { background: #3F6B34; color: #FFFFFF; border-radius: 999px; }

body.theme-veggie #specialActionsBar { background: #FFFFFF; border: 1px solid #E4E8DD; border-radius: var(--veggie-radius); }
body.theme-veggie #btnTogglePerfumeryMode { background: rgba(63, 107, 52, 0.1); color: #3F6B34; border: 1px solid rgba(63, 107, 52, 0.35); }

body.theme-veggie :focus-visible { outline: 2px solid #3F6B34; outline-offset: 2px; }
body.theme-veggie .btn-wa-submit:focus-visible,
body.theme-veggie .btn-add:focus-visible,
body.theme-veggie .cat-pill:focus-visible { outline: 2px solid #3F6B34; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  body.theme-veggie .dish-card,
  body.theme-veggie .btn-add,
  body.theme-veggie .cat-pill { transition: none; }
}

body.theme-veggie .skip-link { background: #26332B; color: #F7F5EC; }
body.theme-veggie .i18n-demo-theme,
body.theme-veggie .btn-push-accept { background: #26332B; color: #FFFFFF; }
body.theme-veggie .status-pill.open {
  background: rgba(63, 107, 52, 0.08) !important;
  border-color: rgba(63, 107, 52, 0.35) !important;
  color: #3F6B34 !important;
}
body.theme-veggie .status-pill.closed {
  background: rgba(194, 78, 58, 0.08) !important;
  border-color: rgba(194, 78, 58, 0.35) !important;
  color: #C24E3A !important;
}
body.theme-veggie .status-pill.order-later { color: #8A5600 !important; }