/* ============================================================
   CUSTOMER APP — SINGLE-SOURCE STYLESHEET
   Design-system MAP + rules: see preview/STYLE-REFERENCE.md
   Visual gallery: preview/customer-app-styleguide.html
   Change a shared look in its CANONICAL class → updates everywhere.
   No sticky headers: ALL page headers (incl. Carta .mtop) are static. Only content diff: .hhead (Home).
   ============================================================ */
  :root{
    --primary:#007483; --primary-d:#005a66; --onink:#ffffff;
    --bg:#FBFDFE; --ink:#15211f; --muted:#6b7c80; --card:#ffffff; --line:#e9eef0;
    --r-sm:12px; --r-pill:22px; --r-card:20px; --r-screen:38px; --r-device:48px;
    --navpad:78px;   /* espacio inferior de las pantallas con scroll = altura de la barra inferior (~75px) + 3px.
                        Único valor para TODAS las pantallas: el contenido corto ya no se pasa del viewport
                        (antes 118px inflaba el alto y provocaba un scroll inútil de pocos píxeles). */
    --fs:1;          /* factor de escala tipográfica; JS lo ajusta en móvil (≈ ancho/362, limitado 0.9–1.15)
                        para que el TEXTO crezca/encoja con el teléfono. En escritorio queda 1 (sin cambios).
                        NO usamos transform/zoom global porque rompería el arrastre de los mapas (Leaflet). */
    --head-top:max(env(safe-area-inset-top, 0px), 18px);   /* área segura: el header arranca lo más arriba posible respetando el notch/barra del SO (mín. 18px). Igual en TODAS las pantallas */
    --sh-card:0 3px 14px rgba(20,40,45,.06);
    --sh-soft:0 2px 10px rgba(0,0,0,.05);
    --sh-btn:0 8px 20px color-mix(in srgb, var(--primary) 30%, transparent);
    --sh-float:0 3px 8px rgba(0,0,0,.5);   /* strong float (cart FAB) */
    --sh-block:0 4px 16px rgba(0,0,0,.10); /* soft float — large white blocks */
    --sh-btnfloat:0 3px 11px rgba(0,0,0,.22); /* mid float — small white icon buttons */
    --sh-chip:0 1px 4px rgba(0,0,0,.14);      /* thin float — menu filter/category chips */
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0}
  body{font-family:var(--font-body,'Poppins'),system-ui,sans-serif; color:var(--ink); min-height:100vh;
    background:var(--bg); overflow-x:hidden}
  #bg{position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; display:block}

  /* ---- Control bar ---- */
  .bar{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px;
    flex-wrap:wrap; padding:12px 20px; backdrop-filter:blur(10px);
    background:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.6)}
  .bar b{font-size:calc(14px*var(--fs))}
  .bar .sub{font-size:calc(12px*var(--fs)); color:var(--muted)}
  .swatches{display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap}
  .sw{width:26px; height:26px; border-radius:9px; border:2px solid #fff; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.15); transition:transform .12s}
  .sw:hover{transform:translateY(-2px)}
  .sw.on{outline:2px solid var(--ink); outline-offset:2px}
  .swatches input[type=color]{width:30px; height:30px; border:none; background:none; cursor:pointer; padding:0}

  /* ---- Board ---- */
  h1.title{font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.4px; margin:26px 20px 2px; font-size:calc(24px*var(--fs)); color:var(--ink)}
  /* Display font (Mont→Montserrat) for logo + headings; body is Gilroy→Poppins */
  .splash .logo, .hhead .rname, .sect, .banner .bt b, .onb .txt h2, .dd .info h2{font-family:'Montserrat',sans-serif}
  .lede{margin:0 20px 20px; color:var(--muted); font-size:calc(13.5px*var(--fs)); max-width:640px}
  .board{display:flex; gap:26px; padding:8px 26px 60px; overflow-x:auto; align-items:flex-start}
  .col{display:flex; flex-direction:column; align-items:center; gap:10px}
  .cap{font-size:calc(12px*var(--fs)); font-weight:700; color:#3a4a4d; background:rgba(255,255,255,.7);
    padding:3px 10px; border-radius:20px}

  /* ---- Device ---- */
  /* App = experiencia táctil: NUNCA seleccionar texto al arrastrar (carrusel, tarjetas, sliders…),
     ni con ratón ni con el dedo, en TODAS las secciones y temas. Se reactiva solo en campos de texto. */
  .device{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
  .device input, .device textarea, .device select, .device [contenteditable]{-webkit-user-select:text; user-select:text}
  .device{width:362px; height:768px; border-radius:var(--r-device); background:#0a0a0a;
    padding:13px; box-shadow:0 30px 70px rgba(15,20,40,.3); flex:0 0 auto}   /* matches the real app frame */
  .screen{position:relative; width:100%; height:100%; border-radius:var(--r-screen);
    overflow:hidden; background:var(--card)}
  /* ── Móvil real (producción): la app ocupa TODA la pantalla; el marco 362×768 es solo la maqueta
     de escritorio. La barra inferior usa aspect-ratio → su alto crece con el ancho del teléfono,
     así que --navpad pasa a escalar con el ancho (22.3vw ≈ alto de la barra) + un pequeño margen. ── */
  @media (max-width: 480px){
    .bar{display:none}
    #approot{padding:0 !important}
    .device{width:100vw; height:100vh; height:100dvh; border-radius:0; padding:0; box-shadow:none}
    .screen{border-radius:0}
    .notch{display:none}
    :root{--navpad:calc(22.3vw + 6px)}
  }
  .notch{position:absolute; top:8px; left:50%; transform:translateX(-50%); width:96px; height:24px;
    background:#0e1114; border-radius:0 0 16px 16px; z-index:5}
  .grab{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:44px; height:5px;
    background:rgba(0,0,0,.18); border-radius:3px; z-index:5}
  /* Barra de estado estándar (hora + iconos), fondo transparente sobre la app (fullscreen) */
  .statusbar{position:absolute; top:0; left:0; right:0; z-index:20; pointer-events:none;
    display:flex; align-items:center; justify-content:space-between; padding:13px 22px 0; color:#17201e}
  .statusbar .time{font-size:calc(14px*var(--fs)); font-weight:700; letter-spacing:.3px}
  .statusbar .ic{display:flex; align-items:center; gap:6px}
  .statusbar svg{display:block}

  /* themed screen background (mirrors the app bg) */
  .app-bg{position:absolute; inset:0; z-index:0}
  .screen > .layer{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column}
  /* Ocultar la barra de scroll VERTICAL en todas las pantallas (el scroll con rueda/dedo sigue igual) */
  .layer{scrollbar-width:none; -ms-overflow-style:none}
  .layer::-webkit-scrollbar{display:none; width:0; height:0}
  /* Botón "atrás" en pestaña lateral: entra desde el borde izquierdo; se esconde al hacer scroll y
     reaparece suave al parar. Reemplaza al botón "Volver" en las pantallas con navegación atrás. */
  /* ancho = 14px = el mismo gutter que separa las tarjetas blancas del borde (margin:0 14px):
     borde IZQ a ras del borde de la pantalla, borde DER tangente a las tarjetas.
     alto = ancho ÷ 0.46 (proporción de back.svg 46×100) ≈ 30px. */
  /* Pestaña «Volver» de borde (diseño aprobado) — colores desde tokens del tema. */
  .ebackhint{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:2.5px; height:180px; border-radius:2px;
    background:linear-gradient(to bottom, transparent, var(--primary), transparent); opacity:1; pointer-events:none;
    transition:opacity .5s ease; z-index:39 }
  .ebackhint.oculto{ opacity:0 }
  .skin-dark .ebackhint{ background:linear-gradient(to bottom, transparent, var(--primary-d), transparent) }
  .ebacktab{ position:absolute; left:0; top:50%; margin-top:-27px; z-index:40; width:14px; height:54px; padding:0; border:none;
    background:var(--ink); border-radius:0 12px 12px 0; box-shadow:2px 2px 10px rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center; cursor:default; touch-action:none;
    transform:translateX(-110%); transform-origin:left center; will-change:transform }
  .ebacktab svg{ width:12px; height:12px; stroke:var(--bg); flex-shrink:0 }
  .sheetbody{scrollbar-width:none; -ms-overflow-style:none}
  .sheetbody::-webkit-scrollbar{display:none; width:0}

  /* ---- Splash ---- */
  .splash{align-items:center; justify-content:center; text-align:center; gap:8px}
  /* Grupo de elementos del splash (fase 2): entran juntos con un fundido+subida suave cuando el
     fondo/tema ya está resuelto. El temporizador de cierre arranca al mostrarse → animación completa. */
  .splash .splashin{display:flex; flex-direction:column; align-items:center; gap:8px}
  .splash .splashin.splashin-anim{animation:splashIn .55s cubic-bezier(.2,.8,.2,1) both}
  @keyframes splashIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
  @media (prefers-reduced-motion:reduce){ .splash .splashin.splashin-anim{animation:none} }
  .splash .poweredby{position:absolute; bottom:26px; left:0; right:0; text-align:center; font-size:calc(11px*var(--fs)); color:var(--muted); letter-spacing:.3px}
  .splash .poweredby b{font-weight:800; color:var(--ink); letter-spacing:.2px}
  .splash .logo{font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.5px; font-size:calc(27px*var(--fs)); color:var(--ink)}
  .splash .splogo-img{max-width:62%; max-height:96px; object-fit:contain}
  /* Fundido SOLO la 1ª aparición del logo (clase splog-anim); en re-renders queda fijo, sin repetir. */
  .splash .splogo-img.splog-anim{animation:splashLogoIn .7s ease both}
  @keyframes splashLogoIn{ from{opacity:0} to{opacity:1} }
  @media (prefers-reduced-motion:reduce){ .splash .splogo-img.splog-anim{animation:none} }
  .splash .tag{color:var(--muted); font-size:calc(12px*var(--fs))}
  .splash .dot{width:54px; height:54px; border-radius:16px; background:var(--primary);
    color:var(--onink); display:grid; place-items:center; font-weight:800; margin-top:14px;
    box-shadow:var(--sh-btn)}
  /* Cuadro ◆ como MARCADOR de marca (arriba, en vez del logo) para restaurantes sin logo subido. */
  .splash .dot.splmark{margin-top:0; margin-bottom:4px}

  /* ── Pantalla de ESCANEO de QR (primer arranque sin restaurante) ── */
  .scanwrap{min-height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:calc(var(--head-top) + 12px) 24px calc(var(--head-top) + 20px); gap:6px}
  .scanbrand{display:flex; align-items:center; gap:7px; margin-bottom:10px; color:var(--muted); font-size:calc(11px*var(--fs)); letter-spacing:.3px}
  .scanbrand .scanmark{width:22px; height:22px; color:var(--primary)}
  .scanbrand .scanmark svg{width:22px; height:22px}
  .scanbrand .scanlogo b{color:var(--ink); font-weight:800}
  .skin-dark .scanbrand .scanmark{color:var(--primary-d)}
  .scan-h{font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.3px; font-size:calc(21px*var(--fs)); color:var(--ink); margin:2px 0 0}
  .scan-p{color:var(--muted); font-size:calc(13px*var(--fs)); line-height:1.5; max-width:30ch; margin:0 0 6px}
  /* Visor de cámara: cuadrado, redondeado, oscuro; el vídeo lo rellena. */
  .scanframe{position:relative; width:min(78vw,300px); aspect-ratio:1/1; margin:8px 0 4px; border-radius:24px;
    overflow:hidden; background:#0c1416; box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
  .scanframe #scanvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .scanframe.off{display:grid; place-items:center; background:color-mix(in srgb,var(--primary) 8%,var(--card)); border:1.5px dashed color-mix(in srgb,var(--primary) 35%,transparent)}
  .scanframe.off .scanoffic{width:64px; height:64px; color:var(--primary); opacity:.7}
  .scanframe.off .scanoffic svg{width:64px; height:64px}
  .skin-dark .scanframe.off .scanoffic{color:var(--primary-d)}
  /* Recuadro de puntería: 4 esquinas + línea de escaneo animada. */
  .scanbox{position:absolute; inset:16%; pointer-events:none}
  .scanbox i{position:absolute; width:26px; height:26px; border:3px solid #fff; border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.15)}
  .scanbox i:nth-child(1){top:0; left:0; border-right:0; border-bottom:0}
  .scanbox i:nth-child(2){top:0; right:0; border-left:0; border-bottom:0}
  .scanbox i:nth-child(3){bottom:0; left:0; border-right:0; border-top:0}
  .scanbox i:nth-child(4){bottom:0; right:0; border-left:0; border-top:0}
  .scanbox .scanline{position:absolute; left:6%; right:6%; height:2px; top:0; border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--primary),transparent); box-shadow:0 0 8px var(--primary); animation:scanSweep 2.2s ease-in-out infinite}
  @keyframes scanSweep{ 0%{top:4%} 50%{top:96%} 100%{top:4%} }
  @media (prefers-reduced-motion:reduce){ .scanbox .scanline{animation:none; top:50%} }
  .scannote{font-size:calc(12px*var(--fs)); color:var(--muted); line-height:1.45; max-width:32ch; margin-top:4px}
  .scannote.err{color:#c0392b; font-weight:600}
  .skin-dark .scannote.err{color:#FF8A7A}
  /* Separador «o introduce el código». */
  .scan-or{display:flex; align-items:center; gap:10px; width:100%; max-width:320px; margin:14px 0 8px; color:var(--muted); font-size:calc(12px*var(--fs))}
  .scan-or::before,.scan-or::after{content:""; flex:1; height:1px; background:var(--line)}
  /* Código a mano: input ARRIBA (ancho completo) y botón «Continuar» DEBAJO, apilados → nunca se sale
     del marco en móviles estrechos. */
  .scan-form{display:flex; flex-direction:column; gap:9px; width:100%; max-width:300px}
  .scan-input{width:100%; text-align:center; text-transform:uppercase; letter-spacing:3px; font-weight:800; font-size:calc(15px*var(--fs))}
  .scan-input::placeholder{letter-spacing:.3px; font-weight:600; text-transform:none}
  .scan-form .cocta{width:100%}
  .scan-help{font-size:calc(11.5px*var(--fs)); color:var(--muted); line-height:1.5; max-width:34ch; margin-top:auto; padding-top:16px}

  /* ---- Onboarding ---- */
  .onb .skip{position:absolute; top:34px; right:22px; z-index:21; color:var(--muted); font-size:calc(11px*var(--fs)); font-weight:500; cursor:pointer}
  @keyframes onbFade{from{opacity:0}to{opacity:1}}
  .onb{animation:onbFade .4s ease both}                 /* whole onboarding fades in on first mount */
  /* ORIGINAL bottom-anchored stack (image → text → button → dots) with the 3:1 spacing.
     Each block is a FIXED-SIZE flex item, so swapping its inner content (absolute) never reflows. */
  .onb .ocol{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; text-align:center; padding:0 30px 30px}
  .onb .circle{position:relative; width:184px; height:184px; border-radius:50%; font-size:calc(92px*var(--fs));
    background:rgba(255,255,255,.55); box-shadow:0 24px 48px -8px rgba(20,40,50,.22), 0 8px 20px -6px rgba(20,40,50,.14); backdrop-filter:blur(2px);
    margin-bottom:90px; flex:none}
  /* Decorative soft disc behind the emoji (the shared PNG, rebuilt as pure CSS). Sits a bit
     LARGER than the circle (inset:-16px) and BEHIND it (z-index:-1) so it reads as a soft halo
     disc the emoji-circle rests on: bright centre, a grey vignette ring, and a defined rim —
     matching the PNG. Pseudo-element so the onboarding crossfade (which swaps .circle's first
     child) never touches it. */
  .onb .circle::before{content:''; position:absolute; inset:-42px; border-radius:50%; z-index:-1; pointer-events:none;
    border:2px solid rgba(0,0,0,.10);                       /* faint outer rim: white → 10% toward black */
    background:radial-gradient(ellipse 78% 88% at 44% 58%,  /* off-centre so top-left + right fade to transparent */
      rgba(255,255,255,.92) 0%,
      rgba(248,250,251,.80) 36%,
      rgba(150,162,170,.16) 64%,
      rgba(150,162,170,.09) 82%,
      rgba(255,255,255,0) 100%);
    box-shadow:0 26px 54px rgba(20,40,50,.10)}
  .onb .circle .emo{position:absolute; inset:0; z-index:1; display:grid; place-items:center}
  .onb .circle .onbimg{position:absolute; inset:0; margin:auto; z-index:1; max-width:54%; max-height:54%; width:auto; height:auto; object-fit:contain}
  /* Foto de onboarding: RELLENA el disco interior (cover) enmascarada al círculo; el gestor fija
     el punto focal (object-position) con el pan y el ZOOM (transform:scale). Sobrante recortado. */
  /* La FOTO en sí lleva la sombra (no el aro decorativo ::before): sombra suave pegada al círculo de la
     imagen para despegarla del fondo. (overflow:hidden recorta el contenido, NO la sombra externa.) */
  .onb .circle .onbphotowrap{position:absolute; inset:0; z-index:1; border-radius:50%; overflow:hidden;
    border:1px solid rgba(20,40,50,.28);
    box-shadow:0 16px 34px -8px rgba(20,40,50,.40), 0 6px 14px -6px rgba(20,40,50,.24)}
  .onb .circle .onbphoto{width:100%; height:100%; object-fit:cover; display:block; transform-origin:center}
  /* ── Pantalla "No disponible" (reutiliza el lienzo del onboarding: círculo de marca claro+oscuro) ── */
  /* El círculo queda EN EL MISMO sitio que en el onboarding (columna anclada abajo: círculo + 312px
     debajo). El bloque texto+botón se centra dentro de esos 312px (el hueco círculo→fondo). */
  .onb.gate .ocol{justify-content:flex-end; padding:0 34px 0}
  .gate .circle{margin-bottom:0}
  .gate .gatebody{align-self:stretch; height:312px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
  .gate .gateico{position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:var(--primary)}
  .gate .gateico svg{width:46%; height:46%; fill:currentColor}
  .gate .gatetxt{text-align:center}
  .gate .gatetxt h2{margin:0 0 6px; font-size:calc(22px*var(--fs)); font-weight:800; letter-spacing:-.3px}
  .gate .gatetxt .glabel{font-size:calc(12.5px*var(--fs)); font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--primary); margin-bottom:12px}
  .gate .gatetxt p{margin:0 auto; color:var(--muted); font-size:calc(13.5px*var(--fs)); line-height:1.6; max-width:250px}
  .gate .gateclose{margin-top:30px; border:none; background:var(--primary); color:var(--onink); font-weight:800;
    font-size:calc(14px*var(--fs)); padding:13px 30px; border-radius:16px; cursor:pointer; box-shadow:var(--sh-btn)}
  .onb .txt{position:relative; align-self:stretch; height:96px; margin-bottom:18px; flex:none}
  .onb .txt .tslide{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center}
  .onb .txt h2{margin:0 0 .32em; font-size:calc(20px*var(--fs)); font-weight:800; letter-spacing:-.3px}
  .onb .txt p{margin:0; color:var(--muted); font-size:calc(12px*var(--fs)); line-height:1.5}
  .onb .nextwrap{position:relative; width:60px; height:60px; margin-bottom:11px; flex:none}
  .onb .nextwrap .nextbtn{position:absolute; inset:0; margin:0}
  .onb .onbskip{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px;
    font-size:calc(11.5px*var(--fs)); font-weight:600; color:var(--muted); cursor:pointer; user-select:none; white-space:nowrap}
  .onb .onbskip input{width:15px; height:15px; accent-color:var(--primary); cursor:pointer}
  /* Perfil settings toggle switch */
  .ptoggle{width:38px; height:22px; border-radius:12px; background:#d9d2c9; position:relative; flex:none; cursor:pointer; transition:background .2s}
  .ptoggle::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s}
  .ptoggle.on{background:var(--primary)}
  .ptoggle.on::after{left:18px}
  .dots{display:flex; gap:6px; justify-content:center}
  .dots i{width:7px; height:7px; border-radius:9px; display:block; transition:.3s;
    background:color-mix(in srgb, var(--primary) 32%, transparent)}   /* themed, faded */
  .dots i.act{width:22px; background:var(--primary)}                  /* themed, active */
  .nextbtn{width:60px; height:60px; display:grid; place-items:center}
  .nextbtn svg{width:auto; height:50px; overflow:visible; filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
  /* All 3 slides now share ONE graphic (arrow + fixed-diameter progress ring); only the
     ring's stroke-dasharray grows, so the button never shifts. Single height, no transforms. */
  .nextbtn [fill="#2B2A29"]{fill:var(--primary); fill-opacity:1}          /* bold diamond, full theme color */
  .nextbtn .progring{stroke:var(--primary); stroke-opacity:.55; transition:stroke-dasharray .35s ease}  /* progress arc */

  /* ---- generic app-bar (open, no colored bar) ---- */
  .appbar{display:flex; align-items:center; gap:12px; padding:52px 20px 6px}
  /* base = same as .social (white bg + black icon) */
  .sq{width:32px; height:32px; border-radius:10px; background:transparent; display:grid; place-items:center;
    border:none; color:var(--ink); cursor:pointer}   /* sin bloque blanco ni sombra: solo el icono sobre el header */
  .sq svg{width:18px; height:18px}
  /* Carta: corazón de favoritos (derecha) — más grande; NEGRO+sin badge+no clicable si vacío,
     ROJO+badge con nº+clicable si hay favoritos. */
  .cartafav{position:relative; width:38px; height:38px; cursor:pointer}
  .cartafav svg{width:23px; height:23px}
  .cartafav.on{color:#e31e24}
  .cartafav .fbadge{position:absolute; top:0; right:2px; background:#e31e24; color:#fff; font-size:calc(8px*var(--fs)); font-weight:800; line-height:1;
    min-width:14px; height:14px; border-radius:7px; display:grid; place-items:center; text-align:center; padding:0 2px; box-shadow:0 0 0 1.5px color-mix(in srgb, var(--primary) 6%, var(--card))}
  .sq.big svg{width:20px; height:20px}
  .sq.dark{background:var(--ink); color:var(--bg); border:none}
  .appbar .hi{flex:1; min-width:0}
  .appbar .hi small{color:var(--muted); font-size:calc(12px*var(--fs))}
  .appbar .hi div{font-size:calc(17px*var(--fs)); font-weight:800; letter-spacing:-.3px}
  .ava{width:44px; height:44px; border-radius:14px; overflow:hidden; background:var(--primary);
    color:var(--onink); display:grid; place-items:center; font-weight:800; box-shadow:var(--sh-soft); cursor:pointer}

  .search{display:flex; gap:10px; padding:10px 20px 4px}
  .search .in{flex:1; height:46px; border-radius:15px; background:var(--card); border:1px solid var(--line);
    display:flex; align-items:center; gap:8px; padding:0 14px; color:var(--muted); font-size:calc(13.5px*var(--fs)); box-shadow:var(--sh-soft)}
  .search .fbtn{width:46px; height:46px; border-radius:14px; background:var(--ink); color:var(--bg); display:grid; place-items:center}

  .chips{display:flex; gap:9px; padding:12px 20px 6px; overflow:auto}
  .chip{flex:0 0 auto; display:flex; align-items:center; gap:6px; height:34px; padding:0 14px;
    border-radius:var(--r-pill); background:var(--card); border:1px solid var(--line);
    font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--ink); box-shadow:var(--sh-soft)}
  .chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}

  .sec{display:flex; align-items:baseline; justify-content:space-between; padding:14px 20px 6px}
  .sec b{font-size:calc(16px*var(--fs)); letter-spacing:-.3px}
  .sec a{color:var(--primary); font-size:calc(12.5px*var(--fs)); font-weight:700; text-decoration:none}

  .cards{display:flex; gap:14px; padding:2px 20px; overflow:auto}
  .fc{flex:0 0 150px; background:var(--card); border-radius:var(--r-card); padding:12px; box-shadow:var(--sh-card); position:relative}
  .fc .heart{position:absolute; top:12px; right:12px; width:24px; height:24px;
    display:grid; place-items:center; color:#c33}
  .fc .heart svg{width:22px; height:22px}
  .fc .pic{width:100%; height:96px; border-radius:14px; display:grid; place-items:center; font-size:calc(56px*var(--fs));
    background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--primary) 8%, var(--card)))}
  .fc h3{margin:10px 0 1px; font-size:calc(14px*var(--fs)); font-weight:800}
  .fc small{color:var(--muted); font-size:calc(11.5px*var(--fs))}
  .fc .row{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
  .fc .price{font-weight:800; font-size:calc(14px*var(--fs))}
  .fc .add{width:30px; height:30px; border-radius:10px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:calc(18px*var(--fs))}

  /* list row (Batch 2 dish rows) */
  .rows{display:flex; flex-direction:column; gap:12px; padding:6px 20px}
  .lr{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:18px; padding:10px; box-shadow:var(--sh-card)}
  .lr .pic{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:calc(36px*var(--fs));
    background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--primary) 10%, var(--card))); flex:0 0 auto}
  .lr .mid{flex:1; min-width:0}
  .lr .mid h3{margin:0; font-size:calc(14px*var(--fs)); font-weight:800}
  .lr .mid small{color:var(--muted); font-size:calc(11.5px*var(--fs))}
  .lr .mid .meta{display:flex; gap:8px; align-items:center; margin-top:3px}
  .lr .mid .price{font-weight:800; font-size:calc(13.5px*var(--fs))}
  .lr .mid .star{font-size:calc(11.5px*var(--fs)); color:#e6a100; font-weight:700}
  .lr .step{display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); border-radius:12px; padding:5px 8px}

  /* bottom nav + cart FAB */
  /* Bottom nav shaped by the mask SVG (bar with a center notch for the cart FAB) */
  .navbar{position:absolute; left:0; right:0; bottom:0; width:100%; aspect-ratio:4112.35 / 916.15; z-index:6;
    transition:transform .55s cubic-bezier(.22,1,.36,1); touch-action:none}   /* exact menu.svg aspect (no stretch) */
  .navbar .shape{position:absolute; inset:0; width:100%; height:100%; overflow:visible; transition:opacity .35s ease}
  /* sin sombra hacia la pantalla: la sombra suave va DENTRO (inner) sobre el blanco de la barra (filtro SVG) */
  /* barra blanca OPACA + línea 1px al 10% negro que la separa de la pantalla (el círculo/FAB queda aparte) */
  .navbar .shape path{fill:var(--card); stroke:rgba(0,0,0,.06); stroke-width:1; vector-effect:non-scaling-stroke}
  /* auto-hide: slide down a bit so the 4 nav icons disappear, but the cart FAB + a portion of
     the white bar stay as a peeking handle (the white shape is kept; only the icons fade out) */
  .navbar.collapsed{transform:translateY(28px)}
  .navbar.collapsed .items{opacity:0; pointer-events:none}
  .navbar .items{position:absolute; left:0; right:0; bottom:5px; display:flex;
    align-items:center; justify-content:space-between; padding:0 20px}
  .navbar .side{display:flex; align-items:center; gap:30px}
  /* Barra PLANA (módulo pedidos desactivado): iconos repartidos a lo ancho, sin FAB. */
  .navbar .items.flatrow{justify-content:space-around; padding:0 4%}
  .navbar .ni{background:none; border:none; cursor:pointer; padding:6px; color:#9aa6a8; display:grid; place-items:center; position:relative}
  .navbar .ni.on{color:var(--primary)}
  .navbar .ni svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  /* Punto de aviso del Perfil: SIEMPRE rojo (no toma el color del tema) */
  .navbar .ni .nidot{position:absolute; top:3px; right:5px; width:9px; height:9px; border-radius:50%; background:#EC1C24; border:2px solid var(--card)}
  /* Cart FAB = the menu.svg circle: 14.87% of the bar width (→ perfect circle), its top at the bar top. */
  .navbar .fab{position:absolute; left:50%; top:0; transform:translateX(-50%); width:14.87%; aspect-ratio:1; height:auto;
    border-radius:50%; background:var(--primary);   /* bold theme color */
    color:var(--onink);                              /* light glyph */
    display:grid; place-items:center; z-index:7; border:none; cursor:pointer;
    box-shadow:0 3px 8px rgba(0,0,0,.5)}             /* shorter + darker shadow */
  .navbar .fab svg{width:55.2%; height:55.2%}   /* +20% (46→55.2) */
  /* Contador de la cesta: círculo ROJO sólido (independiente del tema, sin transparencia) con
     número blanco y borde blanco — igual que el badge de notificaciones del perfil. */
  .navbar .fab .badge{position:absolute; top:-3px; right:-3px; background:#EC1C24;
    color:#fff; font-size:calc(10px*var(--fs)); font-weight:800; min-width:18px; height:18px; border-radius:9px; padding:0 4px;
    display:grid; place-items:center; border:2px solid #fff}

  /* dish detail */
  .dd{padding:0}
  .dd .top{display:flex; align-items:center; justify-content:space-between; padding:var(--head-top) 20px 0}
  .dd .hero2{flex:1; display:flex; align-items:center; justify-content:center; position:relative}
  .dd .plate{width:230px; height:230px; border-radius:50%; display:grid; place-items:center; font-size:calc(130px*var(--fs));
    background:rgba(255,255,255,.5); box-shadow:0 24px 50px rgba(20,40,50,.16)}
  .dd .stepper{position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:16px;
    background:var(--ink); color:var(--bg); border-radius:16px; padding:9px 16px; box-shadow:0 10px 24px rgba(0,0,0,.22)}
  .dd .stepper b{font-size:calc(16px*var(--fs)); min-width:16px; text-align:center}
  .dd .info{padding:26px 24px 26px; background:var(--card); border-radius:26px 26px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.05)}
  .dd .info h2{margin:0; font-size:calc(21px*var(--fs)); font-weight:800; letter-spacing:-.4px}
  .dd .info p{color:var(--muted); font-size:calc(12px*var(--fs)); line-height:1.5}
  .dd .info .buy{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
  .dd .info .buy .p{font-size:calc(22px*var(--fs)); font-weight:800}
  .dd .info .buy .cta{background:var(--primary); color:var(--onink); font-weight:800; font-size:calc(13px*var(--fs));
    padding:14px 22px; border-radius:16px; box-shadow:var(--sh-btn)}

  .footnote{color:#3a4a4d; font-size:calc(12.5px*var(--fs)); background:rgba(255,255,255,.6); margin:0 26px 40px;
    padding:12px 16px; border-radius:14px; max-width:720px}

  /* Home — real customer-app elements (banners, map, contacto, horario, socials) */
  /* Cabecera de Home: primer bloque del cuerpo, NO fija → fluye con el contenido (igual que .mtop.bare). */
  .hhead{position:static; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:var(--head-top) 14px 12px}
  .hhead .sq svg{width:22px; height:22px; color:var(--ink)}
  /* nombre del restaurante: se encoge y se corta con «…» si es largo, para NO empujar el saludo fuera */
  .hhead .rname{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.3px; font-size:calc(18px*var(--fs)); color:var(--ink); white-space:nowrap}
  /* saludo: pinado a la derecha (no se encoge) → su borde derecho queda dentro del padding, nunca desborda */
  .hhead .hello{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; line-height:1.2}   /* grupo centrado: [Hola+mano] arriba, nombre centrado debajo */
  .hhead .hello .helloline{display:flex; align-items:center; gap:5px}   /* separación fija mano↔Hola en cualquier idioma */
  .hhead .hello .hellohola{font-size:calc(13.8px*var(--fs)); color:var(--muted); font-weight:600; white-space:nowrap}   /* grupo +15% (12→13.8) */
  .hhead .hello .hellowave{width:17px; height:17px; color:var(--ink); display:inline-grid; place-items:center; flex:none}  /* grupo +15% (15→17), a la altura de "Hola" */
  .hhead .hello .hellowave svg{width:17px; height:17px; transform-origin:50% 82%}
  .hhead .hello .hellowave.wave svg{animation:handwave 1.6s cubic-bezier(.36,.07,.19,.97) .35s both}  /* saluda UNA vez al abrir */
  .hhead .hello b{font-size:calc(16px*var(--fs)); letter-spacing:-.2px; white-space:nowrap; color:var(--primary)}   /* grupo +15% (14→16); nombre en color de marca */
  /* language dropdown (globe, top-left) — ported from the online app's LanguageSwitcher / .langmenu */
  @keyframes lmfade{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
  .langmenu{position:absolute; top:calc(var(--head-top) + 40px); left:14px; z-index:20; background:var(--card); border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:hidden; min-width:150px; display:none}
  .langmenu.open{display:block; animation:lmfade .15s ease}
  .langmenu button{display:block; width:100%; text-align:left; border:none; background:var(--card); padding:12px 16px; font-size:calc(14px*var(--fs));
    font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit}
  .langmenu button:hover{background:#f6f3ef}
  .langmenu button.sel{color:var(--primary)}
  /* --- values below are EXACT from the real app (preview.html) --- */
  .carousel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:11px; padding:8px 14px 24px; scrollbar-width:none}
  .carousel::-webkit-scrollbar{display:none}
  .banner{scroll-snap-align:center; flex:0 0 85%; aspect-ratio:4 / 3; border-radius:20px; position:relative;
    overflow:hidden; display:flex; align-items:flex-end; padding:15px; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .banner::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 10%,rgba(255,255,255,.22),transparent 55%)}
  .banner::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.5))}
  .banner .bt{position:relative; z-index:1}
  .banner .bt b{font-size:calc(18px*var(--fs)); display:block; letter-spacing:.01em}
  .banner .bt span{font-size:calc(11px*var(--fs)); opacity:.92}
  .banner .tagpill{position:absolute; top:13px; left:13px; z-index:1; background:rgba(255,255,255,.92); color:#222;
    font-size:calc(9.5px*var(--fs)); font-weight:800; padding:4px 9px; border-radius:20px; letter-spacing:.04em}
  .bdots{display:flex; justify-content:center; gap:5px; margin:6px 0 2px}
  .bdot{width:6px; height:6px; border-radius:4px; background:#cdc6bf; transition:.3s}
  .bdot.on{width:20px; background:var(--primary)}
  /* Real interactive map (Leaflet/OpenStreetMap) — mirrors the Flutter MapEmbed.point:
     centred on the restaurant's lat/lng, name-pill marker, zoom buttons, NO scroll-wheel zoom. */
  /* isolation:isolate contains Leaflet's internal z-indexes (200–800) inside this box, so the
     sticky header (z:6) stays ABOVE the map when scrolling (otherwise map tiles cover the header). */
  .mapwrap{margin:8px 14px 0; height:145px; border-radius:18px; overflow:hidden; position:relative; isolation:isolate; border:1px solid #00000010; box-shadow:var(--sh-block)}
  .hmap{position:absolute; inset:0; background:#eef1f3}
  /* zoom +/− — small clean white rounded buttons (like the Flutter _ZoomBtn), not Leaflet's default bar */
  .hmap .leaflet-control-zoom{border:none !important; box-shadow:none !important; margin:9px 9px 0 0}
  .hmap .leaflet-control-zoom a{width:29px !important; height:29px !important; line-height:29px !important; text-align:center;
    font-family:inherit; font-size:calc(18px*var(--fs)); font-weight:500; color:var(--ink) !important; background:var(--card) !important;
    border:none !important; border-radius:9px !important; box-shadow:0 2px 6px rgba(0,0,0,.20); margin-bottom:6px}
  .hmap .leaflet-control-zoom a:hover{background:#f6f6f6 !important}
  .hmap .leaflet-control-zoom a.leaflet-disabled{opacity:.4}
  .mapattr{position:absolute; left:6px; bottom:3px; z-index:500; background:rgba(255,255,255,.7); border-radius:4px;
    padding:1px 4px; font-size:calc(8.5px*var(--fs)); color:#6B7280; pointer-events:none}   /* tiny OSM credit (like Flutter) */
  .hpin{display:flex; flex-direction:column; align-items:center; pointer-events:none}
  .hpin .pinlabel{background:var(--card); border-radius:20px; padding:3px 9px; font-family:'Montserrat',sans-serif; font-size:calc(11px*var(--fs)); font-weight:700;
    letter-spacing:-.2px; color:var(--ink); box-shadow:0 2px 7px rgba(0,0,0,.18); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; margin-bottom:0}
  .hpin .pinicon{margin-top:-1px; line-height:0}
  .hpin .pinicon svg{width:28px; height:28px; color:var(--primary); filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
  .sect{font-size:calc(13px*var(--fs)); font-weight:800; letter-spacing:.01em; padding:12px 14px 7px}
  .card-info{background:var(--card); margin:0 14px 6px; border-radius:16px; box-shadow:var(--sh-block); overflow:hidden}
  .inforow{display:flex; align-items:center; gap:13px; padding:13px 15px; border-bottom:1px solid #f4efe9}
  .inforow:last-child{border-bottom:none}
  .inforow .ri{width:22px; display:grid; place-items:center; color:var(--primary); align-self:flex-start; margin-top:1px}
  .inforow .ri svg{width:22px; height:22px}
  .inforow .rt{flex:1; font-size:calc(12.5px*var(--fs)); line-height:1.35; font-weight:600}   /* semibold like the Horario rows */
  .inforow .rt b{display:block; font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--ink)}
  .inforow .rt small{display:block; font-size:calc(12px*var(--fs)); font-weight:600; color:var(--muted); margin-top:1px}
  .inforow .rt small.closed{color:#C0392B}
  .inforow .ra{font-size:calc(11px*var(--fs)); color:var(--primary); font-weight:800; background:color-mix(in srgb,var(--primary) 10%,var(--card)); padding:7px 12px; border-radius:20px; white-space:nowrap; text-decoration:none; align-self:center}
  /* banner text chip (dark translucent) so title/subtitle stay readable over banner images */
  .banner .bt{position:relative; z-index:1; background:rgba(0,0,0,.20); border-radius:11px; padding:7px 11px}
  .banner .btimg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%; z-index:0}
  .socials{display:flex; gap:10px; padding:2px 14px 6px}
  .social{width:32px; height:32px; border-radius:10px; background:var(--card); box-shadow:var(--sh-btnfloat); display:grid; place-items:center; border:none; color:var(--ink)}   /* button ~70% */
  .social svg{width:18px; height:18px}   /* icon ~80% */

  /* ---------- Carta (menú del restaurante) — ported from preview.html ---------- */
  /* Headers fijos y SIN fondo mate/desenfoque en ninguna pantalla. */
  .mtop{position:static; z-index:6}
  /* Cabeceras solo-título (pedidos/reservas/perfil/notifs/direcciones): primer bloque del cuerpo,
     NO fijo → fluye con el contenido (sin título pegado y semitransparente sobre las tarjetas). */
  .mtop.bare{position:static}
  .mhead{display:flex; align-items:center; justify-content:space-between; padding:var(--head-top) 14px 2px}
  /* centered page title (same spot/style as the restaurant name on Home) */
  .mtitle{flex:1; text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(18px*var(--fs)); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px; transition:opacity .1s linear}
  .sq.cartbtn{position:relative}
  .cbadge{position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    background:var(--primary); color:var(--onink); font-size:calc(9.5px*var(--fs)); font-weight:800; display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.3)}
  /* floating pills on the watercolor · allergens one font-size smaller than categories · tight gap · thin auto-hide scroll */
  .mcatbar{display:flex; gap:7px; overflow-x:auto; padding:7px 14px 3px}
  .mfilters{display:flex; gap:7px; overflow-x:auto; padding:3px 14px 3px}
  /* 4px webkit bar (faint → darker on focus). Chrome won't repaint the thumb back to faint on
     mouse-leave (ancestor :hover repaint bug), so a tiny JS scroll-nudge on mouseleave forces it. */
  .mfilters::-webkit-scrollbar, .mcatbar::-webkit-scrollbar{height:4px; background:transparent}
  /* Thumb VISIBLE en reposo (sin ratón) para que el cliente perciba que la fila se desliza en horizontal. */
  .mfilters::-webkit-scrollbar-thumb, .mcatbar::-webkit-scrollbar-thumb{background:rgba(60,70,72,.24); border-radius:4px}
  /* Oscuro: thumb CLARO (uno oscuro sobre fondo casi negro no se ve). */
  .skin-dark .mfilters::-webkit-scrollbar-thumb, .skin-dark .mcatbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24)}
  /* darken on focus ONLY on mouse-capable devices — never on touch (avoids sticky-hover on phones) */
  @media (hover:hover){
    .mfilters:hover::-webkit-scrollbar-thumb, .mcatbar:hover::-webkit-scrollbar-thumb{background:rgba(60,70,72,.55)}
    .skin-dark .mfilters:hover::-webkit-scrollbar-thumb, .skin-dark .mcatbar:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.6)}
  .memenu{padding:36px 18px; text-align:center; color:var(--muted); font-size:calc(13px*var(--fs)); font-weight:600}
  .mthumbimg{width:100%; height:100%; object-fit:cover; border-radius:inherit}
  }
  .fchip{flex:none; display:flex; align-items:center; gap:5px; border:none; background:var(--card); box-shadow:var(--sh-chip);
    border-radius:20px; padding:6px 11px; font-size:calc(11px*var(--fs)); font-weight:700; color:var(--muted); white-space:nowrap; cursor:pointer; font-family:inherit}
  .fchip .dic{width:13px; height:13px; display:inline-flex}
  .fchip .dic svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .fchip.on{background:var(--primary); color:var(--onink)}
  .mcat{flex:none; border:none; background:var(--card); box-shadow:var(--sh-chip); border-radius:20px; padding:7px 13px;
    font-size:calc(12px*var(--fs)); font-weight:700; color:var(--ink); white-space:nowrap; cursor:pointer; font-family:inherit}
  .mcat.on{background:var(--primary); color:var(--onink)}
  /* food block: [photo + heart overlay] · [name/desc/price] · [+ top-right] · full-width allergen tags below */
  .mitem{background:var(--card); margin:0 14px 10px; border-radius:18px; padding:16px 16px 6px; box-shadow:var(--sh-block)}   /* bottom gap = divider→tags gap */
  .mtop + .mitem{margin-top:10px}   /* first food sits below the header with the same gap as between foods */
  .mitem .mrow{display:flex; gap:12px; align-items:flex-start}
  .mthumb{position:relative; width:78px; height:78px; border-radius:14px; display:grid; place-items:center; font-size:calc(34px*var(--fs)); flex:none;
    background:color-mix(in srgb,var(--primary) 8%,var(--card))}
  .mfav{position:absolute; top:-9px; left:-9px; width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.95);
    box-shadow:0 1px 5px rgba(0,0,0,.20); display:grid; place-items:center; color:var(--ink); cursor:pointer}   /* ~10% bigger, nudged +1/+1 */
  .mfav svg{width:15px; height:15px}
  .mfav.on{cursor:pointer; color:#e31e24}        /* favorito: corazón ROJO (antes venía del icono; ahora del color) */
  /* Animación «me gusta» al añadir a favoritos: pop del corazón + estallido de partículas */
  @keyframes favpop{ 0%{transform:scale(1)} 18%{transform:scale(.7)} 45%{transform:scale(1.32)} 70%{transform:scale(.92)} 100%{transform:scale(1)} }
  .favpop{ animation:favpop .5s cubic-bezier(.2,.85,.3,1.25) }
  .favburst{ position:fixed; z-index:99999; width:0; height:0; pointer-events:none }
  .favburst .fbheart{ position:absolute; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; color:#e31e24; opacity:.5; animation:fbheart .5s ease-out forwards }
  .favburst .fbheart svg{ width:100%; height:100%; fill:#e31e24 }
  @keyframes fbheart{ 0%{transform:scale(.5); opacity:.5} 100%{transform:scale(1.15); opacity:0} }
  .sq.favhead{cursor:default}                    /* favorites page indicator: red, not clickable */
  .mitem .minfo{flex:1; min-width:0; padding-top:2px}
  .mitem .mnm{font-size:calc(13.5px*var(--fs)); font-weight:700; line-height:1.2}
  .mitem .mds{font-size:calc(9.5px*var(--fs)); font-weight:700; color:var(--muted); margin-top:3px; line-height:1.3}
  .mitem .mprice{font-size:calc(14px*var(--fs)); font-weight:800; margin-top:8px}
  .mitem .mprice .pfrom{font-size:calc(9.5px*var(--fs)); font-weight:700; color:var(--muted); text-transform:lowercase; letter-spacing:.2px}   /* "desde" antes del precio mínimo */
  .iadd{align-self:flex-start; width:32px; height:32px; border-radius:11px; border:none; background:var(--ink); color:var(--bg);
    font-size:calc(19px*var(--fs)); font-weight:700; display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-btnfloat); flex:none}
  .iadd svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}   /* bigger + bolder plus */
  .iadd svg.perso{width:14.4px; height:14.4px}   /* personalize icon: 20% más pequeño (18→14.4), solo el icono, no el botón */
  .mtags{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; padding-top:6px; border-top:1px solid #f0ece6}   /* divider→tags gap smaller */
  .mtag{font-size:calc(9px*var(--fs)); font-weight:700; background:color-mix(in srgb,var(--primary) 3%,var(--card)); color:var(--primary);   /* tinte muy suave (3%) */
    border-radius:9px; padding:3px 7px; display:inline-flex; align-items:center; gap:3px}
  .mtag svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

  /* ---------- Detalle del plato ---------- */
  /* Cabecera de la ficha de plato: primer bloque del cuerpo, NO fija (como .mtop.bare/.hhead). */
  .dhdr{position:static; display:flex; align-items:center; justify-content:space-between; padding:var(--head-top) 14px 8px}
  .favtoggle.on{color:#e31e24}
  .dhero{position:relative; margin:6px 14px 0}
  /* Favorito ANCLADO sobre la foto (se desplaza con ella), SOLO el icono: negro si NO, rojo si SÍ */
  .dhero .dfav{position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; border:none; background:transparent;
    display:grid; place-items:center; cursor:pointer; color:#151515}
  .dhero .dfav svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2}
  .dhero .dfav.on{color:#e31e24}
  .dhero .dfav.on svg{fill:currentColor}
  /* Fila de acciones al final (detalle / cesta): botón "Volver" NEGRO (como los demás) + botón principal */
  .dbtns{display:flex; gap:10px; align-items:stretch; margin-top:24px}
  .dbtns .dback{flex:none; background:var(--ink); color:var(--bg); border:none; border-radius:16px; padding:0 20px;
    font-family:inherit; font-weight:800; font-size:calc(13px*var(--fs)); cursor:pointer}
  .dbtns .dcart, .dbtns .cocta{flex:1; margin-top:0}
  .dphoto{width:100%; aspect-ratio:1/1; border-radius:22px; display:grid; place-items:center; font-size:calc(92px*var(--fs));
    background:color-mix(in srgb,var(--primary) 4%,var(--card)); box-shadow:var(--sh-block)}   /* tinte a la mitad (8%→4%) → más blanco */
  /* (se retiraron los antiguos .dback/.dfav flotantes: causaban el botón "Back" arriba-izquierda
      y el bloque blanco del corazón; ahora .dbtns .dback y .dhero .dfav son los válidos) */
  .dqty{position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px;
    background:var(--ink); color:var(--bg); border-radius:20px; padding:5px 13px; box-shadow:0 6px 16px rgba(0,0,0,.28)}
  .dqty b{font-size:calc(15px*var(--fs)); min-width:12px; text-align:center; font-weight:800}
  .dqty .qb{background:none; border:none; color:var(--bg); font-size:calc(20px*var(--fs)); font-weight:700; cursor:pointer; line-height:1; width:18px; display:grid; place-items:center}
  .dbody{padding:28px 18px 0}
  .drow{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
  .dname{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(17px*var(--fs)); line-height:1.2}
  .dprice{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(17px*var(--fs)); color:var(--primary); white-space:nowrap}
  .ddesc{font-size:calc(12px*var(--fs)); color:color-mix(in srgb, var(--muted) 30%, var(--ink)); line-height:1.4; margin-top:6px}   /* descripción bastante más oscura */
  .dtags2{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
  .dgroup{margin-top:9px; padding-top:9px}   /* tighter, equal gaps; no divider line */
  .dgt{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(14px*var(--fs)); display:flex; align-items:center; gap:8px; margin-bottom:12px}
  .dgt .dgs{font-family:'Poppins',sans-serif; font-weight:600; font-size:calc(10.5px*var(--fs)); color:var(--muted)}
  /* unselected = the selected look but ~70% transparent (faded primary border + faint tint) */
  .dopt{display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:9px; cursor:pointer; border-radius:14px;
    border:1.5px solid color-mix(in srgb, var(--primary) 30%, transparent); background:color-mix(in srgb, var(--primary) 3%, var(--card))}
  .dopt.sel{border:1.5px solid var(--primary); background:color-mix(in srgb,var(--primary) 6%,var(--card))}
  .dopt .ck{width:20px; height:20px; border-radius:50%; border:2px solid color-mix(in srgb, var(--primary) 35%, transparent); flex:none; position:relative}
  .dopt.multi .ck{border-radius:6px}
  .dopt.sel .ck{border-color:var(--primary); background:var(--primary)}
  .dopt.sel .ck::after{content:""; position:absolute; left:6px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
  .dopt .ol{flex:1; font-size:calc(13px*var(--fs)); font-weight:600}
  .dopt .od{font-size:calc(12px*var(--fs)); font-weight:700; color:var(--muted)}
  .dcart{width:100%; margin-top:24px; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--ink); color:var(--bg);
    border:none; border-radius:16px; padding:15px; font-family:'Poppins',sans-serif; font-weight:700; font-size:calc(14.5px*var(--fs)); cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .dcart svg{width:20px; height:20px}

  /* ---------- Checkout ---------- */
  .cowrap{padding:2px 14px 0}
  .coitem{margin:0 0 10px}   /* reuses ALL .mitem/.mrow styles from Carta; only the side margin differs (cowrap has padding) */
  .coright{display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; margin-top:-9px}   /* tops align with the corner heart */
  .coqty{display:flex; flex-direction:column; align-items:center; background:var(--ink); color:var(--bg); border-radius:14px; padding:5px 0; width:32px}
  .coqty b{font-size:calc(13px*var(--fs)); font-weight:800; padding:2px 0}
  .coqty .qb{background:none; border:none; color:var(--bg); font-size:calc(16px*var(--fs)); font-weight:700; cursor:pointer; line-height:1; width:24px; height:20px; display:grid; place-items:center}
  .codel{width:32px; height:32px; border-radius:11px; background:var(--ink); color:var(--bg); border:none; display:grid; place-items:center; cursor:pointer}   /* = Carta add button size */
  .codel svg{width:17px; height:17px}
  .cotitle{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(14px*var(--fs)); margin:16px 2px 9px}
  .cofuls{display:flex; gap:9px}
  .cofuls.restabs{margin:2px 0 16px}   /* barra de pestañas Reservas (Nueva / Mis reservas) */
  /* dark (ink) segmented toggle — selected = filled black, unselected = white outline. */
  .coful{flex:1; border:1.5px solid var(--line); background:var(--card); border-radius:14px; padding:12px; font-family:inherit;
    font-size:calc(13px*var(--fs)); font-weight:700; color:var(--ink); cursor:pointer; transition:background .15s, color .15s, border-color .15s}
  .coful-ic{width:16px; height:16px; vertical-align:-3px; margin-right:6px}   /* icono tipo pedido junto al texto del botón Entrega */
  .coful.on{background:var(--primary); border-color:var(--primary); color:var(--onink)}  /* activo = marca (legible en claro y oscuro) */
  .coful.disabled{opacity:.4; pointer-events:none}
  .etanote{margin-top:8px; font-size:calc(11.5px*var(--fs)); font-weight:600; color:var(--muted)}
  .etanote.ooz{color:#C0392B}
  /* date / time picker (inline under the field) */
  .copick{display:flex; flex-wrap:wrap; gap:7px; padding:10px 14px 12px; background:#faf7f3; border-top:1px solid #f4efe9}
  .dchip,.tchip{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:20px; padding:8px 13px;
    font-family:inherit; font-size:calc(12.5px*var(--fs)); font-weight:700; cursor:pointer; white-space:nowrap; transition:.12s}
  .dchip.on,.tchip.on{background:var(--ink); border-color:var(--ink); color:var(--bg)}
  .copickmsg{padding:6px 2px; color:var(--muted); font-size:calc(12px*var(--fs)); font-weight:600}
  .dcart.disabled{background:color-mix(in srgb,var(--ink) 12%, var(--bg)); color:var(--muted); box-shadow:none; opacity:1; pointer-events:none}  /* deshabilitado legible en ambos modos */
  /* bottom-sheet modal (date calendar / time grid) — mirrors Flutter BrandPickers */
  .sheetback{position:absolute; inset:0; z-index:40; background:rgba(20,25,25,.42); display:flex; align-items:flex-end; animation:lmfade .18s ease}
  .sheet{width:100%; background:var(--card); border-radius:26px 26px 0 0; padding:10px 18px 18px; box-shadow:0 -8px 30px rgba(0,0,0,.18);
    animation:sheetup .22s ease; max-height:82%; display:flex; flex-direction:column}
  @keyframes sheetup{from{transform:translateY(34px); opacity:.5} to{transform:none; opacity:1}}
  /* Modal flotante centrado (confirmación de reserva) */
  .confirmback{position:absolute; inset:0; z-index:42; background:rgba(20,25,25,.42); display:flex; align-items:center; justify-content:center; padding:26px; animation:lmfade .16s ease}
  .confirmbox{width:100%; max-width:320px; background:var(--card); border-radius:20px; padding:18px; box-shadow:0 22px 55px rgba(0,0,0,.32); animation:cpop .2s ease}
  @keyframes cpop{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
  .restext{font-size:calc(11px*var(--fs)); font-weight:700; color:var(--muted); line-height:1.5; padding:0 2px;
    text-align:justify; text-justify:inter-word; hyphens:auto}   /* aviso: pequeño, negrita, justificado a ambos lados */
  .sheethandle{width:42px; height:4px; border-radius:3px; background:#E3DDD5; margin:2px auto 12px}
  .sheettop{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
  .sheettop b{font-family:'Montserrat',sans-serif; font-size:calc(16px*var(--fs)); font-weight:800; color:var(--ink)}
  .sheetx{border:none; background:none; color:var(--muted); font-size:calc(18px*var(--fs)); cursor:pointer; padding:2px 6px; line-height:1}
  .sheetbody{overflow-y:auto}
  .cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
  .cal-head b{font-size:calc(15px*var(--fs)); font-weight:800; color:var(--ink)}
  .cal-nav{width:34px; height:34px; border-radius:10px; border:1.5px solid var(--line); background:var(--card); font-size:calc(17px*var(--fs)); color:var(--ink); cursor:pointer}
  .cal-nav.dis{opacity:.3; pointer-events:none}
  .cal-dow{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px}
  .cal-dow span{text-align:center; font-size:calc(10.5px*var(--fs)); font-weight:700; color:var(--muted)}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
  .cal-cell{aspect-ratio:1; border:none; background:none; border-radius:11px; font-size:calc(13.5px*var(--fs)); font-weight:600; color:var(--ink); cursor:pointer; display:grid; place-items:center; font-family:inherit; padding:0}
  .cal-cell.empty{visibility:hidden}
  .cal-cell.dis{color:#CFCAC3; pointer-events:none}
  .cal-cell.today{border:1.5px solid color-mix(in srgb, var(--primary) 45%, var(--card))}
  .cal-cell.sel{background:var(--primary); color:var(--onink); font-weight:800}
  .tgl{font-size:calc(11px*var(--fs)); font-weight:800; color:var(--muted); letter-spacing:.4px; margin:12px 2px 6px}
  .tgl:first-child{margin-top:0}
  .tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:2px}
  .tcell{border:1.5px solid var(--line); background:var(--card); border-radius:9px; padding:8px 0; font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--ink); cursor:pointer; text-align:center; font-family:inherit}
  .tcell.sel{background:var(--primary); border-color:var(--primary); color:var(--onink)}
  .tcell.full{background:#f1f0ee; border-color:#e7e1da; color:var(--muted); cursor:not-allowed; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:0; line-height:1.1}
  .tcell.full{text-decoration:line-through}
  .tcell .tfull{font-size:calc(8px*var(--fs)); font-weight:800; color:#C0392B; letter-spacing:.2px; text-decoration:none}
  /* «Completo» en modo oscuro: sin esto el #f1f0ee quedaba casi blanco sobre el sheet oscuro */
  html.skin-dark .tcell.full{background:color-mix(in srgb, var(--muted) 16%, var(--card)); border-color:var(--line)}
  html.skin-dark .tcell .tfull{color:#FF8A7A}
  .cofields{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); margin-top:12px; overflow:hidden}
  .cofield{display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer}
  .cofield+.cofield{border-top:1px solid #f4efe9}
  .cofield .ci{width:22px; color:var(--primary); display:grid; place-items:center}
  .cofield .ci svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
  .cofield .cl{flex:1; min-width:0}
  .cofield .cl b{display:block; font-size:calc(12.5px*var(--fs))}
  .cofield .cl span{font-size:calc(11.5px*var(--fs)); color:var(--muted)}
  .cofield .ca{color:var(--muted); font-size:calc(18px*var(--fs))}
  .copays{display:flex; flex-direction:column; gap:9px}
  .copay{display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-radius:14px; padding:12px 14px; box-shadow:var(--sh-chip); cursor:pointer}
  /* Iconos de pago: MISMA altura, alineados a la IZQUIERDA en una caja de ancho fijo → los iconos quedan
     en columna alineados y, al empezar el texto tras esa caja, los títulos también quedan alineados. */
  .copay .payic{flex:none; width:36px; display:flex; align-items:center; color:var(--ink)}
  .copay .payic svg{height:20px; width:auto; max-width:36px}
  .copay.on{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 5%,var(--card))}
  .copay .pr{width:19px; height:19px; border-radius:50%; border:2px solid color-mix(in srgb, var(--primary) 35%, transparent); flex:none; position:relative}
  .copay.on .pr{border-color:var(--primary)}
  .copay.on .pr::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary)}
  .copay .pl{min-width:0}
  .copay .pl b{display:block; font-size:calc(13px*var(--fs)); font-weight:700}
  .copay .pl small{display:block; font-size:calc(11px*var(--fs)); color:var(--muted); line-height:1.35; white-space:normal; word-break:break-word}
  /* Botón «+ Añadir dirección» dentro del checkout (secundario, discreto). */
  .coaddradd{display:block; width:100%; margin:9px 0 0; padding:11px; border:1.5px dashed color-mix(in srgb, var(--primary) 40%, transparent);
    background:transparent; color:var(--primary); font:inherit; font-weight:700; font-size:calc(13px*var(--fs)); border-radius:12px; cursor:pointer; transition:.15s}
  .coaddradd:hover{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 6%,transparent)}
  .skin-dark .coaddradd{color:var(--primary-d)}
  /* Bloque FLOTANTE de ubicación (overlay a nivel de página, NO navega). Se añade a <body>; hereda
     los tokens de <html>. Centrado, por encima de todo. */
  .locgate-back{position:fixed; inset:0; z-index:120; background:rgba(20,25,25,.46);
    display:flex; align-items:center; justify-content:center; padding:26px; animation:lmfade .16s ease}
  .locgate{width:100%; max-width:330px; background:var(--card); border-radius:20px; padding:22px 20px 18px;
    text-align:center; box-shadow:0 22px 55px rgba(0,0,0,.34); animation:cpop .2s ease}
  .locgate-ic{width:52px; height:52px; margin:0 auto 12px; border-radius:15px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--primary) 12%, var(--card)); color:var(--primary)}
  .locgate-ic svg{width:26px; height:26px}
  .skin-dark .locgate-ic{background:color-mix(in srgb, var(--primary-d) 18%, var(--card)); color:var(--primary-d)}
  .locgate-t{font-size:calc(16px*var(--fs)); font-weight:800; color:var(--ink); margin-bottom:6px}
  .locgate-d{font-size:calc(12.5px*var(--fs)); color:var(--muted); line-height:1.5; margin-bottom:16px}
  .locgate-btns{display:flex; gap:10px}
  .locgate-x{flex:1; border:1.5px solid var(--line); background:transparent; color:var(--ink); font:inherit;
    font-weight:700; font-size:calc(13.5px*var(--fs)); border-radius:13px; padding:12px; cursor:pointer; min-height:44px}
  .locgate-go{flex:1.4; border:none; background:var(--primary); color:var(--onink); font:inherit; font-weight:800;
    font-size:calc(13.5px*var(--fs)); border-radius:13px; padding:12px; cursor:pointer; min-height:44px}
  .locgate-go:disabled{opacity:.6; cursor:default}
  .cocoupon{display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 13px; border-radius:14px;
    border:1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); background:color-mix(in srgb,var(--primary) 5%,var(--card))}
  .cocoupon .cic{font-size:calc(20px*var(--fs)); flex:none}
  .cocoupon .ctx{flex:1; min-width:0}
  .cocoupon .ctx b{display:block; font-size:calc(13px*var(--fs))}
  .cocoupon .ctx span{font-size:calc(11.5px*var(--fs)); color:var(--muted)}
  .cocoupon .capply{border:none; background:var(--primary); color:var(--onink); border-radius:12px; padding:8px 14px; font-family:inherit; font-size:calc(12px*var(--fs)); font-weight:800; cursor:pointer}
  /* Vales/cupones en la cesta (opcional, varios): tarjeta con importe + motivo y botón Aplicar/Quitar */
  .vapplies{display:flex; flex-direction:column; gap:10px; margin-top:2px}
  .vapply{display:flex; align-items:stretch; background:var(--card); border:none;
    border-radius:16px; overflow:hidden; min-height:42px; box-shadow:0 4px 12px -8px rgba(31,41,55,.4)}
  .vapply .valeft{flex:1; min-width:0; padding:4px 14px; display:flex; flex-direction:column; justify-content:center; gap:0}
  .vapply .vatop{display:flex; align-items:center; gap:9px}
  .vapply .vaic{width:24px; flex:none; color:var(--primary); display:flex}
  .vapply .vaic svg{width:100%; height:auto; fill:currentColor}
  .vapply .vaamt{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(18px*var(--fs)); color:var(--primary); line-height:1.05}
  .vapply .vasub{font-size:calc(12.5px*var(--fs)); line-height:1.1; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .vapply .vabtn{flex:none; width:34%; border:none; background:var(--primary); color:var(--onink); font-family:'Montserrat',sans-serif;
    font-weight:800; font-size:calc(12px*var(--fs)); cursor:pointer; transition:background .15s}
  .vapply.on .vabtn{background:#9aa0a6}                                   /* aplicado → gris */
  .vapply .vabtn:disabled{background:color-mix(in srgb,var(--primary) 35%,var(--card)); cursor:not-allowed}
  .cobreak{margin-top:16px; background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:14px 16px}
  .cobreak .brow{display:flex; justify-content:space-between; align-items:baseline; font-size:calc(12.5px*var(--fs)); margin-bottom:9px}
  .cobreak .brow.dim{color:var(--muted); font-size:calc(11px*var(--fs))}
  .cobreak .brow .disc{color:#0a7c4f; font-weight:700}
  .cobreak .brow.disc{color:#0a7c4f; font-weight:700}
  .cobreak .brow.refund{color:#b45309; font-weight:700; margin-top:9px; padding-top:9px; border-top:1px dashed #f0ece6}
  .cobreak .brow.refreason{color:var(--muted); font-size:calc(11px*var(--fs)); margin-top:-4px; font-style:italic}
  /* Banner de promoción pública (automática, no elegible) en la cesta */
  .copromo{display:flex; align-items:center; gap:9px; margin-top:2px; padding:10px 13px; border-radius:13px;
    background:color-mix(in srgb,var(--primary) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--primary) 25%,transparent); font-size:calc(12.5px*var(--fs))}
  .copromo .cpi{flex:none; width:20px; color:var(--primary); display:flex}
  .copromo .cpi svg{width:100%; height:auto; fill:currentColor}
  .copromo b{color:var(--primary)}
  /* Total 0 (cubierto por vale): no se ofrece método de pago */
  .cofree{display:flex; align-items:center; gap:10px; margin-top:2px; padding:12px 14px; border-radius:14px;
    background:color-mix(in srgb,#0a7c4f 10%,var(--card)); border:1px solid color-mix(in srgb,#0a7c4f 30%,transparent); color:#0a7c4f; font-weight:600; font-size:calc(12.5px*var(--fs))}
  .cofree .cfi{flex:none; width:22px; color:#0a7c4f; display:flex}
  .cofree .cfi svg{width:100%; height:auto; fill:currentColor}
  .cobreak .brow.total{margin-bottom:0; padding-top:10px; border-top:1px solid #f0ece6; font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(16px*var(--fs))}
  .cocta{margin-top:16px}

  /* ---------- Reservas / Pedidos / Perfil (drafts) ---------- */
  .infonote{display:flex; gap:11px; align-items:center; background:var(--card); border-radius:14px; box-shadow:var(--sh-block); padding:11px 12px; margin-top:2px; color:var(--ink)}
  .infonote .ni{width:31px; height:31px; flex:none; color:var(--ink)}
  .infonote .ni svg{width:31px; height:31px; display:block}
  .infonote .it{font-size:calc(11.5px*var(--fs)); line-height:1.45; font-weight:600; color:#4a5560}
  .rcard{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:13px 14px; margin-bottom:9px}
  .rc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
  .rc-top b{font-size:calc(13.5px*var(--fs))}
  .rc-meta{font-size:calc(11.5px*var(--fs)); color:var(--muted); margin-top:4px}
  .stbadge{font-size:calc(10px*var(--fs)); font-weight:800; padding:4px 9px; border-radius:20px; white-space:nowrap}
  .stbadge.ok{background:#e6f6ee; color:#0a7c4f}
  .stbadge.pend{background:#fff3e0; color:#b26a00}
  .stbadge.done{background:#eef1f5; color:#5a6472}
  .stbadge.rej{background:#fde8e8; color:#c0392b}
  .stbadge.act{background:#e2eeff; color:#1e5fb0}   /* ready / on the way (blue) */
  .gcard{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); overflow:hidden; margin-top:10px}
  .grow{display:flex; align-items:center; gap:12px; padding:12px 14px}
  .grow+.grow{border-top:1px solid #f4efe9}
  .grow .gi{width:22px; color:var(--primary); display:grid; place-items:center}
  .grow .gi svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
  .grow .gl{flex:1; min-width:0}
  .grow .gl b{display:block; font-size:calc(12.5px*var(--fs))}
  .grow .gl span{font-size:calc(11px*var(--fs)); color:var(--muted)}
  /* Chat del pedido (cliente ↔ restaurante/repartidor) */
  .chatbox{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:12px; margin-top:10px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:7px}
  .cbrow{display:flex; justify-content:flex-start}
  .cbrow.me{justify-content:flex-end}
  .cbub{max-width:78%; padding:8px 12px; border-radius:14px; font-size:calc(13px*var(--fs)); line-height:1.4; background:#f1f3f5; color:var(--ink); border-bottom-left-radius:5px; word-break:break-word}
  .cbub.me{background:var(--primary); color:var(--onink); border-bottom-left-radius:14px; border-bottom-right-radius:5px}
  .cbwho{display:block; font-size:calc(10px*var(--fs)); font-weight:800; opacity:.75; margin-bottom:2px}
  .cbempty{text-align:center; color:var(--muted); font-size:calc(12.5px*var(--fs)); padding:14px}
  .cbdot{position:absolute; top:7px; right:9px; width:9px; height:9px; border-radius:50%; background:#e0393e; box-shadow:0 0 0 2px #fff}
  .cbtpls{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
  .cbtpl{border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:16px; padding:6px 11px; font-size:calc(11.5px*var(--fs)); font-family:inherit; cursor:pointer}
  .cbtpl:hover{background:#f7f8fb}
  .cbinput{display:flex; gap:8px; align-items:center; margin-top:9px}
  .cbinput input{flex:1; border:1.5px solid var(--line); border-radius:14px; padding:10px 14px; font-family:inherit; font-size:calc(13.5px*var(--fs)); outline:none; background:var(--card); color:var(--ink)}
  .cbsend{width:42px; height:42px; border:none; border-radius:50%; background:var(--primary); color:var(--onink); display:grid; place-items:center; cursor:pointer; flex:none}
  .cbsend svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9}
  .hstep{display:flex; align-items:center; gap:12px; background:var(--ink); color:var(--bg); border-radius:14px; padding:5px 10px}
  .hstep b{font-size:calc(13px*var(--fs)); font-weight:800; min-width:12px; text-align:center}
  .hstep button{background:none; border:none; color:var(--bg); font-size:calc(17px*var(--fs)); font-weight:700; cursor:pointer; line-height:1; width:16px; display:grid; place-items:center}
  .hstep button:disabled{opacity:.35; pointer-events:none}
  .stbadge.can{background:#eef0f5; color:#64748b}
  .rc-reason{font-size:calc(11px*var(--fs)); color:#c0392b; margin-top:5px; font-weight:600}
  .rc-act{display:flex; gap:8px; margin-top:10px}
  .rc-act button{flex:1; border-radius:11px; padding:9px; font-family:inherit; font-size:calc(12px*var(--fs)); font-weight:800; cursor:pointer}
  .rc-edit{background:var(--ink); color:var(--bg); border:1.5px solid var(--ink)}
  .rc-cancel{background:var(--card); color:#c0392b; border:1.5px solid var(--line)}
  .rcard.editing{border:1.5px solid color-mix(in srgb, var(--primary) 30%, var(--card))}
  /* in-app toast (manager confirm/reject + submit feedback) */
  .toast{position:absolute; left:50%; bottom:98px; transform:translate(-50%,10px); background:var(--ink); color:var(--bg); font-size:calc(12.5px*var(--fs));
    font-weight:700; padding:11px 16px; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.28); z-index:60; opacity:0;
    transition:opacity .25s, transform .25s; max-width:82%; text-align:center; pointer-events:none}
  .toast.show{opacity:1; transform:translate(-50%,0)}
  .toast.ok{background:#0a7c4f}
  .toast.err{background:#c0392b}
  /* Aviso push in-app: banner BREVE arriba (pulsar → Notificaciones). Wrapper de posición;
     la tarjeta interior es .ospush (misma que la maqueta de push del sistema). */
  .pushbanner{position:absolute; top:0; left:50%; transform:translate(-50%,-120%); z-index:9999;
    width:92%; margin-top:calc(env(safe-area-inset-top,0px) + 10px); cursor:pointer;
    opacity:0; transition:transform .32s cubic-bezier(.2,.9,.3,1.2), opacity .32s}
  .pushbanner.show{transform:translate(-50%,0); opacity:1}
  /* Aviso flotante «añadido a la cesta» (fade in/out, sobre la barra inferior) */
  .carttoast{position:absolute; left:50%; bottom:96px; transform:translate(-50%,10px); z-index:9000;
    display:flex; align-items:center; gap:10px; background:var(--card); color:var(--ink); border-radius:14px;
    box-shadow:0 12px 30px -8px rgba(31,41,55,.5); padding:9px 14px 9px 9px; max-width:82%; cursor:pointer;
    opacity:0; transition:opacity .28s, transform .28s}
  .carttoast.show{opacity:1; transform:translate(-50%,0)}
  .carttoast .cti{flex:none; width:28px; height:28px; border-radius:9px; background:var(--primary); color:var(--onink); display:grid; place-items:center}
  .carttoast .cti svg{width:16px; height:16px}
  .carttoast .ctt{font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--ink); line-height:1.3}
  .ordcard{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:13px 14px; margin-bottom:9px; cursor:pointer}
  .ord-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
  .ord-top b{font-size:calc(14px*var(--fs)); font-family:'Montserrat',sans-serif; font-weight:800}
  .ord-meta{font-size:calc(11.5px*var(--fs)); color:var(--muted); margin-top:6px}
  .ordfic{width:15px; height:15px; vertical-align:-3px; margin-right:3px; color:var(--ink)}   /* icono tipo pedido (bici/tienda) — como el panel */
  .ord-bot{display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:calc(12px*var(--fs))}
  .ord-bot b{font-family:'Montserrat',sans-serif; font-weight:800}
  /* order detail + delivery tracking */
  .odhead{display:flex; align-items:center; justify-content:space-between; background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:16px; margin-bottom:4px}
  .odnum{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(20px*var(--fs)); color:var(--ink)}
  /* Propuesta de hora del restaurante (pedido 'proposed') — 3 líneas: título pequeño,
     mensaje en negrita, y la HORA grande (2 tallas mayor). Se usa en el detalle y en el popup. */
  .propbox{background:var(--card); border:1.5px solid #bcdcff; border-radius:16px; box-shadow:var(--sh-block); padding:14px 16px; margin:6px 0 2px}
  .propx-t{font-size:calc(11.5px*var(--fs)); font-weight:600; color:var(--muted)}
  .propx-m{font-size:calc(14px*var(--fs)); font-weight:800; color:var(--ink); margin-top:2px}
  .propx-h{font-size:calc(26px*var(--fs)); font-weight:800; color:var(--primary); line-height:1.1; margin-top:2px}
  .propx-b{display:flex; gap:8px; margin-top:12px}
  .propx-acc{flex:1; border:none; border-radius:11px; padding:9px 10px; font-weight:800; font-size:calc(12.5px*var(--fs)); color:var(--onink); background:var(--primary); cursor:pointer}
  .propx-rej{flex:1; border:1.5px solid var(--line); border-radius:11px; padding:9px 10px; font-weight:800; font-size:calc(12.5px*var(--fs)); color:#c0392b; background:var(--card); cursor:pointer}
  /* Línea de contexto: sobre qué pedido es (tipo + nº) */
  .propx-o{display:flex; align-items:center; justify-content:center; gap:5px; font-size:calc(11px*var(--fs)); font-weight:700; color:var(--muted); margin-bottom:6px}
  .propx-oic{width:14px; height:14px; flex:none}
  /* Bloque flotante global (sobre cualquier pantalla): NO ocupa toda la pantalla — es un bloque del
     ancho de los bloques del body (gutter 14px), flotando sobre el contenido con su sombra. */
  .propback{position:fixed; inset:0; z-index:120; background:transparent; display:flex; align-items:center; justify-content:center; padding:14px; animation:propfade .2s ease}
  .ppop{width:100%; max-width:334px; background:var(--card); border-radius:20px; box-shadow:0 22px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05); padding:18px 18px 16px; text-align:center; animation:proppop .3s cubic-bezier(.2,.9,.3,1.3)}
  .ppop .propx-b{margin-top:16px}
  @keyframes propfade{from{opacity:0}to{opacity:1}}
  @keyframes proppop{0%{opacity:0; transform:translateY(22px) scale(.94)}60%{opacity:1}100%{opacity:1; transform:none}}
  /* Modal de pago Stripe (Payment Element) */
  .spayback{position:fixed; inset:0; z-index:130; background:rgba(20,24,34,.55); display:flex; align-items:center; justify-content:center; padding:14px; animation:propfade .2s ease}
  .spay{width:100%; max-width:334px; max-height:88dvh; overflow-y:auto; background:var(--card); border-radius:20px; box-shadow:0 22px 60px rgba(0,0,0,.4); padding:18px; animation:proppop .3s cubic-bezier(.2,.9,.3,1.3)}
  .spayt{font-weight:800; font-size:calc(16px*var(--fs)); color:var(--ink); text-align:center}
  .spayhint{font-size:calc(11px*var(--fs)); color:var(--muted); text-align:center; margin:4px 0 12px}
  .spayel{border:1.5px solid var(--line); border-radius:12px; padding:13px 12px; background:var(--card)}
  .spayel.StripeElement--focus{border-color:var(--primary)}
  .spayel.StripeElement--invalid{border-color:#c0392b}
  .spaymsg{color:#c0392b; font-size:calc(12px*var(--fs)); font-weight:600; margin-top:8px; min-height:16px; text-align:center}
  .spaybtns{display:flex; flex-direction:column; gap:8px; margin-top:14px}
  .spaypay{border:none; border-radius:12px; padding:13px; font-weight:800; font-size:calc(14px*var(--fs)); color:var(--onink); background:var(--primary); cursor:pointer}
  .spaypay:disabled{opacity:.6; cursor:default}
  .spaycx{border:none; background:none; color:var(--muted); font-weight:700; font-size:calc(13px*var(--fs)); padding:6px; cursor:pointer}
  /* Lista de tarjetas guardadas (pago + gestor de perfil) */
  .spcards{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
  .spcard{display:flex; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; font-size:calc(13.5px*var(--fs)); color:var(--ink); cursor:pointer}
  .spcard:has(input:checked){border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--card))}
  .spcard input[type=radio]{accent-color:var(--primary)}
  .spcard b{font-weight:800}
  .spc4{color:var(--ink); letter-spacing:.5px}
  .spcexp{margin-left:auto; color:var(--muted); font-size:calc(12px*var(--fs))}
  .spcdel{margin-left:auto; border:none; background:none; color:#c0392b; font-weight:800; font-size:calc(15px*var(--fs)); cursor:pointer; padding:2px 6px}
  .spsave{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:calc(12.5px*var(--fs)); color:var(--muted); cursor:pointer}
  .spsave input{accent-color:var(--primary)}
  /* CVV re-pedido al pagar con tarjeta guardada (recolección de CVC) */
  .spcvcsaved{margin-top:12px; margin-bottom:2px; max-width:130px}
  .spcvchint{display:block; margin-top:6px; font-size:calc(11.5px*var(--fs)); color:var(--muted); max-width:none}
  /* Pestañas guardada/nueva + campos de tarjeta separados (número·titular·caducidad·CVV) */
  .spseg{display:flex; gap:6px; background:#f1f3f6; border-radius:12px; padding:4px; margin-bottom:14px}
  .spsegb{flex:1; border:none; border-radius:9px; padding:9px; font-weight:700; font-size:calc(12.5px*var(--fs)); color:var(--muted); background:none; cursor:pointer}
  .spsegb.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .spsegb:disabled{opacity:.4; cursor:not-allowed}
  .spfield{margin-bottom:12px}
  .spfield label{display:block; font-size:calc(12px*var(--fs)); font-weight:600; color:var(--ink); margin-bottom:6px}
  .spinput{border:1.5px solid var(--line); border-radius:12px; padding:12px; background:var(--card); min-height:46px; box-sizing:border-box}
  .spinput.StripeElement--focus{border-color:var(--primary)}
  .spinput.StripeElement--invalid{border-color:#c0392b}
  input.sptext{width:100%; font-size:calc(15px*var(--fs)); color:var(--ink); font-family:inherit; outline:none}
  input.sptext::placeholder{color:#9aa0a6}
  .sprow2{display:flex; gap:10px}
  .sprow2 .spfield{flex:1}
  /* Tarjeta gráfica (visual) + carrusel */
  .ccarousel{display:flex; gap:12px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 6px 16px}
  .ccarousel::-webkit-scrollbar{display:none}
  /* Sombra CORTA y pegada a la propia tarjeta (spread negativo → cabe dentro de los bordes redondeados,
     sigue la forma de la tarjeta y no parece un rectángulo suelto debajo). */
  .ccard{flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1.586; border-radius:16px; padding:16px 18px; color:#fff; position:relative; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 6px 16px -6px rgba(31,41,55,.5); overflow:hidden}
  .ccrow1{display:flex; align-items:center; justify-content:space-between}
  .cctype{font-size:calc(11px*var(--fs)); font-weight:600; text-transform:uppercase; letter-spacing:.6px; opacity:.85}
  .cclogo{display:inline-flex; align-items:center; font-weight:800; color:#fff}
  .cc-visa{font-family:'Montserrat',sans-serif; font-style:italic; font-size:calc(19px*var(--fs)); letter-spacing:.5px}
  .cc-amex{font-family:'Montserrat',sans-serif; font-size:calc(12px*var(--fs)); letter-spacing:1px; border:1.5px solid rgba(255,255,255,.75); border-radius:4px; padding:2px 5px}
  .cc-generic{font-size:calc(14px*var(--fs)); letter-spacing:.3px}
  .cc-mc{position:relative; width:38px; height:24px}
  .cc-mc .mc1,.cc-mc .mc2{position:absolute; top:1px; width:22px; height:22px; border-radius:50%}
  .cc-mc .mc1{left:0; background:#eb001b}
  .cc-mc .mc2{right:0; background:#f79e1b; opacity:.9}
  .ccchip{width:34px; height:25px; border-radius:6px; background:linear-gradient(135deg,#f4d38a,#c9a24a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
  .ccnum{font-size:calc(17px*var(--fs)); font-weight:700; letter-spacing:2px; font-variant-numeric:tabular-nums}
  .ccrow2{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
  .cccol{display:flex; flex-direction:column; min-width:0}
  .cclabel{font-size:calc(9px*var(--fs)); text-transform:uppercase; letter-spacing:.5px; opacity:.75}
  .ccval{font-size:calc(13px*var(--fs)); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px}
  .ccdel{position:absolute; top:10px; right:10px; width:24px; height:24px; border:none; border-radius:50%; background:rgba(0,0,0,.28); color:#fff; font-size:calc(13px*var(--fs)); font-weight:700; cursor:pointer; display:grid; place-items:center; line-height:1}
  .ccdots{display:flex; justify-content:center; align-items:center; gap:9px; margin-top:16px}
  .ccdot{width:14px; height:14px; border-radius:50%; background:#c2c8d2; transition:all .2s; cursor:pointer}
  .ccdot.on{width:34px; border-radius:7px; background:var(--primary)}
  /* Botón "mantén para eliminar" (cuenta atrás 3·2·1) */
  .cardhold{position:relative; overflow:hidden; display:block; width:calc(100% - 28px); margin:16px 14px 0; border:1.5px solid #f0c9c4; border-radius:14px; background:#fff5f4; color:#c0392b; font-weight:800; font-size:calc(13.5px*var(--fs)); padding:14px; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none; text-align:center}
  .cardhold.holding{border-color:#c0392b}
  .chfill{position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(192,57,43,.16)}
  .chtxt{position:relative; z-index:1}
  .cardsempty{display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px 20px; color:var(--muted)}
  .cardsempty .cei{width:56px; color:var(--muted); opacity:.7; display:block}
  .cardsempty .cei svg{width:100%; height:auto}
  .cardsempty p{font-size:calc(13.5px*var(--fs))}
  /* Descuentos y vales (tarjetas tipo ticket) */
  .vlist{display:flex; flex-direction:column; gap:12px; padding:0 2px}
  .vsech{font-family:'Montserrat',sans-serif; font-weight:700; font-size:calc(13px*var(--fs)); color:var(--muted); margin:10px 4px 0}
  .vcard{display:flex; align-items:stretch; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 6px 16px -10px rgba(31,41,55,.4); min-height:82px}
  .vcard .vleft{background:var(--primary); color:var(--onink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 16px; min-width:104px; text-align:center}
  .vcard.promo .vleft{background:var(--primary-d)}
  .vcard .vamt{font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(22px*var(--fs)); line-height:1}
  .vcard .voff{font-size:calc(9.5px*var(--fs)); opacity:.9; margin-top:3px; text-transform:uppercase; letter-spacing:.4px}
  .vcard .vperf{width:0; border-left:2px dashed var(--line); margin:9px 0}
  .vcard .vright{flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 14px; min-width:0}
  .vcard .vcode{display:flex; align-items:baseline; gap:6px}
  .vcard .vcode span{font-size:calc(10px*var(--fs)); color:var(--muted)}
  .vcard .vcode b{font-family:'Montserrat',sans-serif; letter-spacing:1px; font-size:calc(15px*var(--fs)); color:var(--ink)}
  .vcard .vname{font-weight:700; font-size:calc(14px*var(--fs)); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .vcard .vtags{font-size:calc(11px*var(--fs)); color:var(--muted)}
  .vcard .vexp{font-size:calc(11px*var(--fs)); color:var(--muted)}
  .trackwrap{height:190px}
  .tmkdot{width:28px; height:28px; border-radius:50%; background:var(--card); border:2px solid; display:grid; place-items:center; font-size:calc(15px*var(--fs)); box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .tracknote{font-size:calc(11.5px*var(--fs)); font-weight:600; color:var(--muted); padding:6px 2px 0}
  .pcard{display:flex; align-items:center; gap:14px; background:var(--card); border-radius:18px; box-shadow:var(--sh-block); padding:16px; margin-top:2px}
  .pcard .pav{width:52px; height:52px; border-radius:50%; background:color-mix(in srgb,var(--primary) 12%,var(--card)); color:var(--primary); display:grid; place-items:center; flex:none}
  .pcard .pav svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8}
  .pcard .pinfo b{display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(16px*var(--fs))}
  .pcard .pinfo span{font-size:calc(12px*var(--fs)); color:var(--muted)}
  .plist{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); overflow:hidden; margin-top:12px}
  .prow{display:flex; align-items:center; gap:13px; padding:14px; cursor:pointer}
  .prow+.prow{border-top:1px solid #f4efe9}
  .prow .pi{width:22px; color:var(--ink); display:grid; place-items:center}
  .prow .pi svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
  .prow .plb{flex:1; font-size:calc(13px*var(--fs)); font-weight:600}
  .prow .pa{color:var(--muted); font-size:calc(18px*var(--fs))}
  /* Perfil — photo, edit button, badge, rows */
  .pcard .pavimg{width:52px; height:52px; border-radius:50%; object-fit:cover}
  .pcard .pedit{margin-left:auto; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font-weight:800; font-size:calc(12px*var(--fs)); padding:7px 14px; border-radius:20px; cursor:pointer; font-family:inherit}
  .prow .pi svg[stroke="none"]{fill:currentColor; stroke:none}      /* bell icon is fill-based */
  .prow[data-pperfil="notif"] .pi{color:var(--ink)}                /* bell = dark (owner design); only the unread dot is red */
  .prow[data-pperfil="notif"] .pi svg{width:auto; height:19px}     /* campana (relleno) un pelín menor → mismo tamaño visual que los iconos de trazo (20px) */
  .prow[data-pperfil="cards"] .pi svg{fill:currentColor; stroke:none; width:auto; height:15px}  /* tarjeta (relleno, mismo icono que el pago) */
  .prow[data-pperfil="descuentos"] .pi svg{fill:currentColor; stroke:none; width:auto; height:15px}  /* ticket de descuento (relleno) */
  .prow .pbadge{background:#EC1C24; color:#fff; font-size:calc(10px*var(--fs)); font-weight:800; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px}
  .prow .pval{color:var(--muted); font-size:calc(12px*var(--fs)); font-weight:600}
  .pform{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:14px; margin-top:10px; display:flex; flex-direction:column; gap:10px}
  .pform .pfphoto{display:flex; align-items:center; gap:12px}
  .pform .pfav{width:56px; height:56px; border-radius:50%; background:color-mix(in srgb,var(--primary) 12%,var(--card)); color:var(--primary); display:grid; place-items:center; flex:none; overflow:hidden}
  .pform .pfav svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8}
  .pform .pfavimg{width:56px; height:56px; object-fit:cover}
  .pform .pfphotobtn{font-size:calc(12px*var(--fs)); font-weight:700; color:var(--primary); cursor:pointer}
  .pform .pfl{display:flex; flex-direction:column; gap:5px; font-size:calc(12px*var(--fs)); font-weight:700; color:var(--muted)}
  .pform .pfl input, .ainput{border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; font-family:inherit; font-size:calc(14px*var(--fs)); font-weight:600; color:var(--ink); background:var(--card)}
  .pform .pfver{font-size:calc(10px*var(--fs)); font-weight:800; color:#C0392B}
  .pform .pfver.ok{color:#0a7c4f}
  .pfbtns{display:flex; gap:9px; margin-top:2px}
  .pfbtns button{flex:1; border-radius:12px; padding:11px; font-family:inherit; font-size:calc(13px*var(--fs)); font-weight:800; cursor:pointer}
  .pfsave{background:var(--ink); color:var(--bg); border:none}
  .pfsave.disabled{opacity:.4; pointer-events:none}
  .pfcancel{background:var(--card); color:var(--ink); border:1.5px solid var(--line)}
  .langrow{display:block; width:100%; text-align:left; border:none; background:var(--card); padding:13px 6px; font-size:calc(14px*var(--fs)); font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit; border-bottom:1px solid #f4efe9}
  .langrow.on{color:var(--primary); font-weight:800}
  .delacc{display:block; width:100%; margin-top:12px; background:none; border:none; color:#c0392b; font-family:inherit; font-weight:700; font-size:calc(13px*var(--fs)); text-decoration:underline; cursor:pointer; padding:8px}
  .pfl input.pfdisabled{background:#f4efe9; color:var(--muted); cursor:not-allowed; opacity:.85}
  .pfnote{font-size:calc(11px*var(--fs)); color:var(--muted); line-height:1.45; margin:-4px 2px 2px; font-weight:600}
  /* Evento / ocasión especial (reserva) — tarjeta con sombra, tipografía propia (Manrope) */
  .evsec{margin-top:14px; background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:14px}
  .evq{display:flex; align-items:center; gap:11px; cursor:pointer; font-size:calc(13.5px*var(--fs)); font-weight:800; color:var(--ink); font-family:inherit; line-height:1.35}
  /* checkbox redondeado con sombra + check blanco */
  .evq input{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line);
    background:var(--card); box-shadow:var(--sh-chip); cursor:pointer; flex:none; margin:0; position:relative; transition:background .15s, border-color .15s}
  .evq input:checked{background:var(--primary); border-color:var(--primary)}
  .evq input:checked::after{content:""; position:absolute; inset:0; background:center/13px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4 10-11'/></svg>")}
  .evbody{margin-top:6px}
  .evlbl{font-size:calc(11px*var(--fs)); font-weight:800; letter-spacing:.3px; color:var(--muted); margin:12px 2px 6px}
  /* dropdown "tipo de evento" PERSONALIZADO — trigger + panel estilados (el nativo no se puede estilar) */
  .evdd{position:relative}
  .evtrigger{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; box-sizing:border-box;
    border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-family:inherit; font-size:calc(14px*var(--fs)); font-weight:700;
    color:var(--ink); background:var(--card); box-shadow:var(--sh-chip); cursor:pointer; text-align:left}
  .evtrigger .evchev{display:grid; place-items:center; color:var(--ink); flex:none; transition:transform .18s}
  .evtrigger .evchev svg{width:16px; height:16px}
  .evdd.open .evtrigger .evchev{transform:rotate(180deg)}
  .evbackdrop{position:fixed; inset:0; z-index:40}
  .evpanel{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:41; background:var(--card); border-radius:14px;
    box-shadow:var(--sh-block); border:1px solid rgba(0,0,0,.05); overflow:hidden; padding:5px; animation:cpop .16s ease}
  .evopt{display:block; width:100%; text-align:left; border:none; background:none; padding:11px 12px; border-radius:9px;
    font-family:inherit; font-size:calc(14px*var(--fs)); font-weight:600; color:var(--ink); cursor:pointer}
  .evopt:hover{background:color-mix(in srgb, var(--primary) 8%, var(--card))}
  .evopt.on{background:var(--primary); color:var(--onink); font-weight:800}
  .evnotes{width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:12px; padding:11px 12px; font-family:inherit; font-size:calc(14px*var(--fs)); font-weight:600;
    color:var(--ink); background:var(--card); box-shadow:var(--sh-chip); min-height:64px; resize:vertical}
  .evnotes::placeholder{color:var(--muted); font-weight:600}
  .rc-event{color:var(--primary); font-weight:700}
  /* Pantalla de idioma inicial */
  .langlist{width:100%; background:var(--card); border:1.5px solid rgba(0,0,0,.28); border-radius:16px; overflow:hidden; box-shadow:var(--sh-chip); margin-bottom:18px}
  .langlist .langrow{padding:14px 16px}
  .langlist .langrow:last-child{border-bottom:none}
  .langlist .langrow.on{background:color-mix(in srgb, var(--primary) 8%, var(--card))}
  .lanote{font-size:calc(12px*var(--fs)); font-weight:700; color:var(--muted); line-height:1.5; text-align:center; margin:0 0 16px; padding:0 4px}
  /* Notificaciones */
  /* Fila «activar avisos aunque la app esté cerrada» (push) */
  .pushrow{display:flex; align-items:center; gap:11px; background:var(--card); border-radius:14px; box-shadow:var(--sh-block); padding:12px 14px; margin-bottom:12px; cursor:pointer}
  .pushrow[data-pushenable]{cursor:pointer}
  .pushrow:not([data-pushenable]){cursor:default}
  .pushrow .pri{flex:none; width:24px; color:var(--ink); display:flex}
  .pushrow .pri svg{width:100%; height:auto; fill:currentColor}
  .pushrow .prt{flex:1; min-width:0; font-size:calc(12.8px*var(--fs)); font-weight:600; color:var(--ink)}
  .pushrow .prs{font-size:calc(11.5px*var(--fs)); color:var(--muted); font-weight:600; display:flex; align-items:center}
  .pushrow.on{background:color-mix(in srgb,#0a7c4f 8%,var(--card))}
  .pushrow.on .prs{color:#0a7c4f}
  .pushbox{margin-bottom:12px}
  .pushbox .pushrow{margin-bottom:6px}
  .pushbox .pushdemo{display:block; margin:0 2px; background:none; border:none; color:var(--primary); font-family:inherit;
    font-size:calc(11.5px*var(--fs)); font-weight:700; cursor:pointer; padding:2px 4px; text-align:left}
  /* Tarjeta de notificación estilo móvil — COMPARTIDA por el banner in-app (.pushbanner) y la
     maqueta de "app cerrada" (.osdim). Estructura: barra con nombre del restaurante + fila
     (bloque de icono con color del tema + 2 líneas: asunto y mensaje). Colores del tema. */
  .ospush{width:100%; background:var(--card); border-radius:18px; overflow:hidden; box-shadow:0 12px 32px -8px rgba(0,0,0,.5)}
  .ospush .osp-bar{background:var(--primary); color:var(--onink); font-family:'Montserrat',sans-serif; font-weight:800;
    font-size:calc(15px*var(--fs)); padding:10px 15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ospush .osp-row{display:flex; align-items:center; gap:13px; padding:13px 15px}
  .ospush .osp-ic{flex:none; width:46px; height:46px; border-radius:13px; background:var(--primary); color:var(--onink); display:grid; place-items:center}
  .ospush .osp-ic svg{width:24px; height:24px}   /* cada icono define su fill/stroke → hereda blanco */
  .ospush .osp-txt{flex:1; min-width:0}
  .ospush .osp-sub{font-size:calc(11.5px*var(--fs)); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ospush .osp-main{font-size:calc(15.5px*var(--fs)); font-weight:800; color:var(--primary); line-height:1.25; margin-top:1px}
  .ospush.err .osp-bar, .ospush.err .osp-ic{background:#c0392b}
  .ospush.err .osp-main{color:#c0392b}
  /* Maqueta "app cerrada": oscurecido + animación de entrada de la tarjeta */
  .osdim{position:absolute; inset:0; background:rgba(15,20,25,.42); border-radius:inherit; opacity:0; transition:opacity .3s;
    display:flex; flex-direction:column; align-items:center; padding:14px 12px 0; cursor:pointer; z-index:9998}
  .osdim.show{opacity:1}
  .osdim .ospush{transform:translateY(-16px); transition:transform .32s cubic-bezier(.2,.9,.3,1.2)}
  .osdim.show .ospush{transform:translateY(0)}
  .osdim .osp-hint{margin-top:12px; color:#fff; font-size:calc(11px*var(--fs)); font-weight:600; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.5)}
  .nsec{font-family:'Montserrat',sans-serif; font-weight:700; font-size:calc(12.5px*var(--fs)); color:var(--muted); margin:6px 4px 8px}
  .nsec:not(:first-child){margin-top:14px}
  .ncard{display:flex; gap:12px; align-items:flex-start; background:var(--card); border-radius:14px; box-shadow:var(--sh-block); padding:13px 14px; margin-bottom:8px}
  .ncard.unread{background:color-mix(in srgb,var(--primary) 5%,var(--card))}
  .ncard .ni2{width:26px; flex:none; color:var(--ink); position:relative}
  .ncard .ni2 svg{width:22px; height:22px}   /* cada icono define su fill/stroke inline (campana=relleno, entrega/recoger=trazo) */
  .ncard .ni2 .ndot{position:absolute; top:-3px; right:-1px; width:9px; height:9px; border-radius:50%; background:#EC1C24; border:2px solid #fff}
  .ncard .nl{flex:1; min-width:0}
  .ncard .ntext{display:block; font-size:calc(12.5px*var(--fs)); font-weight:600; line-height:1.4; color:var(--ink)}
  .ncard .nat{font-size:calc(10.5px*var(--fs)); color:var(--muted)}
  .nread svg{width:18px; height:18px}
  /* Direcciones */
  .acard{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; box-shadow:var(--sh-block); padding:13px 14px; margin-bottom:8px}
  .acard .ai{width:24px; color:var(--primary); flex:none; display:grid; place-items:center}
  .acard .ai svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8}
  .acard .al{flex:1; min-width:0}
  .acard .al b{display:block; font-size:calc(13px*var(--fs))}
  .acard .al span{font-size:calc(11.5px*var(--fs)); color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .acard .adel{border:none; background:none; color:#c0392b; cursor:pointer; width:26px; display:grid; place-items:center}
  .acard .adel svg{width:15px; height:15px}   /* papelera (relleno) llena su caja → 15px = ~15px visibles */
  .acard .aedit{border:none; background:none; color:var(--muted); cursor:pointer; width:26px; display:grid; place-items:center}
  .acard .aedit svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8}   /* lápiz (trazo) solo llena ~60% → 24px = ~14.5px visibles, igual que la papelera */
  /* Activación + OTP */
  .actwrap{max-width:340px; margin:0 auto; padding:40px 22px 28px; display:flex; flex-direction:column; align-items:center; text-align:center}
  .actwrap.langwrap{padding-top:96px}   /* pantalla de idioma: baja todo el cuerpo (estaba muy arriba) */
  .actlogo{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.85); color:var(--primary); display:grid; place-items:center; margin-bottom:16px; box-shadow:var(--sh-chip)}
  .actlogo svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8}
  /* Saludo personalizado bajo el logo de idioma: SIN bloque/fondo, en dos líneas
     (icono de mano arriba, «Hola, <nombre>» debajo). */
  .higreet{display:flex; flex-direction:column; align-items:center; gap:4px; margin:0 0 8px}
  .higreet .hiwave{width:40px; height:40px; color:var(--ink); display:grid; place-items:center}
  /* Saludo: al cargar la pantalla, la mano gira 30° a la izquierda, vuelve, 3° a la derecha y vuelve.
     Pivota desde la muñeca (parte inferior) para que parezca que saluda de verdad. Se reproduce una vez. */
  .higreet .hiwave svg{width:40px; height:40px; transform-origin:50% 82%}
  .higreet .hiwave.wave svg{animation:handwave 1.6s cubic-bezier(.36,.07,.19,.97) .35s both}
  /* Saludo con oscilación amortiguada (amplitud decreciente) = se ve más «vivo» y natural. */
  @keyframes handwave{
    0%{transform:rotate(0deg)}
    12%{transform:rotate(-10deg)}
    26%{transform:rotate(15deg)}
    40%{transform:rotate(-10deg)}
    54%{transform:rotate(9deg)}
    68%{transform:rotate(-5deg)}
    82%{transform:rotate(3deg)}
    92%{transform:rotate(-1deg)}
    100%{transform:rotate(0deg)}
  }
  .higreet .hitxt{font-size:calc(18px*var(--fs)); font-weight:800; color:var(--primary)}
  .acth{font-size:calc(20px*var(--fs)); font-weight:800; margin:0 0 6px; color:var(--ink)}
  .acts{font-size:calc(13px*var(--fs)); color:var(--muted); line-height:1.5; margin:0 0 22px}
  .actform{width:100%; display:flex; flex-direction:column; gap:11px}
  .actform .acthint{font-size:calc(11.5px*var(--fs)); color:var(--muted); line-height:1.45; margin-top:-4px; padding:0 2px}
  .actform .cocta{margin-top:4px}
  .otpin{text-align:center; font-size:calc(24px*var(--fs)); font-weight:800; letter-spacing:10px; padding:12px}
  .otprow{display:flex; justify-content:space-between; margin-top:6px}
  .otplink{font-size:calc(12.5px*var(--fs)); font-weight:700; color:var(--primary); cursor:pointer}
  .otplink.disabled{color:var(--muted); cursor:default}
  .ahint{font-size:calc(12px*var(--fs)); color:var(--muted); line-height:1.45; padding:2px 4px 10px}
  .ahint b{color:var(--ink)}
  .cofuls .coful:disabled{opacity:.4; cursor:not-allowed}
  .amap{height:190px; border-radius:12px; overflow:hidden; border:1.5px solid var(--line); background:#eef1f3}
  .amap .leaflet-control-zoom{border:none !important; box-shadow:0 1px 4px rgba(0,0,0,.15) !important; margin:8px 8px 0 0}
  .amap .leaflet-control-zoom a{width:28px !important; height:28px !important; line-height:28px !important; text-align:center}
  .apin .pinicon{line-height:0}
  .apin .pinicon svg{width:32px; height:32px; color:var(--primary); filter:drop-shadow(0 3px 3px rgba(0,0,0,.32))}
  .aform{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:14px; margin-top:4px; display:flex; flex-direction:column; gap:10px}
  .aform .arow{display:flex; gap:8px}
  .aform .arow .ainput{flex:1; min-width:0}                 /* min-width:0 → los inputs se encogen y no desbordan */
  .aform .arow .asm{flex:0 0 62px; text-align:center}       /* piso/timbre: máx. 3 caracteres → estrechos; el número se queda ancho */
  .aform .aarea{width:100%; min-height:54px; resize:vertical; line-height:1.4; font-family:inherit}
  .aform .avalidate{border:1.5px solid var(--ink); background:var(--ink); color:var(--bg); border-radius:12px; padding:0 14px; font-weight:800; font-size:calc(12px*var(--fs)); cursor:pointer; font-family:inherit; white-space:nowrap}
  .aform .avalidate.awide{width:100%; padding:11px; font-size:calc(13px*var(--fs))}
  .aform .avalidate:disabled{opacity:.55}
  .aform .agps{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; padding:11px; font-weight:700; font-size:calc(12.5px*var(--fs)); cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:6px}
  .aform .agps .ri{width:18px; color:var(--primary)}
  .aform .agps svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8}
  /* Factura (detalle de pedido entregado) — datos fiscales + desglose de IVA, como el ticket del panel. */
  .invtoggle{width:100%; margin-top:14px; border:none; border-radius:16px; padding:15px; font-family:'Poppins',sans-serif; font-weight:700; font-size:calc(14.5px*var(--fs)); cursor:pointer; background:var(--primary); color:var(--onink)}
  .invcard{background:var(--card); border-radius:16px; box-shadow:var(--sh-block); padding:16px; margin-top:14px}
  .invhead{text-align:center; padding-bottom:12px; border-bottom:1px dashed var(--line)}
  .invhead b{display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(16px*var(--fs)); color:var(--ink)}
  .invhead span{display:block; font-size:calc(11px*var(--fs)); color:var(--muted); margin-top:2px}
  .invnum{text-align:center; font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(13px*var(--fs)); color:var(--ink); margin:12px 0 10px}
  .invmeta{border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:10px}
  .invmrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:calc(12.5px*var(--fs)); margin-bottom:6px}
  .invmrow:last-child{margin-bottom:0}
  .invmrow span:first-child{color:var(--muted)}
  .invmrow.dim{font-size:calc(11px*var(--fs))}
  .invmrow.dim span{color:var(--muted)}
  .invitems{border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:10px}
  .invrow{display:flex; justify-content:space-between; gap:10px; font-size:calc(12.5px*var(--fs)); margin-bottom:6px}
  .invrow:last-child{margin-bottom:0}
  .invrow small{color:var(--muted)}
  .invtotal{display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--line); font-family:'Montserrat',sans-serif; font-weight:800; font-size:calc(15px*var(--fs))}
  .invthanks{text-align:center; color:var(--primary); font-size:calc(11.5px*var(--fs)); font-weight:700; margin-top:12px}

  /* ===== Cesta VACÍA — ilustración (icono propio en tarjeta + título + sub + CTA de marca) ===== */
  .cartempty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 30px 0 }
  .cartempty .ceicon{ width:76px; height:76px; border-radius:22px; background:var(--card);
    box-shadow:0 6px 20px rgba(0,0,0,.08); display:grid; place-items:center; color:var(--primary); margin-bottom:22px }
  .cartempty .ceicon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
  .cartempty .cetitle{ font-size:calc(17px*var(--fs)); font-weight:700; color:var(--ink); margin-bottom:8px }
  .cartempty .cesub{ font-size:calc(12px*var(--fs)); font-weight:600; color:var(--muted); line-height:1.5; max-width:232px; margin-bottom:24px }
  .cartempty .cebtn{ width:auto; min-width:184px; margin-top:0 }

  /* ===== Banners animados del catálogo (plantillas rb-) ===== */
  @keyframes rb-float  { 0%,100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-9px) rotate(-1.6deg); } 66% { transform: translateY(-3px) rotate(1.2deg); } }
  @keyframes rb-drift  { 0%,100% { transform: translate(0,0) rotate(0deg); } 40% { transform: translate(5px,-10px) rotate(2deg); } 70% { transform: translate(-4px,-4px) rotate(-1.5deg); } }
  @keyframes rb-sway   { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
  @keyframes rb-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  @keyframes rb-glow   { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
  @keyframes rb-shine  { 0%,60% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 65% { opacity: 1; } 90%,100% { transform: translateX(280%) skewX(-18deg); opacity: 0; } }
  @keyframes rb-marquee{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes rb-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes rb-wordslide { 0% { opacity: 0; transform: translateX(-36px); letter-spacing: 6px; } 14% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
  @keyframes rb-spin   { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes rb-bgpan  { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes rb-rise   { 0% { opacity: 0; transform: translateY(16px); } 18% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
  @keyframes rb-dot    { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
  @keyframes rb-stripes{ 0% { background-position: 0 0; } 100% { background-position: 56px 0; } }
  @keyframes rb-blink  { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes rb-barra  { 0%,100% { width: 82%; } 50% { width: 14%; } }
  /* Slide animado dentro del carrusel: mantiene el tamaño del .banner (85% · 4:3) y escala
     el "stage" 360×270 con --rbk (fijado por JS según el ancho real → responsive). */
  .banner.rbslide{ padding:0; overflow:hidden; font-family:'Archivo',sans-serif }
  .banner.rbslide::before, .banner.rbslide::after{ display:none !important }
  .rbslide .rbstage{ position:absolute; top:0; left:0; width:360px; height:270px; transform-origin:top left; transform:scale(var(--rbk,0.78)) }

  /* ===== keyframes de las plantillas de banner nuevas (banners2: kf*) ===== */
  @keyframes kfRise { 0% { opacity: 0; transform: translateY(16px); } 18% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
  @keyframes kfZoom { 0%, 100% { transform: scale(1.06) translate(0, 0); } 50% { transform: scale(1.14) translate(-2%, -1%); } }
  @keyframes kfLineSweep { 0% { transform: scaleX(0); } 24% { transform: scaleX(1); } 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes kfDot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-7px); opacity: 1; } }
  @keyframes kfPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes kfShine { 0%, 60% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 65% { opacity: 1; } 90%, 100% { transform: translateX(300%) skewX(-18deg); opacity: 0; } }
  @keyframes kfSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes kfBgPan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes kfEq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
  @keyframes kfFall { 0% { transform: translateY(-30px) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(290px) rotate(320deg); opacity: 0.9; } }
  @keyframes kfBreath { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
  @keyframes kfWord { 0% { opacity: 0; letter-spacing: 8px; transform: translateX(-20px); } 16% { opacity: 1; letter-spacing: -1px; transform: none; } 100% { opacity: 1; letter-spacing: -1px; }}
  @keyframes kfMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  @keyframes kfSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
  @keyframes kfSteam { 0% { opacity: 0; transform: translateY(6px) scaleX(1); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-24px) scaleX(1.6); } }
  @keyframes kfBalloon { 0% { transform: translateY(160px) rotate(-3deg); opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-200px) rotate(4deg); opacity: 0; } }
  @keyframes kfBallX { 0% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(64px) translateY(-18px) rotate(180deg); } 50% { transform: translateX(128px) rotate(360deg); } 75% { transform: translateX(64px) translateY(-14px) rotate(540deg); } 100% { transform: translateX(0) rotate(720deg); } }
  @keyframes kfArrow { 0% { transform: translateX(0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateX(14px); opacity: .3; } }
  @keyframes kfRide { 0%, 100% { transform: translateY(0) rotate(-5deg); } 25% { transform: translateY(-4px) rotate(-7deg); } 60% { transform: translateY(1px) rotate(-4deg); } }
  @keyframes kfWhoosh { 0% { transform: translateX(24px) scaleX(.6); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(-46px) scaleX(1.3); opacity: 0; } }
  @keyframes kfWheel { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes kfDash { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -48; } }
  @keyframes kfBobY { 0%, 100% { transform: translateY(0) rotate(-2deg); } 30% { transform: translateY(-3px) rotate(-3.5deg); } 60% { transform: translateY(1px) rotate(-1.5deg); } }
  @keyframes kfPuff { 0% { transform: translate(0,0) scale(.6); opacity: .55; } 100% { transform: translate(-26px,-16px) scale(1.5); opacity: 0; } }
  @keyframes kfMoto { from { background-position: 0 0; } to { background-position: -20100px 0; } }
  @keyframes kfMotoA { from { background-position: 0 0; } to { background-position: -11256px 0; } }
  @keyframes kfBall110 { from { background-position: 0 0; } to { background-position: -14025px 0; } }
  @keyframes kfMoto2 { from { background-position: 0 0; } to { background-position: -11280px 0; } }

  /* ===== modo oscuro: correcciones compartidas (halo onboarding + corazones + iconos) ===== */
  /* Sombras de los BLOQUES en oscuro: una sombra NEGRA sobre el fondo casi negro no se ve. Usamos una
     «sombra CLARA» = un fino borde/halo luminoso (rgba blanco) que despega cada bloque del fondo, más
     una sombra oscura muy suave por debajo para dar profundidad. Así se ven igual de definidos que en
     claro pero con el recurso correcto para fondo oscuro. */
  /* En oscuro, la MISMA sombra que en claro pero INVERTIDA: donde el claro proyecta una sombra NEGRA
     hacia abajo, el oscuro proyecta una sombra CLARA (blanca) hacia abajo — mismo offset/blur, color
     opuesto. Así el bloque se despega del fondo igual que en claro, pero con luz. */
  /* Sombra clara suave: un arranque algo más claro (capa 1, suave, sin línea) + el cuerpo en blanco
     al ~15% (transparente) con algo más de altura y spread negativo → se desvanece MUY rápido. */
  .skin-dark{
    --sh-block:0 2px 4px -1px rgba(255,255,255,.28), 0 12px 17px -9px rgba(255,255,255,.15);
    --sh-card:0 2px 4px -1px rgba(255,255,255,.23), 0 11px 16px -9px rgba(255,255,255,.12);
    --sh-chip:0 3px 6px -2px rgba(255,255,255,.24);
    --sh-soft:0 3px 7px -3px rgba(255,255,255,.16);
    --sh-btnfloat:0 2px 4px -1px rgba(255,255,255,.30), 0 12px 17px -9px rgba(255,255,255,.15);
  }
  /* El banner lleva una sombra fija (no token): mismo arranque claro + cuerpo 15% que se desvanece. */
  .skin-dark .banner{ box-shadow:0 2px 4px -1px rgba(255,255,255,.28), 0 12px 17px -9px rgba(255,255,255,.15) }
  /* Divisores en TODA la app (oscuro): línea tenue (−brillo) + surco oscuro debajo → efecto 3D en
     relieve. Cubre perfil, ficha de contacto/horario, grupos, campos de checkout, idiomas, tags de menú. */
  .skin-dark .prow+.prow,
  .skin-dark .inforow:not(:last-child),
  .skin-dark .langrow,
  .skin-dark .grow+.grow,
  .skin-dark .cofield+.cofield,
  .skin-dark .copick,
  .skin-dark .mtags{ border-color:rgba(255,255,255,.14); box-shadow:0 1px 0 rgba(0,0,0,.28) }
  /* Líneas discontinuas del desglose (checkout): solo atenúa el color, sin bisel. */
  .skin-dark .cobreak .brow.refund,.skin-dark .cobreak .brow.total{ border-top-color:rgba(255,255,255,.14) }
  /* Miniatura del plato SIN foto (emoji): en oscuro el tinte al 8% se confunde con la tarjeta →
     subimos el tinte de marca para que el recuadro se distinga. html.skin-dark gana a .skin-1a/.skin-3b. */
  html.skin-dark .mthumb{ background:color-mix(in srgb, var(--primary) 30%, var(--card)) }
  /* Badge del logo en activar/OTP: en claro es un círculo casi-blanco; en oscuro sería un
     disco blanco fuerte → tinte de marca sobre la tarjeta + icono en el acento claro (--primary-d). */
  .skin-dark .actlogo{ background:color-mix(in srgb, var(--primary) 16%, var(--card)); color:var(--primary-d); box-shadow:none }
  /* Bloques con color CLARO fijo que no se adaptaban al oscuro (auditoría de tema): */
  .skin-dark .copick{ background:color-mix(in srgb, var(--muted) 8%, var(--card)) }         /* zona de recogida (checkout) */
  .skin-dark .spseg{ background:color-mix(in srgb, var(--muted) 12%, var(--card)) }          /* segmento de pago Stripe */
  .skin-dark .ptoggle{ background:color-mix(in srgb, var(--muted) 34%, var(--card)) }        /* pista del switch (apagado) */
  .skin-dark .sheethandle{ background:var(--line) }                                          /* asa del bottom-sheet */
  .skin-dark .cbtpl:hover{ background:color-mix(in srgb, var(--muted) 10%, var(--card)) }
  .skin-dark .ccdot{ background:color-mix(in srgb, var(--muted) 30%, var(--card)) }          /* puntos del carrusel de tarjetas */
  /* Badges de estado (pedidos): fondo pastel claro → versión translúcida + texto más claro en oscuro. */
  .skin-dark .stbadge.ok,.skin-dark .stbadge.done,.skin-dark .stbadge.pend,
  .skin-dark .stbadge.rej,.skin-dark .stbadge.act,.skin-dark .stbadge.can{ background:rgba(255,255,255,.09) }
  .skin-dark .stbadge.ok{ color:#5fd6a0 } .skin-dark .stbadge.pend{ color:#e8b863 }
  .skin-dark .stbadge.rej{ color:#f08a7a } .skin-dark .stbadge.act{ color:#7fb2ff }
  .skin-dark .stbadge.done,.skin-dark .stbadge.can{ color:var(--muted) }
  .skin-dark .cobreak .brow .disc,.skin-dark .cobreak .brow.disc,.skin-dark .cofree .cfi{ color:#5fd6a0 }  /* verde legible en oscuro */
  .skin-dark .cobreak .brow.refund{ color:#e8b863 }                                          /* reembolso ámbar */
  /* ── Pantalla de permisos suave (pre-permission) — tokens → tema/oscuro ── */
  .permlist{ width:100%; display:flex; flex-direction:column; gap:10px; margin-top:4px }
  .permcard{ display:flex; flex-direction:column; text-align:left; padding:12px 13px;
    background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-card) }
  .permhead{ display:flex; align-items:flex-start; gap:12px }
  .permctl{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--line) }
  .permctl-l{ font-size:calc(12px*var(--fs)); font-weight:700; color:var(--muted) }
  .permctl-l.on{ color:var(--primary) }
  .permctl .ptoggle{ margin:0 }
  .permico{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:color-mix(in srgb, var(--primary) 12%, var(--card)); color:var(--primary) }
  .permico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8 }
  .permtxt{ flex:1; min-width:0 }
  .permt{ font-size:calc(13.5px*var(--fs)); font-weight:800; color:var(--ink) }
  .permd{ font-size:calc(11.5px*var(--fs)); color:var(--muted); line-height:1.4; margin-top:2px }
  .permbtn{ flex:none; min-height:44px; padding:0 15px; background:var(--primary); color:var(--onink);
    border:none; border-radius:12px; font-family:inherit; font-size:calc(12.5px*var(--fs)); font-weight:800;
    cursor:pointer; transition:transform .12s ease, opacity .12s ease }
  .permbtn:active{ transform:scale(.96) }
  .permbtn:disabled{ opacity:.5; cursor:default }
  .permok{ flex:none; font-size:calc(12px*var(--fs)); font-weight:800; color:#1b7f4b }
  /* Oscuro: icono con acento claro (regla de acento-oscuro) + verde legible. */
  .skin-dark .permico{ background:color-mix(in srgb, var(--primary) 18%, var(--card)); color:var(--primary-d) }
  .skin-dark .permctl-l.on{ color:var(--primary-d) }
  .skin-dark .permok{ color:#5fd6a0 }
  /* ===== Tema Clásico = SIN sombras (claro y oscuro), consistente en TODOS los bloques ===== */
  /* Temas SIN sombras (Clásico + Moderno minimal): CERO sombra en TODOS los bloques, claro y oscuro. */
  html.skin-clasico, html.skin-1a{ --sh-block:none; --sh-card:none; --sh-chip:none; --sh-soft:none; --sh-btnfloat:none }
  html.skin-clasico .banner, html.skin-clasico .ccard, html.skin-clasico .vcard,
  html.skin-1a .banner, html.skin-1a .ccard, html.skin-1a .vcard{ box-shadow:none }
  .skin-dark .onb .circle{ background:rgba(255,255,255,.06); box-shadow:0 30px 64px -8px rgba(0,0,0,.8), 0 12px 30px -6px rgba(0,0,0,.55) }
  /* Dark: subtle light halo (no bright-white glow). The separating shadow lives on the photo itself. */
  .skin-dark .onb .circle::before{ border-color:rgba(255,255,255,.06);
    background:radial-gradient(ellipse 78% 88% at 44% 58%,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.075) 36%,
      rgba(150,168,176,.10) 64%,
      rgba(150,168,176,.05) 82%,
      rgba(255,255,255,0) 100%);
    box-shadow:0 26px 54px rgba(0,0,0,.4) }
  .skin-dark .onb .circle .onbphotowrap{ border-color:rgba(255,255,255,.45); box-shadow:0 20px 42px -8px rgba(0,0,0,.9), 0 8px 20px -8px rgba(0,0,0,.62) }
  .skin-dark .mfav:not(.on),
  .skin-dark .cartafav:not(.on),
  .skin-dark .dfav:not(.on),
  .skin-dark .favtoggle:not(.on){ color:#fff }   /* corazones no seleccionados en blanco (visibles en oscuro) */
  /* La píldora .mfav es BLANCA por defecto → en oscuro el corazón blanco quedaba invisible.
     Oscurecemos la píldora (card + borde) para que el corazón blanco se vea. */
  .skin-dark .mfav{ background:var(--card); border:1px solid var(--line) }
  /* Etiqueta de alérgeno: en oscuro el tinte al 3% era casi invisible → chip más opaco y
     texto más claro para que se lea bien. */
  /* Etiquetas de dieta/alérgenos en oscuro: texto MÁS CLARO (marca aclarada + tinte a blanco) para que
     se lea sobre el fondo; antes usaba --primary-d (oscuro) y se confundía con el fondo. */
  .skin-dark .mtag{ background:color-mix(in srgb, var(--primary) 24%, var(--card)); color:color-mix(in srgb, var(--primary) 36%, #fff) }
  /* Oscuro: la línea de evento (Aniversario/Otro…) en var(--primary) queda apagada → la aclaramos. */
  .skin-dark .rc-event{ color:color-mix(in srgb, var(--primary) 50%, #fff) }
  /* Iconos/precios de PRIMER PLANO en oscuro → usan el acento CLARO (--primary-d), no el --primary
     (fondo de botones), para que se lean bien sobre la tarjeta. Cubre: fecha/hora/pago/vale (cofield),
     iconos de la ficha de pedido/info, precio del menú en minimal, "Cambiar foto". */
  .skin-dark .cofield .ci,
  .skin-dark .inforow .ri,
  .skin-dark .inforow .ra,
  .skin-dark .grow .gi,
  .skin-dark .pform .pfphotobtn,
  .skin-dark.skin-1a .mitem .mprice{ color:var(--primary-d) }
  .skin-dark .cartempty .ceicon{ box-shadow:0 12px 30px rgba(0,0,0,.35) }


  /* ===== FASE 2 · LAYOUTS por tema (activados por clase skin-* según theme_key) ===== */
  /* --- Minimal (skin-1a): plano/hairline, nav lineal simple --- */
  .skin-1a{ --sh-block:none; --sh-chip:none; --navpad:calc(58px + env(safe-area-inset-bottom,0px)) }
  .skin-1a .mitem, .skin-1a .card-info, .skin-1a .cofields, .skin-1a .cobreak, .skin-1a .rcard,
  .skin-1a .gcard, .skin-1a .pcard, .skin-1a .infonote, .skin-1a .chatbox, .skin-1a .mapwrap{ border:1px solid var(--line) }
  /* Título: centrado (base ya lo es) + tracking negativo. */
  .skin-1a .mtitle{ letter-spacing:-0.02em; font-weight:800 }
  /* Tabs de categoría: TEXTO + subrayado 2px primary (sin píldora). */
  .skin-1a .mcatbar{ gap:16px }
  .skin-1a .mcat{ background:transparent; box-shadow:none; border:none; border-radius:0; padding:7px 2px 9px; color:var(--muted); position:relative }
  .skin-1a .mcat.on{ background:transparent; color:var(--primary) }
  .skin-1a .mcat.on::after{ content:""; position:absolute; left:2px; right:2px; bottom:0; height:2px; background:var(--primary); border-radius:2px }
  /* Chips de filtro: OUTLINE; activo = outline primary + tinte 8%. */
  .skin-1a .fchip{ background:transparent; box-shadow:none; border:1.5px solid var(--line); color:var(--ink) }
  .skin-1a .fchip.on{ background:color-mix(in srgb,var(--primary) 8%,var(--card)); border-color:var(--primary); color:var(--primary) }
  .skin-1a .fchip .dic{ color:currentColor }
  /* Segmentado: caja con borde line, radio rSm, activo primary. */
  .skin-1a .coful{ border:1px solid var(--line); border-radius:var(--r-sm); background:transparent }
  .skin-1a .coful.on{ background:var(--primary); border-color:var(--primary); color:var(--onink) }
  /* Botón primario: primary, radio rSm (más recto), sin sombra. */
  .skin-1a .dcart:not(.disabled), .skin-1a .cocta:not(.disabled){ background:var(--primary); border-radius:var(--r-sm); box-shadow:none }
  /* Carta: lista horizontal, thumb teñido 52px, botón + CUADRADO rSm en primary. */
  .skin-1a .mthumb{ width:52px; height:52px; border-radius:var(--r-sm); font-size:calc(23px*var(--fs)); background:color-mix(in srgb,var(--primary) 8%,var(--card)) }
  .skin-1a .mfav{ background:var(--card); border:1px solid var(--line); width:22px; height:22px; border-radius:8px; top:-7px; left:-7px }
  .skin-1a .mfav svg{ width:13px; height:13px }
  .skin-1a .mitem .mnm{ font-size:calc(13px*var(--fs)) }
  .skin-1a .mitem .mprice{ color:var(--primary); font-weight:800; margin-top:6px }
  .skin-1a .iadd{ width:26px; height:26px; border-radius:var(--r-sm); background:var(--primary); color:var(--onink) }
  .skin-1a .iadd svg{ width:16px; height:16px }
  .skin-1a .iadd svg.perso{ width:12.8px; height:12.8px }   /* icono personalizar 20% menor (16→12.8) */
  .skin-1a .mtags{ border-top-color:var(--line) }
  /* Nav inferior 1a: fila SIMPLE con border-top, SIN FAB; activo = primary. */
  .skin-1a .navbar.nav1a{ position:absolute; left:0; right:0; bottom:0; width:100%; aspect-ratio:auto; height:auto;
    background:var(--card); border-top:1px solid var(--line); box-shadow:none; z-index:6; padding:0 }
  .skin-1a .navbar.nav1a .shape{ display:none }
  .skin-1a .nav1a .items.itemsflat1a{ position:static; bottom:auto; display:flex; align-items:center; justify-content:space-around; padding:9px 8px 11px }
  .skin-1a .nav1a .ni.nix, .skin-1a .nav1a .fab.cartnix{ position:relative; left:auto; top:auto; transform:none; width:auto; height:auto; aspect-ratio:auto;
    background:none; border:none; box-shadow:none; padding:5px 10px; color:var(--muted); display:grid; place-items:center; cursor:pointer }
  .skin-1a .nav1a .ni.nix svg, .skin-1a .nav1a .fab.cartnix svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2 }
  .skin-1a .nav1a .ni.nix.on, .skin-1a .nav1a .fab.cartnix.on{ color:var(--primary) }
  .skin-1a .nav1a .fab.cartnix .badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
    background:var(--primary); color:var(--onink); border-radius:9px; font-size:10px; font-weight:800; line-height:1; display:grid; place-items:center; border:2px solid var(--card) }
  /* Cesta VACÍA en 1a: caja del icono PLANA (borde, sin sombra). */
  .skin-1a .cartempty .ceicon{ box-shadow:none; border:1px solid var(--line); border-radius:var(--r-sm) }

  /* --- Marino (skin-3b): dock oscuro flotante, Carta horizontal, acentos primaryD --- */
  .skin-3b .navbar.dock3b{ position:absolute; left:0; right:0; bottom:0; width:100%;
    aspect-ratio:auto; height:auto; background:transparent; z-index:6;
    display:flex; justify-content:center; padding:0 16px 16px; pointer-events:none }
  .skin-3b .navbar.dock3b .shape{ display:none }
  .skin-3b .dockrow{ pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:2px;
    width:100%; box-sizing:border-box; overflow:hidden;   /* ANCHO FIJO = ancho de la app; overflow:hidden = jamás desborda */
    background:var(--ink); border-radius:var(--r-pill,22px); padding:7px 9px;
    box-shadow:0 12px 30px rgba(21,33,31,.30), 0 3px 10px rgba(21,33,31,.18) }
  /* padding compacto + icono que NUNCA encoge → deja sitio a la etiqueta activa (incluso la más larga:
     de "Reservierungen"/nl "Reserveringen"). max-width + ellipsis = red de seguridad si algo fuese aún mayor. */
  .skin-3b .dock3b .ni.dni, .skin-3b .dock3b .fab.dcartbtn{
    position:relative; left:auto; top:auto; transform:none; width:auto; height:auto; aspect-ratio:auto; min-width:0;
    display:flex; align-items:center; gap:6px; background:transparent; border:none; box-shadow:none;
    padding:8px 7px; border-radius:14px; color:rgba(255,255,255,.55); cursor:pointer; transition:background .15s, color .15s }
  .skin-3b .dock3b .ni.dni svg, .skin-3b .dock3b .fab.dcartbtn svg{ width:21px; height:21px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2 }
  .skin-3b .dock3b .dlbl{ display:none; font-size:9.5px; font-weight:800; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:118px }
  .skin-3b .dock3b .ni.dni.on, .skin-3b .dock3b .fab.dcartbtn.on{ background:rgba(255,255,255,.14); color:#fff }
  .skin-3b .dock3b .ni.dni.on .dlbl, .skin-3b .dock3b .fab.dcartbtn.on .dlbl{ display:inline-block }
  /* El punto de "novedad" (avisos, etc.) es SIEMPRE rojo en TODOS los skins — no toma color del tema. */
  .skin-3b .dock3b .nidot{ position:absolute; top:4px; right:6px; width:8px; height:8px; border-radius:50%;
    background:#EC1C24; border:2px solid var(--ink) }
  .skin-3b .dock3b .fab.dcartbtn .badge{ position:absolute; top:1px; right:3px; min-width:16px; height:16px; padding:0 4px;
    background:var(--primary); color:var(--onink); border-radius:9px; font-size:10px; font-weight:800; line-height:1;
    display:grid; place-items:center; border:2px solid var(--ink) }
  /* Modo oscuro: el dock usa var(--ink) que en oscuro es CLARO → iconos oscuros (spec §60). */
  .skin-dark .dock3b .dockrow{ box-shadow:0 12px 30px rgba(0,0,0,.5) }
  .skin-dark .dock3b .ni.dni, .skin-dark .dock3b .fab.dcartbtn{ color:rgba(13,21,23,.55) }
  .skin-dark .dock3b .ni.dni.on, .skin-dark .dock3b .fab.dcartbtn.on{ background:rgba(13,21,23,.12); color:#0D1517 }
  .skin-dark .dock3b .nidot, .skin-dark .dock3b .fab.dcartbtn .badge{ border-color:var(--ink) }
  /* Oscuro: el icono ACTIVO de la barra inferior (var(--primary)) se ve apagado → lo aclaramos
     (marca + blanco) para que resalte claramente sobre los inactivos. Clásico/Vitrina + Minimal. */
  .skin-dark .navbar .ni.on{ color:color-mix(in srgb, var(--primary) 58%, #fff) }
  .skin-dark.skin-1a .nav1a .ni.nix.on, .skin-dark.skin-1a .nav1a .fab.cartnix.on{ color:color-mix(in srgb, var(--primary) 58%, #fff) }

  /* ===== 3b · Carta lista horizontal (la base YA es fila: thumb izq · info · +). Ajustes de skin: ===== */
  .skin-3b .mitem{ border:1px solid var(--line); box-shadow:var(--sh-block); border-radius:var(--r-card,20px) }
  .skin-3b .mthumb{ width:54px; height:54px; border-radius:var(--r-sm,12px); font-size:calc(24px*var(--fs)) }
  .skin-3b .mfav{ background:var(--card); border:1px solid var(--line); width:22px; height:22px; border-radius:8px; top:-7px; left:-7px }
  .skin-3b .mfav svg{ width:13px; height:13px }
  .skin-3b .mitem .mnm{ font-size:calc(13px*var(--fs)) }
  .skin-3b .mitem .mprice{ color:var(--primary-d); font-size:calc(12px*var(--fs)); font-weight:800; margin-top:6px }
  /* botón añadir CUADRADO 26px en primaryD (no el redondo ink de base) */
  .skin-3b .iadd{ width:26px; height:26px; border-radius:var(--r-sm,12px); background:var(--primary-d); color:var(--onink) }
  .skin-3b .iadd svg{ width:16px; height:16px }
  .skin-3b .iadd svg.perso{ width:12.8px; height:12.8px }   /* icono personalizar 20% menor (16→12.8) */
  .skin-3b .mtags{ border-top-color:var(--line) }
  /* dark: sombra mínima invisible sobre fondo oscuro → el borde define la tarjeta */
  .skin-dark.skin-3b .mitem{ box-shadow:var(--sh-block) }

  /* ===== 3b · arreglos finos ===== */
  /* (1) Franja inferior OPACA tras el dock: el navbar era transparente y el contenido al hacer
     scroll asomaba por el hueco de debajo de la píldora. Fondo = var(--bg) lo tapa (mismo color). */
  /* dock flotante ~60px → navpad ajustado (evita scroll de sobra cuando todo cabe). */
  .skin-3b{ --navpad:calc(64px + env(safe-area-inset-bottom,0px)) }
  .skin-3b .navbar.dock3b{ background:var(--bg); padding:0 16px 7px }   /* top del fondo = top del dock (0px); hueco inferior a la mitad (7px) */
  /* (2) Título de pantalla: alineado a la IZQUIERDA + subrayado 22×3px primary (spec 3b). */
  .skin-3b .mtitle{ text-align:left; font-size:calc(16px*var(--fs)); position:relative }
  .skin-3b .mtitle::after{ content:""; display:block; width:22px; height:3px; border-radius:2px; background:var(--primary); margin-top:5px }
  /* Título SIEMPRE en el mismo punto (izq+arriba) en todas las pantallas: mismo padding y
     misma alineación superior tanto en .mhead (Carta/Reservas/Perfil) como en .dhdr (Cesta/Ficha). */
  .skin-3b .mhead, .skin-3b .dhdr{ align-items:flex-start }
  .skin-3b .dhdr{ padding:var(--head-top) 14px 2px }
  /* (3) CTA primario en primaryD (no primary), salvo el estado deshabilitado. */
  .skin-3b .dcart:not(.disabled), .skin-3b .cocta:not(.disabled){ background:var(--primary-d) }
  /* (4) Chips de filtro: OUTLINE en primaryD; activo = relleno primaryD. */
  .skin-3b .fchip{ background:transparent; border:1.5px solid var(--primary-d); box-shadow:none; color:var(--primary-d) }
  .skin-3b .fchip.on{ background:var(--primary-d); border-color:var(--primary-d); color:var(--onink) }
  .skin-3b .fchip .dic{ color:currentColor }
  /* (5) Segmentado: dos píldoras separadas (la base ya tiene gap), activa en primaryD. */
  .skin-3b .coful.on{ background:var(--primary-d); border-color:var(--primary-d); color:var(--onink) }

  /* ===== 3b · Cesta VACÍA: ilustración (icono propio en cuadro + título + sub + CTA) ===== */
  .skin-3b .cartempty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 30px 0 }
  .skin-3b .cartempty .ceicon{ width:74px; height:74px; border-radius:20px; background:var(--card);
    box-shadow:0 8px 22px rgba(21,33,31,.10); display:grid; place-items:center; color:var(--primary); margin-bottom:22px }
  .skin-3b .cartempty .ceicon svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
  .skin-3b .cartempty .cetitle{ font-size:calc(17px*var(--fs)); font-weight:800; color:var(--ink); margin-bottom:8px }
  .skin-3b .cartempty .cesub{ font-size:calc(12px*var(--fs)); font-weight:600; color:var(--muted); line-height:1.5; max-width:232px; margin-bottom:24px }
  .skin-3b .cartempty .cebtn{ width:auto; min-width:184px; margin-top:0 }
  /* dark: sombra mínima invisible → un borde sutil define el cuadro del icono */
  .skin-dark.skin-3b .cartempty .ceicon{ box-shadow:0 8px 22px rgba(0,0,0,.28); border:1px solid var(--line) }

  /* --- Vitrina (skin-3a): cuadrícula Carta + nav rota + FAB pin con luz giratoria --- */
  .g3grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:10px 14px 6px }   /* padding-top = mismo hueco que la lista tras la barra de filtros */
  .mitem.g3{ background:var(--card); border:0; border-radius:var(--r-card); box-shadow:0 6px 18px rgba(21,33,31,.09);
    padding:10px; margin:0; display:flex; flex-direction:column; gap:8px }
  .g3 .gimg{ position:relative; height:74px; border-radius:calc(var(--r-card) - 6px); overflow:hidden; display:grid; place-items:center;
    font-size:calc(26px*var(--fs));
    background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--primary) 10%,var(--card)) 0 8px, color-mix(in srgb,var(--primary) 4%,var(--card)) 8px 16px) }
  .g3 .gimg img{ width:100%; height:100%; object-fit:cover }
  .g3 .gimg .mfav{ position:absolute; top:6px; left:6px; width:24px; height:24px; border-radius:50%; background:var(--card);
    box-shadow:0 3px 8px rgba(21,33,31,.16); display:grid; place-items:center; color:var(--primary) }
  .g3 .gprice{ display:flex; align-items:center; justify-content:space-between }
  .g3 .gprice b{ font-size:calc(12.5px*var(--fs)); font-weight:800; color:var(--primary-d) }
  .g3 .gprice .pfrom{ font-weight:600; color:var(--muted); font-size:calc(9.5px*var(--fs)) }
  .g3 .gadd{ width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--onink); border:0;
    display:grid; place-items:center; box-shadow:0 4px 10px color-mix(in srgb,var(--primary) 30%,transparent) }
  .g3 .gtitle{ font-size:calc(12px*var(--fs)); font-weight:800; line-height:1.25; color:var(--ink) }
  .g3 .gtitle small{ display:block; font-weight:500; color:var(--muted); font-size:calc(10px*var(--fs)); margin-top:1px }
  .g3 .atags{ display:flex; gap:5px; flex-wrap:wrap }
  .g3 .atags .mtag{ background:color-mix(in srgb,#D97706 14%,var(--card)); color:var(--ink) }
  /* tarjetas flotantes sin borde (look 3a) para bloques comunes — SOLO en Vitrina (skin-3a);
     sin scope pisaba --sh-block en todos los temas y dejaba estos bloques sin borde visible en oscuro. */
  .skin-3a .card-info,.skin-3a .ordcard,.skin-3a .rcard,.skin-3a .gcard,.skin-3a .cofields,.skin-3a .cobreak,.skin-3a .infonote{ box-shadow:0 6px 18px rgba(21,33,31,.09) }
  /* En Vitrina + oscuro esos bloques también necesitan el borde claro (si no, invisibles). */
  .skin-dark.skin-3a .card-info,.skin-dark.skin-3a .ordcard,.skin-dark.skin-3a .rcard,.skin-dark.skin-3a .gcard,.skin-dark.skin-3a .cofields,.skin-dark.skin-3a .cobreak,.skin-dark.skin-3a .infonote{ box-shadow:var(--sh-block) }
  /* Tarjetas con sombra FIJA (no token) que en claro sí llevan sombra: en oscuro reciben la sombra
     clara igual que el resto (bloque de comida en cuadrícula, tarjetas de tamaños…). */
  .skin-dark .mitem.g3, .skin-dark .vcard{ box-shadow:var(--sh-block) }

  .g3 .gimg .mfav.on{ color:#e31e24 }  /* corazón favorito en rojo (gana specificity) */

  /* ===== 3a · nav «rota» + FAB pin (firma) ===== */
  .navbar.nav3a{ aspect-ratio:auto; height:auto; background:var(--card);
    border-radius:22px 22px 26px 26px; box-shadow:0 -3px 16px rgba(21,33,31,.12); padding:11px 22px 9px }
  .navbar.nav3a .shape{ display:none }
  .nav3a .items.items3a{ position:static; display:flex; align-items:center; justify-content:space-between; bottom:auto }
  .nav3a .side.side3a{ display:flex; align-items:center; gap:26px }
  .nav3a .gap3a{ width:48px; flex:0 0 48px }
  .navbar.fab, .navbar .fab.fab3a{ }
  .fab.fab3a{ left:50%; top:-26px; width:56px; height:56px; aspect-ratio:auto; padding:0;
    transform:translateX(-50%) rotate(-45deg);
    border-radius:50% 50% 50% 16px; background:transparent; border:none; overflow:visible }
  /* superficie del pin (fondo + borde negro) sobre la luz giratoria */
  .fab3a::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    background:linear-gradient(135deg,var(--primary),var(--primary-d));
    border:5px solid #0a0a0a; box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 35%,transparent) }
  .fab3a .fabring{ position:absolute; inset:6px; z-index:1; border:1.5px dashed var(--fabDash,rgba(255,255,255,.5)); border-radius:50% 50% 50% 12px }
  .fab3a .fabic{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; transform:rotate(45deg); color:var(--onink) }
  .fab3a .fabic svg{ width:22px; height:22px; fill:none; stroke:currentColor }
  .fab3a .badge{ transform:rotate(45deg) }

  /* ===== FAB sbd: luz que GIRA detrás del pin (animación continua) ===== */
  .fab.fab3a{ overflow:visible }
  /* Halo giratorio 25% más estrecho: menos protrusión (inset) + menos difuminado. */
  .fab3a::after{ content:""; position:absolute; inset:-3.75px; border-radius:inherit; z-index:-1; pointer-events:none;
    background:conic-gradient(from 0deg,
      transparent 0deg,
      color-mix(in srgb,var(--primary) 90%,transparent) 45deg,
      color-mix(in srgb,var(--primaryD, var(--primary-d)) 72%,transparent) 95deg,
      transparent 150deg,
      transparent 360deg);
    filter:blur(4.5px); animation:fabGlowSpin 2.6s linear var(--spinDelay,0s) infinite }
  @keyframes fabGlowSpin{ to{ transform:rotate(360deg) } }
  @media (prefers-reduced-motion:reduce){ .fab3a::after{ animation:none } }

  /* ── Barra flotante «Instalar app» (PWA) — tokens → se adapta a tema/oscuro ── */
  #pwabar{ position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(78px + env(safe-area-inset-bottom, 0px)); z-index:9000; display:none;
    align-items:center; gap:9px; width:min(360px, calc(100% - 24px)); box-sizing:border-box;
    padding:9px 10px 9px 12px; background:var(--card); color:var(--ink);
    border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-btnfloat);
    font-size:calc(12.5px*var(--fs)); font-family:inherit; animation:pwabarIn .22s ease both }
  #pwabar .pwaico{ flex:none; font-size:16px; line-height:1 }
  #pwabar .pwamsg{ flex:1; min-width:0; line-height:1.35; font-weight:600 }
  #pwabar .pwabtn{ flex:none; background:var(--primary); color:var(--onink); border:none;
    border-radius:10px; padding:8px 12px; font-weight:800; font-family:inherit; cursor:pointer;
    font-size:calc(12.5px*var(--fs)) }
  #pwabar .pwax{ flex:none; background:none; border:none; color:var(--muted); font-size:20px;
    line-height:1; cursor:pointer; padding:0 4px; margin:0 }
  @keyframes pwabarIn{ from{ opacity:0; transform:translate(-50%,8px) } to{ opacity:1; transform:translate(-50%,0) } }
  @media (prefers-reduced-motion:reduce){ #pwabar{ animation:none } }