/* ===================================================================
   Optipos — Tienda pública.

   La marca que manda aquí no es la nuestra: es la del local. De ahí que
   casi todo cuelgue de dos variables que pone el servidor en cada página
   —el color del local y su tema, claro u oscuro— y que lo de Optipos se
   quede en el pie.

   Se escribe a mano y sin Tailwind, al revés que el TPV y el Admin: son
   cuatro pantallas, las abre gente por la calle y cada kilobyte de más se
   paga en el primer pintado.
   =================================================================== */

/* ── Fuente ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────── */
/* De todo esto, el local solo pone dos cosas: su color de marca y el fondo, que llega en el
   atributo style de la página. Lo demás sale de esos dos.
   Los grises intermedios —tarjeta, borde, texto secundario— no son grises fijos: son mezclas
   del fondo con la letra, así que en un fondo verde salen verdosos y en uno crema, cálidos,
   en vez de quedarse en un gris pegado encima. Las proporciones están también en
   Optipos.Domain/Common/Palette.cs, que es quien comprueba al guardar que sobre ese fondo se
   lee; si se tocan aquí, hay que tocarlas allí. */
.shop {
  /* La marca del local, en tres papeles. El de relleno es el color tal cual; los otros dos
     los calcula el servidor —Optipos.Domain/Common/Palette.cs— porque dependen de si la
     marca es clara u oscura y del fondo de este local, y eso no se puede decidir en CSS.
       · --primary          rellena: botones, la categoría en la que estás.
       · --primary-texto    la letra que va ENCIMA de ese relleno. Era blanca a fuego, y
                            encima de un amarillo la letra blanca no está.
       · --primary-legible  la marca cuando le toca ser letra sobre el fondo —el título de
                            «Destacados», el botón de contorno—, corregida hasta que se lee. */
  --primary: #1a1a1a;
  --primary-texto: #ffffff;
  --primary-legible: var(--primary);

  --fondo: #ffffff;
  --texto: #16181d;

  --fondo-2: color-mix(in srgb, var(--fondo) 94%, var(--texto));
  --linea:   color-mix(in srgb, var(--fondo) 88%, var(--texto));
  --texto-2: color-mix(in srgb, var(--texto) 78%, var(--fondo));

  --sombra: 0 1px 2px rgba(16, 18, 22, .06), 0 8px 24px -16px rgba(16, 18, 22, .3);

  --ok: #1f7a4d;
  --mal: #b3261e;

  background: var(--fondo);
  color: var(--texto);
  min-height: 100dvh;
}

/* El tema ya no se elige: lo deduce el servidor del color de fondo. Lo único que cambia por
   aquí es la letra —y con ella las tres mezclas de arriba— y los colores de aviso, que en
   oscuro tienen que ser más claros para leerse. */
.shop[data-theme="dark"] {
  --fondo: #16181d;
  --texto: #f2f1ee;

  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -16px rgba(0, 0, 0, .8);

  --ok: #5ec98f;
  --mal: #ff8f85;
}

/* ── Base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* El salto a una categoría se desliza en vez de teletransportar, igual que en la carta
   digital: al pulsar «Bocadillos» hay que ver que la página se mueve hacia allí, o no se
   sabe si has ido a otro sitio. Lo respeta el ajuste del sistema, más abajo. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--primary, #1a1a1a); outline-offset: 2px; border-radius: 6px; }

.hint { color: var(--texto-2); font-size: 14px; line-height: 1.5; }

/* Contenedor común: una columna estrecha, que esto se lee en un móvil. */
.shop > * { max-width: 760px; margin-inline: auto; padding-inline: 20px; }

/* ── Páginas de hueco (error, vacíos) ───────────────────────────── */
/* Con una baldosa delante: un hueco explicado con solo texto parece una página rota, y la
   mitad de estas pantallas las ve alguien que ha escaneado un QR y no sabe si el fallo es
   suyo o del bar. */
.empty { padding-block: 56px 64px; display: grid; gap: 12px; justify-items: start; }
.empty h1 { font-size: 24px; letter-spacing: -.01em; }
.empty h2 { font-size: 22px; letter-spacing: -.01em; }
.empty .empty-text, .empty p { color: var(--texto-2); font-size: 15px; line-height: 1.55; }
.empty a { color: var(--primary-legible); text-decoration: underline; text-underline-offset: 3px; }

