/*
 * Autopedido en mesa — hoja de estilo de la pantalla del cliente.
 *
 * Corta a propósito: la página ya carga Bootstrap (viene con
 * `web.frontend_layout`), así que aquí sólo está lo que Bootstrap no da y lo
 * que un móvil en una mesa de restaurante necesita:
 *
 *   · zonas de toque grandes. Quien pide desde la mesa tiene las manos
 *     ocupadas y la pantalla salpicada; 44 px es el mínimo con el que se
 *     acierta a la primera.
 *   · barra del carrito FIJA abajo y con `env(safe-area-inset-bottom)`. Sin
 *     ese hueco, en un iPhone la barra queda debajo del indicador de inicio y
 *     el botón de pedir no se puede tocar — el fallo se ve como «el botón no
 *     hace nada».
 *   · nada de `position: fixed` en la cabecera: con el teclado abierto los
 *     navegadores móviles la dejan flotando en medio de la pantalla.
 */

:root {
    /* ── La piel de la tienda ──────────────────────────────────────────
       MISMOS nombres y MISMOS valores por defecto que el carrito de
       domicilio (`web_pedido/style.css`), que son los de Hotpot King. Así la
       piel que el portal ya sirve por dominio (`PIELES` en sute_portal) cae
       aquí sin traducir nada: ARROZ CHINA reescribe `--brand` y compañía
       desde el <style> de la cabecera y esta pantalla se pone su ropa
       entera — tinta sobre papel, esquinas duras.

       🔴 Hasta el 2026-09-11 esto era un rojo escrito a mano, `#c0392b`, que
       no era el de NADIE: ni el de Hotpot King (#d62828) ni el de ARROZ
       CHINA (tinta #1A1A1A). El cliente de ARROZ CHINA escaneaba el QR de su
       mesa y se encontraba de frente la pantalla roja de la otra marca,
       mientras el mismo restaurante, en el mismo móvil y a un toque de
       distancia, le enseñaba su domicilio en negro sobre papel.
       El dueño (2026-09-11): «每个品牌都要有一致性». */
    --brand: #d62828;
    --brand-dark: #9d1c1c;
    --bg: #f7f7f8;
    --card-bg: #fff;
    --border: #e5e7eb;
    --text: #1f2937;
    --text-muted: #6b7280;
    /* La cabecera de Hotpot King es un bloque de color; la de ARROZ CHINA es
       papel con tinta. Por eso el fondo y la letra de arriba tienen sus
       propios tokens y no son «el rojo» con blanco encima. */
    --header-bg: var(--brand);
    --header-fg: #fff;
    --header-line: transparent;
    --header-chip: rgba(255, 255, 255, .18);
    --btn-primary-bg: var(--brand);
    --btn-primary-fg: #fff;
    /* 🔴 Copia con nombre PROPIO. `.btn` de Odoo redefine todo el espacio
       `--btn-*` en el propio elemento, y ahí dentro `var(--btn-primary-bg)`
       dejaba de resolver: el botón salía transparente aunque la regla ganara
       la cascada y aunque el valor se leyera bien con `getPropertyValue`.
       Resuelto AQUÍ, en `:root`, donde ningún `.btn` interfiere. */
    --msa-boton-bg: var(--btn-primary-bg);
    --msa-boton-fg: var(--btn-primary-fg);
    /* Radios por rol. Los valores son los de siempre —Hotpot King e INSTA
       WOK no cambian—; lo que aportan es que una piel pueda cuadrarlos de
       golpe. ARROZ CHINA los pone a 4px, píldoras incluidas: el dueño la
       quiere cuadrada ENTERA. El cargador que gira NO pasa por aquí. */
    --r-card: 14px;
    --r-control: 12px;
    --r-panel: 14px;
    --r-box: 16px;
    --r-sheet: 18px;
    --r-pill: 999px;
    /* Los redondos de los botoncitos (+ − papelera). También manda la piel:
       el dueño quiere ARROZ CHINA cuadrada ENTERA, «药丸圆点也方». Lo único
       que NO pasa por aquí es el cargador que gira: un cuadrado girando se ve
       roto, y eso no es marca, es geometría. */
    --r-dot: 50%;

    /* Alias de los nombres viejos. Ochocientas líneas de esta hoja los usan;
       reescribirlas todas de golpe sería mover el riesgo de sitio en vez de
       quitarlo. Apuntan a la piel, así que la piel manda igual. */
    --msa-rojo: var(--brand);
    --msa-tinta: var(--text);
    --msa-gris: var(--text-muted);
    --msa-linea: var(--border);

    /* ── 福分 · La Ñapa ────────────────────────────────────────────────
       MISMOS valores que el carrito web (`web_pedido/style.css`). La Ñapa es
       una submarca ÁMBAR: el rojo es de Hotpot King, y usarlo en el botón de
       canjear —como estaba— hacía que el mismo programa se viera de dos
       colores según por dónde entrara el cliente. */
    --napa-grad: linear-gradient(135deg, #FBE7B8 0%, #F3C969 55%, #E0A93C 100%);
    --napa-suave: #FDF6E6;
    --napa-borde: #E0A93C;
    --napa-texto: #5a3a12;
    --napa-fuerte: #8a4b00;
}

body {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

.msa-app {
    max-width: 620px;
    margin: 0 auto;
    /* Sitio para la barra fija: sin esto el último plato de la carta queda
       siempre tapado por el carrito y parece que la carta se corta. */
    padding-bottom: 92px;
    color: var(--msa-tinta);
}

/* ── cabecera: quién y dónde, en dos filas ──────────────────────────────
   Fila 1 = marca + idioma. Fila 2 = número de mesa (grande, es lo que el
   cliente comprueba) + su nombre y saldo si ha entrado. Los tres datos de
   identidad juntos y una sola vez; antes el socio iba apretado junto al botón
   de idioma y le robaba sitio al número. */
.msa-cab {
    padding: 10px 14px 11px;
    background: var(--header-bg);
    color: var(--header-fg);
    /* Una cabecera de papel necesita una línea que la separe de la carta;
       sobre un bloque de color la piel la deja transparente. */
    border-bottom: 1px solid var(--header-line);
}
.msa-cab-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.msa-cab-fila-2 { margin-top: 2px; }
.msa-marca {
    font-size: 13px;
    font-weight: 600;
    opacity: .92;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msa-mesa {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}
.msa-socio {
    font-size: 13px;
    font-weight: 600;
    opacity: .95;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msa-socio { font-size: 11px; font-weight: 600; white-space: nowrap; }
.msa-lang {
    font: 600 11px/1 inherit;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    /* `currentColor` para que el borde siga a la letra de la cabecera: en
       papel un borde blanco sería invisible. */
    border: 1px solid currentColor;
    background: transparent;
    color: var(--header-fg);
    cursor: pointer;
    min-height: 30px;
}

/* ── avisos ───────────────────────────────────────────────────────────── */
.msa-aviso {
    margin: 12px 14px 0;
    padding: 12px 14px;
    border-radius: var(--r-control);
    font-size: 14px;
    line-height: 1.4;
    background: #fff4e5;
    color: #7a4b06;
    border: 1px solid #f3d9b0;
}
.msa-aviso.msa-err { background: #fdecea; color: #8a1c12; border-color: #f5c6c0; }
.msa-aviso.msa-ok { background: #e8f6ef; color: #0f6b4c; border-color: #b7e2ce; }

/* ── lo que lleva la mesa ─────────────────────────────────────────────── */
.msa-cuenta {
    margin: 12px 14px 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-card);
}
.msa-cuenta h2 { font-size: 13px; color: var(--msa-gris); margin: 0 0 8px; }
.msa-cuenta-fila {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    padding: 3px 0;
}
.msa-cuenta-total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    border-top: 1px solid var(--msa-linea);
    margin-top: 8px;
    padding-top: 8px;
}
.msa-turno {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--msa-tinta);
    color: #fff;
    font-weight: 700;
    letter-spacing: .06em;
}

/* ── la carta ─────────────────────────────────────────────────────────── */
.msa-carta { padding: 0 14px 0; }
/* ── Barra de categorías ───────────────────────────────────────────────
   Pegada arriba mientras se recorre la carta: con 412 platos, una barra que
   se va con el primer deslizamiento no sirve de nada. El desplazamiento
   horizontal es táctil (`-webkit-overflow-scrolling`) y sin barra visible,
   como la carta de domicilio. */
.msa-catbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 2px;
    margin-bottom: 6px;
    background: var(--msa-fondo, #fff);
}
.msa-catbar::-webkit-scrollbar { display: none; }
.msa-cattab {
    flex: 0 0 auto;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
    /* 44 px es el mínimo táctil: por debajo se falla el toque de pie. */
    min-height: 40px;
}
.msa-cattab-on { background: var(--msa-rojo, #c0392b); color: #fff; border-color: transparent; }

/* ── Rejilla de tarjetas, como la carta de domicilio ─────────────────────
   Dos columnas con foto. Antes era una lista de renglones sin imagen: la misma
   carta contada de dos formas distintas según por dónde entrara el cliente, y
   el dueño lo dijo con razón — «¿es difícil hacerlo igual que el domicilio?». */
.msa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 84px;   /* hueco para la barra fija del total */
}
.msa-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--r-card);
    overflow: hidden;
}
.msa-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f2f2f2;
    display: block;
}
.msa-card-img-vacia { background: #f2f2f2; }
.msa-card-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 9px 10px 10px;
    gap: 3px;
}
.msa-card-nom {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.msa-card-desc {
    margin: 0;
    font-size: 12px;
    color: var(--msa-gris, #777);
    line-height: 1.3;
    /* Dos líneas: la descripción ayuda a decidir, no a leer. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.msa-card-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;      /* el precio queda abajo aunque el nombre sea corto */
    padding-top: 6px;
}
.msa-card-precio {
    font-size: 14px;
    font-weight: 700;
    /* El mismo token que el precio del domicilio (`.wp-card-price`). */
    color: var(--brand-dark);
}
.msa-card-ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Botones redondos de 36 px: se tocan con el pulgar, sentado, sin apuntar. */
.msa-card-ctrl .msa-mas,
.msa-card-ctrl .msa-menos {
    width: 36px; height: 36px;
    border: 0;
    border-radius: var(--r-dot);
    font-size: 19px;
    line-height: 1;
    background: var(--msa-rojo, #c0392b);
    color: #fff;
}
.msa-card-ctrl .msa-menos { background: #eee; color: #333; }
.msa-card-ctrl .msa-cant { min-width: 18px; text-align: center; font-size: 15px; }

.msa-cat { margin-bottom: 18px; }
.msa-cat > h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--msa-gris);
    margin: 0 0 8px;
}
.msa-plato {
    gap: 10px;
    align-items: center;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-card);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.msa-plato-txt { flex: 1 1 auto; min-width: 0; }
.msa-plato-nom { font-size: 14px; line-height: 1.25; }
.msa-plato-precio { font-size: 13px; color: var(--msa-gris); margin-top: 2px; }
.msa-mas, .msa-menos {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--r-dot);
    border: 1px solid var(--msa-linea);
    background: #fff;
    color: var(--msa-tinta);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.msa-mas { background: var(--msa-rojo); border-color: var(--msa-rojo); color: #fff; }
.msa-cant { min-width: 24px; text-align: center; font-weight: 700; font-size: 16px; }

/* ── La barra del carrito ──────────────────────────────────────────────
   La misma que la de domicilio (`.wp-cart-fab`), a propósito: el cliente que
   ya pidió a casa no tiene que aprender nada al sentarse.

   Antes era un renglón blanco con letra gris y una flechita ▾ de esquina.
   Estaba, se podía tocar, y nadie la tocaba — no tenía forma de botón. El
   dueño lo dijo el 2026-09-11 mirando su propio móvil: «客人怎么知道这个可以
   打开». Un carrito se reconoce por la forma, no por el texto. */
.msa-barra {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 596px;
    margin: 0 auto;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--r-card);
    background: var(--msa-rojo);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}
.msa-barra[hidden] { display: none; }
/* Con el pedido abierto la barra sobra: el cliente YA está dentro. Se esconde
   por clase y no por `hidden`, porque `pintarBarra()` reescribe ese `hidden`
   cada vez que cambia el carrito y se la volvería a encontrar encima. */
body.msa-en-cesta .msa-barra { display: none; }
.msa-barra-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .26);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}
.msa-barra-label { flex: 1; }
.msa-barra-total { font-weight: 700; }

/* ── La pantalla del pedido ────────────────────────────────────────────── */
.msa-cesta {
    padding: 8px 14px 96px;   /* el hueco de abajo es para el botón de pedir */
    max-width: 620px;
    margin: 0 auto;
}
.msa-cesta[hidden] { display: none; }
.msa-cesta-volver {
    border: 0;
    background: transparent;
    color: var(--msa-gris);
    font-size: 15px;
    padding: 10px 4px;
    min-height: 44px;
    text-align: left;
}
.msa-cesta-tit { font-size: 20px; font-weight: 700; margin: 4px 0 2px; }
/* Donde el domicilio pone la dirección. Aquí no hay nada que llevar: hay una
   mesa y un número por el que van a llamar. */
.msa-cesta-donde {
    color: var(--msa-gris);
    font-size: 14px;
    margin-bottom: 12px;
}
.msa-cesta-donde:empty { display: none; }

/* «Pedir», abajo y siempre a la vista mientras haya algo sin mandar. Se
   posiciona él mismo, como la barra: una caja intermedia sólo servía para
   colocarlo, y dentro de ella el navegador no le aplicaba el fondo. */
/* El botón de mandar. El color sale de la piel, no de Bootstrap: `btn-danger`
   era el rojo de Bootstrap —ni el de Hotpot King ni el de ARROZ CHINA— y en la
   tienda de papel se plantaba un rojo que no es de nadie justo en el botón más
   grande de la pantalla. */
.msa-pedir {
    width: 100%;
    min-height: 52px;
    background-color: var(--msa-boton-bg);
    color: var(--msa-boton-fg);
    border: 0;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--r-card);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    max-width: 596px;
    margin: 0 auto;
}
.msa-pedir[hidden] { display: none; }
/* ⚠️ `button.` y no `.msa-pedir` a secas: el `.btn` de Odoo trae su propio
   `background-color: var(--btn-bg)` (transparent) con la MISMA especificidad,
   y en prod ganaba él — el botón más grande de la pantalla salía en blanco
   sobre papel, invisible. En una prueba suelta el color salía bien, así que
   esto sólo se ve midiendo el botón de verdad, dentro de su página. */
