/* Diseño: app de pedidos de una columna para celular; franja amarilla de marca arriba, tarjetas de promo con la foto del afiche y una bolsa fija abajo */
:root{
  --amarillo:#ffd23f; --tinta:#1a1a24; --fondo:#f7f6f2; --papel:#ffffff; --suave:#5d5d6b; --linea:#e4e2da;
  --verde:#128c4a; --verde-tinta:#ffffff; --rojo:#c8102e;
  --f-marca:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-texto:"Public Sans","Helvetica Neue",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fondo:#121218; --papel:#1d1d26; --tinta:#f2f1ec; --suave:#a9a9b6; --linea:#2e2e3a; --verde:#22b265; --rojo:#ff5a6e; color-scheme:dark}}
:root[data-theme="dark"]{
  --fondo:#121218; --papel:#1d1d26; --tinta:#f2f1ec; --suave:#a9a9b6; --linea:#2e2e3a; --verde:#22b265; --rojo:#ff5a6e; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:16px/1.5 var(--f-texto);padding-bottom:96px}
.gutter{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.ancho{max-width:40rem;margin:0 auto}
h1,h2,h3{font-family:var(--f-marca);margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}

/* Cabecera de marca: siempre amarilla con tinta oscura, en ambos temas */
.marca{background:#ffd23f;color:#1a1a24;padding-block:14px 18px}
.marca .ancho{display:flex;flex-direction:column;gap:10px}
.fila-marca{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font:800 1.9rem/1 var(--f-marca);letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.logo .rayo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1a1a24;color:#ffd23f;font-size:1.1rem}
.zona{font-size:.85rem;font-weight:600;background:#1a1a24;color:#ffd23f;padding:5px 10px;border-radius:999px;white-space:nowrap}
.lema{font-weight:600;font-size:1.02rem}
.aviso-demo{font-size:.8rem;background:rgba(26,26,36,.08);padding:6px 10px;border-radius:6px}

.vista{display:flex;flex-direction:column;gap:20px;padding-block:20px}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cat{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.8rem;font-weight:600;color:var(--tinta)}
.cat .ico{font-size:1.5rem;line-height:1}
.cat[aria-pressed="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
.titulo-sec{font-size:1.25rem}
.negocios{display:flex;flex-direction:column;gap:12px}
.negocio{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:10px;text-align:left;color:var(--tinta);width:100%}
.negocio img,.negocio .ph{width:84px;height:84px;border-radius:10px;object-fit:cover;object-position:top}
.negocio .ph{display:grid;place-items:center;background:var(--fondo);font-size:2rem}
.negocio > div{min-width:0;display:flex;flex-direction:column;gap:3px}
.negocio h3{font-size:1.1rem}
.negocio small{color:var(--suave);font-size:.85rem}
.chip{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;width:max-content}
.chip.abierto{background:#d9f5e5;color:#0b6a37}
.chip.pronto{background:var(--linea);color:var(--suave)}
.negocio[disabled]{opacity:.75;cursor:default}

.volver{background:none;border:0;padding:0;color:var(--tinta);font-weight:700;display:flex;align-items:center;gap:6px;width:max-content}
.cabeza-negocio{display:flex;flex-direction:column;gap:6px}
.cabeza-negocio p{color:var(--suave)}
.promos{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:12px}
.promo{background:var(--papel);border:1px solid var(--linea);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.promo .foto{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;background:var(--linea);border:0;padding:0;max-width:100%}
.promo .info{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.promo h3{font-size:1rem}
.promo .trae{font-size:.8rem;color:var(--suave);flex:1}
.promo .pie{display:flex;align-items:center;justify-content:space-between;gap:6px}
.precio{font:800 1.1rem/1 var(--f-marca);font-variant-numeric:tabular-nums}
.mas{background:var(--tinta);color:var(--fondo);border:0;border-radius:999px;min-width:40px;height:40px;font-size:1.3rem;font-weight:700;display:grid;place-items:center;padding:0 10px}
.contador{display:flex;align-items:center;gap:8px}
.contador .mas{min-width:34px;height:34px;font-size:1.1rem}
.contador b{min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums}

.bolsa-barra{position:fixed;left:0;right:0;bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));padding-top:12px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));background:linear-gradient(transparent, var(--fondo) 30%)}
.bolsa-barra button{max-width:40rem;margin:0 auto;width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--tinta);color:var(--fondo);border:0;border-radius:14px;padding:14px 18px;font-weight:700;font-size:1.02rem}
.bolsa-barra .cuenta{background:#ffd23f;color:#1a1a24;border-radius:999px;padding:2px 9px;margin-right:8px}

.bloque{background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px}
.linea-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.linea-item > div{min-width:0}
.linea-item small{display:block;color:var(--suave)}
.totales{display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.totales div{display:flex;justify-content:space-between}
.totales .total{font:800 1.25rem/1.2 var(--f-marca);border-top:1px dashed var(--linea);padding-top:8px}
label{font-weight:600;font-size:.9rem;display:flex;flex-direction:column;gap:6px}
input,textarea{font:inherit;color:var(--tinta);background:var(--fondo);border:1px solid var(--linea);border-radius:10px;padding:11px 12px;width:100%}
textarea{min-height:70px;resize:vertical}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opcion{border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);border-radius:10px;padding:12px;font-weight:700;text-align:center}
.opcion[aria-pressed="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta);background:var(--papel)}
.nota{font-size:.85rem;color:var(--suave)}
.boton-wa{display:flex;justify-content:center;align-items:center;gap:8px;background:var(--verde);color:var(--verde-tinta);border:0;border-radius:14px;padding:15px;font-weight:700;font-size:1.05rem;text-decoration:none;text-align:center}
.boton-wa[aria-disabled="true"]{opacity:.45;pointer-events:none}
.error{color:var(--rojo);font-size:.88rem;font-weight:600}
.mensaje{white-space:pre-wrap;font-size:.85rem;background:var(--fondo);border:1px dashed var(--linea);border-radius:10px;padding:10px;max-height:14rem;overflow:auto}
.copiar{background:none;border:1px solid var(--linea);color:var(--tinta);border-radius:10px;padding:10px;font-weight:600}

.visor{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));z-index:10}
.visor img{max-height:88vh;max-width:100%;border-radius:10px}
.visor > button{position:absolute;top:calc(12px + env(safe-area-inset-top, 0px));right:calc(12px + env(safe-area-inset-right, 0px));background:#ffd23f;color:#1a1a24;border:0;border-radius:999px;width:44px;height:44px;font-size:1.3rem;font-weight:800}
@media (prefers-reduced-motion: no-preference){.mas:active,.opcion:active,.cat:active{transform:scale(.96)}}
a.logo{color:inherit;text-decoration:none}
.marca .ancho.fila-marca{flex-direction:row}
#lista-promos{display:flex;flex-direction:column;gap:12px}
.seccion{font-size:1.1rem;margin-top:8px}
.carta{background:var(--papel);border:1px solid var(--linea);border-radius:14px;display:flex;flex-direction:column}
.fila-carta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--linea)}
.fila-carta:first-child{border-top:0}
.fila-carta > div{min-width:0}
.fila-carta small{display:block;color:var(--suave);font-size:.85rem}
.fila-carta .pie{display:flex;align-items:center;gap:10px}
.agotado{opacity:.55}
.yape-linea{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mini-yape{border:1px solid var(--linea);background:var(--fondo);color:var(--tinta);border-radius:8px;padding:5px 10px;font-weight:700;font-size:.82rem}
.visor-qr{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:20;padding:16px}
.tarjeta-qr{background:#fff;color:#1a1a24;border-radius:18px;padding:18px;max-width:22rem;width:100%;text-align:center;display:flex;flex-direction:column;gap:8px}
.tarjeta-qr img{width:100%;border-radius:10px}
.num-qr{font:800 1.8rem/1 var(--f-marca);letter-spacing:.02em;margin:0}
.tit-qr{margin:0;color:#555}
.cerrar-qr{background:#1a1a24;color:#fff;border:0;border-radius:12px;padding:12px;font-weight:700}
details.bloque summary{cursor:pointer}
.buscador{display:flex;flex-direction:row;align-items:center;gap:8px;background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:4px 12px}
.buscador input{border:0;background:transparent;padding:10px 0}
button.fila-carta{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linea);color:var(--tinta)}
.otra-vez{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;background:#ffd23f;color:#1a1a24;border:0;border-radius:14px;padding:12px 14px}
.otra-vez small{color:#1a1a24;opacity:.8}
.estrellas{font-size:.85rem;color:var(--tinta);font-weight:700;white-space:nowrap}
.estrellas small{font-weight:400;color:var(--suave)}
.estrellas-pick{display:flex;gap:6px}
.estrellas-pick button{font-size:2rem;background:none;border:0;color:#f2b705;padding:0 2px}
/* Marca Al Toque (logo elegido 25/10/2026): rojo #E31B23, amarillo #FFC72C, crema #FFF3DC, contorno #1C1A1A */
.marca{background:#e31b23;color:#fff3dc}
.logo{font-family:"Baloo 2","Bricolage Grotesque",system-ui,sans-serif;font-weight:800;letter-spacing:0;color:#fff3dc;-webkit-text-stroke:0}
.logo-ico{width:36px;height:36px;border-radius:9px;display:block}
.zona{background:#1c1a1a;color:#ffc72c}
.aviso-demo{background:rgba(255,243,220,.16);color:#fff3dc}
.lema{color:#fff3dc}
a.logo{color:#fff3dc}
.cupon{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.totales .desc{color:var(--verde)}
.invita{border:2px dashed #ffc72c}

.tarjeta-op{background:var(--papel);color:var(--tinta);border-radius:16px;padding:16px;width:100%;max-width:26rem;max-height:86vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.op-fila{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;flex-direction:row;border:1px solid var(--linea);border-radius:10px;padding:10px 12px;font-weight:600}
.op-fila input{width:auto}
.cantidad-op{display:flex;gap:12px;align-items:center;justify-content:center}
.en-bolsa{font-size:.75rem;font-weight:700;color:var(--verde)}
small.ops{display:block;color:var(--suave);font-size:.78rem;margin-top:2px}