.empty-ico {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo-2); border: 1px solid var(--linea); color: var(--texto-2);
}
.empty-ico.bad {
  background: color-mix(in srgb, var(--mal) 10%, transparent);
  border-color: color-mix(in srgb, var(--mal) 25%, transparent);
  color: var(--mal);
}
.empty-ico svg { width: 22px; height: 22px; display: block; fill: currentColor; }

/* Las salidas de un hueco: volver a la carta, llamar al local. */
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.empty-actions a { text-decoration: none; }

/* ── Cabecera del cliente y lista de locales ────────────────────── */
.shop-head {
  padding-block: 32px 20px; display: grid; gap: 6px; justify-items: start;
  border-bottom: 1px solid var(--linea);
}
/* El logo del cliente en una baldosa, y una baldosa igual con un icono cuando no lo ha
   subido: sin ella la página empieza con un título suelto en medio del blanco. */
.shop-head .badge {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--fondo-2); border: 1px solid var(--linea); color: var(--primary-legible);
}
.shop-head .badge svg { width: 24px; height: 24px; display: block; fill: currentColor; }
.shop-head .badge img { width: 100%; height: 100%; object-fit: contain; }
.shop-head h1 { font-size: 28px; letter-spacing: -.02em; }

.locations { display: grid; gap: 12px; padding-block: 16px 40px; }

.location {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 16px;
  border: 1px solid var(--linea); border-radius: 16px;
  background: var(--fondo);
  box-shadow: var(--sombra);
  transition: border-color .15s ease, transform .15s ease;
}
.location:hover { border-color: var(--primary); transform: translateY(-1px); }
/* El cerrado se apaga entero en vez de tachar el estado: se sigue pudiendo entrar a ver la
   carta, pero se ve de un vistazo cuál de los dos locales está sirviendo. */
.location.closed { opacity: .72; }
.location.closed:hover { opacity: 1; }

.location-text { display: grid; gap: 6px; }
.location h2 { font-size: 18px; }
.location .address { color: var(--texto-2); font-size: 14px; }

/* La flecha, en un círculo con el color del local. Es lo que dice «se entra aquí». */
.location .arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-texto);
}
.location.closed .arrow { background: transparent; border: 1px solid var(--linea); color: var(--texto-2); }
.location .arrow svg { width: 18px; height: 18px; display: block; fill: currentColor; }

.status, .modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* El estado, con punto y en negrita: el color solo no vale —hay quien no lo distingue— y
   una palabra en negrita con un punto delante se lee de lejos. */
.state {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 13px; font-weight: 700;
}
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state.open { color: var(--ok); }
.state.closed { color: var(--mal); }
.state-note { font-size: 13px; color: var(--texto-2); }

.chip {
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--texto-2);
}

/* ── Cabecera del local ─────────────────────────────────────────── */
/* Con portada, el nombre va encima de la foto: es la primera pantalla que ve alguien que
   acaba de escanear un QR en la puerta, y lo que tiene que reconocer es el sitio, no leer
   un título sobre blanco. El degradado no es decoración —sin él, un nombre claro sobre una
   foto clara no se lee— y por eso va de negro sólido abajo a nada arriba. */
.hero { position: relative; padding-inline: 0; }
/* La portada no se recorta, y esto ya se decidió una vez: lo que sube un bar no suele ser
   una foto sino su logo, apaisado y con el nombre escrito, y un recorte al centro le
   arranca media palabra —del de Manolo se leía «ANOL»—. La altura la pone la proporción de
   la imagen; el tope solo entra con las verticales, para que no se coman la pantalla antes
   de que se vea la carta. Lo que sobre a los lados es el fondo de la página. */