/* 🔴 `!important` A PROPÓSITO, y es el único de esta hoja.
   El `.btn` de Odoo gana con regla normal HAGA LO QUE HAGA: se probó con más
   especificidad (`button.msa-pedir`), con la propiedad larga, con nombre de
   variable propio y con la regla puesta al final del documento — el botón
   seguía transparente, o sea blanco sobre el papel de ARROZ CHINA, que es el
   botón que manda la comida a la cocina. Con `!important` se pinta a la
   primera. En algún sitio de ese paquete de 846 KB hay un `!important` que no
   apareció rastreando el fichero; lo que sí está comprobado, en la página de
   verdad y midiendo el color calculado, es que sin esto no se pinta. */
button.msa-pedir {
    background-color: var(--msa-boton-bg) !important;
    color: var(--msa-boton-fg) !important;
}

/* ── esqueleto de carga ───────────────────────────────────────────────── */
.msa-cargando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--msa-gris);
    font-size: 14px;
    padding: 40px 0;
}
.msa-spin {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--msa-linea);
    border-top-color: var(--msa-rojo);
    border-radius: 50%;
    animation: msaSpin .8s linear infinite;
}
@keyframes msaSpin { to { transform: rotate(360deg); } }

/* ── ¿sumas Ñapas? ────────────────────────────────────────────────────────
   Se ofrece una vez y se puede salir tocando fuera: es una recomendación, no
   un peaje. Quien dice que no, pide igual. */
