/* Pepe's Burgers · Los Héroes Chalco · estilos compartidos
   Fuente de verdad: design-system/pepes-burgers-pedidos/MASTER.md y ../manual-de-marca.

   Este archivo lo cargan cuatro páginas:
   - App de clientes (index.html), seguimiento (pedido.html) y aviso de privacidad: llevan class="tienda" en <html> y
     usan la parte 2 (modo oscuro de la marca: madera, verde Pepe's, Anton / Bebas Neue / Open Sans).
   - Panel (panel.html) y punto de venta (caja.html + caja.css): usan la parte 1, con los nombres de variables de
     siempre (--vino, --chile, --tortilla, --crema, --hueso…) ya apuntando a colores de Pepe's. No se renombró ninguna
     clase que usen esas páginas. Contraste revisado: texto normal >= 4.5:1. */

/* =====================================================================================================================
   PARTE 1 · Base compartida y panel / punto de venta (tema claro)
   ===================================================================================================================== */
:root {
  /* Primitivos de la marca (manual, cap. 05). Sin choque con los nombres de abajo. */
  --negro-parrilla: #141210;
  --madera: #1c1916;
  --madera-2: #262019;
  --linea: #3b342c;
  --verde-pepes: #54b41b;
  --lima: #a4d957;
  --hoja: #2c6e0f;
  --naranja: #e1750f;
  --rojo: #cd2b16;
  --mostaza: #fdac00;
  --blanco: #ffffff;
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-etiqueta: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Nombres de siempre (panel y caja). Antes eran los colores de Los Carnales; ahora son sus equivalentes de Pepe's
     en tema claro: "vino" = negro parrilla, "chile" = rojo catsup, "tortilla" = mostaza, "verde" = verde hoja
     (con texto blanco: 6.3:1; el verde Pepe's con texto blanco no pasa). */
  --vino: #141210;
  --vino-oscuro: #0b0a09;
  --chile: #cd2b16;
  --chile-oscuro: #a82210;
  --tortilla: #fdac00;
  --tortilla-suave: #ffe6a8;
  --comal: #141210;
  --crema: #f3eee6;
  --hueso: #fffcf7;
  --texto-suave: #5a5148;
  --borde: #ddd3c4;
  --limon: #5b7f14;
  --verde: #2c6e0f;
  --verde-oscuro: #1f520a;
  --error: #b32412;

  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgb(20 18 16 / .06), 0 6px 18px rgb(20 18 16 / .08);
  --sombra-alta: 0 -8px 30px rgb(20 18 16 / .18);
  --rapido: 160ms;
  --medio: 240ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --alto-barra: 72px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; scroll-padding-bottom: 110px; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--comal);
  font: 400 16px/1.5 Montserrat, var(--font-body), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vino); }
:focus-visible { outline: 3px solid var(--tortilla); outline-offset: 2px; }
.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-relleno { fill: currentColor; stroke: none; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.titulo { font-family: var(--font-etiqueta); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0; }

main { max-width: 640px; margin: 0 auto; padding: 0 16px calc(var(--alto-barra) + 32px + var(--seguro-abajo)); }

/* Botones de siempre (panel, caja) */
.agregar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--chile); color: var(--hueso); font-weight: 700;
  transition: transform var(--rapido) var(--curva), background var(--rapido);
}
.agregar:active { transform: scale(.94); }
@media (hover: hover) { .agregar:hover { background: var(--chile-oscuro); } }

.hoja-cabeza {
  display: flex; align-items: center; gap: 8px; padding: 10px 8px; background: var(--vino); color: var(--hueso);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.hoja-cabeza button { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; border-radius: 999px; }
.hoja-cabeza h2 { font-size: 28px; flex: 1; }

/* Formulario */
.campo { display: block; margin-top: 12px; }
.campo span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--borde); border-radius: var(--radio-chico);
  background: #fff; font-size: 16px; transition: border-color var(--rapido);
}
.campo input:focus, .campo textarea:focus { border-color: var(--vino); outline: none; box-shadow: 0 0 0 3px rgb(20 18 16 / .15); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo .ayuda { font-size: 13px; color: var(--texto-suave); margin-top: 4px; }
.campo .mal { font-size: 13px; color: var(--error); font-weight: 700; margin-top: 4px; }
.campo input:disabled { background: var(--crema); color: var(--texto-suave); cursor: not-allowed; }

.turnos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.turnos::-webkit-scrollbar { display: none; }
.turno { flex: none; }
.turno input { position: absolute; opacity: 0; pointer-events: none; }
.turno span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--borde); background: var(--hueso); font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.turno input:checked + span { background: var(--vino); color: var(--hueso); border-color: var(--vino); }
.turno input:focus-visible + span { outline: 3px solid var(--tortilla); outline-offset: 2px; }

.resumen { background: var(--hueso); border-radius: var(--radio-chico); padding: 12px 14px; margin-top: 20px; }
.resumen div { display: flex; justify-content: space-between; padding: 3px 0; }
.resumen .total { border-top: 2px solid var(--vino); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 20px; }
.gratis { color: var(--verde-oscuro); font-weight: 700; }