.hero .cover {
  display: block; width: 100%;
  height: auto; max-height: min(40vh, 320px);
  object-fit: contain;
}
.hero .veil {
  position: absolute; inset: auto 0 0 0; height: 78%;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .28) 55%, transparent);
}
.hero .hero-text { position: absolute; inset: auto 0 0 0; padding: 0 20px 16px; color: #fff; }
.hero .hero-text h1 { font-size: 29px; line-height: 1.1; letter-spacing: -.02em; }
.hero .hero-text .address { margin-top: .25rem; font-size: 14px; color: rgba(255, 255, 255, .82); }
.hero .hero-text .address a { text-decoration: underline; text-underline-offset: 3px; }

/* La vuelta a la lista de locales, flotando sobre la foto. */
.hero .back {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: rgba(0, 0, 0, .45); color: #fff;
}
.hero .back:hover { background: rgba(0, 0, 0, .6); color: #fff; }

/* Sin portada no hay foto sobre la que escribir, así que el mismo bloque se pone en pie. */
.location-head { padding-block: 24px 8px; display: grid; gap: 8px; }
.location-head h1 { font-size: 28px; letter-spacing: -.02em; }
.location-head .address { color: var(--texto-2); font-size: 14px; }
.location-head .back { margin-bottom: 4px; }

/* La franja de estado: abierto, cuánto tarda y el mínimo. Va debajo de la portada y no
   encima porque cambia sola —cierra a las 16:30— y ahí no tapa el nombre. */
.status-bar {
  display: flex; align-items: center; gap: 10px;
  padding-block: 12px; border-bottom: 1px solid var(--linea);
}
.status-bar .sep { width: 1px; height: 14px; background: var(--linea); }
.status-bar .min { margin-left: auto; }

/* ── Avisos ─────────────────────────────────────────────────────── */
/* El recuadro va dentro del margen de la página, no pegado a los bordes de la pantalla.
   Antes era hijo directo de .shop, y ese contenedor mete su margen como padding: el borde
   se dibujaba por fuera, tocando los cantos. Ahora el margen lo pone la banda y el recuadro
   vive dentro. */
.band { padding-block: 8px 4px; }

.notice {
  margin-block: 0 12px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: var(--fondo-2); color: var(--texto-2);
  font-size: 14px; line-height: 1.5;
}
.notice.error {
  color: var(--mal);
  border-color: color-mix(in srgb, var(--mal) 40%, transparent);
  background: color-mix(in srgb, var(--mal) 8%, transparent);
}

/* ── Carta ──────────────────────────────────────────────────────── */
.category-nav {
  display: flex; gap: 8px; overflow-x: auto; padding-block: 12px;
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a {
  white-space: nowrap; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--texto-2);
}
.category-nav a:hover { border-color: var(--primary); color: var(--texto); }
/* La de destacados va marcada: es la que el local quiere que se pulse. */
.category-nav a.featured-link { border-color: var(--primary); color: var(--primary-legible); font-weight: 700; }
/* Y la de la categoría en la que estás, rellena. Lo pone menu-nav.js al bajar. */
.category-nav a.active {
  background: var(--primary); border-color: var(--primary); color: var(--primary-texto); font-weight: 700;
}

.menu { padding-block: 20px 96px; display: grid; gap: 26px; }
/* min-width: 0 en los dos, y no es un adorno: el ancho mínimo de una celda de rejilla es el
   de su contenido, así que la fila de destacados —dos fichas de 236 que se deslizan— hacía
   crecer su categoría hasta 482 px y con ella la página entera, que en un móvil se salía
   por la derecha. Con esto, la fila se queda dentro y se desliza, que es lo suyo. */
.menu > .category { min-width: 0; }
.category > .products { min-width: 0; }

/* El título de cada tramo con una raya que llega hasta el borde: separa sin meter otra
   caja, que la carta ya son cajas. En destacados la raya lleva el color del local. */
.category-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.category-head h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-2); scroll-margin-top: 64px;
}
.category-head .rule { flex: 1; height: 1px; background: var(--linea); }
.category-head .swipe { font-size: 12px; font-weight: 600; color: var(--texto-2); }

.featured .category-head h2 { color: var(--primary-legible); }
.featured .category-head .rule { background: color-mix(in srgb, var(--primary) 35%, var(--linea)); }

.products { display: grid; gap: 10px; }

/* ── Ficha de producto ──────────────────────────────────────────── */
.product {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'txt img' 'btn img';
  gap: 4px 16px; align-items: start;
  padding: 14px;
  border: 1px solid var(--linea); border-radius: 16px;
  background: var(--fondo);
}
.product-text { grid-area: txt; display: grid; gap: 5px; }
.product h3 { font-size: 17px; }
.product .desc { color: var(--texto-2); font-size: 14px; line-height: 1.45; }
/* Los extras de la carta digital: se leen, no se eligen, así que van discretos. */
.product .extras { color: var(--texto-2); font-size: 13px; }
.product-img { grid-area: img; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }

/* El precio y el botón en la misma línea: son la pregunta y la respuesta. */
.product-buy { grid-area: btn; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.product .price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.product .add {
  font: inherit; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--primary); background: transparent; color: var(--primary-legible);
}
.product .add:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-texto); }
.product .add svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ── Alérgenos ──────────────────────────────────────────────────── */
/* Con su dibujo y su nombre. Solo el nombre en cursiva —como estaba— se lee como una nota
   al pie; esto es de lo poco que alguien busca de verdad en una carta, y a veces con prisa. */
.allergens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.allergen {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 3px 9px 3px 4px; border-radius: 999px;
  background: var(--fondo-2); color: var(--texto-2);
  font-size: 12px; font-weight: 600;
}
.allergen .ico {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linea);
}
.allergen .ico svg, .allergen .ico img { width: 16px; height: 16px; display: block; }

/* ── Destacados: en fila y a deslizar ───────────────────────────── */
/* Lo que el local quiere que se vea primero no puede pedir que se baje a buscarlo. En fila
   caben tres de un vistazo y se sabe que hay más; en lista, el tercero ya está fuera de
   pantalla. Los mismos productos siguen abajo, en su categoría. */
.featured .products {
  display: flex; gap: 10px; overflow-x: auto;
  padding-bottom: 4px; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.featured .products::-webkit-scrollbar { display: none; }

.featured .product {
  flex: none; width: 236px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--linea));
}
.featured .product-img { width: 100%; height: 132px; border-radius: 0; }
.featured .product-text { padding: 12px 12px 0; }
.featured .product-buy { padding: 8px 12px 12px; margin-top: auto; }
/* En la ficha ancha el botón se va al canto derecho; en la lista va pegado al precio, que
   es lo que se está mirando. */
.featured .product .add { margin-left: auto; }
/* Aquí el botón va relleno: es la fila que el local paga por destacar. */
.featured .product .add:not(.pick) {
  background: var(--primary); border-color: var(--primary); color: var(--primary-texto);
}

/* ── Barra del carrito ──────────────────────────────────────────── */
/* Va pegada al borde de abajo de la pantalla, así que ocupa todo el ancho: con el
   «max-width: 760» que .shop reparte a sus hijos quedaba como una isla en medio, con la
   línea de arriba cortada y la página asomando por los lados. La columna la hace el de
   dentro, para que el texto y el botón caigan sobre la carta y no en los extremos. */
.cart-bar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  max-width: none; padding-inline: 0;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 30px -20px rgba(0, 0, 0, .6);
}
.cart-bar-inner {
  max-width: 760px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
.cart-bar-text { display: grid; }
.cart-bar-text strong { font-size: 15px; }
.cart-bar-text span { color: var(--texto-2); font-size: 14px; font-variant-numeric: tabular-nums; }

.btn {
  font: inherit; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--primary); color: var(--primary-texto);
}
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }
/* El de contorno, para lo que acompaña a la acción principal. */
.btn.ghost { background: transparent; border: 1px solid var(--linea); color: var(--texto-2); }
.btn.brand-ghost { background: transparent; border: 1px solid var(--primary); color: var(--primary-legible); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.wide { width: 100%; }

/* El mismo botón cuando es un enlace: un <a> no es de bloque ni centra su texto. */
a.btn { display: inline-block; text-align: center; }

/* Enviando el pedido. La página se va entera en cuanto el servidor conteste, así que esto
   no es un adorno: entre el clic y el cambio de página puede haber unos segundos con la
   ventana de datos todavía puesta, y sin señal se pulsa otra vez. */
.btn.sending { position: relative; color: transparent; pointer-events: none; }
.btn.sending::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Quien no quiera movimiento en pantalla se queda sin giro, pero no sin aviso. */
@media (prefers-reduced-motion: reduce) {
  .btn.sending::after { animation: none; }
}

/* ── Hojas (dialog) ─────────────────────────────────────────────── */
.sheet {
  /* 100% y no 100vw: la unidad de ventana incluye la barra de scroll, así que en una
     ventana estrecha la hoja se pasaba de ancho por esos pocos píxeles. */
  width: min(560px, 100%);
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  border: none; border-radius: 20px 20px 0 0;
  background: var(--fondo); color: var(--texto);
  box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .5);
  overflow-y: auto;
}
.sheet::backdrop { background: rgba(0, 0, 0, .45); }