.msa-modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}
.msa-modal {
    background: #fff;
    border-radius: var(--r-card);
    padding: 22px 20px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}
.msa-modal h3 { margin: 0 0 8px; font-size: 1.15rem; }
.msa-modal p { margin: 0 0 18px; color: var(--msa-gris); line-height: 1.45; }
.msa-modal button {
    display: block;
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.msa-modal-si {
    background-color: var(--msa-boton-bg);
    color: var(--msa-boton-fg);
    margin-bottom: 10px;
}
/* El "no" se ve y se lee — un botón gris pálido es un "no" escondido, y el
   cliente que no quiere registrarse acaba cerrando la pestaña con el carrito
   dentro. */
.msa-modal-no { background: #f0f0f0; color: #333; }

/* ── "cómo llegar a tu mesa" ──────────────────────────────────────────────
   La página a la que lleva «Comer en el local» desde la portada. Es texto y
   un icono: aquí no hay carta ni carrito, sólo la frase que hace falta. */
.msa-escanear {
    padding: 44px 24px;
    text-align: center;
    color: var(--msa-tinta);
}
.msa-escanear svg { color: var(--msa-rojo); margin-bottom: 18px; }
.msa-escanear h1 { font-size: 1.35rem; margin: 0 0 12px; line-height: 1.3; }
.msa-escanear p {
    margin: 0 auto 14px;
    max-width: 30rem;
    color: var(--msa-gris);
    line-height: 1.55;
}
.msa-escanear-nota { font-size: .93rem; }
.msa-escanear-volver {
    display: inline-block;
    margin-top: 12px;
    padding: 11px 26px;
    border: 1px solid var(--msa-linea);
    border-radius: 10px;
    color: var(--msa-tinta);
    text-decoration: none;
    font-weight: 600;
}

/* ── Escanear el código desde la propia web ──────────────────────────────
   El botón nace oculto (`hidden` en la plantilla) y sólo lo enseña
   `escanear.js` cuando el navegador puede de verdad: un botón que falla al
   tocarlo es peor que no ofrecer nada. */
.msa-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 18px auto 6px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--msa-rojo, #c0392b);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    /* De pie, con una mano y el móvil en la otra: nada por debajo de 48 px. */
    min-height: 52px;
}
.msa-scan-btn:active { opacity: .9; }

.msa-scan-caja {
    margin: 14px auto 0;
    max-width: 420px;
}
/* El visor es lo único que se recorta en redondo. El botón de cancelar queda
   fuera, así que nunca se monta sobre el marco de encuadre. */
.msa-scan-visor {
    position: relative;
    border-radius: var(--r-box);
    overflow: hidden;
    background: #000;
}
.msa-scan-video {
    width: 100%;
    max-height: 62vh;
    min-height: 300px;
    object-fit: cover;
    display: block;
}
/* El marco no recorta nada — el detector mira el fotograma entero — pero le
   dice al cliente dónde poner el código, que es lo que hace que apunte bien.
   Se sube un poco (48%) para dejar sitio abajo al botón de cancelar sin que se
   pisen: con los dos centrados, el texto de ayuda quedaba encima del botón. */
.msa-scan-marco {
    position: absolute;
    top: 50%; left: 50%;
    width: 74%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, .95);
    border-radius: var(--r-box);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
/* El aviso va ARRIBA, no abajo: abajo chocaba con «Cancelar» y el texto se
   leía por encima del botón. Arriba tampoco tapa el marco. */
.msa-scan-aviso {
    position: absolute;
    left: 12px; right: 12px; top: 12px;
    margin: 0;
    padding: 7px 12px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    background: rgba(0, 0, 0, .55);
    border-radius: var(--r-pill);
}
.msa-scan-cerrar {
    display: block;
    margin: 12px auto 0;
    border: 1px solid #ddd;
    border-radius: var(--r-pill);
    padding: 11px 28px;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    min-height: 48px;
}

/* Gancho de La Ñapa en la pantalla de «escanea tu mesa».
   Ámbar, que es el color de 福分 en el portal (/fufen), para que quien ya lo
   conozca lo reconozca sin leer. Discreto a propósito: la tarea de esta
   pantalla es escanear, y esto es el premio, no el camino. */
.msa-napa-gancho {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 340px;
    margin: 18px auto 4px;
    padding: 11px 14px;
    border: 1px solid var(--napa-borde);
    border-radius: var(--r-control);
    background: var(--napa-suave);
    color: var(--napa-texto);
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}
.msa-napa-ico { font-size: 17px; line-height: 1.2; }

/* ── Hoja de opciones (proteína, tamaño…) ────────────────────────────────
   Un plato con opciones no se añade de un toque: hay que elegirlas. Misma
   idea que la carta de domicilio, y por el mismo motivo — enseñar una tarjeta
   por variante llenaba la pantalla de repetidos con la misma foto. */
.msa-hoja-fondo {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, .45);
}
.msa-hoja {
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.msa-hoja header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.msa-hoja header h3 { margin: 0; flex: 1 1 auto; font-size: 17px; line-height: 1.25; }
.msa-hoja-x {
    border: 0; background: transparent;
    font-size: 26px; line-height: 1;
    width: 40px; height: 40px;
    color: #666;
}
.msa-hoja-cuerpo { overflow-y: auto; flex: 1 1 auto; }
.msa-op-bloque { margin-bottom: 12px; }
.msa-op-bloque h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--msa-gris, #777);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.msa-op-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.msa-op {
    border: 1.5px solid #ddd;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 10px 16px;
    font-size: 15px;
    /* 46 px: se toca de pie o sentado, sin apuntar. */
    min-height: 46px;
}
.msa-op small { opacity: .7; font-size: 12px; }
.msa-op-on {
    border-color: var(--msa-rojo, #c0392b);
    background: #fdf1ef;
    color: var(--msa-rojo, #c0392b);
    font-weight: 600;
}
.msa-hoja-add {
    margin-top: 6px;
    border: 0;
    border-radius: var(--r-control);
    padding: 15px;
    background: var(--msa-rojo, #c0392b);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    min-height: 54px;
}
.msa-hoja-add[disabled] { background: #ddd; color: #888; }

/* La cifra de «ya llevas N de este plato», al lado del «+». */
.msa-card-puestas {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* ── Franja del socio: quién eres y qué puedes hacer con tus Ñapas ───────
   Bajo la cabecera y en toda la anchura. Antes el nombre y el saldo iban
   apretados junto al botón de idioma y le quitaban sitio al número de mesa,
   que es el dato que el cliente necesita comprobar. */
.msa-franja-socio {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 9px 14px;
    background: #fdf8ee;
    border-bottom: 1px solid #eadfc8;
    color: #7a5a24;
    font-size: 14px;
}
.msa-socio { font-weight: 600; }
.msa-canjear {
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--r-pill);
    padding: 9px 16px;
    background: var(--msa-rojo, #c0392b);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    min-height: 40px;
}
.msa-canjear[disabled] { background: #eee; border-color: #ddd; color: #999; }

/* Las Ñapas viven DENTRO del pedido, que es donde se habla de dinero. */
.msa-napas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 11px 13px;
    border: 1px solid var(--napa-borde);
    border-radius: var(--r-control);
    background: var(--napa-suave);
    color: var(--napa-texto);
    font-size: 13px;
}
.msa-napas-txt b { color: var(--napa-fuerte); font-weight: 800; }
.msa-napas-txt { line-height: 1.3; }
.msa-canjear {
    flex: 0 0 auto;
    border: 1px solid var(--napa-borde);
    border-radius: var(--r-pill);
    padding: 10px 16px;
    background: var(--napa-grad);
    color: var(--napa-fuerte);
    font-size: 14px;
    font-weight: 800;
    min-height: 42px;
    white-space: nowrap;
}
.msa-canjear[disabled] { background: #eee; border-color: #ddd; color: #999; }

/* ── El carrito desplegado: QUÉ vas a pedir ──────────────────────────────
   La barra de abajo contaba «3 · $58.000» y ahí se acababa: no había ninguna
   pantalla donde ver qué eran esos tres ni, por tanto, quitar uno. Un cliente
   de ACH lo dijo el 2026-09-09 — había añadido de más y no encontró cómo
   borrarlo.

   Se copia la forma del carrito de domicilio (nombre · «− n +» · importe ·
   papelera) para que las dos formas de pedir de la casa se manejen igual. */
/* Los dos bloques del pedido —lo que falta por mandar y lo ya pedido— son la
   misma clase de cosa y tienen que verse igual: misma tarjeta, mismo ancho,
   mismas esquinas. Esto arrastraba la forma de cuando era un cajón (alto
   limitado, scroll propio, borde superior pegado al borde de la pantalla), y
   al lado de la cuenta se leía como si fueran dos pantallas distintas.
   El scroll propio además atrapaba el dedo: con seis platos, deslizar aquí
   movía la lista y no la página. */
.msa-carro-cuerpo {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-card);
}
.msa-carro-cuerpo:empty { display: none; }
/* Dentro del pedido la cuenta ya no lleva márgenes propios: los pone la
   pantalla. Con los suyos quedaba un escalón —la cuenta más estrecha que el
   carrito— que no significaba nada. */
.msa-cesta .msa-cuenta {
    margin: 12px 0 0;
}

/* ── La propina ────────────────────────────────────────────────────────
   Misma tarjeta que el resto de la pantalla del pedido y mismos escalones que
   el carrito de domicilio. Los colores salen de la piel, así que en ARROZ
   CHINA sale cuadrada y en tinta sin tocar nada aquí. */
.msa-propina {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-card);
}
.msa-propina[hidden] { display: none; }
.msa-prop-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: var(--msa-gris);
}
.msa-prop-val { font-size: 16px; color: var(--msa-tinta); }
.msa-prop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
}
.msa-prop-chip {
    flex: 0 0 auto;
    border: 1px solid var(--msa-linea);
    background: var(--card-bg);
    color: var(--msa-tinta);
    border-radius: var(--r-pill);
    padding: 9px 14px;
    font-size: 14px;
    /* 44 px es el mínimo con el que se acierta a la primera de pie y con una
       mano; aquí además se está tocando plata. */
    min-height: 44px;
}
.msa-prop-on {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--btn-primary-fg, #fff);
    font-weight: 700;
}
.msa-prop-pie { color: var(--msa-gris); font-size: 12px; }
.msa-prop-campo {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-control);
    font-size: 16px;   /* por debajo de 16 px iOS hace zoom al enfocar */
}
.msa-prop-ok {
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--r-control);
    background: var(--brand);
    color: var(--btn-primary-fg, #fff);
    font-weight: 700;
}
/* Mientras el servidor contesta, el bloque no se puede volver a tocar. */
.msa-propina.msa-ocupado { opacity: .55; pointer-events: none; }

/* El total de la mesa: el número grande del final, el mismo que la barra. */
.msa-total-mesa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-card);
    font-size: 18px;
    font-weight: 800;
}
.msa-total-mesa[hidden] { display: none; }
.msa-carro-tit {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--msa-gris);
    margin: 10px 0 4px;
}
.msa-carro-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f4f4f5;
}
.msa-carro-fila:last-child { border-bottom: 0; }
/* El nombre puede ser largo («Combo Personal Costillas (Grande)») y es lo
   único que puede encogerse: los números y los botones, no. */