/* Mapa del pedido en el panel */
.mapa-pedido { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--hueso); }
.mapa-pedido-cabeza { display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--vino); color: #fff; }
.mapa-pedido-cabeza .titulo { margin: 0; font-size: 28px; color: #fff; line-height: 1; }
.mapa-pedido-cabeza p { margin: 2px 0 0; font-weight: 600; }
.mapa-pedido-datos { display: grid; gap: 6px; padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); box-shadow: var(--sombra-alta); }
.mapa-pedido-datos p { margin: 0; }
.mapa-pedido-direccion { font-size: 18px; font-weight: 800; }
.mapa-pedido-zona { font-weight: 700; color: var(--vino); }
.mapa-pedido-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mapa-pedido-google { justify-self: center; font-size: 14px; }
.mapa-pedido-falla { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-weight: 700; color: var(--texto-suave); }
/* Pedido nuevo: aviso fijo arriba (sin pantalla roja parpadeante: asustaba a los clientes). */
.alarma { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.alarma-caja {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 620px; padding: 14px 14px 14px 20px;
  border-radius: var(--radio); background: var(--vino); color: var(--hueso); box-shadow: 0 12px 34px rgb(20 18 16 / .32);
  border-left: 8px solid var(--tortilla); animation: alarma-entra .35s ease-out;
}
@keyframes alarma-entra { from { transform: translateY(-24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .alarma-caja { animation: none; } }
.alarma-texto { flex: 1; min-width: 0; }
.alarma-titulo { font-size: 32px; color: var(--tortilla); margin: 0; }
.alarma-folios { font-size: 17px; font-weight: 700; margin: 2px 0 0; color: var(--hueso); }
.alarma-boton { flex: none; min-height: 56px; padding: 0 22px; border: 0; border-radius: var(--radio-chico); background: var(--verde); color: #fff; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer; }
/* Avisos del celular: franja arriba del panel mientras no estén activados. */
.avisos-banda { margin-bottom: 14px; padding: 14px 16px; border-radius: var(--radio); background: var(--tortilla-suave); border: 2px solid var(--tortilla); }
.avisos-banda p { margin: 0 0 10px; font-weight: 700; color: var(--comal); }
.avisos-banda-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.avisos-banda-botones .principal { flex: 1 1 200px; width: auto; }
.avisos-banda-botones .secundario { flex: 0 1 auto; }
.aviso-boton { display: block; width: 100%; text-align: left; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.aviso-error { background: #fbe4e2; color: var(--chile-oscuro); border-radius: var(--radio-chico); padding: 12px 14px; font-weight: 700; margin-bottom: 10px; }

.principal {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  border: 0; border-radius: var(--radio); background: var(--chile); color: var(--hueso);
  font-weight: 700; font-size: 17px; text-decoration: none; padding: 0 18px;
  transition: background var(--rapido), transform var(--rapido) var(--curva);
}
@media (hover: hover) { .principal:hover { background: var(--chile-oscuro); } }
.principal:active { transform: scale(.98); }
.principal:disabled { opacity: .65; cursor: progress; }
.principal.whatsapp { background: var(--verde); }
@media (hover: hover) { .principal.whatsapp:hover { background: var(--verde-oscuro); } }
.secundario { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radio-chico); border: 2px solid var(--vino); background: var(--hueso); color: var(--vino); font-weight: 700; text-decoration: none; }
.girando { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.listo-check { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; background: var(--tortilla); color: var(--comal); display: grid; place-items: center; }
.listo-check .i { width: 46px; height: 46px; stroke-width: 3; }

.letra-chica { font-size: 13px; color: var(--texto-suave); }
.cargando { text-align: center; color: var(--texto-suave); padding: 40px 0; }

/* ---------- Panel ---------- */
.panel-cabeza { position: sticky; top: 0; z-index: 10; background: var(--vino); color: var(--hueso); padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.panel-cabeza > div { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.panel-cabeza h1 { font-size: 32px; flex: 1; }
.en-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.en-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; }
.en-vivo.caido::before { background: var(--tortilla); }
.boton-redondo { width: 44px; height: 44px; border-radius: 999px; border: 0; display: grid; place-items: center; background: rgb(255 252 247 / .14); color: var(--hueso); }
.boton-redondo.activo { background: var(--tortilla); color: var(--comal); }
.panel { max-width: 900px; margin: 0 auto; padding: 16px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { background: var(--hueso); border-radius: var(--radio-chico); padding: 12px; box-shadow: var(--sombra); }
.tile small { display: block; font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.tile strong { font-family: var(--font-etiqueta); font-size: 34px; font-weight: 400; line-height: 1.1; }
.promos { font-size: 13px; font-weight: 600; color: var(--texto-suave); margin: 8px 2px 0; }
.boton-agotado { margin-top: 14px; width: 100%; min-height: 56px; border-radius: var(--radio); border: 3px solid var(--comal); background: var(--hueso); color: var(--comal); font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.boton-agotado.si { background: var(--comal); color: var(--tortilla); }
.pestanas { display: flex; gap: 8px; margin: 16px 0 12px; }
.pestanas button { flex: 1; min-height: 46px; border-radius: 999px; border: 2px solid var(--vino); background: var(--hueso); color: var(--vino); font-weight: 700; }
.pestanas button[aria-selected="true"] { background: var(--vino); color: var(--hueso); }
.lista-pedidos { display: grid; gap: 12px; }
@media (min-width: 760px) { .lista-pedidos { grid-template-columns: 1fr 1fr; } }
.pedido { background: var(--hueso); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; border-top: 8px solid var(--texto-suave); }
.pedido.nuevo { border-top-color: var(--chile); }
.pedido.pagado { border-top-color: var(--tortilla); }
.pedido.preparando { border-top-color: var(--limon); }
.pedido.entregado, .pedido.cancelado { opacity: .6; }
.pedido.recien { animation: latido 1.2s ease-in-out 5; }
@keyframes latido { 50% { box-shadow: 0 0 0 6px rgb(253 172 0 / .7); } }
.pedido-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 14px 0; }
.pedido-cabeza h2 { font-size: 34px; }
.para { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; padding: 6px 10px; border-radius: 999px; background: var(--crema); white-space: nowrap; }
.para.urgente { background: var(--chile); color: var(--hueso); }
.para .i { width: 16px; height: 16px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.etiqueta { font-size: 12px; font-weight: 800; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--crema); }
.etiqueta.nuevo { background: var(--chile); color: var(--hueso); }
.etiqueta.pagado { background: var(--tortilla); color: var(--comal); }
.etiqueta.preparando { background: var(--limon); color: #fff; }
.pedido-cuerpo { padding: 10px 14px; display: grid; gap: 10px; }
.productos-pedido { margin: 0; padding: 0; list-style: none; font-size: 17px; }
.productos-pedido li { padding: 2px 0; }
.productos-pedido b { display: inline-block; min-width: 34px; font-size: 19px; }
.cobro { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--borde); padding-top: 8px; }
.cobro strong { font-size: 24px; }
.cliente { background: var(--crema); border-radius: var(--radio-chico); padding: 10px 12px; font-size: 15px; }
.cliente b { display: block; font-size: 13px; letter-spacing: .03em; color: var(--vino); }
.pedido-acciones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
.pedido-acciones .principal { grid-column: 1 / -1; min-height: 52px; }
.pedido-acciones .secundario { padding: 0 6px; font-size: 14px; }
.pedido-acciones .secundario .i { width: 18px; height: 18px; }
.entrar { max-width: 360px; margin: 40px auto; background: var(--hueso); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }

/* ---------- Dirección y mapa (panel y pedido por teléfono en caja) ---------- */
.icono-caja { width: 42px; height: 42px; border-radius: 12px; background: var(--vino); color: var(--hueso); display: grid; place-items: center; flex: none; }
.direccion-elegida { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 8px 12px 14px; border-radius: var(--radio-chico); background: #fff; border: 2px solid var(--vino); }
.direccion-elegida > div { flex: 1; min-width: 0; }
.direccion-elegida strong { display: block; }
.enlace { border: 0; background: none; color: var(--chile); font-weight: 700; padding: 0 8px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.zona { display: inline-flex; align-items: center; margin-top: 6px; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; line-height: 1.3; }
.zona.corta { white-space: nowrap; }
.zona.colonia { background: #e1f0d5; color: var(--verde-oscuro); }
.zona.fuera { background: var(--tortilla-suave); color: var(--vino-oscuro); }
.zona.lejos { background: #fbe4e2; color: var(--chile-oscuro); }

.mapa { position: fixed; inset: 0; z-index: 35; background: var(--crema); display: flex; flex-direction: column; }
.mapa .hoja-cabeza h2 { font-size: 26px; }
.mapa-buscar { position: relative; z-index: 4; padding: 0 16px 12px; background: var(--vino); }
.mapa-buscar > .i { position: absolute; left: 30px; top: 14px; width: 20px; height: 20px; color: var(--texto-suave); pointer-events: none; }
.mapa-buscar input { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 0; border-radius: 999px; background: #fff; font-size: 16px; }
.mapa-buscar input:focus { outline: 3px solid var(--tortilla); }
.sugerencias { position: absolute; left: 16px; right: 16px; top: 56px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: var(--radio-chico); box-shadow: var(--sombra-alta); max-height: 50vh; overflow-y: auto; }
.sugerencias button { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 52px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.sugerencias button:hover, .sugerencias button:focus-visible { background: var(--crema); }
.sugerencias .i { color: var(--vino); margin-top: 2px; }
.sugerencias strong { display: block; font-size: 15px; }
.sugerencias small { display: block; color: var(--texto-suave); font-size: 13px; }
.sugerencias .vacio { padding: 12px; color: var(--texto-suave); font-size: 14px; }
.mapa-lienzo-caja { position: relative; flex: 1; min-height: 0; background: #e9e4da; }
/* Más específico que .maplibregl-map (position: relative) para que el mapa ocupe toda la caja. */
.mapa-lienzo-caja > .mapa-lienzo { position: absolute; inset: 0; }
.pin-centro { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pin-svg { width: 40px; height: 52px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); transition: transform var(--rapido) var(--curva); }
.pin-centro.levantado .pin-svg { transform: translateY(-12px); }
.pin-globo { position: relative; margin-bottom: 8px; padding: 6px 10px; border-radius: 10px; background: var(--comal); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--sombra); transition: opacity var(--rapido); }
.pin-globo::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--comal); transform: translateX(-50%) rotate(45deg); }
.pin-centro.levantado .pin-globo, .pin-centro.sin-mover .pin-globo { opacity: 0; }
.pin-sombra { position: absolute; left: 50%; top: 50%; z-index: 1; width: 16px; height: 6px; border-radius: 50%; background: rgb(0 0 0 / .35); transform: translate(-50%, -50%); }
.mapa-falla { position: absolute; inset: 0; z-index: 3; display: grid; align-content: start; gap: 12px; padding: 24px 16px; background: var(--crema); }
.mapa-pie { position: relative; z-index: 3; margin-top: -16px; padding: 14px 16px calc(14px + var(--seguro-abajo)); border-radius: 20px 20px 0 0; background: var(--hueso); box-shadow: var(--sombra-alta); }
.mapa-pie > * { max-width: 608px; margin-left: auto; margin-right: auto; }
.mapa-ayuda { margin-top: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--texto-suave); text-align: center; }
.mapa-lugar { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; min-height: 52px; }
.mapa-lugar > .i { margin-top: 2px; color: var(--chile); }
.mapa-lugar strong { display: block; }
.marcador-local { width: 36px; height: 36px; border-radius: 50%; background: var(--negro-parrilla) url("fotos/logo.webp") center / cover; border: 3px solid var(--verde-pepes); box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.maplibregl-ctrl-attrib { font-size: 12px; }

/* ---------- Panel: embudo, estados y productos ---------- */
.embudo { margin-top: 10px; background: var(--hueso); border-radius: var(--radio-chico); padding: 10px 12px; box-shadow: var(--sombra); }
.embudo-titulo { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.pasos-embudo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.paso-embudo { text-align: center; background: var(--crema); border-radius: 10px; padding: 6px 2px; }
.paso-embudo strong { display: block; font-family: var(--font-etiqueta); font-size: 26px; font-weight: 400; line-height: 1; }
.paso-embudo small { display: block; font-size: 11px; font-weight: 700; color: var(--texto-suave); }
.paso-embudo em { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--vino); }
.embudo .promos { margin: 8px 0 0; }
.pedido.listo { border-top-color: var(--verde); }
.etiqueta.listo { background: var(--verde); color: #fff; }
.pedido-acciones .principal.whatsapp + .principal { margin-top: 0; }
.pedido-acciones .cancelar { grid-column: 1 / -1; border-color: var(--borde); color: var(--texto-suave); }
.lista-productos h3 { font-size: 22px; color: var(--vino); margin: 16px 0 6px; }
.fila-producto { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border-radius: var(--radio-chico); background: var(--hueso); box-shadow: var(--sombra); }
.fila-producto.sin { background: #ece5da; }
.fila-producto.sin .fila-nombre { color: var(--texto-suave); text-decoration: line-through; }
.fila-nombre { flex: 1; min-width: 0; font-weight: 600; }
.fila-nombre small { display: block; font-size: 12px; font-weight: 700; color: var(--limon); text-decoration: none; }
.fila-precio { display: block; font-size: 14px; font-weight: 800; color: var(--vino); }
.fila-antes { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.mini { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.mini-vacia { background: var(--vino); }
.secundario.chico { min-height: 44px; padding: 0 10px; font-size: 13px; }
.interruptor { min-width: 92px; min-height: 44px; border-radius: 999px; border: 0; background: var(--verde); color: #fff; font-weight: 800; }
.interruptor.apagado { background: var(--comal); color: var(--tortilla); }
.ajustes { margin-top: 20px; padding: 14px; border-radius: var(--radio-chico); background: var(--hueso); box-shadow: var(--sombra); }
.ajustes textarea, .editor textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--borde); border-radius: var(--radio-chico); background: #fff; font-size: 16px; resize: vertical; }
.editor { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(20 18 16 / .55); }
.editor-caja { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; border-radius: var(--radio); background: var(--hueso); box-shadow: var(--sombra-alta); }
.editor-caja h2 { font-size: 30px; color: var(--vino); margin-bottom: 12px; }
.editor-foto-caja { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radio-chico); overflow: hidden; background: var(--vino); }
.editor-foto { width: 100%; height: 100%; object-fit: cover; }
.editor-sinfoto { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tortilla); font-weight: 700; }
.archivo { width: 100%; margin-top: 12px; cursor: pointer; }
.editor-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.editor-botones .principal { margin: 0; min-height: 48px; }
.editor-caja .enlace { display: block; margin: 8px auto 0; }
.editor-caja .mal { margin: 10px 0 0; color: var(--error); font-weight: 700; }
.editor-precio input { max-width: 180px; }
.editor-precio-ayuda { margin: 4px 0 0; }
.aviso-precio { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--tortilla-suave); color: var(--comal); font-size: 13px; font-weight: 600; }

/* ---------- Panel: punto de venta, inventario, pedidos por teléfono y "¿Cómo pagó?" ---------- */
.boton-pos { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--tortilla); color: var(--comal); font-weight: 800; font-size: 14px; text-decoration: none; }
.boton-pos .i { width: 20px; height: 20px; }
@media (max-width: 480px) { .panel-cabeza .en-vivo { font-size: 0; gap: 0; } .panel-cabeza h1 { font-size: 28px; } }
.chip-carne { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 52px; padding: 8px 16px; border-radius: var(--radio-chico); border: 2px solid var(--verde); background: var(--hueso); color: var(--comal); font-weight: 700; text-decoration: none; box-shadow: var(--sombra); }
.chip-carne .i { color: var(--verde); flex: none; }
.chip-carne.reserva { border-color: var(--chile); background: #fbe4e2; color: var(--chile-oscuro); }
.chip-carne.reserva .i { color: var(--chile); }
.chip-carne.agotada { border-color: var(--comal); background: var(--comal); color: var(--tortilla); }
.chip-carne.agotada .i { color: var(--tortilla); }
.chip-carne.sin_iniciar { border-color: #cfc4b5; background: #ece6dd; color: var(--texto-suave); }
.chip-carne.sin_iniciar .i { color: var(--texto-suave); }
.etiqueta.telefono { display: inline-flex; align-items: center; gap: 4px; background: var(--vino); color: var(--hueso); }
.etiqueta.telefono .i { width: 13px; height: 13px; }
.enlace-pos { display: block; margin: 0 0 12px; text-decoration: none; }
.fallas-impresion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fallido-panel { display: inline-flex; align-items: center; gap: 8px; }
.fallido-panel .secundario.chico { min-height: 44px; }
dialog.como-pago { width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--radio); background: transparent; }
dialog.como-pago::backdrop { background: rgb(20 18 16 / .55); }
dialog.como-pago .editor-caja { max-width: none; }
.opciones-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.opciones-pago button { min-height: 60px; padding: 8px; border-radius: var(--radio-chico); border: 3px solid var(--borde); background: #fff; color: var(--comal); font: inherit; font-weight: 800; }
.opciones-pago button[aria-pressed="true"] { border-color: var(--vino); background: var(--vino); color: var(--hueso); }

/* =====================================================================================================================
   PARTE 2 · App de clientes, seguimiento y aviso (html.tienda)
   Modo oscuro de una sola apariencia: la marca es oscura por decisión (MASTER.md · Estilo).
   ===================================================================================================================== */
.tienda {
  color-scheme: dark;
  /* marca */
  --verde: #54b41b;
  --hueso: #f3eee6;
  /* semánticos (estilo shadcn) */
  --background: var(--negro-parrilla);  --foreground: var(--hueso);
  --card: var(--madera);                --card-foreground: var(--hueso);
  --muted: var(--madera-2);             --muted-foreground: #b7ad9e;   /* 7.9:1 sobre madera */
  --primary: var(--verde);              --primary-foreground: var(--negro-parrilla); /* 7.0:1 */
  --accent: var(--mostaza);             --accent-foreground: var(--negro-parrilla);  /* 9.9:1 */
  --precio: var(--rojo);                --precio-foreground: var(--blanco);          /* 5.3:1 */
  --destructive: #ff8a73;               /* texto de error sobre negro: 8.1:1 */
  --border: var(--linea);
  --input: #857969;                     /* borde de campos: 4.1:1 sobre madera (no-texto >= 3:1) */
  --ring: var(--mostaza);
  --radius: 10px;
  /* espaciado (densidad media) y movimiento */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --rapido: 160ms; --medio: 240ms;
  --curva: cubic-bezier(.16, 1, .3, 1);     /* sale rápido y se asienta */
  --curva-sale: cubic-bezier(.4, 0, 1, 1);
  --sombra-tarjeta: 0 2px 4px rgb(0 0 0 / .3), 0 10px 24px rgb(0 0 0 / .35);
  --alto-barra: 76px;
  background: var(--background);
  scrollbar-color: #4d443a var(--background);
  scroll-padding-top: 72px;
  scroll-padding-bottom: 120px;
}
.tienda body {
  min-height: 100vh; min-height: 100dvh;
  color: var(--foreground);
  font: 400 16px/1.5 var(--font-body);
  /* Madera carbón (manual, cap. 07) con su capa negra; el mosaico va espejeado para que no se note la unión. */
  background: var(--background) url("fotos/madera.webp") center top / max(100%, 900px) auto repeat-y;
  caret-color: var(--mostaza);
}
.tienda ::selection { background: var(--mostaza); color: var(--negro-parrilla); }
.tienda a { color: var(--lima); text-underline-offset: 3px; }
.tienda :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.tienda .titulo { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1.05; text-transform: uppercase; }
.tienda .i { width: 24px; height: 24px; }
.tienda button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tienda dialog:not([open]) { display: none !important; }
.tienda h1, .tienda h2, .tienda h3 { text-wrap: balance; }
.tienda main { max-width: 760px; padding: 0 16px calc(var(--alto-barra) + 40px + var(--seguro-abajo)); }
.tienda .letra-chica { font-size: 14px; color: var(--muted-foreground); }
.tienda .letra-chica a { display: inline-flex; align-items: center; min-height: 44px; }
.tienda .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Con una capa abierta el fondo se fija donde estaba (catalogo.js pone el `top`); en iPhone overflow:hidden no basta. */
html.tienda.con-dialogo body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius); background: var(--mostaza); color: var(--negro-parrilla) !important; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius); border: 2px solid transparent;
  font: 400 22px/1 var(--font-etiqueta); letter-spacing: .04em; text-decoration: none; cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido) var(--curva);
}
.btn .i { width: 22px; height: 22px; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { cursor: not-allowed; opacity: .5; }
/* Botón principal apagado: gris, que no parezca que se puede tocar (antes era un verde oscuro). */
.tienda .btn-primario:disabled { background: #3a332c; color: #b7ad9e; opacity: 1; }
.btn-primario, .tienda a.btn-primario { width: 100%; min-height: 56px; background: var(--primary); color: var(--primary-foreground); font-size: 24px; }
@media (hover: hover) { .btn-primario:hover:not(:disabled) { background: var(--lima); } }
.btn-primario .i { stroke-width: 2.4; }
.btn-secundario, .tienda a.btn-secundario { background: transparent; color: var(--foreground); border-color: #6d6254; }
@media (hover: hover) { .btn-secundario:hover { border-color: var(--hueso); background: rgb(243 238 230 / .06); } }
.btn-texto {
  min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--lima);
  font: 700 15px/1.2 var(--font-body); letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px;
}
@media (hover: hover) { .btn-texto:hover { color: var(--hueso); } }
.btn-icono {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgb(243 238 230 / .08);
  color: var(--foreground); display: grid; place-items: center; flex: none;
}
@media (hover: hover) { .btn-icono:hover { background: rgb(243 238 230 / .16); } }
.girando-tienda { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgb(20 18 16 / .3); border-top-color: var(--negro-parrilla); animation: girar .8s linear infinite; }

/* ---------- Portada ---------- */
.portada { position: relative; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 4px; text-align: center; }
.portada::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 28%, rgb(225 117 15 / .16), transparent 70%);
}
.portada > * { position: relative; }
.portada-titulo { margin: 0; line-height: 0; }
.portada-logo { width: min(224px, 52vw); height: auto; margin: 0 auto; }
.portada-sucursal { margin: 6px 0 0; font: 400 22px/1 var(--font-etiqueta); letter-spacing: .08em; color: var(--hueso); }
.tienda .estado-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; padding: 8px 14px;
  border-radius: 999px; background: rgb(20 18 16 / .7); border: 1px solid var(--border);
  font-size: 14px; font-weight: 700;
}
.tienda .estado-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--verde); box-shadow: 0 0 0 4px rgb(84 180 27 / .25); }
.tienda .estado-chip.cerrado::before, .tienda .estado-chip.agotado::before { background: var(--mostaza); box-shadow: 0 0 0 4px rgb(253 172 0 / .22); }
.datos-rapidos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--hueso); }
.datos-rapidos li { display: inline-flex; align-items: center; gap: 6px; }
.datos-rapidos .i { width: 18px; height: 18px; color: var(--mostaza); }
/* Calificación de Google junto al estado: prueba real para quien llega de un anuncio (abre la ficha). */
.tienda .prueba-google {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; min-height: 44px; margin: 2px auto 0; padding: 0 6px;
  color: var(--hueso); font-size: 14px; font-weight: 600; text-decoration: none;
}
.prueba-google .i { width: 18px; height: 18px; fill: var(--mostaza); stroke: none; }
.prueba-google strong { font-weight: 800; }
.prueba-google span { text-decoration: underline; text-decoration-color: rgb(243 238 230 / .35); text-underline-offset: 4px; }

/* ---------- Pedido en curso, "¿Lo de siempre?" ---------- */
.pedido-activo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 16px; min-height: 56px;
  border-radius: var(--radius); background: var(--mostaza); color: var(--negro-parrilla) !important; font-weight: 700; text-decoration: none;
}
.pedido-activo span:last-child { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.repetir { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.repetir > div { flex: 1; min-width: 0; }
.repetir h2 { font-size: 22px; color: var(--hueso); }
.repetir p { margin: 2px 0 0; font-size: 14px; color: var(--muted-foreground); }
.repetir .btn { min-height: 44px; font-size: 20px; padding: 0 14px; white-space: nowrap; }

/* ---------- Combo del anuncio (?promo=) ---------- */
.combo { margin: 16px 0 0; border-radius: var(--radius); overflow: hidden; background: var(--card); border: 2px solid var(--mostaza); box-shadow: var(--sombra-tarjeta); }
.combo-foto { aspect-ratio: 16 / 10; background: var(--madera-2); }
.combo-foto img { width: 100%; height: 100%; object-fit: cover; }
.combo-cuerpo { padding: 16px; }
.combo-cuerpo h2 { font-size: 30px; color: var(--hueso); }
.combo-cuerpo p { margin: 6px 0 0; color: var(--muted-foreground); }
.combo-precios { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.combo-antes { color: var(--muted-foreground); text-decoration: line-through; font: 400 22px/1 var(--font-etiqueta); }
.combo-ahorro { padding: 4px 10px; border-radius: 4px; background: var(--mostaza); color: var(--negro-parrilla); font: 400 18px/1 var(--font-etiqueta); letter-spacing: .04em; }

/* ---------- Lo más pedido: atajo arriba del menú (cada uno abre su hoja) ---------- */
.mas-pedidos { margin: 20px 0 0; }
.mas-pedidos h2 { margin: 0 0 10px; font-size: 26px; color: var(--naranja); }
.mp-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mp-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 8px 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--hueso); text-align: left; cursor: pointer;
  transition: border-color var(--rapido), transform var(--rapido) var(--curva);
}
.mp-item .foto { width: 100%; height: auto; aspect-ratio: 4 / 3; pointer-events: none; }
.mp-item strong { font: 400 18px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.mp-item .etiqueta-precio { margin-top: auto; font-size: 18px; }
.mp-item:active { transform: scale(.98); }
@media (hover: hover) { .mp-item:hover { border-color: var(--hueso); } }
/* En compu la tarjeta es ancha: foto de alto fijo (con aspect-ratio la foto 4:3 empujaba el alto). */
@media (min-width: 720px) { .mp-item .foto { aspect-ratio: auto; height: 132px; } }

/* ---------- Categorías (solo brincan) ---------- */
.nav-cats {
  position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 16px -16px 0; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--negro-parrilla); border-bottom: 1px solid var(--border);
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.nav-cats::-webkit-scrollbar { display: none; }
.nav-cats a {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 2px 14px 0;
  border: 1px solid #5a4f43; border-radius: 6px; color: var(--hueso); text-decoration: none;
  font: 400 20px/1 var(--font-etiqueta); letter-spacing: .05em; white-space: nowrap;
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido);
}
@media (hover: hover) { .nav-cats a:hover { border-color: var(--hueso); } }
.nav-cats a[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.nav-todas {
  position: sticky; left: 0; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: 0; padding: 2px 12px 0 16px; border: 0; border-right: 1px solid var(--border); border-radius: 0;
  background: rgb(20 18 16); color: var(--mostaza); box-shadow: 10px 0 12px -4px rgb(20 18 16 / .95);
  font: 400 20px/1 var(--font-etiqueta); letter-spacing: .05em;
}
.nav-todas .i { width: 20px; height: 20px; }
.nav-todas .i:last-child { width: 18px; height: 18px; transition: transform var(--rapido) var(--curva); }
.nav-todas[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
@media (hover: hover) { .nav-todas:hover { color: var(--hueso); } }
/* Desplegado: todas las categorías a la vista (el menú tiene 15). */
/* La fila no lleva sangría a la izquierda: "Menú" se pega a la orilla y nada se asoma detrás. */
.nav-cats:has(.nav-todas) { padding-left: 0; scroll-padding-left: 132px; }
.nav-cats.abierta { flex-wrap: wrap; max-height: calc(100dvh - 24px); overflow-y: auto; padding-left: 16px; box-shadow: 0 18px 30px rgb(0 0 0 / .55); }
.nav-cats.abierta .nav-todas { position: static; flex-basis: 100%; margin: 0 -16px 2px; padding-left: 16px; border-right: 0; box-shadow: none; background: transparent; }
.nav-cats.abierta a { scroll-snap-align: none; }

/* ---------- Menú: una sola lista por categoría ---------- */
.menu:focus { outline: none; }
.cat { scroll-margin-top: 72px; padding-top: 8px; }
.cat-titulo { display: flex; align-items: center; gap: 14px; margin: 36px 0 4px; font-size: 32px; color: var(--naranja); }
.cat-titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgb(225 117 15 / .6), transparent); }
.cat-nota { margin: 0 0 4px; font-size: 14px; color: var(--muted-foreground); }

/* "Las de la casa": recuadro con filete blanco y título en rojo (manual, cap. 07). Uno por página. */
.casa { margin-top: 28px; padding: 18px 16px 4px; border: 1.5px solid rgb(255 255 255 / .85); border-radius: 3px; background: rgb(20 18 16 / .45); }
.casa .cat-titulo { justify-content: center; margin: 0 0 4px; color: var(--rojo); font-size: 36px; }
.casa .cat-titulo::after { display: none; }

.plato {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "texto foto" "pie foto";
  column-gap: 14px; row-gap: 12px; align-items: start;
  margin: 0 -10px; padding: 16px 10px; border-radius: var(--radius);
  transition: background-color var(--rapido);
}
.plato + .plato::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; background: var(--border); }
@media (hover: hover) { .plato:hover { background: rgb(243 238 230 / .035); } }
.plato:has(.plato-abrir:focus-visible) { outline: 3px solid var(--ring); outline-offset: -1px; }
.plato-texto { grid-area: texto; min-width: 0; }
.plato-nombre { margin: 0; font: 400 22px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--hueso); }
.plato-abrir { all: unset; cursor: pointer; }
.plato-abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.plato-abrir:focus-visible { outline: none; }
.plato-variantes { margin: 6px 0 0; font: 400 17px/1.25 var(--font-etiqueta); letter-spacing: .05em; color: var(--muted-foreground); }
.plato-variantes b { font-weight: 400; color: var(--hueso); }
.plato-desc { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plato-pie { grid-area: pie; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; align-self: end; }
/* El "+" va sobre la esquina de la foto, en la zona del pulgar. */
.plato .boton-mas { grid-area: foto; justify-self: end; align-self: end; margin: 0 -4px -4px 0; box-shadow: 0 4px 12px rgb(0 0 0 / .45); }
.plato .se-acabo { grid-area: foto; align-self: end; padding: 4px 6px 2px; border-radius: 4px; background: rgb(20 18 16 / .85); }
.en-pedido { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--lima); }
.en-pedido .i { width: 16px; height: 16px; stroke-width: 3; }

/* Foto del platillo: foto con fondo recortada al cuadro, con esquinas y sombra. */
.foto { grid-area: foto; position: relative; display: grid; grid-template: 100% / 100%; place-items: center; width: 116px; height: 104px; flex: none; }
.plato > .foto { height: 128px; align-self: start; }
.plato .foto, .le-agregas-item .foto { pointer-events: none; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: var(--madera-2); box-shadow: 0 6px 16px rgb(0 0 0 / .45); }
.foto.sin-foto { border-radius: 8px; background: var(--madera-2); border: 1px solid var(--border); }
.foto.sin-foto img { width: 76%; height: auto; max-height: 100%; opacity: .85; object-fit: contain; border-radius: 0; background: none; box-shadow: none; }

/* Platillo destacado (Las de la casa): foto grande arriba. */
.plato.destacado { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: "foto foto" "texto texto" "pie boton"; }
.plato.destacado > .foto { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.plato.destacado .boton-mas { grid-area: boton; align-self: center; margin: 0; }
.plato.destacado .plato-pie { align-self: center; }
.plato.destacado .plato-nombre { font-size: 28px; }
.plato.destacado .plato-desc { -webkit-line-clamp: 3; }
@media (min-width: 640px) {
  .casa-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .casa-lista .plato + .plato::before { display: none; }
}

/* Etiqueta de precio: Bebas Neue blanco sobre rojo catsup, esquinas casi rectas. */
.etiqueta-precio {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px 3px; border-radius: 2px;
  background: var(--precio); color: var(--precio-foreground); font: 400 22px/1 var(--font-etiqueta); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.etiqueta-precio small { font-size: 15px; letter-spacing: .06em; }
/* El texto del botón de enviar en dos renglones parejos ("Apartar a domicilio · / hoy 2 p.m. · $159"). */
#enviar-texto { text-wrap: balance; }
.etiqueta-precio.agotada { background: #4a423a; color: #e6dfd4; text-decoration: line-through; }

.boton-mas {
  position: relative; z-index: 1; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius);
  display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground);
  transition: background-color var(--rapido), transform var(--rapido) var(--curva);
}
.boton-mas .i { width: 26px; height: 26px; stroke-width: 2.6; }
@media (hover: hover) { .boton-mas:hover { background: var(--lima); } }
.boton-mas:active { transform: scale(.92); }
.se-acabo { grid-area: boton; justify-self: end; align-self: center; position: relative; z-index: 1; font: 400 18px/1 var(--font-etiqueta); letter-spacing: .05em; color: var(--muted-foreground); }
.plato.agotado .foto img { filter: grayscale(1); opacity: .45; }
.plato.agotado .etiqueta-precio { background: #4a423a; color: #e6dfd4; }
.plato.agotado .plato-abrir { cursor: default; }

/* Esqueleto mientras carga el menú */
.esqueleto { display: grid; gap: 18px; padding-top: 28px; }
.esqueleto span { display: block; height: 104px; border-radius: var(--radius); background: linear-gradient(90deg, #1f1b18 0%, #2a241e 50%, #1f1b18 100%) 0 0 / 200% 100%; animation: brillo 1.4s linear infinite; }
.esqueleto span:first-child { height: 34px; width: 60%; }
@keyframes brillo { to { background-position: -200% 0; } }
.menu-error { padding: 32px 0; text-align: center; color: var(--muted-foreground); }

.pie {
  margin-top: 48px; padding: 24px 0 8px; border-top: 1px solid var(--border); text-align: center;
  font-size: 14px; color: var(--muted-foreground);
}
.pie-ornamento { width: 200px; height: auto; margin: 0 auto 16px; opacity: .9; }
.pie p { margin: 4px 0; }
.pie strong { color: var(--hueso); }
.pie-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 8px; }
.pie-enlaces a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.horario-especial { display: block; margin-top: 6px; color: var(--mostaza); font-weight: 700; }

/* ---------- Barra del pedido (zona del pulgar) ---------- */
.barra-pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 18px 16px calc(12px + var(--seguro-abajo));
  background: linear-gradient(to top, var(--background) 62%, rgb(20 18 16 / 0));
  transition: transform var(--medio) var(--curva);
}
.barra-pedido[hidden] { display: block !important; transform: translateY(130%); pointer-events: none; visibility: hidden; transition: transform var(--medio) var(--curva-sale), visibility 0s var(--medio); }
#ver-pedido {
  width: 100%; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 16px; border: 0; border-radius: var(--radius);
  background: var(--primary); color: var(--primary-foreground); box-shadow: 0 10px 26px rgb(0 0 0 / .5);
  font: 400 24px/1 var(--font-etiqueta); letter-spacing: .04em;
}
@media (hover: hover) { #ver-pedido:hover { background: var(--lima); } }
.barra-cuenta { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; background: var(--negro-parrilla); color: var(--primary); display: grid; place-items: center; font-size: 20px; padding-top: 2px; }
.barra-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.barra-pedido.salta #ver-pedido { animation: salta 360ms var(--curva); }
@keyframes salta { 40% { transform: translateY(-5px); } }

/* ---------- Aviso (toast) ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--alto-barra) + 20px + var(--seguro-abajo)); z-index: 30;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%); padding: 10px 10px 10px 16px; border-radius: var(--radius);
  background: var(--hueso); color: var(--negro-parrilla); box-shadow: 0 10px 30px rgb(0 0 0 / .5);
  font-size: 15px; font-weight: 600; animation: aviso-entra var(--medio) var(--curva);
}
.aviso.solo-texto { padding-right: 16px; }
.aviso button { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--hoja); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .aviso button:hover { background: rgb(44 110 15 / .1); } }
.aviso button:focus-visible { outline-color: var(--hoja); }
.aviso.arriba { bottom: calc(112px + var(--seguro-abajo)); }
/* En compu "Tu pedido" es un panel a la derecha (480 px): el aviso va centrado en el panel, no sobre el menú. */
@media (min-width: 720px) {
  dialog.panel-pedido > .aviso { left: auto; right: 240px; transform: translateX(50%); max-width: 448px; animation-name: aviso-entra-panel; }
}
@keyframes aviso-entra-panel { from { transform: translate(50%, 16px); opacity: 0; } }
@keyframes aviso-entra { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ---------- Hoja de producto (drawer desde abajo) ---------- */
dialog.hoja-producto {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: min(94dvh, 900px);
  padding: 0; border: 0; border-radius: 18px 18px 0 0; background: var(--card); color: var(--card-foreground);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 40px rgb(0 0 0 / .5);
}
dialog.hoja-producto[open] { animation: sube var(--medio) var(--curva); }
.tienda dialog::backdrop { background: rgb(10 9 8 / .72); }
@keyframes sube { from { transform: translateY(40%); opacity: .4; } }
@media (min-width: 720px) {
  dialog.hoja-producto { inset: 0; margin: auto; border-radius: 18px; max-height: min(90dvh, 860px); }
  @keyframes sube { from { transform: translateY(24px); opacity: 0; } }
}
.hp-cerrar { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--negro-parrilla); border: 1px solid rgb(243 238 230 / .28); box-shadow: 0 4px 14px rgb(0 0 0 / .55); }
@media (hover: hover) { .hp-cerrar:hover { background: var(--madera-2); } }
/* flex: 1 1 auto y no flex: 1: la hoja solo tiene alto máximo, y Safari (iPhone) toma la base 0% como 0 y la dejaba
   de 0 px de alto (fondo oscuro sin hoja). Con auto mide su contenido y se encoge hasta el alto máximo. */
.hp-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; margin: 0; }
/* Alto máximo propio (la hoja menos el pie de ~81 px), por si Safari no encoge el área dentro del flex. */
.hp-scroll { flex: 1 1 auto; min-height: 0; max-height: calc(min(94dvh, 900px) - 84px - var(--seguro-abajo)); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 720px) { .hp-scroll { max-height: calc(min(90dvh, 860px) - 84px - var(--seguro-abajo)); } }
.hp-foto {
  position: relative; display: grid; place-items: center; height: min(34vh, 260px); padding: 20px 24px 8px;
  background: radial-gradient(55% 70% at 45% 60%, rgb(225 117 15 / .3), transparent 70%), var(--negro-parrilla) url("fotos/madera.webp") center / cover;
}
.hp-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 12px 16px rgb(0 0 0 / .55)); }
/* La foto llena el cuadro sin crecerlo (si no, tapa el nombre del platillo). */
.hp-foto.completa { padding: 0; overflow: hidden; }
.hp-foto.completa img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; filter: none; }
.hp-foto.sin-foto img { width: 60%; opacity: .9; filter: none; }
.hp-cuerpo { padding: 18px 16px 24px; }
.hp-nombre { margin: 0; font: 400 30px/1.05 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.hp-porcion { display: inline-block; margin: 8px 0 0; padding: 4px 8px 2px; border: 1px solid var(--lima); border-radius: 4px; font: 400 17px/1 var(--font-etiqueta); letter-spacing: .06em; color: var(--lima); }
.hp-desc { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted-foreground); }

.hp-grupo { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.hp-grupo legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0 0 10px; }
.hp-grupo-nombre { font: 400 24px/1 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.hp-regla { flex: none; padding: 4px 8px 2px; border-radius: 4px; background: var(--madera-2); border: 1px solid var(--border); font: 400 16px/1 var(--font-etiqueta); letter-spacing: .06em; color: var(--muted-foreground); }
.hp-regla.obligatorio { background: transparent; border-color: var(--mostaza); color: var(--mostaza); }
.hp-grupo.falta .hp-regla { border-color: var(--destructive); color: var(--destructive); }
.hp-falta { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 14px; font-weight: 700; color: var(--destructive); }
.hp-falta .i { width: 18px; height: 18px; }

/* Tamaño / piezas / sabor: botones segmentados (radios). */
.tienda .segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.tienda .segmento { position: relative; }
.tienda .segmento input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tienda .segmento span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 6px 6px;
  border: 1px solid #5a4f43; border-radius: var(--radius); text-align: center;
  font: 400 20px/1 var(--font-etiqueta); letter-spacing: .05em; color: var(--hueso);
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.tienda .segmento small { font-size: 18px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .tienda .segmento input:hover + span { border-color: var(--hueso); } }
.tienda .segmento input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.tienda .segmento input:checked + span small { color: var(--primary-foreground); }
.tienda .segmento input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.tienda .segmento input:disabled { cursor: not-allowed; }
.tienda .segmento input:disabled + span { opacity: .45; border-style: dashed; }

/* Opciones: casillas (varias) y círculos (una obligatoria). */
.hp-opciones { display: grid; border-top: 1px solid var(--border); }
.hp-opcion { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--border); cursor: pointer; }
.hp-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hp-marca { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 2px solid var(--input); border-radius: 6px; color: transparent; transition: background-color var(--rapido), border-color var(--rapido); }
.hp-marca .i { width: 16px; height: 16px; stroke-width: 3.2; }
.hp-opcion input[type="radio"] + .hp-marca { border-radius: 50%; }
.hp-opcion input:checked + .hp-marca { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.hp-opcion input:focus-visible + .hp-marca { outline: 3px solid var(--ring); outline-offset: 2px; }
.hp-opcion-nombre { flex: 1; min-width: 0; font-size: 16px; }
.hp-opcion-precio { flex: none; font: 400 19px/1 var(--font-etiqueta); letter-spacing: .04em; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hp-opcion:has(input:checked) .hp-opcion-nombre { font-weight: 700; }
.hp-opcion:has(input:disabled) { cursor: not-allowed; }
.hp-opcion:has(input:disabled) .hp-opcion-nombre, .hp-opcion:has(input:disabled) .hp-marca { opacity: .4; }
.hp-opcion.agotada .hp-opcion-nombre { text-decoration: line-through; }
.picor { display: inline-flex; gap: 1px; margin-left: 6px; vertical-align: -3px; }
.picor .i { width: 16px; height: 16px; stroke: none; fill: currentColor; }
.picor-1 { color: var(--mostaza); }
.picor-2 { color: var(--naranja); }
.picor-3 { color: #ff5a3c; }

.hp-pie { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + var(--seguro-abajo)); background: var(--madera-2); border-top: 1px solid var(--border); }
.hp-pie .btn-primario { flex: 1; min-width: 0; padding: 0 12px; }
.hp-pie .btn-primario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* − cantidad + */
.cantidad { display: inline-flex; align-items: center; flex: none; border: 1px solid #5a4f43; border-radius: var(--radius); }
.cantidad button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--hueso); display: grid; place-items: center; }
@media (hover: hover) { .cantidad button:hover:not(:disabled) { background: rgb(243 238 230 / .08); } }
.cantidad button:disabled { opacity: .35; cursor: not-allowed; }
.cantidad output { min-width: 28px; text-align: center; font: 400 24px/1 var(--font-etiqueta); padding-top: 2px; font-variant-numeric: tabular-nums; }
.cantidad.grande button { width: 48px; height: 52px; }

/* ---------- Tu pedido / Entrega y pago (pantalla completa en celular, panel lateral en compu) ---------- */
dialog.panel-pedido {
  position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  padding: 0; border: 0; background: var(--background); color: var(--foreground);
  display: flex; flex-direction: column; overflow: hidden;
}
dialog.panel-pedido[open] { animation: entra-lado var(--medio) var(--curva); }
@keyframes entra-lado { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 720px) {
  dialog.panel-pedido { inset: 0 0 0 auto; width: 480px; border-left: 1px solid var(--border); box-shadow: -20px 0 50px rgb(0 0 0 / .5); }
  @keyframes entra-lado { from { transform: translateX(40px); opacity: 0; } }
}
.pp-cabeza { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--card); }
.pp-cabeza h2 { flex: 1; min-width: 0; margin: 0; font: 400 26px/1.1 var(--font-display); text-transform: uppercase; text-align: center; }
.pp-cabeza h2:focus, .calificar-gracias:focus, #titulo-estado:focus { outline: none; }
.pp-pasos { display: flex; gap: 6px; padding: 10px 16px 12px; background: var(--card); border-bottom: 1px solid var(--border); }
.pp-pasos span { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted-foreground); }
.pp-pasos span::before { content: ""; height: 4px; border-radius: 999px; background: #3f372f; transition: background-color var(--medio); }
.pp-pasos span.hecho { color: var(--hueso); }
.pp-pasos span.hecho::before { background: var(--primary); }
.pp-pasos b { font-weight: 700; }
.pp-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 32px; }
.pp-pie { padding: 12px 16px calc(12px + var(--seguro-abajo)); background: var(--card); border-top: 1px solid var(--border); }
.pp-error { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: rgb(255 138 115 / .1); border: 1px solid rgb(255 138 115 / .5); color: var(--destructive); font-size: 15px; font-weight: 700; }
.pp-error .i { width: 20px; height: 20px; margin-top: 1px; }
/* Cerrado: el aviso viaja con el pedido (no solo en la portada). */
.aviso-cerrado { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: var(--radius); background: rgb(253 172 0 / .1); border: 1px solid rgb(253 172 0 / .55); color: var(--mostaza); font-size: 15px; font-weight: 700; line-height: 1.4; }
.aviso-cerrado .i { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.turnos-nota { margin: 8px 0 0; }
/* Número aparte de la calle, con "Sin número" al lado. */
.campo-numero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.sin-numero { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; font-size: 15px; font-weight: 600; color: var(--hueso); cursor: pointer; }
.sin-numero input { width: 22px; height: 22px; margin: 0; accent-color: var(--primary); }
.tienda .campo input:disabled { opacity: .45; }
/* "Ver N más" en los grupos largos de la hoja. */
.hp-ver-mas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0 4px; border: 0; background: none; color: var(--lima); font: 700 15px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.hp-ver-mas .i { width: 18px; height: 18px; }
/* Al bajar de piezas: qué salsa se quitó. */
.hp-quitada { display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 10px; font-size: 14px; font-weight: 700; color: var(--mostaza); }
.hp-quitada .i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.confianza { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted-foreground); text-align: center; text-wrap: balance; }
.confianza .i { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--verde); }