/* El título y su cierre en la misma línea: el aspa suelta en una fila para ella sola
   robaba una franja de la hoja, que es lo que menos sobra en un móvil. */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { font-size: 21px; }
.sheet-head .sub { margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.sheet-close button {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  border: none; background: var(--fondo-2); color: var(--texto-2);
}
.sheet-close button:hover { color: var(--texto); }

.sheet label { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
/* Se listan los tipos que NO son campo de escribir en vez de los que sí: un <input> sin
   type es de texto, y así lo escribe Blazor —InputText no pone el atributo—. Con
   input[type="text"] el campo del nombre se quedaba sin vestir, que es justo lo que pasó. */
.sheet input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.sheet textarea {
  font: inherit; font-weight: 400;
  padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--linea); background: var(--fondo-2); color: var(--texto);
}
/* El aro al escribir, solo en los campos de escribir: con «.sheet input» a secas también
   entraban el redondel y la casilla, y al marcarlos les salía un cuadrado alrededor. */
.sheet input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
.sheet textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.sheet textarea { resize: vertical; }
.sheet fieldset { border: none; padding: 0; margin: 0 0 14px; }
.sheet legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }

/* Los extras de un producto: casillas normales, que aquí se marca de una en una.
   Van con «label.option» y no con «.option» a secas porque «.sheet label» —que las pone en
   rejilla para los campos de escribir— gana por especificidad y dejaba la casilla encima
   del texto en vez de a su lado. */
.sheet label.option {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 6px;
  border: 1px solid var(--linea); border-radius: 12px;
  font-weight: 400; cursor: pointer;
}
.option span:nth-child(2) { flex: 1; }
.option input, .radio-option input { accent-color: var(--primary); width: 18px; height: 18px; }

/* El modo de entrega, en dos fichas grandes en vez de dos redondeles: es una decisión de
   dos opciones y se toma con el pulgar, no con la punta del dedo. */
.modes-radio .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet label.radio-option {
  display: grid; gap: 2px; align-content: start;
  padding: 12px; margin: 0;
  border: 1px solid var(--linea); border-radius: 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.radio-option .note { font-size: 12px; font-weight: 400; color: var(--texto-2); }
/* La elegida se marca con el color del local. :has mira la casilla de dentro, que va
   escondida: el redondel no aporta nada cuando la ficha entera ya es el botón. */
.radio-option input { position: absolute; opacity: 0; pointer-events: none; }
.sheet label.radio-option:has(input:checked) {
  border: 1.5px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Lo que hay que saber antes de pulsar: cómo se paga y qué pasa después. */
.note-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--fondo-2); color: var(--texto-2);
  font-size: 13px; line-height: 1.5;
  margin-bottom: 14px;
}
.note-box svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: var(--primary-legible); }
.note-box strong { color: var(--texto); }

/* ── Líneas del carrito y del pedido ────────────────────────────── */
.lines { display: grid; gap: 12px; margin-bottom: 16px; }
.lines li {
  display: flex; align-items: start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.lines li:last-child { border-bottom: none; padding-bottom: 0; }
.lines .name { font-size: 15px; font-weight: 600; }
.lines .extras, .lines .note { font-size: 13px; }
.lines .note { font-style: italic; }

/* Las dos columnas de la derecha se reservan su sitio en vez de colocarse donde acabe el
   nombre del plato: cada línea es una caja distinta —no una rejilla común— y sin anchos
   fijos los botones de cantidad caen en un punto distinto en cada fila. El importe se
   alinea a la derecha para que las comas queden en la misma columna. */
.lines li > div { flex: 1; min-width: 0; }
.lines .amount {
  flex: none; min-width: 72px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600;
}
/* Tres cifras de sitio: pasar de 9 unidades no debe mover los botones. */
.lines .qty { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; }

.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.stepper button {
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--linea); background: transparent; color: var(--texto);
}
/* El de sumar lleva el color del local; el de restar no, que no es lo que se busca. */
.stepper button:last-child { border-color: var(--primary); color: var(--primary-legible); }

/* Las cuentas, en su propia caja: es el número que se mira antes de pulsar. */
.totals {
  display: grid; gap: 6px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: 14px; background: var(--fondo-2);
}
.totals > div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.totals > div:not(.total) { font-size: 14px; color: var(--texto-2); }
.totals .total { font-size: 18px; font-weight: 700; }