.msa-carro-nom {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.3;
}
.msa-carro-qty {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
/* 38 de círculo + 3 de margen a cada lado = 44 de zona tocable, que es el
   mínimo que promete la cabecera de este fichero y que estos dos botones
   llevaban incumpliendo con 34. Crece lo que se toca, no lo que se ve: con el
   círculo a 44 la fila del carrito no cabe en un móvil de 360 px. */
.msa-carro-menos,
.msa-carro-mas {
    width: 38px;
    height: 38px;
    margin: 3px;
    border: 1px solid var(--msa-linea);
    border-radius: var(--r-dot);
    background: #fff;
    color: var(--msa-tinta);
    font-size: 18px;
    line-height: 1;
    padding: 0;
}
.msa-carro-cant {
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}
.msa-carro-imp {
    flex: 0 0 auto;
    min-width: 66px;
    text-align: right;
    font-weight: 700;
    font-size: 14px;
}
/* La papelera quita la línea ENTERA. Seis unidades puestas por error son seis
   toques si sólo hay «−»; con esto es uno. */
.msa-carro-rm {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--r-dot);
    background: transparent;
    /* El mismo color que la papelera de la cuenta: quitar es quitar, y dos
       tonos para el mismo gesto se leen como dos gestos distintos. El rojo
       tampoco era de ninguna marca. */
    color: var(--msa-tinta);
    padding: 0;
}
.msa-carro-rm:active { background: #fdecea; }

/* ── La máquina de la fortuna ────────────────────────────────────────────
   Mismo ámbar de 福分 que el resto del programa: quien reconoce el color no
   tiene que leer para saber de qué va. Aparece SÓLO cuando el servidor dice
   que a este socio le toca; el resto del tiempo no existe.

   El degradado (y no el fondo plano del gancho) es deliberado: dentro del
   programa esto es lo único que no es un saldo ni una regla, es un premio, y
   tiene que verse como tal sin salirse de la paleta. */
.msa-sorteo {
    max-width: 340px;
    margin: 14px auto 4px;
    padding: 14px 16px;
    border: 1px solid var(--napa-borde);
    border-radius: var(--r-card);
    background: var(--napa-grad);
    color: var(--napa-texto);
    text-align: center;
}
.msa-sorteo-tit {
    font-size: 16px;
    font-weight: 700;
    color: var(--napa-fuerte);
    margin-bottom: 3px;
}
.msa-sorteo-sub { font-size: 14px; line-height: 1.35; }
/* La letra pequeña que NO es letra pequeña: el dueño pidió que quede claro
   que esto no es una apuesta. Va con el mismo tamaño legible que el resto y
   no en gris de aviso legal — si hay que entrecerrar los ojos para leer que
   no se pierde nada, no sirve de nada. */
.msa-sorteo-nota {
    font-size: 13.5px;
    line-height: 1.4;
    margin-top: 8px;
    color: var(--napa-texto);
    font-weight: 600;
}
.msa-sorteo-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 11px 22px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--napa-fuerte);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    line-height: 22px;
}