.tienda .renglon { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "foto info precio" "foto info cantidad"; gap: 4px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.tienda .renglon .foto { grid-area: foto; width: 60px; height: 60px; align-self: start; }
.tienda .renglon-info { grid-area: info; min-width: 0; }
.tienda .renglon-titulo { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.tienda .renglon-detalle { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tienda .renglon-precio { grid-area: precio; justify-self: end; font: 400 22px/1 var(--font-etiqueta); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tienda .renglon .cantidad { grid-area: cantidad; justify-self: end; }
.vacio-pedido { padding: 40px 8px; text-align: center; color: var(--muted-foreground); }
.vacio-pedido strong { display: block; margin-bottom: 4px; font: 400 26px/1.1 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.vacio-pedido .btn { margin-top: 16px; }

.meta-gratis { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); font-size: 15px; font-weight: 600; }
.meta-gratis strong { color: var(--mostaza); }
.meta-gratis .riel { height: 8px; margin-top: 8px; border-radius: 999px; background: #3f372f; overflow: hidden; }
.meta-gratis .avance { height: 100%; border-radius: inherit; background: var(--mostaza); transform-origin: left; transition: transform var(--medio) var(--curva); }
.meta-gratis.lograda { color: var(--lima); }
.meta-gratis.lograda .avance { background: var(--primary); }

.le-agregas h3 { margin: 28px 0 10px; font: 400 24px/1 var(--font-display); text-transform: uppercase; }
.le-agregas-fila { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: thin; }
.le-agregas-item { position: relative; flex: 0 0 150px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.le-agregas-item .foto { width: 100%; height: 76px; }
.le-agregas-item strong { font-size: 14px; line-height: 1.3; }
.le-agregas-item .fila { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.le-agregas-item .etiqueta-precio { font-size: 18px; }
.le-agregas-item .boton-mas { width: 44px; height: 44px; }
@media (min-width: 720px) { .le-agregas-item { flex-basis: 132px; } }

/* ¿Llegamos a tu casa? (en "Tu pedido", antes de capturar datos) */
.llegamos { margin-top: 16px; }
.llegamos .tarjeta-mapa, .tienda .llegamos .direccion-elegida, .cobertura .tarjeta-mapa, .tienda .cobertura .direccion-elegida { margin-top: 0; }
.llegamos .direccion-elegida small, .cobertura small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted-foreground); overflow-wrap: anywhere; }
/* ¿Llegamos a tu casa? en la portada (antes de elegir comida). */
.cobertura { margin: 16px 0 0; }
.cobertura-fuera { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius); background: rgb(255 138 115 / .08); border: 1px solid rgb(255 138 115 / .45); }
.cobertura-fuera strong { display: block; color: var(--hueso); }
.cobertura-fuera .btn-texto { margin: 4px 0 0 -8px; }
/* Así le llega al repartidor. */
.dir-previa { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgb(84 180 27 / .08); border: 1px solid rgb(84 180 27 / .35); font-size: 14px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.dir-previa strong { color: var(--hueso); }
/* Horarios: selector de hora al programar. */
.tienda .campo select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--input); border-radius: 8px; background: var(--madera-2); color: var(--hueso); font: 600 16px/1.2 var(--font-body); }
.tienda .campo select:focus { border-color: var(--mostaza); outline: 3px solid rgb(253 172 0 / .35); outline-offset: 0; }

/* Formulario de entrega y pago */
.bloque { margin-top: 24px; }
.bloque-titulo { margin: 0 0 10px; font: 400 24px/1 var(--font-display); text-transform: uppercase; }
.opciones-entrega { display: grid; gap: 10px; }
.opcion-entrega { position: relative; display: flex; gap: 12px; align-items: center; min-height: 68px; padding: 12px 14px; border: 1px solid #5a4f43; border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color var(--rapido), background-color var(--rapido); }
.opcion-entrega input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-entrega .icono { width: 44px; height: 44px; border-radius: 8px; background: var(--madera-2); color: var(--hueso); display: grid; place-items: center; flex: none; }
.opcion-entrega strong { display: block; font-size: 16px; }
.opcion-entrega small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted-foreground); }
.opcion-entrega:has(input:checked) { border: 2px solid var(--primary); padding: 11px 13px; background: rgb(84 180 27 / .08); }
.opcion-entrega:has(input:checked) .icono { background: var(--primary); color: var(--primary-foreground); }
.opcion-entrega:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.tiempo { display: inline-block; margin-top: 4px; padding: 3px 7px 1px; border-radius: 4px; background: rgb(253 172 0 / .14); color: var(--mostaza); font: 400 16px/1 var(--font-etiqueta); letter-spacing: .06em; }

.tienda .campo { margin-top: 14px; }
.tienda .campo > span { font-size: 15px; font-weight: 600; color: var(--hueso); }
.tienda .campo small { font-weight: 400; color: var(--muted-foreground); }
.tienda .campo input, .tienda .campo textarea {
  min-height: 50px; padding: 12px 14px; border: 1px solid var(--input); border-radius: 8px;
  background: var(--madera-2); color: var(--hueso); font-size: 16px;
}
.tienda .campo textarea { resize: vertical; min-height: 88px; }
.tienda .campo input::placeholder, .tienda .campo textarea::placeholder { color: #a79b8b; opacity: 1; }
.tienda .campo input:focus, .tienda .campo textarea:focus { border-color: var(--mostaza); box-shadow: none; outline: 3px solid rgb(253 172 0 / .35); outline-offset: 0; }
.tienda .campo input[aria-invalid="true"], .tienda .campo textarea[aria-invalid="true"] { border-color: var(--destructive); border-width: 2px; }
.tienda .mal { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--destructive); }
.tienda .mal .i { width: 18px; height: 18px; margin-top: 1px; }
.resumen-errores { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; border: 1px solid rgb(255 138 115 / .5); background: rgb(255 138 115 / .08); color: var(--hueso); }
.resumen-errores:focus { outline: 3px solid var(--ring); outline-offset: 2px; }
.resumen-errores strong { color: var(--destructive); }
.resumen-errores ul { margin: 6px 0 0; padding-left: 20px; }
.resumen-errores a { color: var(--hueso); font-weight: 600; }

.tarjeta-mapa { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px; min-height: 76px; border-radius: var(--radius); border: 1px dashed var(--mostaza); background: var(--card); color: var(--hueso); text-align: left; }
.tarjeta-mapa strong { display: block; }
.tarjeta-mapa small { display: block; font-size: 14px; color: var(--muted-foreground); }
.tarjeta-mapa > .i:last-child { margin-left: auto; color: var(--mostaza); }
.tienda .icono-caja { width: 44px; height: 44px; border-radius: 8px; background: var(--madera-2); color: var(--mostaza); }
.tienda .direccion-elegida { margin-top: 12px; padding: 12px 8px 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid #5a4f43; }
.tienda .enlace { color: var(--lima); font-weight: 700; }
.tienda .zona { margin-top: 6px; font-size: 14px; border-radius: 4px; }
.tienda .zona.colonia { background: rgb(84 180 27 / .14); color: var(--lima); }
.tienda .zona.fuera { background: rgb(253 172 0 / .14); color: var(--mostaza); }
.tienda .zona.lejos { background: rgb(255 138 115 / .14); color: var(--destructive); }

.chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: thin; }
.chip { flex: none; position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #5a4f43; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--rapido), border-color var(--rapido); }
.chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }

.tienda .resumen { margin-top: 24px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.tienda .resumen div { padding: 4px 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.tienda .resumen .total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--hueso); font: 400 26px/1 var(--font-etiqueta); letter-spacing: .04em; }
.tienda .gratis { color: var(--lima); font-weight: 700; }

/* ---------- Mapa (Te lo llevamos) ---------- */
dialog.mapa-dialogo { position: fixed; inset: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: var(--background); color: var(--foreground); display: flex; flex-direction: column; overflow: hidden; }
.tienda .mapa .hoja-cabeza { background: var(--card); color: var(--hueso); }
.tienda .mapa .hoja-cabeza h2 { font: 400 24px/1.1 var(--font-display); text-transform: uppercase; }
.tienda .mapa-buscar { background: var(--card); border-bottom: 1px solid var(--border); }
.tienda .mapa-buscar > .i { color: var(--muted-foreground); }
.tienda .mapa-buscar input { border: 1px solid var(--input); background: var(--madera-2); color: var(--hueso); }
.tienda .mapa-buscar input::placeholder { color: #a79b8b; }
.tienda .sugerencias { background: var(--madera-2); border: 1px solid var(--border); box-shadow: 0 16px 30px rgb(0 0 0 / .5); }
.tienda .sugerencias button { color: var(--hueso); }
.tienda .sugerencias button:hover, .tienda .sugerencias button:focus-visible { background: rgb(243 238 230 / .08); }
.tienda .sugerencias .i { color: var(--mostaza); }
.tienda .sugerencias small, .tienda .sugerencias .vacio { color: var(--muted-foreground); }
.tienda .pin-globo, .tienda .pin-globo::after { background: var(--negro-parrilla); }
.tienda .mapa-falla { background: var(--background); }
.tienda .mapa-falla p { margin: 0; }
.tienda .mapa-pie { background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgb(0 0 0 / .45); }
.tienda .mapa-ayuda { color: var(--muted-foreground); font-size: 14px; }
.tienda .mapa-lugar > .i { color: var(--mostaza); }
/* Siempre 2 renglones: "Buscando la calle…" y la calle miden lo mismo, así el mapa no cambia de tamaño a cada rato. */
#mapa-direccion { min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Leyenda de la zona del mapa (el área amarilla). */
.mapa-leyenda { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); margin: 0; padding: 6px 10px; border-radius: 8px; background: rgb(20 18 16 / .88); color: var(--hueso); font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgb(0 0 0 / .35); }
.mapa-leyenda .muestra { flex: none; width: 16px; height: 12px; border-radius: 3px; background: rgb(253 172 0 / .45); border: 2px dashed #2C6E0F; }
/* Con el mapa caído, los botones de zona en 2 renglones no quedan pegados al borde. */
.tienda .mapa-falla .btn { height: auto; padding-top: 10px; padding-bottom: 10px; line-height: 1.15; }
.mapa-gps { position: absolute; right: 16px; bottom: 32px; z-index: 2; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--mostaza); box-shadow: 0 6px 18px rgb(0 0 0 / .4); display: grid; place-items: center; }

/* ---------- ¡Pedido recibido! ---------- */
.listo { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px calc(32px + var(--seguro-abajo)); text-align: center; }
.listo:focus { outline: none; }
.listo-caja { width: 100%; max-width: 440px; }
.tienda .listo-check { background: var(--primary); color: var(--primary-foreground); }
.tienda .listo-check .i { width: 46px; height: 46px; stroke-width: 3; }
.listo h1 { margin: 0; font-size: 44px; }
.listo-folio { margin: 8px 0 0; font: 400 34px/1 var(--font-etiqueta); letter-spacing: .06em; color: var(--mostaza); }
.listo-tiempo { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-weight: 700; }
.listo-tiempo .i { width: 20px; height: 20px; color: var(--mostaza); }
.listo-resumen { margin: 12px 0 0; font-weight: 700; color: var(--hueso); text-wrap: balance; overflow-wrap: anywhere; }
.listo-texto { margin: 16px 0 20px; color: var(--muted-foreground); }
.listo .btn-secundario { width: 100%; margin-top: 14px; }

/* ---------- Modo mesa (/mesa/<código>: pedir desde la mesa con el QR del ticket) ---------- */
html.mesa .portada-logo { width: min(168px, 44vw); }
html.mesa .pp-pasos { display: none; }
.mesa-cabeza { max-width: 560px; margin: 14px auto 0; }
.mesa-franja {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 10px; margin: 0;
  padding: 10px 14px 8px; border-radius: var(--radius); background: rgb(20 18 16 / .8);
  border: 1px solid rgb(253 172 0 / .45);
}
.mesa-numero { font: 400 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--mostaza); }
.mesa-punto { font: 400 26px/1 var(--font-etiqueta); color: var(--muted-foreground); }
.mesa-lema { font: 400 24px/1 var(--font-etiqueta); letter-spacing: .06em; color: var(--hueso); }
/* Aviso discreto del modo pruebas (cuenta de práctica del punto de venta). */
.mesa-practica { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--mostaza); text-wrap: balance; }
html.mesa { --alto-barra: 92px; }
.barra-pedido .mesa-acciones {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; max-width: 560px; margin: 0 auto;
}
.barra-pedido .mesa-acciones[hidden] { display: none; }
.barra-pedido .mesa-error { max-width: 560px; margin: 0 auto 8px; }
.mesa-boton {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px;
  border: 1px solid #5a4f43; border-radius: var(--radius); background: var(--card); color: var(--hueso); box-shadow: 0 8px 22px rgb(0 0 0 / .45);
  font: 400 18px/1 var(--font-etiqueta); letter-spacing: .04em; text-align: center; text-wrap: balance;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido), transform var(--rapido) var(--curva);
}
.mesa-boton .i { color: var(--mostaza); }
@media (hover: hover) { .mesa-boton:hover:not([aria-disabled="true"]) { border-color: var(--hueso); background: var(--madera-2); } }
.mesa-boton:active:not([aria-disabled="true"]) { transform: scale(.98); }
.mesa-boton .i { width: 22px; height: 22px; }
.mesa-boton[hidden] { display: none; }
/* Con total, el total ocupa el lugar del ícono ("$308" arriba, "Mi cuenta" abajo). */
.mesa-boton-cuenta:has(.mesa-total:not([hidden])) .i { display: none; }
.mesa-total {
  padding: 4px 8px 2px; border-radius: 2px; background: var(--precio); color: var(--precio-foreground);
  font: 400 22px/1 var(--font-etiqueta); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* "Mandar a cocina" va arriba de los botones mientras hay algo sin mandar ("Mi cuenta" y su total no se mueven). */
html.mesa #ver-pedido { margin-bottom: 8px; }
html.mesa.con-pedido { --alto-barra: 160px; }
html.mesa.con-ronda { --alto-barra: 136px; }
/* Sin nada por mandar: cuándo llegó a cocina lo último que mandaron (no solo un aviso que se va). */
.mesa-ronda {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: min(560px, 100%); margin: 0 auto 8px;
  padding: 6px 12px; border-radius: 999px; background: rgb(20 18 16 / .92); border: 1px solid rgb(164 217 87 / .35);
  color: var(--lima); font-size: 14px; font-weight: 700; text-align: center;
}
.mesa-ronda .i { width: 16px; height: 16px; flex: none; stroke-width: 3; }
/* "Ya avisamos" / "Ya pediste la cuenta": siguen enfocables (aria-disabled) y se leen claro (lima sobre madera). */
.mesa-boton.hecho { border-style: dashed; border-color: rgb(164 217 87 / .55); color: var(--lima); cursor: default; }
.mesa-boton.hecho .i { color: var(--lima); stroke-width: 2.6; }
.mesa-boton.ocupado { cursor: progress; color: var(--muted-foreground); }
.mesa-error { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: rgb(255 138 115 / .1); border: 1px solid rgb(255 138 115 / .5); color: var(--destructive); font-size: 15px; font-weight: 700; text-align: left; }
.mesa-error .i { width: 20px; height: 20px; margin-top: 1px; }
.menu-error .btn { margin-top: 14px; }
@media (min-width: 720px) {
  .mesa-boton { flex-direction: row; gap: 8px; font-size: 20px; }
  .mesa-boton-cuenta { justify-content: space-between; padding: 8px 12px; }
}

/* Mi cuenta: hoja desde abajo en celular, al centro en compu (como la hoja de producto). */
dialog.hoja-cuenta {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 560px; max-height: min(88dvh, 820px);
  padding: 0; border: 0; border-radius: 18px 18px 0 0; background: var(--card); color: var(--card-foreground);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -10px 40px rgb(0 0 0 / .5);
}
dialog.hoja-cuenta[open] { animation: sube var(--medio) var(--curva); }
@media (min-width: 720px) { dialog.hoja-cuenta { inset: 0; margin: auto; border-radius: 18px; max-height: min(86dvh, 780px); } }
.mc-cabeza { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); }
.mc-cabeza h2 { flex: 1; min-width: 0; margin: 0; font: 400 26px/1.1 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.mc-cabeza h2:focus { outline: none; }
/* flex: 1 1 auto y no flex: 1: la hoja solo tiene alto máximo y Safari deja en 0 px a un hijo con base 0% (ver .hp-form).
   El alto máximo propio es por si Safari no lo encoge (la hoja menos la cabeza ~70 px y el pie ~110 px, con aire). */
.mc-cuerpo { flex: 1 1 auto; min-height: 0; max-height: calc(min(88dvh, 820px) - 200px - var(--seguro-abajo)); overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; }
@media (min-width: 720px) { .mc-cuerpo { max-height: calc(min(86dvh, 780px) - 200px); } }
.mc-pie { flex: none; padding: 12px 16px calc(12px + var(--seguro-abajo)); background: var(--madera-2); border-top: 1px solid var(--border); }
.mc-pie .pp-error { margin-bottom: 10px; }
.mc-estado { margin: 10px 0 0; font-size: 14px; color: var(--muted-foreground); }
.mc-estado:empty { display: none; }
.mc-lista { list-style: none; margin: 0; padding: 0; }
.mc-renglon { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mc-cant {
  display: grid; place-items: center; height: 34px; padding-top: 2px; border-radius: 6px; background: var(--madera-2);
  border: 1px solid var(--border); font: 400 22px/1 var(--font-etiqueta); color: var(--mostaza); font-variant-numeric: tabular-nums;
}
.mc-nombre { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.mc-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.mc-marca { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 2px; border-radius: 4px; font: 400 16px/1.1 var(--font-etiqueta); letter-spacing: .06em; }
.mc-marca::before { content: ""; width: 7px; height: 7px; margin-top: -2px; border-radius: 50%; background: currentColor; }
.mc-marca.qr { background: rgb(243 238 230 / .08); color: var(--hueso); }
.mc-marca.qr::before { display: none; }
.mc-importe { padding-top: 6px; font: 400 22px/1 var(--font-etiqueta); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mc-vacia { padding: 36px 8px 20px; text-align: center; color: var(--muted-foreground); }
.mc-vacia strong { display: block; margin-bottom: 4px; font: 400 24px/1.1 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.mc-totales { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--madera-2); border: 1px solid var(--border); }
.mc-totales div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.mc-totales dt, .mc-totales dd { margin: 0; }
.mc-totales .mc-total { color: var(--hueso); font: 400 28px/1 var(--font-etiqueta); letter-spacing: .04em; }
.mc-totales .mc-falta { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--border); color: var(--mostaza); font: 400 24px/1 var(--font-etiqueta); letter-spacing: .04em; }
.btn-primario.hecho, .btn-primario.hecho:hover { background: transparent; border: 2px dashed rgb(164 217 87 / .55); color: var(--lima); cursor: default; }
.btn-primario.ocupado { cursor: progress; }

/* ¿Pedimos tu cuenta? */
dialog.hoja-confirma {
  width: min(420px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0;
  border-radius: 16px; background: var(--card); color: var(--card-foreground); box-shadow: 0 20px 50px rgb(0 0 0 / .6); overflow-y: auto;
}
dialog.hoja-confirma[open] { animation: aparece var(--medio) var(--curva); }
@keyframes aparece { from { transform: scale(.96); opacity: 0; } }
.cf-caja { padding: 24px 18px 18px; text-align: center; }
.cf-caja h2 { font-size: 30px; color: var(--hueso); }
.cf-total { margin: 10px 0 0; font-size: 17px; color: var(--muted-foreground); }
.cf-total strong { font: 400 30px/1 var(--font-etiqueta); letter-spacing: .04em; color: var(--hueso); }
.cf-nota { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgb(253 172 0 / .1); border: 1px solid rgb(253 172 0 / .35); font-size: 14px; text-align: left; }
.cf-caja .pp-error { margin: 12px 0 0; text-align: left; }
.cf-botones { display: grid; gap: 10px; margin-top: 18px; }
.cf-botones .btn { width: 100%; }

/* La cuenta se cerró / el QR no sirve / hoy no se pide por QR. */
.mesa-fin-logo { width: 150px; height: auto; margin: 0 auto 24px; }
.tienda .listo-check.mesa-fin-alerta { background: var(--mostaza); color: var(--negro-parrilla); }
.mesa-fin .listo-check .i { width: 44px; height: 44px; stroke-width: 2.6; }
.mesa-fin .listo-texto { font-size: 17px; color: var(--hueso); }

/* ---------- Seguimiento del pedido ---------- */
.seg-cabeza { display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; }
.seg-cabeza img { width: 132px; height: auto; flex: none; }
.seg-cabeza h1 { margin: 0; font: 400 30px/1 var(--font-etiqueta); letter-spacing: .06em; color: var(--mostaza); }
.seg-cabeza p { margin: 2px 0 0; font-size: 14px; color: var(--muted-foreground); }
.tienda main.seguimiento { max-width: 560px; padding: 16px 16px calc(32px + var(--seguro-abajo)); }
.tarjeta { margin-top: 16px; padding: 18px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.seg-estado h2 { margin: 0; font-size: 32px; color: var(--hueso); }
.seg-detalle { margin: 6px 0 0; color: var(--muted-foreground); }
.seg-eta { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: rgb(253 172 0 / .1); border: 1px solid rgb(253 172 0 / .35); }
.seg-eta .i { color: var(--mostaza); }
.seg-eta strong { display: block; font: 400 26px/1 var(--font-etiqueta); letter-spacing: .05em; color: var(--mostaza); }
.seg-eta span { display: block; font-size: 14px; color: var(--muted-foreground); }
.linea-tiempo { list-style: none; margin: 20px 0 0; padding: 0; }
.linea-tiempo li { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding-bottom: 12px; color: var(--muted-foreground); font-weight: 600; }
.linea-tiempo li::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: -2px; width: 2px; background: #3f372f; }
.linea-tiempo li:last-child::before { display: none; }
.linea-tiempo .punto { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--madera-2); border: 2px solid #5a4f43; color: transparent; }
.linea-tiempo .punto .i { width: 16px; height: 16px; stroke-width: 3.2; }
.linea-tiempo li.hecho { color: var(--hueso); }
.linea-tiempo li.hecho .punto { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.linea-tiempo li.hecho::before { background: var(--primary); }
.linea-tiempo li.actual { color: var(--mostaza); font-weight: 800; }
.linea-tiempo li.actual .punto { border-color: var(--mostaza); background: var(--mostaza); color: var(--negro-parrilla); animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 7px rgb(253 172 0 / .2); } }
.seg-cancelado { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; background: rgb(255 138 115 / .1); color: var(--destructive); font-weight: 700; }
.seg-resumen h2, .calificar h2 { margin: 0 0 8px; font-size: 24px; }
.seg-resumen ul { margin: 0; padding: 0; list-style: none; }
.seg-resumen li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.seg-resumen li b { flex: none; min-width: 28px; font: 400 20px/1.2 var(--font-etiqueta); color: var(--mostaza); }
.seg-total { display: flex; justify-content: space-between; padding-top: 10px; font: 400 26px/1 var(--font-etiqueta); letter-spacing: .04em; }
.seg-acciones { display: grid; gap: 10px; margin-top: 16px; }
.seg-acciones .btn { width: 100%; }
.cancelar-confirma { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-peligro { background: transparent; border-color: var(--destructive); color: var(--destructive); }
@media (hover: hover) { .btn-peligro:hover { background: rgb(255 138 115 / .1); } }

.calificar p { margin: 0; color: var(--muted-foreground); }
.estrellas { display: flex; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.estrella { position: relative; }
.estrella input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.estrella span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); color: #8a7e6e; transition: color var(--rapido), transform var(--rapido) var(--curva); }
.estrella span .i { width: 38px; height: 38px; fill: currentColor; stroke: none; }
.estrella.llena span { color: var(--mostaza); }
.estrella input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 1px; }
.estrella input:active + span { transform: scale(.9); }
.estrellas-texto { min-height: 24px; margin: 6px 0 0 !important; font-weight: 700; color: var(--hueso) !important; }
.temas { margin: 16px 0 0; padding: 0; border: 0; }
.temas legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.temas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.calificar .btn-primario { margin-top: 16px; }
.calificar-gracias { text-align: center; }
.calificar-gracias strong { display: block; font: 400 28px/1.1 var(--font-display); text-transform: uppercase; color: var(--hueso); }
.calificar-gracias .btn { margin-top: 14px; width: 100%; font-size: 20px; padding: 0 12px; }

/* ---------- Aviso de privacidad ---------- */
.legal { max-width: 680px; }
.legal h1 { margin: 24px 0 8px; font-size: 36px; }
.legal h2 { margin: 24px 0 6px; font: 400 22px/1.1 var(--font-display); text-transform: uppercase; color: var(--naranja); }
.legal p, .legal li { color: var(--muted-foreground); max-width: 68ch; }
.legal strong { color: var(--hueso); }
.legal-logo { width: 160px; height: auto; margin: calc(24px + env(safe-area-inset-top, 0px)) auto 0; }

@media (min-width: 720px) {
  .portada { padding-top: 32px; }
  .portada-logo { width: 290px; }
  .plato > .foto { width: 148px; height: 140px; }
  .plato-nombre { font-size: 24px; }
  .cat-titulo { font-size: 36px; }
}
@media (max-width: 380px) {
  .plato { column-gap: 10px; }
  .plato > .foto { width: 100px; height: 116px; }
  .plato-nombre { font-size: 20px; }
}

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