/* 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: var(--bg, #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; }
        /* ============================================================================
           CABECERA DEL RESTAURANTE: LOGO A UN LADO, DATOS AL OTRO
           ============================================================================

           Antes iba todo centrado en una columna --logo, nombre, calificación, estado, ciudad,
           uno debajo de otro-- y la cabecera medía casi una pantalla entera. A los lados del
           logo quedaban dos franjas de blanco sin nada, y el menú, que es lo único que la
           persona vino a ver, empezaba fuera de la pantalla.

           Con dos columnas ese blanco lo ocupa información y la cabecera mide bastante menos.
           El logo además puede crecer SIN costar altura: los datos de al lado ya ocupan ese
           alto de todas formas. Es la parte que más se agradece, porque el logo es lo que hace
           que alguien reconozca que llegó al sitio correcto. */

        .header-restaurante { background: white; padding: 0 20px 16px 20px; border-bottom: 1px solid #E7DCC8; margin-top: -45px; border-radius: 26px 26px 0 0; position: relative; }

        .cabecera-rest { display: flex; align-items: flex-start; gap: clamp(12px, 4vw, 16px); padding-top: 20px; }

        /* --- EL CONJUNTO DE LA CABECERA, CENTRADO EN LA PÁGINA ---
           600px es el mismo ancho de .contenedor-menu, así que el logo, los datos y los botones
           quedan alineados a plomo con la lista de platos de abajo, en vez de estirarse de lado a
           lado. En un móvil no cambia nada (la pantalla ya es más angosta que 600px); en escritorio
           es lo que quita la franja blanca vacía que quedaba a la derecha del nombre.

           Va en las tres piezas -- la fila de logo+datos, la línea divisoria y la de acciones --
           porque son elementos hermanos: centrando solo uno, los otros se quedan desalineados. */
        .cabecera-rest,
        .rest-divisor,
        .acciones-rest { max-width: 600px; margin-left: auto; margin-right: auto; }

        /* clamp() y no un tamaño fijo: en un teléfono estrecho 140px dejarían la columna de datos
           en un carril donde "Abierto ahora · Santa Marta" se parte en tres renglones. El 26vw del
           medio hace que el logo crezca con la pantalla, y los topes evitan los dos extremos
           (diminuto en un móvil pequeño, desproporcionado en una tablet).

           box-sizing:border-box para que el aro blanco NO sume ancho: sin él, el borde de 3px se
           suma por fuera y la cuenta de cuánto le queda a la columna de datos deja de cuadrar. */
        .logo-wrap { flex: 0 0 auto; }
        /* Logo más grande (es la cara del restaurante) con un aro de color del tema detrás y una
           entrada con rebote suave. El tamaño subió de 84–116 a 96–140. */
        .logo-restaurante {
            width: clamp(96px, 30vw, 140px); height: clamp(96px, 30vw, 140px);
            box-sizing: border-box; border-radius: 50%; object-fit: cover;
            border: 3px solid #fff; display: block;
            box-shadow: 0 8px 22px rgba(35, 27, 20, .18), 0 0 0 4px rgba(var(--primary-rgb), .10);
            transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
            animation: acomer-logo-in .6s cubic-bezier(.2,.8,.25,1) both;
        }
        .logo-wrap:hover .logo-restaurante {
            transform: scale(1.04) rotate(-1.5deg);
            box-shadow: 0 14px 30px rgba(35, 27, 20, .24), 0 0 0 5px rgba(var(--primary-rgb), .16);
        }
        @keyframes acomer-logo-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
        @keyframes acomer-sube    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        /* Entrada escalonada de la ficha de identidad: nombre, calificación, estado, ubicación y
           la fila de acciones aparecen una tras otra, dándole ritmo a la cabecera. */
        .nombre-rest      { animation: acomer-sube .5s ease .06s both; }
        .rest-calificacion{ animation: acomer-sube .5s ease .13s both; }
        .rest-meta        { animation: acomer-sube .5s ease .19s both; }
        .rest-ubicacion   { animation: acomer-sube .5s ease .25s both; }
        .acciones-rest    { animation: acomer-sube .5s ease .32s both; }

        /* El respaldo para el restaurante que todavía no subió su logo. Es un <div>, no un <img>,
           así que ya hereda de arriba el tamaño, el redondeo y el aro blanco: aquí solo hay que
           centrar el ícono dentro. Mismo criterio que .sin-foto de los platos. */
        .logo-sin-foto {
            display: flex; align-items: center; justify-content: center;
            font-size: clamp(34px, 11vw, 48px); line-height: 1;
            background: #EDE4D6; user-select: none;
        }

        /* min-width:0 es obligatorio en un hijo de flex: sin él, un nombre largo sin espacios
           ("Restaurante&Parrilla") ensancha la columna, empuja al logo y lo saca de la tarjeta.
           Es el fallo clásico de flexbox y no se ve hasta que aparece ese restaurante. */
        .datos-rest { flex: 1 1 auto; min-width: 0; text-align: left; padding-top: 3px; }
        .datos-rest h1 { overflow-wrap: anywhere; }

        /* ============================================================================
           LA FICHA DE IDENTIDAD: JERARQUÍA EN VEZ DE CUATRO PÍLDORAS IGUALES
           ============================================================================

           Aquí había cuatro recuadros con borde redondeado --calificación, ubicación, favoritos y
           compartir-- del mismo tamaño, el mismo grosor de línea y el mismo color. Cuando todo
           pesa lo mismo, nada manda: el ojo no sabe por dónde empezar y el conjunto se lee como
           una pila de etiquetas, no como la ficha de un negocio.

           Ahora cada dato tiene el peso que le toca:

             1. EL NOMBRE, grande y apretado. Es a lo que la persona vino.
             2. LA CALIFICACIÓN, texto con una estrella. Informa, no pide que la toquen.
             3. EL ESTADO, con un punto de color. Es el dato más accionable ("¿puedo pedir ya?")
                y se ve sin leer.
             4. "VER UBICACIÓN", enlace. Se va a otra aplicación: no es un botón de esta pantalla.

           Y solo lo que se pulsa lleva fondo. Un borde alrededor de un dato que no hace nada es
           una promesa de que se puede tocar. */

        .nombre-rest {
            margin: 0; font-size: clamp(20px, 6vw, 25px); line-height: 1.12;
            /* El interletrado negativo es lo que hace que un nombre corto se lea como un título y
               no como una palabra suelta. Solo funciona en tamaños grandes; por eso no está en el
               resto de la ficha. */
            letter-spacing: -.6px; font-weight: 800; color: #241B14;
        }

        .rest-calificacion { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: #7A6C5B; }
        /* Dorado propio y no var(--primary): una estrella es una estrella en cualquier tema. Si
           tomara el color del restaurante, en un menú azul habría estrellas azules y dejarían de
           leerse como una calificación. */
        .rest-calificacion .ico-estrella { color: #D79A2B; flex: 0 0 auto; }
        .rest-nota { color: #241B14; font-weight: 700; }
        /* "aún sin calificaciones" es la explicación de "Nuevo", no un dato más: va más claro para
           que se lea después y no compita con la palabra. */
        .rest-nota-detalle { color: #B7A992; font-weight: 500; }

        .rest-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 6px 0 0 0; font-size: 13.5px; font-weight: 500; color: #6E6252; }
        /* El punto es el indicador: se ve de un vistazo, sin leer. El halo (el tercer valor del
           box-shadow, sin desenfoque) lo hace visible sin agrandarlo, que a 7px es la diferencia
           entre un indicador y una mota de polvo. */
        .rest-punto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
        .rest-punto-abierto { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, .16); }
        .rest-punto-cerrado { background: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .14); }
        .rest-punto-pausado { background: #C98A2C; box-shadow: 0 0 0 3px rgba(201, 138, 44, .16); }
        /* Verde y rojo NO son lo único que distingue los estados: la palabra ya lo dice. El color
           acompaña, no informa por su cuenta -- que es lo que hace que también funcione para quien
           no distingue esos dos colores. Los tonos son oscuros para que contrasten sobre blanco. */
        .rest-estado { font-weight: 700; }
        .rest-estado-abierto { color: #1F7A45; }
        .rest-estado-cerrado { color: #A5321F; }
        .rest-estado-pausado { color: #8A6413; }
        /* El separador lo pone el CSS PEGADO A LA CIUDAD, no como un elemento aparte. Suelto era
           una pieza más de un renglón que se ajusta solo: cuando el estado era largo, la línea se
           partía justo antes de la ciudad y el punto quedaba colgando al final del renglón, con el
           nombre de la ciudad solo debajo. Así los dos se van juntos o se quedan juntos. */
        .rest-ciudad::before { content: '·'; margin-right: 7px; color: #C9BCA8; font-weight: 700; }

        /* El subrayado va en el borde y no en text-decoration: así se puede aclarar sin tocar el
           color del texto. Un subrayado del mismo tono que la letra grita; a un 28% acompaña. */
        .rest-ubicacion {
            display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
            font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: none;
            border-bottom: 1.5px solid rgba(var(--primary-rgb), .28); padding-bottom: 1px;
        }
        .rest-ubicacion:hover { border-bottom-color: var(--primary); }
        .rest-ubicacion .ico { flex: 0 0 auto; }

        /* --- DOMICILIO GRATIS ---
           Verde y no del color de la marca: es la única cosa de esta cabecera que le AHORRA
           dinero al cliente, y si se pintara como todo lo demás se leería como un dato más de la
           ficha. El verde es el mismo que ya usa la app para "gratis" y para WhatsApp.

           display:block y width:fit-content -- la pastilla mide lo que mide su texto y se pone en
           su propio renglón, debajo de "Ver ubicación". En línea con él, "Domicilio gratis desde
           $60.000" empujaba la ubicación fuera de la columna en un celular. */
        .rest-envio-gratis {
            display: block; width: fit-content; max-width: 100%; margin-top: 9px;
            background: rgba(37, 211, 102, .12);
            border: 1px solid rgba(37, 211, 102, .38);
            color: #12803D; font-size: 12.5px; font-weight: 700; line-height: 1.35;
            padding: 5px 11px; border-radius: 999px;
            animation: acomer-sube .5s ease .28s both;
        }
        @media (prefers-reduced-motion: reduce) {
            .rest-envio-gratis { animation: none; }
        }

        /* Se desvanece hacia la derecha: una línea de lado a lado corta la tarjeta en dos, y lo que
           se quiere es separar, no partir. */
        .rest-divisor { height: 1px; margin-top: 16px; background: linear-gradient(90deg, #E9DECB, #F4EDE1); }

        /* ============================================================================
           FAVORITOS + COMPARTIR + REDES: UNA SOLA LÍNEA, SIEMPRE
           ============================================================================

           Con los tamaños de antes (icono de 28px, texto de 14px, padding de 15px) las tres
           cosas necesitaban 344px y en un teléfono de 320px solo hay 280 disponibles. Con
           flex-wrap:wrap las redes se caían al renglón de abajo; era lo que pasaba.

           La garantía tiene DOS capas, y hacen falta las dos:

             1. nowrap + min-width:0 + ellipsis en los botones de texto. Esto solo ya garantiza
                el renglón único pase lo que pase: si algún día el texto crece o aparece un
                idioma más largo, el botón se recorta con "…" en vez de tirar las redes abajo.
                Es la red de seguridad, no el plan.
             2. clamp() en el tamaño del texto, del padding y de los iconos, para que el plan
                normal sea que NADA se recorte. Medido en el peor caso (las tres redes puestas y
                "Guardado" en vez de "Favoritos"): en 320px sobran unos píxeles, y de 360px para
                arriba sobra sitio de verdad.

           Sin la capa 1, un cambio futuro rompe la línea en silencio. Sin la capa 2, el texto
           saldría recortado a diario y "…" no es una interfaz.

           OJO AL AÑADIR ALGO A ESTA FILA: el icono dentro de cada botón ya se comió el margen que
           había. Una pieza más obliga a rehacer la cuenta (está en cabecera_restaurante_prueba.php,
           que la comprueba en 320, 360, 390 y 430px). */
        .acciones-rest { display:flex; gap:8px; flex-wrap:nowrap; align-items:center; margin-top: 12px; }

        /* flex:0 1 auto -> tamaño natural, pero puede encogerse. min-width:0 es lo que permite
           que un hijo de flex baje de su ancho de contenido; sin él, el ellipsis nunca aparece y
           el botón desborda la tarjeta. */
        .acciones-rest .btn-accion {
            flex: 0 1 auto; min-width: 0; margin-top: 0;
            display: inline-flex; align-items: center; justify-content: center;
            gap: clamp(5px, 1.8vw, 7px);
            font-size: clamp(11.5px, 3.3vw, 14px);
            padding: 9px clamp(7px, 2.4vw, 14px);
        }
        /* El que se recorta es el TEXTO, no el botón: si el ellipsis se pusiera en el botón, se
           comería primero el icono, que es lo último que debería desaparecer. */
        .acciones-rest .btn-etiqueta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .acciones-rest .btn-accion .ico { flex: 0 0 auto; width: clamp(15px, 4.4vw, 17px); height: clamp(15px, 4.4vw, 17px); }

        /* Las redes NO se encogen: un icono a medias no se reconoce, y son el elemento más
           pequeño de la fila. Si hay que ceder espacio, lo ceden los botones de texto, que
           siguen leyéndose recortados.
           Van pegadas a la derecha: no son una acción sobre el restaurante como las otras dos,
           son un sitio al que ir. El margin-left:auto las separa sin necesidad de un divisor. */
        /* display:flex tiene que estar aquí: los iconos son <img> con display:block, así que en
           un <span> normal se apilan en vertical y la fila crece a tres alturas. Se perdió una
           vez al reordenar este bloque y no se nota mirando el CSS: se nota en la pantalla. */
        .redes-menu { display: flex; align-items: center; gap: 10px; }
        .acciones-rest .redes-menu { flex: 0 0 auto; margin-left: auto; gap: clamp(5px, 1.8vw, 10px); }
        /* Cada red es siempre uno de estos: un <a> con color (tiene enlace) o un <button> gris
           (.red-sin-config, sin enlace) que al tocarse explica que aún no está registrada. */
        .redes-menu .red-item { display: block; padding: 0; margin: 0; background: none; border: none; cursor: pointer; line-height: 0; transition: transform .18s ease, filter .18s ease; }
        .redes-menu .red-item img { width: clamp(22px, 6.8vw, 28px); height: clamp(22px, 6.8vw, 28px); display: block; }
        .redes-menu .red-item:hover { transform: translateY(-2px) scale(1.08); }
        .redes-menu .red-sin-config img { filter: grayscale(1); opacity: .35; transition: opacity .18s ease; }
        .redes-menu .red-sin-config:hover img { opacity: .55; }
        .redes-menu .red-sin-config:hover { transform: translateY(-1px) scale(1.04); }

        /* --- SUPERFICIES QUE SIGUEN AL TEMA ---
           El fondo de los botones es el color del restaurante rebajado al 7%, no un beige fijo.
           Antes eran beiges de piedra (#F6ECDD, #EDE4D6, #F3DFCF...) que no cambiaban con el tema:
           en un menú verde quedaban varios recuadros color crema flotando, y era justo lo que
           delataba que el tema estaba puesto a medias.

           Y ya no llevan borde. El borde hacía falta cuando el fondo del botón era IGUAL al de la
           página y sin línea desaparecía; con un fondo propio, el botón se distingue solo. Menos
           líneas en pantalla es exactamente lo que separa una interfaz de un formulario. */
        .btn-accion {
            background: rgba(var(--primary-rgb), .07); border: none; color: var(--primary-dark);
            padding: 9px 15px; border-radius: 12px; font-weight: 700; cursor: pointer;
            margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
            transition: background .2s, color .2s; text-decoration: none; font-size: 14px;
            font-family: inherit;
        }
        .btn-accion:hover { background: rgba(var(--primary-rgb), .13); }
        /* Dentro de la columna de datos, el margin-top de 10px que traen los botones separa de más:
           esa columna es estrecha y cada píxel vertical de la cabecera empuja el menú hacia abajo.
           Se anula solo ahí; en la fila de Favoritos/Compartir el botón conserva su separación. */
        .datos-rest .btn-accion { margin-top: 6px; }

        /* GUARDADO: EL MISMO CORAZÓN, LLENO.
           El relleno lo pone el CSS y no un dibujo distinto, así que los dos estados son
           reconociblemente la misma cosa. La propiedad fill de CSS gana al atributo fill="none"
           del SVG -- un atributo de presentación pierde contra cualquier regla. */
        .btn-accion.activo { background: var(--primary); color: white; }
        .btn-accion.activo .ico path { fill: currentColor; }

        .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: var(--bg, #F6ECDD); color: var(--primary-dark); }
        .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; }

        /* ============================================================================
           LA CARTA: UN PLATO POR RENGLÓN EN EL CELULAR, DOS EN ESCRITORIO
           ============================================================================

           En escritorio la carta de una sola columna dejaba media pantalla vacía y
           obligaba a bajar el doble para recorrer el mismo menú. En el celular no se
           toca: la tarjeta es media foto y medio texto, y partida en dos no quedaría
           ni foto ni texto.

           Una rejilla por categoría (el título va entre medias, ver restaurante.php).
           `minmax(0, 1fr)` y no `1fr` a secas: sin él, el nombre largo de un plato
           ensancha su columna y descuadra la fila entera. Las filas se estiran solas,
           así que dos platos vecinos quedan a la misma altura aunque uno tenga
           descripción y el otro no. */
        /* align-items:start -- las tarjetas conservan su altura natural en vez de estirarse a
           la de su vecina. Estirándolas, un plato SIN foto al lado de uno con foto se llenaba
           de un vacío blanco enorme hasta igualar la altura: la tarjeta sin foto es corta a
           propósito. Que dos tarjetas de la misma fila acaben a distinta altura es lo normal
           en una rejilla de fichas; el hueco blanco no lo es. */
        .productos-grid { display: grid; gap: 15px; align-items: start; }
        /* Dentro de la rejilla la separación la pone el gap. Sumarle el margen de la
           tarjeta dejaba las filas más separadas que las columnas. */
        .productos-grid .producto-card { margin-bottom: 0; }

        @media (min-width: 900px) {
            /* La columna se ensancha SOLO cuando de verdad hay dos platos por renglón:
               600 px partidos en dos dejarían 293, o sea 146 de foto -- más pequeña que
               la miniatura que había antes de poner la foto a media tarjeta. Con 1000 px
               cada plato tiene ~485 y su foto ~242, parecida a la que hoy se ve en un
               celular grande. */
            .contenedor-menu { max-width: 1000px; }
            .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        /* padding y gap en 0, align-items:stretch y overflow:hidden: los pide la foto a media
           tarjeta (ver .producto-img más abajo). La foto pega contra el borde y el recorte es lo
           que hace que respete las esquinas redondeadas. */
        .producto-card {
            background: #fff; border-radius: 12px; margin-bottom: 15px; display: flex;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;
            padding: 0; gap: 0; align-items: stretch; overflow: hidden;
        }
        /* 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; }
            .logo-restaurante, .nombre-rest, .rest-calificacion, .rest-meta, .rest-ubicacion, .acciones-rest { animation: none; }
            .logo-restaurante, .redes-menu .red-item { transition: none; }
            .logo-wrap:hover .logo-restaurante { transform: none; }
        }
        /* --- TARJETA DE PRODUCTO: MEDIA FOTO, MEDIA INFORMACIÓN ---
           En todos los tamaños, no solo en el celular. Antes en escritorio era una miniatura de
           80px, que es diminuta justo donde la foto es lo que más vende: es la primera vez que el
           cliente ve el plato. La columna del menú mide 600px como mucho, así que "la mitad" son
           unos 285px de foto -- grande, pero sin comerse la información.

           La foto pega contra el borde (sin padding ni esquinas redondeadas por dentro) y el texto
           ocupa la otra mitad. Lo que eso le exige a la tarjeta está en .producto-card, arriba. */
        .producto-img {
            flex: 0 0 50%;
            width: 50%;
            object-fit: cover;
            cursor: zoom-in;
            border-radius: 0;

            /* --- LA PROPORCIÓN FIJA ES LO IMPORTANTE DE ESTA REGLA ---
               Sin aspect-ratio, la altura de la foto la decidía la proporción REAL del archivo
               subido, y esa altura arrastraba a toda la tarjeta: una foto vertical de 9:16 hacía
               una tarjeta larguísima con la foto entera dentro, en vez de recortarse en cuadro
               como las demás. object-fit:cover no lo evitaba, porque no había ningún alto que
               respetar: la imagen era la que lo imponía.

               Con la proporción declarada aquí, la foto siempre ocupa un cuadro del ancho de su
               mitad, y object-fit:cover recorta lo que sobre. Una foto vertical, una panorámica y
               una cuadrada producen exactamente la misma tarjeta.

               align-self:stretch se conserva para el caso contrario: si la descripción del plato
               es larga y hace la tarjeta más alta que el cuadro, la foto crece con ella en vez de
               dejar una franja blanca debajo. */
            aspect-ratio: 1 / 1;
            height: auto;
            min-height: 145px;
            align-self: stretch;
        }
        /* 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; }
        /* 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; }

        /* NOTA: los ajustes de .badge-oferta-menu NO van aquí, sino junto a su regla base (más
           abajo en esta misma hoja). Estuvieron aquí y no funcionaban: como la regla base se
           declara después y tiene la misma especificidad, ganaba ella. */

        @media (max-width: 600px) {
            /* AQUÍ SE CORTABA LA DESCRIPCIÓN A 3 LÍNEAS (-webkit-line-clamp), y se quitó.
               17-ago-2026.

               La idea era dejar las tarjetas parejas para poder recorrer la lista de un vistazo.
               Lo que producía en la práctica era esto:

                   "Pollo, tocineta, mozarella, tomate, cebolla, lechuga, tártara, rosada
                    especial…"

               ...y ahí se acababa. El cliente no llegaba a saber qué lleva el plato que está a
               punto de pedir, que es justo la pregunta que trae. Un menú parejo pero incompleto
               no sirve para lo único que tiene que hacer.

               Se quitó a favor de mostrar el texto entero. Lo que evita que una tarjeta se
               dispare de alto ya no es el recorte sino el límite de verdad, el que faltaba: 300
               caracteres, comprobados en el formulario y en el servidor (ver
               PRODUCTO_DESCRIPCION_MAX_ACOMER en validacion_funciones.php).

               Si algún día se quiere volver a acortar, que sea con un "ver más" que despliegue,
               nunca con puntos suspensivos que no llevan a ninguna parte. */
            .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: var(--bg, #F3DFCF); color: var(--primary-dark); border: 1px solid var(--primary-dark); 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 IZQUIERDA de .producto-card, que ya es position:relative -- no importa que
           este <span> siga viviendo dentro de .producto-info en el HTML.

           DENTRO de la tarjeta, no asomando por fuera. Antes iba en top:-10px / right:-8px, que
           la dejaba sobresaliendo por la esquina. Eso funcionaba mientras la tarjeta no recortaba
           su contenido; ahora .producto-card lleva overflow:hidden en todos los tamaños (lo pide
           la foto a media tarjeta, para que respete las esquinas redondeadas) y ahí una etiqueta
           que se sale del marco simplemente se corta. Sobre la foto se ve mejor y no depende de
           que nada la deje asomar. */
        .badge-oferta-menu {
            position: absolute;
            top: 8px;
            left: 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;
            /* La foto de fondo puede ser clara u oscura, así que la etiqueta lleva su propia
               sombra para leerse siempre encima de cualquier plato. */
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            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: solo más pequeña ---
           La posición ya es la misma en todos los tamaños (esquina superior izquierda, sobre la
           foto). Aquí solo se reduce, porque la mitad de una tarjeta en un teléfono es estrecha y
           a 13px la etiqueta llega a tapar media foto.

           Va DESPUÉS de la regla base a propósito: con la misma especificidad gana la que se
           declara de última. */
        @media (max-width: 600px) {
            .badge-oferta-menu {
                font-size: 10px;
                padding: 4px 9px;
            }
            .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;
            /* El mismo fondo que la página: esta barra es pegajosa y se queda flotando
               sobre el menú, así que con otro color se vería una franja de distinto tono. */
            background: var(--bg, #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; }
        /* La barra pegajosa acompaña al ancho de la carta cuando esta va a dos columnas. Si se
           quedara en 600 px, sus chips de categoría seguirían cortándose ("Burrit...") teniendo
           400 px libres al lado, y la barra se vería más estrecha que el menú que encabeza.
           VA AQUÍ Y NO JUNTO A .productos-grid: la regla de los 600 px está más abajo en el
           archivo que aquel bloque, y con la misma especificidad gana la última. Una media query
           no añade especificidad -- solo la posición decide. */
        @media (min-width: 900px) {
            .barra-menu-nav-inner { max-width: 1000px; }
        }
        .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: var(--bg, #FFF3EC); border: 1.5px solid var(--primary-dark); 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: var(--bg, #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: var(--bg, #F3DFCF); color: var(--primary-dark); border: 1px solid var(--primary-dark);
            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: var(--bg, #FFF3EC); border: 1.5px solid var(--primary-dark); color: var(--primary-dark); 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: var(--bg, #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: var(--bg, #EDE4D6); color: var(--primary-dark); border: 1px dashed var(--primary-dark); 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; }

        /* ============================================================================
           FLUJO DE PEDIDO — DISEÑO Y ANIMACIONES AVANZADAS
           "Tu Pedido" (carrito), "Finalizar Pedido" y "Confirma tu pedido".
           Las reglas van al final del bloque de modales para sobreescribir lo de arriba. */

        /* Barra "Ver Pedido": degradado, esquinas altas redondeadas, sombra y entrada deslizando
           desde abajo cuando menu.js la muestra (le pone display:block en línea). */
        .cart-footer {
            background: linear-gradient(180deg, #2AE06E, #25D366 55%, #1DB954);
            border-radius: 18px 18px 0 0; box-shadow: 0 -6px 22px -6px rgba(29, 140, 78, .45);
            font-size: 15.5px; letter-spacing: .2px; padding: 16px; transition: filter .2s ease;
        }
        .cart-footer:hover { filter: brightness(1.04); }
        .cart-footer[style*="block"] { animation: acomer-cart-in .35s cubic-bezier(.2,.8,.25,1) both; }

        /* El fondo del modal se funde al abrir; la hoja inferior entra deslizando; la ficha
           centrada de "tarifa de servicio" hace un pop en su sitio (no debe deslizar). */
        .modal-overlay.active { animation: acomer-modal-fade .25s ease both; }
        .modal-overlay.active:not(#modal-info-tarifa) > .modal-content { animation: acomer-modal-slide .34s cubic-bezier(.2,.8,.25,1) both; }
        #modal-info-tarifa.active > .modal-content { animation: acomer-modal-pop .3s cubic-bezier(.2,.8,.25,1) both; }

        /* Las hojas inferiores: sombra alta, esquinas más redondeadas y un "asa" tipo bottom-sheet. */
        .modal-overlay:not(#modal-info-tarifa) > .modal-content {
            box-shadow: 0 -14px 44px -10px rgba(35, 27, 20, .32); border-radius: 26px 26px 0 0;
        }
        .modal-overlay:not(#modal-info-tarifa) > .modal-content::before {
            content: ''; display: block; width: 44px; height: 5px; border-radius: 3px;
            background: #E6D8C4; margin: -10px auto 16px auto;
        }
        .modal-content h2 { font-weight: 800; color: #241B14; letter-spacing: -.3px; }

        .input-modal { background: #FCFAF6; border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
        .input-modal:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); }

        /* Botón verde de enviar: degradado + un brillo que barre al pasar el mouse. */
        .btn-enviar-ws { position: relative; overflow: hidden; background: linear-gradient(180deg,#2AE06E,#25D366 60%,#1DB954); border-radius: 16px; box-shadow: 0 10px 22px -8px rgba(29,140,78,.55); transition: transform .14s ease, box-shadow .2s ease, filter .2s ease; }
        .btn-enviar-ws::before { content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); transition: left .5s ease; }
        .btn-enviar-ws:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 15px 26px -8px rgba(29,140,78,.6); }
        .btn-enviar-ws:hover:not(:disabled)::before { left: 130%; }
        .btn-enviar-ws:disabled { background: #948870; box-shadow: none; }

        .btn-seguir-agregando { border-radius: 16px; transition: background .18s ease, transform .12s ease; }
        .btn-seguir-agregando:hover { background: #E4D6BF; transform: translateY(-1px); }

        /* Micro-interacciones en los controles de cantidad y de método de entrega. */
        .btn-cant { transition: transform .1s ease; }
        .btn-cant:hover { transform: scale(1.2); }
        .btn-metodo { transition: border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease; }
        .btn-metodo:hover { border-color: var(--primary); transform: translateY(-1px); }
        .fila-desglose.fila-total { font-variant-numeric: tabular-nums; }

        /* Cada renglón del carrito entra con un leve desvanecido escalonado. */
        .carrito-item { animation: acomer-sube .4s ease both; }
        .carrito-item:nth-child(1){animation-delay:.02s} .carrito-item:nth-child(2){animation-delay:.06s}
        .carrito-item:nth-child(3){animation-delay:.10s} .carrito-item:nth-child(4){animation-delay:.14s}
        .carrito-item:nth-child(5){animation-delay:.18s} .carrito-item:nth-child(6){animation-delay:.22s}

        @keyframes acomer-cart-in    { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes acomer-modal-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes acomer-modal-slide{ from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes acomer-modal-pop  { from { opacity: 0; transform: translate(0,-50%) scale(.95); } to { opacity: 1; transform: translate(0,-50%) scale(1); } }

        @media (prefers-reduced-motion: reduce) {
            .cart-footer[style*="block"], .modal-overlay.active,
            .modal-overlay.active > .modal-content, #modal-info-tarifa.active > .modal-content,
            .carrito-item { animation: none; }
            .btn-enviar-ws::before { display: none; }
            .btn-enviar-ws, .btn-seguir-agregando, .btn-cant, .btn-metodo, .input-modal, .cart-footer { transition: none; }
        }

/* --- 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%); }
/* DENTRO DE LA TARJETA, NO ASOMANDO POR FUERA.
   Esta etiqueta se quedó en top:-10px / right:-8px, que era lo correcto cuando la tarjeta no
   recortaba su contenido. Al poner overflow:hidden en .producto-card (lo pide la foto a media
   tarjeta, para que respete las esquinas redondeadas) esas coordenadas la dejan CORTADA: se ve
   media etiqueta pegada al borde de arriba.
   La etiqueta de oferta ya se había arreglado por este mismo motivo -- está contado en su
   comentario, unas líneas más arriba -- pero el arreglo no se aplicó a esta. Un arreglo a medias
   entre dos hermanas es de las cosas que no se ven hasta que alguien manda un pantallazo. */
.badge-agotado-menu {
    /* A LA IZQUIERDA, NO A LA DERECHA. La tarjeta es foto a la izquierda y texto a la derecha, así
       que anclarla a la derecha la pone encima del NOMBRE DEL PLATO. Iba ahí desde siempre, y
       cuando la tarjeta empezó a recortar su contenido pasó de "asomando por la esquina" a
       "tapando el título".
       La de oferta ya vive en left:8px por este mismo motivo. Y no se estorban: el código pinta
       una o la otra, nunca las dos (un descuento en algo que no se puede pedir es lo peor de los
       dos mundos), así que pueden compartir sitio. */
    position: absolute; top: 8px; left: 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; font-size: 10px; padding: 4px 9px;
        box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }
}


/* ============================================================================================
 * HUECO GRIS MIENTRAS CARGA CADA FOTO
 * ============================================================================================
 * El espacio de las imágenes ya estaba reservado (todas tienen alto fijo aquí y width/height en
 * el marcado), así que la página NO salta cuando llegan. Lo que faltaba es lo que se ve en ese
 * hueco mientras tanto: nada. Transparente.
 *
 * En un menú de veinte platos con conexión lenta, eso son veinte cuadros vacíos que se leen como
 * fotos rotas, no como fotos en camino. Un gris cálido dice lo segundo.
 *
 * VA EN EL FONDO DE LA PROPIA <img>, no en un elemento aparte: la foto se pinta encima con
 * object-fit: cover y lo tapa sola. Sin marcado nuevo, sin JavaScript, sin clases que poner y
 * quitar -- y por lo tanto sin nada que se pueda quedar a medias.
 *
 * De paso cubre un caso que antes se veía mal: si una foto ya no está en el disco, en vez del
 * ícono de imagen rota del navegador queda este mismo gris, que no llama la atención.
 *
 * POR QUÉ NO LLEVA ANIMACIÓN (el "brillo" que se desliza)
 * --------------------------------------------------------------------------------------------
 * Porque no habría forma barata de pararla. Cuando la foto termina de cargar, el fondo queda
 * tapado pero la animación SIGUE corriendo debajo, invisible, en las veinte tarjetas a la vez.
 * En un celular de gama baja eso se paga en batería y en desplazamiento con tirones, a cambio de
 * un efecto que nadie llega a ver porque dura lo que tarda una miniatura en bajar.
 *
 * Distinguir "cargando" de "sin foto" no depende del brillo: los platos sin foto ya tienen su
 * propio bloque (.sin-foto), en tono durazno y con un ícono.
 * ============================================================================================ */
.producto-img,
.card-mas-pedido img,
.logo-restaurante {
    background-color: var(--bg, #EDE4D6);
}


/* ============================================================================================
 * TARJETAS SIN FOTO: LAS ETIQUETAS VUELVEN AL FLUJO
 * ============================================================================================
 *
 * EL FALLO (25-ago-2026, visto en la demo y presente en producción desde siempre).
 *
 * "En oferta" y "Agotado por hoy" se colocan con position:absolute sobre la esquina de la
 * tarjeta, que es donde está la foto. Encima de una foto se leen perfectamente.
 *
 * Pero un plato SIN foto no tiene esa esquina: ahí empieza directamente el texto. La etiqueta
 * caía encima del NOMBRE DEL PLATO y lo tapaba -- "Ceviche de camarón" se leía "...arón". El
 * cliente ve una oferta de algo que no puede saber qué es.
 *
 * No es un caso raro: le pasa a todo restaurante que aún no ha subido fotos, que son justo los
 * recién registrados. Es el mismo patrón del logo roto de esta misma semana -- lo que se dibuja
 * encima de una imagen deja de tener sentido cuando la imagen no está.
 *
 * ARREGLO: sin foto, las etiquetas dejan de flotar y se ponen en el flujo, encima del nombre.
 * Ocupan una línea propia y no tapan nada. */
.producto-card.sin-foto .badge-oferta-menu,
.producto-card.sin-foto .badge-agotado-menu {
    position: static;
    /* inline-flex y no flex: como hijas directas de .producto-info (que es flex en columna), un
       display:flex las estiraría a todo el ancho de la tarjeta. */
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 8px;
    /* La sombra existía para despegarlas de la foto. Sobre fondo liso solo ensucia. */
    box-shadow: none;
}

/* ============================================================================================
   MIGAS DE PAN AL FINAL DE LA CARTA  (1-sep-2026)
   ============================================================================================
   El camino de vuelta: esta carta > el directorio > la portada. Ver la nota larga en
   restaurante.php, junto al <nav class="menu-migas">.

   El margen inferior es generoso a propósito: la barra "Ver Pedido 🛒" va fija abajo y taparía
   la última línea de la página. */
.menu-migas {
    max-width: 1000px;
    margin: 26px auto 110px auto;
    padding: 0 18px;
    font-size: 13px;
    color: #948870;
    text-align: center;
    line-height: 1.9;
}
.menu-migas a {
    color: #6E6255;
    text-decoration: none;
    border-bottom: 1px solid rgba(110, 98, 85, .25);
    padding-bottom: 1px;
}
.menu-migas a:hover { color: var(--primary, #B14B27); border-bottom-color: rgba(177, 75, 39, .5); }
.menu-migas span { margin: 0 6px; }
.menu-migas-actual { color: #948870; font-weight: 600; }