/* ══════════════════════════════════════════════════════════════════════
   DESPUÉS DE PEDIR — v19.0.1.19.0
   ══════════════════════════════════════════════════════════════════════

   Hasta esta versión, tocar «Pedir» era una puerta de un solo sentido: lo
   enviado se veía en una lista plana y no se podía tocar. Un cliente de ACH
   mandó dos combos donde quería uno (2026-09-09) y la cuenta acabó anulada
   entera en la caja 48 minutos después.

   Lo que la pantalla tiene que contestar ahora es «¿todavía estoy a tiempo?»,
   y por eso lo pedido se parte en dos bloques con etiqueta propia. */

/* La etiqueta de cada bloque. Gris y pequeña: es un rótulo que ordena, no un
   aviso. Quien lo necesita lo busca; quien no, no tropieza con él. */
.msa-grupo-tit {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--msa-gris);
    margin: 10px 0 4px;
}
/* Verde y no rojo: «aún puedes cambiarlo» es una buena noticia. El rojo de
   esta casa es de marca (Hotpot King) y además, en una pantalla donde algo
   acaba de salir mal, lee como alarma. */
.msa-grupo-abierto {
    color: #15803d;
}

.msa-cuenta-nom {
    flex: 1 1 auto;
    min-width: 0;
}
/* La nota del cliente, colgando del nombre del plato. En cursiva y gris para
   que se lea como lo que es —una petición, no otro plato— y para que no se
   confunda con una segunda línea de la cuenta. */
