:root{
  --teal:#0a5048; --teal-dark:#073a34; --green:#1faa5d; --accent:#0a6b5f; --cta:#0c8048;
  --bg:#f4f6f5; --card:#fff; --ink:#16211e; --muted:#5b6b66; --line:#e3e9e7;
  --bad:#c8453f; --ok:#0a5c3a; --warn:#b07400;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{margin:0;height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100%;
  /* el body crece con el contenido (sin height:100% fijo) para que este colchon
     reserve hueco real bajo el ultimo producto y la cartbar fija no lo tape;
     env() anade el safe-area del notch/home-indicator en moviles */
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.topbar{
  position:sticky; top:0; z-index:10; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
/* Marca: nombre completo cuando no hay pedido (landing/carta). Con un pedido activo el
   topbar pasa a .compact y se oculta el nombre dejando solo el logo 🍔, para que el modo y
   el chip "Mi pedido" (más grande) quepan siempre sin recortes ni desbordamiento, incluso en
   "Para recoger" (antes la pill larga desplazaba y dejaba fuera el botón Salir, ya eliminado). */
.topbar .brand{font-weight:700; font-size:18px; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar.compact .brand-name{display:none;}
/* indicador de modo: pill sólida de alto contraste (antes era translúcida y casi invisible) */
.mode-tag{
  background:#fff; color:var(--teal);
  padding:5px 12px; border-radius:999px; flex:0 0 auto;
  font-size:14px; font-weight:800; letter-spacing:.2px; white-space:nowrap;
}
.mode-tag.mode-remoto{background:#ffe7b3; color:#7a4b00;}
main{max-width:560px; margin:0 auto; padding:16px 14px;}

/* botones */
.btn-primary,.btn-secondary,.btn-ghost{
  border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; padding:14px 16px; width:100%;
}
.btn-danger{
  border:none; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; padding:14px 16px; width:100%;
  background:#c8453f; color:#fff;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-secondary{background:#fff; color:var(--accent); border:1.5px solid var(--accent);}
.btn-ghost{background:transparent; color:var(--muted); font-weight:500;}
.btn-row{display:flex; gap:10px; margin-top:10px;}
.btn-row > *{flex:1;}

/* landing */
.landing{display:flex; flex-direction:column; gap:14px; margin-top:8vh; text-align:center;}
.landing h1{font-size:22px; margin:0 0 4px;}
.landing p{color:var(--muted); margin:0 0 18px;}
.landing .big{padding:22px; font-size:18px;}

/* carta */
.cat{margin-bottom:18px;}
.cat h2{font-size:19px; margin:0 0 8px; display:flex; align-items:center; gap:8px;}
.product{
  background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
/* Legibilidad de la carta (P25): tamaños cómodos sin gafas. El precio pasa de gris
   pequeño a negro/negrita 17px — era "lo primero que desaparece" para vista cansada. */
.product .pname{font-weight:700; font-size:22px; line-height:1.25;}
.product .pdesc{color:var(--muted); font-size:14px; line-height:1.35; margin:2px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.product .pprice{color:var(--ink); font-size:17px; font-weight:700;}
.langbar{display:flex; gap:6px; margin:0 0 10px;}
.qty{display:flex; align-items:center; gap:10px;}
.qty button{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--accent); background:#fff;
  color:var(--accent); font-size:20px; font-weight:700; line-height:1; cursor:pointer;
}
.qty .n{min-width:20px; text-align:center; font-weight:700; font-size:17px;}
.addbtn{
  border:1.5px solid var(--accent); background:#fff; color:var(--accent); border-radius:10px;
  padding:8px 14px; font-weight:600; cursor:pointer;
}
/* "Añadir" como acción primaria del catálogo: relleno verde vivo de marca.
   Antes era ghost (borde+texto) y se leía como secundario, empujando a la gente
   a tocar la barra "Confirmar" antes de tiempo. NO se aplica a "Cerrar" (que
   comparte .addbtn) para que el cancelar siga leyéndose como secundario.
   #0c8048 mantiene ~5:1 de contraste con el texto blanco (legible a pleno sol). */
.addbtn.addbtn-go{
  background:var(--cta); color:#fff; border-color:var(--cta); font-weight:700;
}

/* cartbar */
.cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto; box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.cartbar[hidden] { display: none; }
.cartbar-info{font-weight:600;}
.cartbar .btn-primary{width:auto; padding:12px 22px;}

/* formulario remoto */
.form label{display:block; font-weight:600; margin:14px 0 6px;}
.form input{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:10px; font-size:16px; background:#fff;
}
.form .hint{color:var(--muted); font-size:13px; margin-top:4px;}

/* estado */
.estado{text-align:center;}
.numero-box{background:var(--teal); color:#fff; border-radius:18px; padding:24px; margin:8px 0 18px;}
.numero-box .label{font-size:14px; opacity:.85;}
.numero-box .num{font-size:64px; font-weight:800; line-height:1;}
.pickup{font-size:16px; margin:6px 0 18px; color:var(--ink);}
.ronda{
  background:var(--card); border-radius:12px; padding:12px 14px; margin-bottom:10px; text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.ronda .head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.badge{font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}
.badge.nuevo{background:#fff4cc; color:var(--warn);}
.badge.en_preparacion{background:#d6ece8; color:#0a5c54;}
.badge.listo{background:#d7f5e3; color:var(--ok);}
.ronda .li{display:flex; justify-content:space-between; font-size:14px; color:var(--ink); padding:2px 0;}
.total-cuenta{font-size:18px; font-weight:800; margin:14px 0;}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:50;
  background:#111; color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; max-width:90vw;
}
.spinner{text-align:center; color:var(--muted); padding:40px;}

/* punto de la carne (burgers/premium) */
.product.has-points{ flex-direction:column; align-items:stretch; }
.product.has-points .phead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.points{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.points-hint{ width:100%; font-size:15px; color:var(--muted); margin-bottom:2px; }
.chip{ padding:9px 15px; border:1.5px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:17px; }
.chip-default{ border-color:var(--accent); color:var(--accent); font-weight:600; }
.plines{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.pline{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f8fafc; border-radius:8px; padding:4px 8px; }
.pline-name{ font-size:17px; color:#334155; font-weight:600; }

.estacion { padding: 6px 10px; margin: 4px 0; border-radius: 8px; background: #f1f1f1; font-size: 14px; }
.estacion.servida, .estacion.lista { background: #d8f5d8; }
.estacion.en_preparacion { background: #fff3cd; }
.banner-closed{
  background:#fff8e6; border:1px solid #f0dca0; border-left:6px solid #e6a100;
  color:#5b4a00; border-radius:12px; padding:12px 14px; margin:0 0 14px;
  white-space:pre-line; line-height:1.4; text-align:left;
}
.banner-closed.big{ text-align:center; font-weight:700; }
.btn-primary[disabled], .btn-secondary[disabled]{ opacity:.5; filter:grayscale(.4); cursor:not-allowed; }
.privacy-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}
.privacy-note a {
  color: #0c7a6c;
  text-decoration: underline;
}
/* botón volver (chip compacto) */
.btn-back{
  display:inline-flex; align-items:center; gap:6px;
  width:auto; padding:8px 14px;
  background:#fff; color:var(--accent);
  border:1.5px solid var(--accent); border-radius:999px;
  font-size:14px; font-weight:600; cursor:pointer;
}

/* chip "Mi pedido" en cabecera (más grande y prominente; ocupa el hueco del antiguo Salir) */
.myorder{ border:none; border-radius:999px; padding:9px 16px; font-size:16px; font-weight:800; cursor:pointer; color:#fff; flex:0 0 auto; white-space:nowrap; }
.myorder.mio-prep{ background:#0a5f54; }
.myorder.mio-listo{ background:#1f9d55; animation:mioPulse 1s ease-in-out infinite; }
@keyframes mioPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.7; } }

/* --- extras / configurador --- */
.chip.chip-on{ background:var(--teal); color:#fff; border-color:var(--teal); font-weight:700; }
.extras{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
/* Campo de nota: con su propia etiqueta (igual que "¿Cómo la quieres?" y "Extras")
   para que se entienda como opción y no como un cuadro suelto. La etiqueta queda
   visible mientras se escribe (a diferencia de meterla solo en el placeholder). */
.noteline{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.noteinp{
  width:100%; box-sizing:border-box; padding:9px 12px; font-size:15px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.noteinp:focus{ outline:none; border-color:var(--accent); }
.addrow{ margin-top:10px; }
.addbtn.addcombo{ width:100%; }

/* ---------- PWA: "Guardar en tu móvil" ---------- */
.oculto{ display:none !important; }

.install-cta{
  display:flex; align-items:center; gap:12px; width:100%;
  margin:22px 0 0; padding:14px 16px; text-align:left; cursor:pointer;
  background:var(--teal-soft, #e6f0ee); color:var(--teal-dark);
  border:1.5px dashed var(--accent); border-radius:14px;
}
.install-cta .ic{ font-size:26px; line-height:1; }
.install-cta .tx{ display:flex; flex-direction:column; }
.install-cta .tx b{ font-size:16px; }
.install-cta .tx small{ color:var(--muted); font-size:13px; margin-top:2px; }
.install-cta:active{ transform:scale(.99); }

.install-modal{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end;
  justify-content:center; background:rgba(16,33,30,.55); padding:0;
}
.install-card{
  background:#fff; width:100%; max-width:480px; border-radius:18px 18px 0 0;
  padding:22px 22px 30px; position:relative; box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
.install-card h3{ margin:0 0 14px; color:var(--teal-dark); font-size:20px; }
.install-card ol{ margin:0; padding-left:22px; }
.install-card ol li{ font-size:16px; line-height:1.5; margin-bottom:10px; }
.install-card .install-fin{ margin:14px 0 0; color:var(--muted); font-size:14px; }
.install-x{
  position:absolute; top:10px; right:12px; width:34px; height:34px;
  border:none; background:#eef2f1; color:var(--ink); border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer;
}
@media(min-width:520px){
  .install-modal{ align-items:center; }
  .install-card{ border-radius:18px; }
}

/* Pago Bizum (cliente) */
.pago-box { background:#fff; border-radius:14px; padding:16px; margin-top:6px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pago-total { font-size:1.2rem; text-align:center; margin-bottom:8px; }
.pago-instru { font-size:.95rem; color:#333; text-align:center; margin:8px 0 14px; }
.pago-dato { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 12px; background:#f4f4f4; border-radius:10px; margin-bottom:8px; }
.pago-dato .pago-label { color:#666; font-size:.85rem; }
.pago-dato b { font-size:1.15rem; letter-spacing:.5px; flex:1; }
.pago-falta { color:#a33; font-size:.9rem; }
.btn-copia { background:#0f5c52; color:#fff; border:none; border-radius:8px; padding:8px 12px; font-weight:600; cursor:pointer; }
.pago-aviso { background:#fff7e6; border:1px solid #f0d9a0; border-radius:10px; padding:12px; text-align:center; margin:8px 0; }
.pago-aviso.ok { background:#eef7f0; border-color:#bfe3c7; }
.gracias { text-align:center; }
.numero-box.pagado { background:#0f5c52; }
.gracias-msg { font-size:1.1rem; margin:14px 0; }