/* Foodie Mesa · menú web del comensal. Sistema de diseño v3 de Foodie: Urbanist, radio 16, coral solo de acento. */
:root {
  --bg: #0F1218;
  --surface: #181C23;
  --raised: #222731;
  --outline: #2C323D;
  --ink: #EEF0F5;
  --muted: #9BA2AF;
  --coral: #FF5E62;
  --on-coral: #0F1218;
  --glass: rgba(255, 255, 255, 0.10);
  --r: 16px;
  --nav-h: 72px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 16px/1.45 'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
.ic { width: 20px; height: 20px; flex: none; }
main { max-width: 640px; margin: 0 auto; padding-bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }

/* Portada ------------------------------------------------------------------------------ */
.portada { position: relative; height: 200px; background: var(--surface); overflow: hidden; }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15, 18, 24, 0) 30%, var(--bg) 100%);
}
.cabecera { padding: 0 16px; margin-top: -48px; position: relative; z-index: 1; }
.cabecera h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.mesa-pill {
  display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px;
  background: var(--glass); font-weight: 600; font-size: 14px;
}

/* Secciones ---------------------------------------------------------------------------- */
.seccion-titulo { margin: 28px 16px 12px; font-size: 20px; font-weight: 700; }

/* Platos estrella (videos verticales) */
.estrellas { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.estrellas::-webkit-scrollbar { display: none; }
.estrella {
  position: relative; flex: none; width: 136px; aspect-ratio: 9 / 16; border-radius: var(--r);
  overflow: hidden; background: var(--surface); text-align: left;
}
.estrella img { width: 100%; height: 100%; object-fit: cover; }
.estrella::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
}
.estrella .play {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(15, 18, 24, 0.55); display: grid; place-items: center;
}
.estrella .play .ic { width: 16px; height: 16px; }
.estrella .pie { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; }
.estrella .pie b { display: block; font-weight: 600; font-size: 15px; line-height: 1.2; }
.estrella .pie span { font-size: 14px; color: var(--ink); opacity: 0.85; }

/* Filtros "¿No sabes qué pedir?" */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--glass); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.chip .ic { width: 18px; height: 18px; }
.chip[aria-pressed='true'] { background: var(--coral); color: var(--on-coral); }

/* Barra de categorías (fija al hacer scroll) */
.categorias {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 16px; margin-top: 20px; background: var(--bg); border-bottom: 1px solid var(--outline);
}
.categorias::-webkit-scrollbar { display: none; }
.cat {
  flex: none; min-height: 40px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 15px;
  color: var(--muted);
}
.cat.activa { color: var(--ink); background: var(--glass); }

/* Platos */
.grupo h2 { margin: 24px 16px 4px; font-size: 20px; font-weight: 700; }
.plato {
  display: flex; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; align-items: flex-start;
  border-bottom: 1px solid var(--outline);
}
.plato:last-child { border-bottom: 0; }
.plato .txt { flex: 1; min-width: 0; }
.plato .nombre { font-weight: 600; font-size: 17px; line-height: 1.25; }
.plato .desc {
  margin-top: 4px; color: var(--muted); font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plato .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.precio { font-weight: 700; font-size: 16px; }
.casa { display: inline-flex; align-items: center; gap: 4px; color: var(--coral); font-weight: 600; font-size: 14px; }
.casa .ic { width: 16px; height: 16px; }
.etq-iconos { display: inline-flex; gap: 6px; color: var(--muted); }
.etq-iconos .ic { width: 16px; height: 16px; }
.plato .foto { flex: none; width: 96px; height: 96px; border-radius: var(--r); object-fit: cover; background: var(--surface); }
.plato.agotado .nombre, .plato.agotado .desc, .plato.agotado .precio, .plato.agotado .foto { opacity: 0.45; }
.en-pedido { display: inline-block; margin-top: 8px; color: var(--coral); font-weight: 600; font-size: 14px; }
.agotado-txt { font-weight: 600; font-size: 14px; color: var(--muted); }
.vacio { margin: 24px 16px; color: var(--muted); }

.pie-pagina { margin: 40px 16px 0; color: var(--muted); font-size: 14px; text-align: center; }
.pie-pagina b { color: var(--ink); font-weight: 700; }

/* Barra inferior: Menú, Pedir, Llamar mesero, Mi cuenta */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center;
  background: rgba(15, 18, 24, 0.96); border-top: 1px solid var(--outline);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-int { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 640px; height: var(--nav-h); }
.nav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.nav button .ic { width: 24px; height: 24px; }
.nav button.activo { color: var(--coral); }

/* Hoja de detalle */
.velo { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center; }
.hoja {
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--surface);
  border-radius: 24px 24px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  animation: sube 0.22s ease-out;
}
@keyframes sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.hoja .media { position: relative; }
.hoja .media img, .hoja .media video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px 24px 0 0; background: var(--raised); }
.cerrar {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15, 18, 24, 0.6); display: grid; place-items: center;
}
.hoja .cuerpo { padding: 20px 16px 0; }
.hoja .cuerpo.sin-media { padding-top: 64px; position: relative; }
.hoja h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }
.hoja .precio { display: block; margin-top: 6px; font-size: 20px; }
.hoja p { margin: 12px 0 0; color: var(--muted); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--glass); font-size: 14px; font-weight: 600; }
.etiqueta .ic { width: 16px; height: 16px; }