.msa-cuenta-nota {
    display: block;
    font-size: 12.5px;
    font-style: italic;
    color: var(--msa-gris);
    line-height: 1.3;
}
.msa-cuenta-imp {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.msa-cuenta-viva {
    align-items: center;
}
.msa-cuenta-ctrl {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
/* 44 px de zona de toque, que es lo que dice la cabecera de este fichero y lo
   que el carrito llevaba meses incumpliendo con 34. Aquí importa el doble: el
   dedo que falla en un «−» de la carta añade de más y se ve; el que falla
   aquí toca la papelera de al lado. El círculo visible sigue siendo pequeño
   (`::after` no, se usa padding) — lo que crece es lo que se puede tocar. */
.msa-quitar-uno,
.msa-quitar-todo {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--msa-gris);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    border-radius: var(--r-dot);
}
.msa-quitar-uno {
    border: 1px solid var(--msa-linea);
    width: 36px;
    height: 36px;
    margin: 4px;   /* 36 + 4 + 4 = 44 de zona tocable, círculo de 36 */
    background: #fff;
    color: var(--msa-tinta);
}
.msa-quitar-todo:active,
.msa-quitar-uno:active {
    background: var(--msa-linea);
}
/* Mientras el servidor contesta. No se tapa la lista ni se pone un spinner
   encima: sólo se apaga un poco y se dejan de aceptar toques, que es lo justo
   para que nadie quite dos veces lo mismo por creer que no pasó nada. */
.msa-ocupado {
    opacity: .55;
    pointer-events: none;
}

/* ── Llamar al mesero ───────────────────────────────────────────────────
   Ancho completo bajo el número de mesa. Discreto de color (no compite con
   «Pedir», que es rojo y es lo que el cliente viene a hacer) pero de tamaño
   completo: cuando hace falta, hace falta rápido y sin buscarlo. */
.msa-llamar {
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--msa-linea);
    border-radius: 10px;
    background: #fff;
    color: var(--msa-tinta);
    font-size: 15px;
    font-weight: 600;
}
.msa-llamar:disabled {
    opacity: .5;
}

