/* menu.css - estilos del menu publico (restaurante.php).
   Extraido del <style> en linea: antes se descargaba completo en CADA menu y en cada recarga.
   Aqui el navegador lo guarda una vez y lo reutiliza en todos los restaurantes.
   Los colores del tema de cada restaurante siguen inline en la pagina (variables :root),
   porque cambian por restaurante y no se pueden cachear. */
body { font-family: 'Outfit', sans-serif; background: #F3ECE0; padding-bottom: 80px; margin: 0; }

        /* Barra superior fija con la marca Acomer (no la del restaurante) y el botón de instalar app */
        .barra-superior-acomer {
            position: sticky; top: 0; z-index: 1600;
            background: var(--primary); color: white;
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            min-height: var(--alto-barra-acomer); box-sizing: border-box; gap: 10px;
        }
        /* Grupo derecho de la barra: botón de instalar + menú de la cuenta del cliente. */
        .barra-superior-acciones { display: flex; align-items: center; gap: 8px; }
        .barra-superior-marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: white; font-weight: 800; font-size: 15px; letter-spacing: -0.3px; }
        .barra-superior-logo { width: 26px; height: 26px; border-radius: 7px; display: block; }
        .btn-instalar-barra {
            background: white; color: var(--primary); border: none; padding: 8px 16px; border-radius: 20px;
            font-weight: 800; font-size: 13px; font-family: inherit; cursor: pointer;
            display: none; align-items: center; gap: 6px; white-space: nowrap;
        }

        .portada-restaurante { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 45px 20px 65px 20px; text-align: center; position: relative; }
        .logo-restaurante { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
        .header-restaurante { background: white; padding: 0 20px 20px 20px; text-align: center; border-bottom: 1px solid #DCCBAF; margin-top: -45px; border-radius: 25px 25px 0 0; position: relative; }
        .logo-wrap { padding-top: 20px; }

        .calificacion-pill { display:inline-flex; align-items:center; gap:5px; background:#F6ECDD; color:var(--primary-dark); padding:5px 12px; border-radius:20px; font-size:13px; font-weight:bold; margin-top:8px; }
        /* Fila con "Ver ubicación" y las redes. El gap de 14px separa el botón del grupo de
           iconos; dentro del grupo la separación es menor, para que se lean como un bloque. */
        .info-secundaria { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; align-items:center; margin-top:6px; }
        .redes-menu { display:flex; align-items:center; gap:10px; }

        .btn-accion { background: none; border: 1px solid var(--primary); color: var(--primary); padding: 6px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; margin-top: 10px; display: inline-block; transition: 0.3s; text-decoration: none; font-size: 14px;}
        .btn-accion.activo { background: var(--primary); color: white; }
        .btn-ubicacion { background: #EDE4D6; color: #6B5842; border: 1px solid #C7B393; }

        .menu-cliente-wrap { position: relative; display: inline-block; }
        /* Disparador del menú de la cuenta, ahora dentro de la barra superior oscura: por eso es
           blanco translúcido y no el botón con borde de color que se usa en el cuerpo. En pantallas
           angostas solo queda el icono (el nombre se oculta más abajo) para no empujar la barra. */
        .btn-cuenta-barra {
            background: rgba(255,255,255,0.18); color: white; border: 1px solid rgba(255,255,255,0.35);
            padding: 7px 12px; border-radius: 20px; font-weight: 700; font-size: 13px;
            font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px;
            max-width: 150px; white-space: nowrap;
        }
        .btn-cuenta-barra .nombre-cuenta { overflow: hidden; text-overflow: ellipsis; }

        .dropdown-cliente {
            /* Anclado a la derecha (right:0) en vez de centrado: ahora vive en la esquina superior
               derecha, así que centrarlo lo sacaría de la pantalla en móvil. */
            display: none; position: absolute; top: calc(100% + 10px); right: 0; left: auto;
            background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            min-width: 210px; overflow: hidden; z-index: 3000; text-align: left;
        }
        .dropdown-cliente.active { display: block; }
        .dropdown-cliente a {
            display: block; padding: 12px 16px; text-decoration: none; color: #2A2018;
            font-size: 14px; font-weight: bold; border-bottom: 1px solid #F1E7D8;
        }
        .dropdown-cliente a:last-child { border-bottom: none; }
        .dropdown-cliente a:hover { background: #F6ECDD; color: var(--primary); }
        .dropdown-cliente a.opcion-salir { color: #c62828; }
        .dropdown-cliente a.opcion-salir:hover { background: #ffebee; }
        
        .contenedor-menu { padding: 15px; max-width: 600px; margin: 0 auto; }
        .categoria-titulo { font-size: 18px; border-bottom: 2px solid var(--primary); padding-bottom: 5px; margin-top: 20px; }
        .producto-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; display: flex; gap: 15px; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; }
        /* Resplandor de fuego alrededor de la tarjeta del producto en oferta: un box-shadow
           naranja/rojo que "respira" (crece y se atenúa) para llamar la atención sin ser un
           borde fijo. overflow visible en .contenedor-menu (no se toca aquí) permite que el
           resplandor se vea completo sin recortarse contra tarjetas vecinas. */
        .producto-card.es-oferta {
            border: 1.5px solid var(--primary-light);
            animation: resplandorFuegoOferta 1.8s ease-in-out infinite;
        }
        @keyframes resplandorFuegoOferta {
            0%, 100% { box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 8px 2px rgba(255,112,67,0.35), 0 0 16px 4px rgba(230,74,25,0.18); }
            50%      { box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 16px 5px rgba(255,112,67,0.6), 0 0 28px 9px rgba(230,74,25,0.35); }
        }
        @media (prefers-reduced-motion: reduce) {
            .producto-card.es-oferta { animation: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 12px 3px rgba(255,112,67,0.45); }
            .badge-oferta-menu .llama-animada { animation: none; }
        }
        .producto-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }

        /* --- TARJETA DE PRODUCTO EN MÓVIL: media foto, media información ---
           En escritorio la miniatura de 80px funciona bien porque hay ancho de sobra. En un celular
           esa miniatura queda diminuta justo donde la foto es lo que más vende: es la primera vez
           que el cliente ve el plato. Aquí la tarjeta se parte en dos mitades, la foto pega contra
           el borde (sin padding ni esquinas redondeadas por dentro) y el texto ocupa la otra mitad.

           align-self:stretch + object-fit:cover hacen que la foto llene siempre el alto real de la
           tarjeta, sea cual sea el largo de la descripción, sin deformarse ni dejar franjas vacías.
           min-height evita que un plato con descripción muy corta deje una foto aplastada. */
        @media (max-width: 600px) {
            .producto-card {
                padding: 0;
                gap: 0;
                align-items: stretch;
                overflow: hidden;   /* para que la foto respete las esquinas redondeadas */
            }
            .producto-img {
                flex: 0 0 50%;
                width: 50%;
                height: auto;
                min-height: 145px;
                align-self: stretch;
                border-radius: 0;
            }
            /* min-width:0 es imprescindible en un hijo flex: sin él, un nombre de plato largo sin
               espacios ensancha la columna y le roba el ancho a la foto. */
            .producto-info { padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; }

            /* NOTA: el ajuste móvil de .badge-oferta-menu NO va aquí, sino en un @media aparte
               DESPUÉS de su regla base (más abajo). Estaba aquí y no funcionaba: como la regla
               base se define después en la hoja y tiene la misma especificidad, ganaba ella y el
               "right: -8px" original se combinaba con el "left" de aquí, lo que estira un elemento
               absoluto de lado a lado — de ahí la banda naranja que tapaba el título del plato. */

            /* La descripción se limita a 3 líneas para que las tarjetas queden parejas y la lista
               se pueda recorrer de un vistazo. El texto completo sigue estando en el HTML. */
            .producto-desc {
                display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                overflow: hidden;
            }
            /* Empuja precio y botón al fondo de la mitad de texto, así quedan alineados entre
               tarjetas vecinas aunque las descripciones tengan largos distintos. */
            .producto-pie { margin-top: auto; }
            .btn-agregar { width: 100%; padding: 10px; margin-top: 10px; }
        }

        /* En pantallas muy angostas la barra superior lleva marca + "Instala App" + cuenta. El
           nombre del cliente es lo primero que sobra: el icono 👤 ya dice de qué se trata. */
        @media (max-width: 430px) {
            .btn-cuenta-barra .nombre-cuenta { display: none; }
            .btn-cuenta-barra { padding: 7px 10px; }
        }

        /* Modal de imagen ampliada del producto */
        .modal-imagen-overlay {
            position: fixed; inset: 0; background: rgba(15,10,6,0.88); z-index: 5000; display: none;
            align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
        }
        .modal-imagen-overlay.active { display: flex; }
        .modal-imagen-contenido { position: relative; max-width: 100%; max-height: 100%; text-align: center; }
        .modal-imagen-contenido img { max-width: 100%; max-height: 78vh; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); display: block; margin: 0 auto; }
        .modal-imagen-titulo { color: white; font-weight: 700; font-size: 15px; margin-top: 14px; }
        .btn-cerrar-imagen {
            position: absolute; top: -18px; right: -10px; background: white; color: #2A2018; border: none;
            width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; line-height: 1;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .producto-info { flex: 1; }
        .btn-agregar { background: #F3DFCF; color: var(--primary); border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold; cursor: pointer; margin-top: 8px; }
        /* La etiqueta se saca del flujo normal (position:absolute) y se ancla a la esquina
           superior derecha de .producto-card, que ya es position:relative -- no importa que
           este <span> siga viviendo dentro de .producto-info en el HTML. */
        .badge-oferta-menu {
            position: absolute;
            top: -10px;
            right: -8px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #FF7043, #E64A19);
            color: white;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            padding: 6px 12px 6px 10px;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(230,74,25,0.5);
            white-space: nowrap;
        }
        .badge-oferta-menu .llama-animada {
            display: inline-block;
            font-size: 16px;
            transform-origin: 50% 90%;
            animation: llamaMovimientoOferta 0.7s ease-in-out infinite alternate;
        }
        @keyframes llamaMovimientoOferta {
            0%   { transform: scale(1, 1) rotate(-6deg) translateY(0); }
            30%  { transform: scale(1.1, 0.92) rotate(4deg) translateY(-1px); }
            60%  { transform: scale(0.92, 1.1) rotate(-3deg) translateY(0); }
            100% { transform: scale(1.05, 0.95) rotate(6deg) translateY(-1px); }
        }
        .precio-tachado-menu { font-size: 12px; color: #A69C8C; text-decoration: line-through; margin-right: 6px; }

        /* --- ETIQUETA "EN OFERTA" EN MÓVIL ---
           Va DESPUÉS de la regla base a propósito: con la misma especificidad gana la que se
           declara de última, y si estas propiedades quedan antes, el "right: -8px" de la base
           sigue vigente. Un elemento con position:absolute y left Y right definidos a la vez se
           estira de lado a lado: por eso la etiqueta salía como una banda naranja de ancho
           completo, tapando el nombre del plato.
           right:auto es lo que la devuelve a ajustarse a su contenido. */
        @media (max-width: 600px) {
            .badge-oferta-menu {
                top: 8px;
                left: 8px;
                right: auto;          /* imprescindible: anula el right de la regla base */
                font-size: 10px;
                padding: 4px 9px;
                /* La foto de fondo puede ser clara u oscura, así que la etiqueta lleva su propia
                   sombra para leerse siempre. */
                box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            }
            .badge-oferta-menu .llama-animada { font-size: 13px; }
        }

        /* --- BARRA DE BÚSQUEDA Y CATEGORÍAS ---
           Se pega debajo de la barra superior (de ahí --alto-barra-acomer) y acompaña al cliente
           mientras baja por el menú. En una carta con seis categorías y cuarenta platos, sin esto
           hay que hacer scroll a ciegas hasta encontrar lo que se busca. */
        .barra-menu-nav {
            position: sticky; top: var(--alto-barra-acomer); z-index: 1500;
            background: #F3ECE0; padding: 10px 15px 8px 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        }
        .barra-menu-nav-inner { max-width: 600px; margin: 0 auto; }
        .buscador-menu-wrap { position: relative; }
        .buscador-menu {
            width: 100%; box-sizing: border-box; padding: 11px 38px 11px 38px;
            border: 1.5px solid #DCCBAF; border-radius: 22px; font-family: inherit; font-size: 14px;
            background: white; color: #2A2018;
        }
        .buscador-menu:focus { outline: none; border-color: var(--primary); }
        .buscador-menu-lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .6; }
        .buscador-menu-limpiar {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            background: none; border: none; font-size: 18px; cursor: pointer; color: #948870;
            display: none; padding: 4px 8px; line-height: 1;
        }
        .buscador-menu-limpiar.visible { display: block; }

        /* Fila de categorías con desplazamiento horizontal. scrollbar-width:none oculta la barra
           en Firefox y ::-webkit-scrollbar en Chrome/Safari: se desliza con el dedo, como en
           cualquier app. */
        .chips-categorias {
            display: flex; gap: 8px; overflow-x: auto; margin-top: 9px; padding-bottom: 2px;
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }
        .chips-categorias::-webkit-scrollbar { display: none; }
        .chip-categoria {
            flex: 0 0 auto; background: white; border: 1px solid #DCCBAF; color: #5C5044;
            padding: 7px 14px; border-radius: 18px; font-size: 13px; font-weight: 700;
            font-family: inherit; cursor: pointer; white-space: nowrap;
        }
        .chip-categoria.activo { background: var(--primary); border-color: var(--primary); color: white; }

        /* scroll-margin-top: al saltar a una categoría, el navegador la deja justo debajo de las
           dos barras pegajosas en vez de esconderla detrás de ellas. */
        .categoria-titulo { scroll-margin-top: calc(var(--alto-barra-acomer) + 96px); }

        .aviso-sin-resultados { text-align: center; color: #948870; font-size: 14px; padding: 30px 15px; display: none; }

        /* Aviso de carrito recuperado. Se anuncia en vez de restaurarlo en silencio: que
           reaparezcan productos sin explicación desconcierta, y hay que dejar salida fácil. */
        .aviso-carrito-recuperado {
            display: none; align-items: center; gap: 10px; max-width: 600px; margin: 12px auto 0;
            background: #FFF3EC; border: 1.5px solid var(--primary-light); border-radius: 12px;
            padding: 11px 14px; font-size: 13px; color: #6B4A32;
        }
        .aviso-carrito-recuperado button {
            margin-left: auto; background: none; border: none; color: var(--primary);
            font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer;
            text-decoration: underline; white-space: nowrap; padding: 4px;
        }

        /* --- LO MÁS PEDIDO ---
           Fila horizontal con los platos que más se venden. Va antes de la carta completa porque
           es la respuesta a "¿qué pido?", que es la duda real de quien entra por primera vez. */
        .bloque-mas-pedido { max-width: 600px; margin: 14px auto 0; padding: 0 15px; }
        .bloque-mas-pedido h3 { font-size: 15px; margin: 0 0 9px 0; color: #2A2018; }
        .fila-mas-pedido {
            display: flex; gap: 11px; overflow-x: auto; padding-bottom: 6px;
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }
        .fila-mas-pedido::-webkit-scrollbar { display: none; }
        .card-mas-pedido {
            flex: 0 0 145px; background: #fff; border-radius: 12px; overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06); display: flex; flex-direction: column;
            position: relative;
        }
        .card-mas-pedido img { width: 100%; height: 95px; object-fit: cover; display: block; }
        .card-mas-pedido .sin-foto {
            height: 95px; background: #F3DFCF; display: flex; align-items: center;
            justify-content: center; font-size: 26px;
        }
        .card-mas-pedido .cuerpo { padding: 9px 10px; display: flex; flex-direction: column; flex: 1; }
        .card-mas-pedido .titulo {
            font-size: 13px; font-weight: 700; color: #2A2018; line-height: 1.25;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .card-mas-pedido .precio { font-size: 14px; font-weight: 800; margin-top: 6px; }
        .card-mas-pedido .btn-mini {
            margin-top: 8px; background: #F3DFCF; color: var(--primary); border: none;
            padding: 7px; border-radius: 14px; font-weight: 700; font-size: 12px;
            font-family: inherit; cursor: pointer; width: 100%;
        }
        .medalla-mas-pedido {
            position: absolute; top: 7px; left: 7px; background: rgba(42,32,24,0.82); color: #fff;
            font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 12px;
        }

        .barra-filtro-ofertas { max-width: 600px; margin: 0 auto; padding: 0 15px; }
        .btn-filtro-ofertas { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #FFF3EC; border: 1.5px solid var(--primary-light); color: var(--primary); padding: 12px; border-radius: 14px; font-weight: bold; font-size: 14px; cursor: pointer; font-family: inherit; box-sizing: border-box; margin-top: 10px; }
        .btn-filtro-ofertas.activo { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: white; }
        .aviso-sin-ofertas { text-align: center; color: #948870; font-size: 14px; padding: 30px 15px; }
        
        .cart-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #25D366; color: white; padding: 15px; text-align: center; display: none; cursor: pointer; font-weight: bold; box-sizing: border-box; z-index: 1000;}
        
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; z-index: 2000; }
        .modal-overlay.active { display: block; }
        .modal-content { position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; padding: 25px 20px; box-sizing: border-box; border-radius: 25px 25px 0 0; max-height: 85vh; overflow-y: auto; }
        .input-modal { width: 100%; padding: 14px; margin-top: 5px; border: 1px solid #DCCBAF; border-radius: 8px; box-sizing: border-box; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
        .campo-pin-wrap { position: relative; }
        .campo-pin-wrap .input-modal { padding-right: 46px; }
        .btn-ver-pin { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 20px; padding: 4px; line-height: 1; color: #6B5842; margin-top: 2px; }

        /* Modal de confirmación de pago (resumen + medios de pago + subir comprobante QR) */
        .medio-pago-item { background: #F6ECDD; border: 1px solid #E8C88A; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; font-weight: bold; color: var(--primary-dark); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
        .btn-copiar-medio-pago { flex-shrink: 0; background: var(--primary-dark); color: white; border: none; padding: 7px 12px; border-radius: 20px; font-weight: bold; font-size: 12px; cursor: pointer; }
        .btn-copiar-medio-pago.copiado { background: #2e7d32; }
        .aviso-comprobante { background: #FFF3E0; border: 1px solid #FFCC80; color: var(--primary-dark); border-radius: 10px; padding: 12px; font-size: 13px; line-height: 1.5; margin: 14px 0; }
        /* Este ya tenía su propio botón (el input nativo estaba oculto desde antes), así que solo
           se alinea el aspecto con el de las demás pantallas: mismo borde punteado, mismo fondo y
           mismo radio que .zona-imagen. No se cambia su comportamiento, que convierte la imagen a
           base64 y por eso no puede compartir el JavaScript genérico. */
        .btn-subir-comprobante { display: block; text-align: center; background: #FDFAF5; color: #6B5842; border: 2px dashed #CBB89A; padding: 18px 16px; width: 100%; border-radius: 14px; font-weight: bold; cursor: pointer; font-size: 14px; box-sizing: border-box; transition: border-color .2s, background .2s; }
        .btn-subir-comprobante:hover { border-color: var(--primary); background: #FFF3EC; }
        .btn-subir-comprobante.subido { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; border-style: solid; }
        #preview-comprobante { display: none; width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; margin-top: 10px; border: 1px solid #DCCBAF; }
        .btn-enviar-ws { background: #25D366; color: white; border: none; padding: 15px; width: 100%; border-radius: 25px; font-weight: bold; margin-top: 15px; font-size: 16px; transition: 0.3s;}
        .btn-enviar-ws:disabled { background: #948870; }
        .btn-cerrar { background: none; border: none; font-size: 24px; position: absolute; top: 15px; right: 20px; cursor: pointer; color: #5C5044; }
        .btn-link { background: none; border: none; color: var(--primary); margin-top: 15px; width: 100%; font-size: 14px; text-decoration: underline; cursor: pointer; }

        /* Modal de revisión de carrito */
        .carrito-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-bottom: 1px solid #EDE1CD; padding: 12px 0; gap:10px; }
        .carrito-item-nombre { flex:1; font-weight:bold; font-size:14px; min-width: 140px; }
        .carrito-item-precio { color:#7F7365; font-weight:normal; font-size:13px; }
        .carrito-item-comentario { flex-basis: 100%; font-size: 12px; color: var(--primary); font-weight: normal; font-style: italic; margin-top: 2px; }
        .btn-comentario-item { background:none; border:none; color:var(--primary-dark); font-size:18px; cursor:pointer; margin-left:6px; }
        .controles-cant { display:flex; gap:10px; align-items:center; background:#F5EEE2; border-radius:15px; padding:4px 12px; }
        .btn-cant { background:none; border:none; font-size:20px; font-weight:bold; color:var(--primary); cursor:pointer; line-height:1; }
        .btn-eliminar-item { background:none; border:none; color:#c62828; font-size:18px; cursor:pointer; margin-left:6px; }
        .btn-seguir-agregando { background:#EDE1CD; color:#4A3F33; border:none; padding:14px; width:100%; border-radius:25px; font-weight:bold; margin-top:10px; font-size:15px; cursor:pointer; }

        /* Desglose de totales (subtotal / tarifa / total) */
        .fila-desglose { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:#4A3F33; padding:6px 0; }
        .fila-desglose.fila-total { border-top:1px solid #EDE1CD; margin-top:6px; padding-top:10px; font-size:17px; font-weight:800; color:var(--primary); }
        .btn-info-tarifa { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#DCCBAF; color:#4A3F33; border:none; font-size:11px; font-weight:bold; cursor:pointer; margin-left:5px; padding:0; line-height:1; vertical-align:middle; }
        .nota-domicilio { font-size:12px; color:#7F7365; background:#F9F3E7; padding:10px 12px; border-radius:10px; margin-top:8px; line-height:1.5; }

        /* Selector de método de entrega: dirección vs GPS */
        .toggle-metodo-entrega { display: flex; gap: 8px; margin: 10px 0 14px 0; }
        .btn-metodo { flex: 1; padding: 12px 8px; border: 1.5px solid #DCCBAF; background: white; border-radius: 10px; font-size: 13px; font-weight: bold; color: #5C5044; cursor: pointer; }
        .btn-metodo.activo { border-color: var(--primary); background: #F6ECDD; color: var(--primary); }
        .btn-gps-capturar { background: #EDE4D6; color: #6B5842; border: 1px dashed #C7B393; padding: 14px; width: 100%; border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 14px; }
        .btn-gps-capturar.capturado { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }

/* --- PLATO AGOTADO ---
   Se atenúa pero NO se oculta: el cliente tiene que poder ver que el plato existe y que hoy no
   hay. La foto va en escala de grises porque una foto apetitosa a todo color de algo que no se
   puede pedir es justo lo contrario de lo que se busca. El nombre y el precio se dejan legibles
   para que sirva de referencia para otro día. */
.producto-card.esta-agotado { opacity: .72; background: #FBF8F3; }
.producto-card.esta-agotado .producto-img { filter: grayscale(85%); }
.badge-agotado-menu {
    position: absolute; top: -10px; right: -8px; z-index: 2;
    background: #6E6255; color: white; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .3px;
    padding: 6px 12px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,.25);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .badge-agotado-menu {
        top: 8px; left: 8px; right: auto; font-size: 10px; padding: 4px 9px;
        box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }
}