/* Video a pantalla completa */
.visor { position: fixed; inset: 0; z-index: 30; background: #000; display: flex; align-items: center; justify-content: center; }
.visor video { width: 100%; height: 100%; object-fit: contain; }
.visor .pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.visor .pie b { display: block; font-size: 22px; font-weight: 700; }
.visor .pie span { font-size: 17px; }
.visor .pie button {
  margin-top: 14px; min-height: 48px; padding: 0 18px; border-radius: var(--r); background: var(--glass); font-weight: 600;
}

/* Aviso corto */
.toast {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); z-index: 40;
  transform: translateX(-50%); padding: 12px 18px; border-radius: var(--r); background: var(--raised);
  font-weight: 600; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); max-width: calc(100% - 32px);
}

/* Pedido, llamar y mi cuenta (bloque 3) ------------------------------------------------- */
.barra-pedido {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 9;
  display: flex; justify-content: center; padding: 0 16px 10px; pointer-events: none;
}
.barra-pedido button {
  pointer-events: auto; width: 100%; max-width: 608px; min-height: 52px; padding: 0 16px; border-radius: var(--r);
  background: var(--coral); color: var(--on-coral); display: flex; align-items: center; gap: 12px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.barra-pedido button b { margin-left: auto; font-weight: 700; }
.barra-pedido[hidden] { display: none; }
.cuantos {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(15, 18, 24, 0.18); font-weight: 700; font-size: 15px;
}
body:has(.barra-pedido:not([hidden])) main { padding-bottom: calc(var(--nav-h) + 96px + env(safe-area-inset-bottom)); }

.boton.ancho { width: 100%; justify-content: center; }
.boton.chico { margin: 0; min-height: 40px; padding: 0 14px; font-size: 15px; }
.boton.secundario { background: var(--glass); color: var(--ink); }
.boton:disabled { opacity: 0.6; }
.boton .ic { width: 20px; height: 20px; }

.campo { display: block; margin-top: 18px; }
.campo > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.campo i { font-style: normal; color: var(--muted); font-weight: 500; }
.campo input {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--outline);
  background: var(--raised); color: var(--ink); font: inherit;
}
.campo input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }

.agregar { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.agregar .boton { margin: 0; flex: 1; }
.contador {
  flex: none; display: inline-flex; align-items: center; border-radius: 999px; background: var(--glass); height: 44px;
}
.contador button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.contador output { min-width: 22px; text-align: center; font-weight: 700; }
.agregar .contador { height: 48px; }
.agregar .contador button { width: 48px; height: 48px; }

.hoja-mesa .cuerpo.sin-media { padding-top: 24px; }
.hoja-mesa h3 { padding-right: 52px; }
.hoja-mesa .sub { margin: 4px 0 0; color: var(--muted); }
.vacio-hoja { text-align: center; padding: 28px 8px 8px; }
.vacio-hoja .ic { width: 44px; height: 44px; color: var(--muted); }
.vacio-hoja p { color: var(--muted); margin: 12px auto 0; max-width: 300px; }
.vacio-hoja p b { color: var(--ink); }
.cargando-hoja { height: 160px; margin-top: 16px; border-radius: var(--r); background: var(--raised); }

.lineas, .pedidos { list-style: none; margin: 16px 0 0; padding: 0; }
.lineas li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--outline); }
.lineas .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lineas b { font-weight: 600; }
.lineas .nota { color: var(--muted); font-size: 14px; }
.lineas .precio { font-size: 15px; }
.fila-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; font-size: 18px; }
.fila-total b { font-weight: 700; }
.fila { display: flex; justify-content: space-between; margin-top: 8px; }
.fila.tenue { color: var(--muted); }
.error { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 94, 98, 0.14); color: var(--ink); }
.hoja-mesa .boton.ancho { margin-top: 18px; }
.letra-chica { margin: 10px 0 0; color: var(--muted); font-size: 14px; text-align: center; }