/* ── Seguimiento ────────────────────────────────────────────────── */
/* La cabecera va sobre fondo tramado y con su propio borde: esta pantalla se deja abierta
   y se mira de reojo cada pocos minutos, así que el estado tiene que encontrarse solo. */
/* El padding propio y ni una gota de margen: .shop centra la columna con margin-inline
   auto, y tocar el margen aquí —aunque fuera para estirar el fondo— la descuelga a la
   izquierda. El fondo ya llega a los bordes de la columna, que es lo que se buscaba. */
.tracking-head {
  padding: 26px 20px 20px;
  display: grid; gap: 6px;
  background: var(--fondo-2); border-bottom: 1px solid var(--linea);
}
.tracking-head .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tracking-head h1 { font-size: 28px; letter-spacing: -.02em; }
.tracking-head .mode {
  font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--primary); color: var(--primary-texto); white-space: nowrap;
}
.status-big { font-size: 18px; font-weight: 700; margin-top: 2px; }
.status-big.ok { color: var(--ok); }
/* «mal» y no «bad»: es la clase que escribe la página, y con «bad» un pedido rechazado se
   pintaba del color del texto normal. */
.status-big.mal { color: var(--mal); }

/* Por dónde va, en cuatro tramos. Un pedido que solo dice «preparándose» no cuenta si eso
   es el principio o el final; cuatro rayas sí. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.steps li { display: grid; gap: 6px; }
.steps .bar { height: 4px; border-radius: 999px; background: var(--linea); }
.steps span { font-size: 11px; font-weight: 600; color: var(--texto-2); }
.steps .done .bar { background: var(--primary); }
.steps .done span { color: var(--primary-legible); font-weight: 700; }
/* Rechazado o anulado: el camino se corta y no se pinta de color de marca. */
.steps.stopped .done .bar { background: var(--mal); }
.steps.stopped .done span { color: var(--mal); }

.card {
  margin-bottom: 16px; padding: 16px 18px;
  border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo);
}
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); margin-bottom: 12px; }
.card p { line-height: 1.5; }
.card a { text-decoration: underline; text-underline-offset: 3px; }
.card .total-row {
  display: flex; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea);
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.card-actions a { text-decoration: none; font-size: 14px; padding: 9px 14px; }

/* El resguardo: la dirección es lo único que hay entre el cliente y su pedido, así que se
   enseña entera y con un botón para copiarla, no como un párrafo que hay que seleccionar. */
.receipt { background: var(--fondo-2); display: grid; gap: 10px; }
.receipt .url {
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.receipt .btn { width: 100%; font-size: 14px; padding: 11px 14px; }

/* margin-block y no el atajo «margin»: .shop centra la columna con margin-inline: auto y
   el atajo lo pisaría, dejando esto pegado a la izquierda de la pantalla. */
.order-again { margin-block: 4px 20px; text-align: center; }
.order-footer { padding-bottom: 40px; text-align: center; font-size: 13px; }

/* ── Pie ────────────────────────────────────────────────────────── */
/* La columna se la da .shop, como a los demás: el pie va dentro del tema del local. */
.footer {
  padding-block: 24px calc(24px + env(safe-area-inset-bottom));
  color: var(--texto-2); font-size: 13px; text-align: center;
}
.footer a { text-decoration: underline; text-underline-offset: 3px; }

/* El hueco para la barra del carrito solo donde hay barra: en la carta digital no se pide,
   y reservarlo allí es un vacío al final de la página que no tapa nada. */
.shop:has(.cart-bar) .footer { padding-bottom: 100px; }

@media (max-width: 520px) {
  .product-img { width: 76px; height: 76px; }
  .featured .product-img { width: 100%; }
  .location-head h1, .shop-head h1, .tracking-head h1, .hero .hero-text h1 { font-size: 25px; }
  /* En destacados, la ficha no puede ocupar la pantalla entera: la siguiente tiene que
     asomar, o nadie sabe que hay más. */
  .featured .product { width: 74vw; max-width: 236px; }

  /* En un móvil estrecho, lo que reservan la cantidad y el importe se lo quitan al nombre
     del plato, que acaba partido en tres líneas. Se aprieta un poco: los botones siguen
     pasando de sobra los 24 px que hay que poder tocar con el pulgar. */
  .stepper { gap: 4px; }
  .stepper button { width: 27px; height: 27px; }
  .lines .amount { min-width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .location { transition: none; }
}