/* ── La nota del plato ──────────────────────────────────────────────────
   Debajo de su línea del carrito, no dentro: la línea ya lleva nombre,
   cantidad, importe y papelera, y meter un sexto elemento la parte en dos en
   cualquier móvil estrecho. */
.msa-carro-item {
    border-bottom: 1px solid var(--msa-linea);
    padding-bottom: 2px;
}
.msa-carro-item:last-child {
    border-bottom: 0;
}
.msa-carro-notafila {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 6px;
}
/* Discreto mientras está vacío —es una opción, no un paso del pedido— y con
   el texto completo en cuanto hay algo escrito: lo que el cliente pidió tiene
   que poder releerse antes de mandar, sin volver a abrir nada. */
.msa-carro-nota {
    border: 0;
    background: none;
    padding: 6px 2px;
    min-height: 32px;
    font-size: 12.5px;
    color: var(--msa-gris);
    text-align: left;
}
.msa-carro-nota-puesta {
    color: var(--msa-tinta);
    font-style: italic;
    font-weight: 600;
}
.msa-carro-nota-campo {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--msa-linea);
    border-radius: 8px;
    font-size: 15px;   /* 16 o menos hace que iOS haga zoom al enfocar; 15 con
                          `text-size-adjust` en body se queda quieto */
    color: var(--msa-tinta);
}
.msa-carro-nota-ok {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--msa-linea);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: var(--msa-tinta);
}