.opciones { display: grid; gap: 12px; margin-top: 18px; }
.opcion {
  display: flex; gap: 14px; align-items: center; width: 100%; padding: 18px 16px; border-radius: var(--r);
  background: var(--raised); text-align: left;
}
.opcion .ic { width: 28px; height: 28px; color: var(--coral); }
.opcion span { display: flex; flex-direction: column; }
.opcion b { font-weight: 700; font-size: 17px; }
.opcion span span { color: var(--muted); font-size: 15px; }
.opcion.hecha { opacity: 1; }
.opcion.hecha .ic { color: var(--ink); }

.pedido { padding: 14px 0; border-bottom: 1px solid var(--outline); }
.estado-pedido { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.estado-pedido .ic { width: 18px; height: 18px; }
.estado-pedido time { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 14px; }
.pedido.por_confirmar .estado-pedido { color: var(--muted); }
.pedido.confirmado .estado-pedido, .pedido.listo .estado-pedido { color: var(--coral); }
.pedido.rechazado .item { text-decoration: line-through; color: var(--muted); }
.quien { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.item { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.item i { font-style: normal; color: var(--muted); }
.motivo { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.totales { margin-top: 4px; }

/* Tarjeta de acompañante sugerido */
.sugerencia {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 15;
  bottom: calc(var(--nav-h) + 74px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 608px; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; border-radius: var(--r); background: var(--raised);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); animation: sube 0.22s ease-out;
}
.sugerencia img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.sugerencia .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--muted); }
.sugerencia .txt b { color: var(--ink); font-size: 16px; font-weight: 600; }
.sugerencia .quitar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); flex: none; }

/* Calificar (bloque 6): 5 caras mientras espera la cuenta, luego publicar en Foodie --------- */
.calificar { margin-top: 18px; padding: 18px 16px; border-radius: var(--r); background: var(--raised); }
.calificar h4 { margin: 0; font-size: 18px; font-weight: 700; }
.calificar > p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.caras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 14px; }
.cara {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 72px; padding: 8px 0;
  border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.cara .ic { width: 36px; height: 36px; }
.cara[aria-pressed="true"] { background: var(--glass); color: var(--ink); }
.cara[aria-pressed="true"] .ic { color: var(--coral); }
.calificar textarea {
  width: 100%; min-height: 88px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; resize: vertical;
  border: 1px solid var(--outline); background: var(--bg); color: var(--ink); font: inherit;
}
.calificar textarea:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }
.calificar .boton.ancho { margin-top: 12px; }
.calificado { display: flex; align-items: center; gap: 12px; }
.calificado > .ic { width: 40px; height: 40px; color: var(--coral); }
.calificado div { flex: 1; min-width: 0; }
.calificado b { display: block; font-weight: 700; }
.calificado span { color: var(--muted); font-size: 14px; }
.calificado button { color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: underline; padding: 8px 0 8px 8px; }
.en-foodie { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--outline); }
.en-foodie p { margin: 0; color: var(--muted); font-size: 15px; }
.en-foodie p b { color: var(--ink); }
.en-foodie .sello { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink); font-weight: 600; font-size: 14px; }
.en-foodie .sello .ic { width: 18px; height: 18px; color: var(--coral); }
.en-foodie .boton { margin-top: 12px; text-decoration: none; }

/* A mitad de la comida (si el local lo activa) */
.mitad {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 15;
  bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 608px; padding: 14px 12px 12px 16px; border-radius: var(--r);
  background: var(--raised); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); animation: sube 0.22s ease-out;
}
.mitad .fila-mitad { display: flex; align-items: center; gap: 8px; }
.mitad b { flex: 1; font-weight: 700; }
.mitad .quitar { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.mitad .caras { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }

/* Estados: cargando, error */
.esqueleto { padding-bottom: 24px; }
.esq-portada { height: 200px; background: var(--surface); }
.esq-linea { height: 18px; margin: 16px 16px 0; width: 40%; border-radius: 8px; background: var(--surface); }
.esq-linea.ancha { height: 28px; width: 65%; }
.esq-fila { height: 96px; margin: 20px 16px 0; border-radius: var(--r); background: var(--surface); }
.estado { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.estado .ic { width: 48px; height: 48px; color: var(--muted); }
.estado h1 { margin: 16px 0 6px; font-size: 22px; }
.estado p { margin: 0; color: var(--muted); max-width: 320px; }
.boton {
  margin-top: 20px; min-height: 48px; padding: 0 22px; border-radius: var(--r);
  background: var(--coral); color: var(--on-coral); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
.aviso { padding: 24px 16px; }
.marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.marca i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hoja, .sugerencia, .mitad { animation: none; }
}