/* ===========================================================================
TEMA DEFAULT — hoja de estilos del sitio público
---------------------------------------------------------------------------
Este archivo es 100% rediseñable por cliente. Nada de /core depende de él.
Ni los colores ni las tipografías se escriben a mano: layout.php las imprime
como variables CSS a partir de lo que el dueño eligió en el panel.
--color-primario · --color-secundario · --color-fondo
--fuente-titulos · --fuente-textos · --escala-texto
--radio · --radio-chico · --radio-boton
Siempre se usan con valor de respaldo —var(--radio, 14px)— para que el tema
siga viéndose bien aunque una variable falte.
Mobile-first: los estilos base son para celular y luego crecen con
@media (min-width: ...).
=========================================================================== */
:root {
--color-texto: #F4F4F5;
--color-texto-suave: #A1A1AA;
--color-superficie: #171717;
--color-borde: #262626;
--espacio: 16px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
/* NADA SE MUEVE DE LADO
---------------------
Es el equivalente al "desbordamiento oculto" que se le pone a un contenedor
en Elementor, pero con `clip` en vez de `hidden`, y la diferencia importa:
`hidden` convierte al elemento en un contenedor de desplazamiento, y cualquier
`position: sticky` de dentro deja de pegarse a la pantalla para pegarse a ese
contenedor. `clip` recorta sin crear contenedor, así que lo pegajoso sigue
funcionando. (La cabecera ya no es pegajosa, pero un tema de cliente puede
querer que lo sea, y este candado no debe estorbarle.)
El navegador que no entienda `clip` simplemente ignora la línea y se queda
como estaba. No se pone `hidden` de respaldo justamente por lo anterior. */
html { overflow-x: clip; }
/* Una palabra sin espacios más ancha que la pantalla —un enlace pegado en las
referencias, un nombre de platillo escrito de corrido— empuja su columna y
con ella la página entera. Que se parta donde sea antes que eso. */
body { overflow-wrap: break-word; }
/* El tamaño general del texto se controla desde el panel. Como todo el tema
está en rem, mover esto agranda o achica el sitio completo de forma pareja. */
html { font-size: var(--escala-texto, 100%); }
body {
background: var(--color-fondo, #0E0E0E);
color: var(--color-texto);
font-family: var(--fuente-textos, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
font-size: 1rem;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3,
.cabecera__nombre,
.categoria__titulo,
.platillo__nombre,
.aviso-vacio__titulo {
font-family: var(--fuente-titulos, inherit);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* --- Cabecera ------------------------------------------------------------ */
/* LA CABECERA SE DESPLAZA, YA NO SE QUEDA PEGADA
----------------------------------------------
Era `position: sticky`. En un celular son ~70 px de los 660 que hay ocupados
para siempre por el logo y el nombre, que es justo lo que ya se leyó al
entrar. Lo que sí se queda fijo es la barra del pedido, abajo, que es la que
hace falta a cada momento. */
.cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px var(--espacio);
border-bottom: 1px solid var(--color-borde);
}
.cabecera__marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cabecera__logo {
width: 44px; height: 44px;
border-radius: 50%;
/* `contain` y no `cover`: un logo se ve completo, no recortado. Con `cover`
un logo apaisado pierde los lados y uno con texto pierde el texto. */
object-fit: contain;
flex-shrink: 0;
}
/* SOBRE «REDUCIR MOVIMIENTO» Y UN LOGO ANIMADO
--------------------------------------------
Mucha gente activa esa preferencia en su teléfono por mareo o por migraña, y
un logo que late sin parar es justo lo que existe para evitar.
Aquí NO se puede hacer nada al respecto, y conviene que quede escrito para
no volver a intentarlo: el logo se pinta con y en . En un no hay fondo y
se ve como se pensó; en un el navegador pone su propio fondo
gris claro y su propia tipografía si no se los quitas. Sobre un tema
oscuro eso es una pastilla blanca que no pega con nada.
Se notaba en «Cambiar» de la sucursal, en los dos botones del mapa y en
«Ver el menú» del pedido vacío: los cuatro son , y los cuatro
salían blancos mientras los enlaces con la misma clase se veían bien. */
background: transparent;
color: inherit;
font-family: inherit;
line-height: 1.2;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* Un botón secundario sí se ve, pero sin competir con el principal. */
.boton--chico {
padding: 8px 14px;
font-size: 0.82rem;
background: var(--color-superficie);
}
.boton--primario {
background: var(--color-primario);
border-color: var(--color-primario);
color: #fff;
}
/* La acción principal de un cajón: todo el ancho disponible.
Las plantillas la venían pidiendo desde la v0.3 y la regla no existía, así
que "Continuar con el pedido" y "Enviar por WhatsApp" salían del tamaño de
su texto, pegados a la izquierda. En un celular, el botón que cierra la
venta tiene que ser el elemento más grande de la pantalla y estar donde cae
el pulgar, no ser uno más del montón. */
/* Botón con icono al lado del texto. Se centran juntos, no el icono pegado al
borde: un logo suelto en la esquina de un botón ancho se lee como un adorno
y no como parte de la acción. */
.boton--icono {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.boton--ancho.boton--icono { display: flex; }
.boton--ancho {
display: block;
width: 100%;
text-align: center;
padding-top: 14px;
padding-bottom: 14px;
font-size: 0.98rem;
}
/* --- Pie ----------------------------------------------------------------- */
/* El .pie completo se define en el bloque de la v0.8.1, más abajo. */
/* El directorio de todas las sucursales que iba aquí se quitó en la v0.8: el
pie es de la sucursal en la que estás. La lista completa se abre en su hoja,
desde el enlace de "Ver nuestras N sucursales". */
/* --- Créditos del desarrollador ------------------------------------------ */
/* Discreto, al pie, sin competir con la marca del restaurante. */
.creditos-dev {
display: block;
text-align: center;
margin-top: 10px;
font-size: 0.72rem;
color: var(--color-texto-suave);
opacity: 0.65;
letter-spacing: 0.01em;
}
.creditos-dev:hover { opacity: 1; color: var(--color-primario); }
/* ===========================================================================
v0.3 — POPUP DE PLATILLO, BARRA DEL PEDIDO Y CARRITO
---------------------------------------------------------------------------
Todo se mide en rem y usa las variables de la marca: cambiando el color o el
redondeo desde el panel, esto se adapta solo. Ningún color escrito a mano.
=========================================================================== */
/* El atributo `hidden` tiene que ganarle a cualquier `display` de aquí abajo.
Sin esto, el popup y el carrito —que son `display: flex` y ocupan toda la
pantalla— siguen existiendo aunque estén "ocultos", y se tragan todos los
toques: la carta se ve perfecta y no responde a nada. En un celular eso es
un sitio muerto, y desde fuera parece que "no carga". */
[hidden] { display: none !important; }
/* CON UNA VENTANA ABIERTA, EL MENÚ DE ATRÁS NO SE MUEVE
-----------------------------------------------------
`overflow: hidden` a secas basta en Android y en escritorio, pero Safari de
iPhone lo ignora: el dedo sigue arrastrando la página de atrás, y al hacerlo
la barra de direcciones se esconde y se vuelve a mostrar. Cada vez que eso
pasa cambia la altura del viewport y el cajón —que está fijo— brinca. Es
parte de por qué "sube mucho".
Fijando el body y guardando en JS la posición para devolverla al cerrar,
Safari deja de tener página que desplazar y todo se queda quieto. El `top`
negativo lo pone el JS: sin él, cerrar la ventana te devuelve al principio
del menú y perdiste el platillo que estabas viendo. */
body.sin-scroll {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
/* --- Tarjeta: "desde $X" -------------------------------------------------- */
.platillo { cursor: pointer; }
.platillo--agotado { cursor: default; }
.platillo__desde {
display: block;
font-size: 0.62rem;
font-weight: 500;
color: var(--color-texto-suave);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
margin-bottom: 1px;
}
/* --- Ventanas flotantes --------------------------------------------------- */
.modal,
.carrito {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: flex-end;
justify-content: center;
}
@media (min-width: 700px) {
.modal { align-items: center; }
}
.modal__fondo {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.66);
backdrop-filter: blur(2px);
}
.modal__caja,
.carrito__caja {
position: relative;
width: 100%;
max-width: 480px;
/* ALTURA: EN CELULAR, TODA LA PANTALLA
------------------------------------
Historia corta, porque el detalle importa. Al principio decía 92vh, y en
el iPhone eso salía MÁS ALTO que la pantalla: en Safari `vh` mide el
viewport GRANDE —el de cuando la barra de direcciones está escondida—,
así que con la barra a la vista la cabecera con la ✕ quedaba debajo del
navegador y el cajón no se podía cerrar.
Se probó dejando una franja de fondo arriba (86svh). Cerraba bien, pero
le quitaba espacio a lo que de verdad importa: el formulario de entrega
mide lo que mide, y recortarle una séptima parte de la pantalla obliga a
desplazar más para llenar lo mismo. En un cajón que es puro contenido, el
hueco decorativo se paga caro.
Ahora ocupa TODO, que es como se comportan las hojas de las apps. Lo que
hacía falta no era el hueco sino que la ✕ estuviera siempre a la mano, y
eso se resuelve con la cabecera fija —ver más abajo—, no quitando alto.
`svh` es el viewport CHICO, el de la barra visible: el único que está
garantizado siempre. El `100%` de respaldo equivale al alto del `.modal`,
que es `position: fixed; inset: 0`, para el navegador que no entienda
svh. */
height: 100%;
height: 100svh;
display: flex;
flex-direction: column;
background: var(--color-superficie, #17171A);
/* Sin esquinas redondeadas arriba: ya no hay nada detrás que enmarcar, y
una curva contra el borde de la pantalla se ve como un error de dibujo. */
border-radius: 0;
overflow: hidden;
animation: subir 0.26s cubic-bezier(0.22, 0.8, 0.3, 1);
}
/* En pantalla grande NO se ocupa todo: un formulario de 480 px estirado a la
altura de un monitor deja el botón de enviar a media pantalla de distancia
del último campo. Ahí sí es una ventana centrada, con su marco y su fondo
alrededor. */
@media (min-width: 700px) {
.modal__caja,
.carrito__caja {
height: auto;
max-height: 86svh;
border-radius: var(--radio, 14px);
}
}
/* La entrada del cajón: sube desde el borde de abajo.
Antes eran 18px de recorrido, que en una hoja de media pantalla no se
alcanzan a percibir: aparecía y ya. El movimiento no es adorno — es lo que
dice de dónde salió esto y a dónde se va a ir cuando lo cierres. Sigue
siendo transform + opacity, y sigue por debajo de los 260 ms. */
/* Una hoja completa sube desde el borde de abajo, no aparece: el recorrido es
lo que dice de dónde salió y por dónde se va a ir. 26% y no 100% porque un
deslizamiento de pantalla entera se siente lento aunque dure lo mismo —el
ojo mide distancia, no milisegundos— y porque arrancando desde fuera se ve
un instante el menú por debajo antes de que la hoja lo tape. */
@keyframes subir {
from { transform: translateY(26%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* En pantalla grande el modal está centrado, no pegado abajo: ahí un
deslizamiento vertical largo se ve raro. Crece un pelo y aparece. */
@media (min-width: 700px) {
.modal__caja { animation: aparecer-centro 0.2s ease; }
}
@keyframes aparecer-centro {
from { transform: scale(0.97); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* El fondo oscuro también entra: sin esto el cajón se desliza sobre una capa
negra que apareció de golpe, y el conjunto se siente a saltos. */
.modal__fondo { animation: desvanecer-entrada 0.2s ease; }
@keyframes desvanecer-entrada {
from { opacity: 0; }
to { opacity: 1; }
}
/* Respeta a quien pidió menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
.modal__caja, .carrito__caja, .modal__fondo { animation: none; }
}
.modal__cerrar {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 0.9rem;
cursor: pointer;
}
/* El botón de compartir ESTE platillo. Lo inyecta el JavaScript del tema base
(ver compartirPlatillo en theme.js), así que un tema que copió el HTML del
popup lo recibe igual; lo que un tema personaliza es esta clase. Espejo del
botón de cerrar, en la otra esquina. */
.modal__compartir {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
color: #fff;
cursor: pointer;
}
/* --- El popup en modo de SOLO MOSTRAR -------------------------------------
La carta que no toma pedidos abre el mismo popup, pero sin nada que tocar:
ni casillas ni botones. Si se pudiera marcar algo, la persona esperaría
poder pedirlo — y aquí no se puede. Es la carta impresa del restaurante. */
.opciones--vista { list-style: none; margin: 0; padding: 0; }
.opcion--vista {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--color-borde, rgba(255,255,255,0.08));
cursor: default;
}
.opcion--vista:last-child { border-bottom: 0; }
.opcion--vista .opcion__nombre { min-width: 0; }
.modal__cargando {
padding: 48px 20px;
text-align: center;
color: var(--color-texto-suave);
}
.girando {
display: inline-block;
width: 26px;
height: 26px;
border: 2px solid var(--color-borde, #2A2A30);
border-top-color: var(--color-primario);
border-radius: 50%;
animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.modal__cuerpo { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* LA FOTO AL ABRIR EL PLATILLO
----------------------------
Era `height: 190px` a todo lo ancho: un rectángulo muy alargado donde una
foto cuadrada se recortaba arriba y abajo y quedaba achatada.
Ahora es cuadrada, centrada y con tope de alto. El tope importa: sin él, en
una pantalla ancha la foto se comería la mitad de la ventana y el nombre, el
precio y las opciones —que es a lo que se viene— quedarían fuera de vista. */
.modal__foto {
width: 100%;
max-width: min(100%, 46svh);
aspect-ratio: 1 / 1;
margin: 0 auto;
background: transparent;
border-radius: var(--radio, 14px);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* El mismo `cover` que la carta, y eso es lo importante: el recorte que ve al
abrir el platillo es EXACTAMENTE el que vio en la tarjeta. Con criterios
distintos, la foto «cambia» al abrirla y parece otro platillo. */
.modal__foto img { width: 100%; height: 100%; object-fit: cover; }
.modal__texto { padding: 18px 20px 4px; }
.modal__titulo {
margin: 0 0 6px;
font-family: var(--fuente-titulos);
font-size: 1.25rem;
}
.modal__descripcion {
margin: 0;
color: var(--color-texto-suave);
font-size: 0.9rem;
line-height: 1.5;
}
/* --- Grupos de opciones --------------------------------------------------- */
.grupo { padding: 18px 20px 4px; }
.grupo + .grupo { border-top: 1px solid var(--color-borde, #2A2A30); }
.grupo__cabecera {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.grupo__titulo {
margin: 0;
font-family: var(--fuente-titulos);
font-size: 1rem;
}
.grupo__regla {
flex: 0 0 auto;
font-size: 0.7rem;
color: var(--color-texto-suave);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.grupo__descripcion {
margin: 0 0 8px;
font-size: 0.82rem;
color: var(--color-texto-suave);
}
.opciones { display: flex; flex-direction: column; }
.opcion {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-borde, #2A2A30);
cursor: pointer;
}
.opcion:last-child { border-bottom: 0; }
.opcion input {
flex: 0 0 auto;
width: 20px;
height: 20px;
accent-color: var(--color-primario);
cursor: pointer;
}
.opcion__nombre { flex: 1 1 auto; font-size: 0.92rem; }
.opcion__precio {
flex: 0 0 auto;
font-size: 0.84rem;
color: var(--color-texto-suave);
font-variant-numeric: tabular-nums;
}
.opcion__precio--libre { color: var(--color-secundario); }
/* Agotada o bloqueada por el máximo del grupo: se ve, pero no se puede tocar.
Esconderla haría que el cliente la buscara en vano. */
.opcion--agotada,
.opcion--bloqueada { opacity: 0.42; cursor: not-allowed; }
.opcion--agotada .opcion__nombre { text-decoration: line-through; }
/* --- Nota del cliente ----------------------------------------------------- */
.nota { display: block; padding: 18px 20px; }
.nota__etiqueta { display: block; font-size: 0.82rem; color: var(--color-texto-suave); margin-bottom: 6px; }
.nota__campo {
width: 100%;
padding: 12px 14px;
background: var(--color-fondo);
border: 1px solid var(--color-borde, #2A2A30);
border-radius: var(--radio-chico, 10px);
color: var(--color-texto);
font-family: inherit;
font-size: 0.9rem;
}
.nota__campo:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.modal__aviso {
margin: 0 20px 16px;
padding: 12px 14px;
border-radius: var(--radio-chico, 10px);
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5;
font-size: 0.85rem;
}
/* --- Pie del popup: cantidad y agregar ------------------------------------ */
.modal__pie {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-borde, #2A2A30);
background: var(--color-superficie, #17171A);
}
.contador {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 4px;
background: var(--color-fondo);
border: 1px solid var(--color-borde, #2A2A30);
border-radius: var(--radio-boton, 999px);
padding: 4px;
}
.contador__boton {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--color-texto);
font-size: 1.1rem;
cursor: pointer;
}
.contador__boton:hover { background: var(--color-borde, #2A2A30); }
.contador__valor {
min-width: 26px;
text-align: center;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.contador--chico .contador__boton { width: 28px; height: 28px; font-size: 0.95rem; }
/* --- Barra fija con el total ---------------------------------------------- */
/* --- La barra del pedido, abajo ------------------------------------------ */
/*
Es una tarjeta, no un botón gigante de color. El botón entero pintado de
rojo pesaba demasiado en una pantalla que ya tiene una foto por platillo, y
no dejaba sitio para lo que de verdad hacía falta decir: EN QUÉ SUCURSAL se
está pidiendo. Con varios locales, descubrir que era el equivocado al final,
con el formulario lleno, es donde se pierde el pedido.
Ahora la tarjeta es oscura y lo único de color es el botón de la derecha,
que es la acción.
*/
.bolsa {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
/* El degradado hace que la carta se desvanezca por debajo en vez de
cortarse de golpe contra el borde de la barra. */
background: linear-gradient(to top, var(--color-fondo) 62%, transparent);
pointer-events: none;
}
.bolsa__caja {
pointer-events: auto;
width: 100%;
max-width: 480px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px 10px 14px;
border: 1px solid var(--color-borde);
border-radius: var(--radio-boton, 999px);
background: var(--color-superficie);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.bolsa__marca {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--color-primario) 18%, transparent);
font-size: 1rem;
}
.bolsa__datos { flex: 1 1 auto; min-width: 0; }
.bolsa__sucursal {
display: block;
font-family: var(--fuente-titulos);
font-size: 0.92rem;
line-height: 1.2;
/* Un nombre largo no puede empujar al botón fuera de la pantalla. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bolsa__resumen {
display: block;
margin-top: 1px;
font-size: 0.78rem;
color: var(--color-texto-suave);
white-space: nowrap;
}
.bolsa__separador { opacity: 0.6; margin: 0 2px; }
.bolsa__boton {
flex: 0 0 auto;
padding: 11px 20px;
border: 0;
border-radius: var(--radio-boton, 999px);
background: var(--color-primario);
color: #fff;
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* Con una sola sucursal el nombre del local no aporta —solo hay uno— y el
resumen sube a ser el renglón principal. */
.bolsa--sin-sucursal .bolsa__sucursal { display: none; }
.bolsa--sin-sucursal .bolsa__resumen { font-size: 0.92rem; color: var(--color-texto); font-weight: 700; }
.barra-bolsa__total { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* --- Cajón del pedido ----------------------------------------------------- */
/* La altura la fija la regla compartida de arriba (86svh). Aquí NO se vuelve
a declarar: tenerla en dos lados fue justamente el error, porque este 88vh
pisaba al otro y el cajón del pedido se salía por arriba en el celular. */
.carrito__cabecera {
/* flex: 0 0 auto — la cabecera no se encoge. Sin esto, con el pedido largo
el navegador le quita altura para dar más a la lista, y la ✕ se aplasta
hasta desaparecer justo cuando más se necesita. */
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 12px;
border-bottom: 1px solid var(--color-borde, #2A2A30);
}
/* El pie tampoco se encoge: ahí vive el total y el botón de enviar. Lo único
que cede altura es la parte de en medio, que es la que sabe desplazarse. */
.carrito__pie { flex: 0 0 auto; }
.carrito__lineas,
.checkout { flex: 1 1 auto; min-height: 0; }
.carrito__titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 1.1rem; }
.carrito__cabecera .modal__cerrar { position: static; background: transparent; color: var(--color-texto-suave); }
.carrito__avisos {
margin: 12px 20px 0;
padding: 12px 14px;
border-radius: var(--radio-chico, 10px);
background: rgba(232, 185, 35, 0.12);
border: 1px solid rgba(232, 185, 35, 0.4);
font-size: 0.84rem;
}
.carrito__avisos p { margin: 0 0 4px; }
.carrito__avisos p:last-child { margin-bottom: 0; }
.carrito__lineas { overflow-y: auto; padding: 4px 20px; }
.linea {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--color-borde, #2A2A30);
}
.linea:last-child { border-bottom: 0; }
/* La miniatura del platillo en el pedido. Chica a propósito: aquí manda el
texto —qué lleva y cuánto cuesta—, la foto solo sirve para reconocer el
renglón de un vistazo. Cuadrada y recortada para que un pedido de cinco
cosas no quede en escalera con fotos de distinta proporción. */
.linea__mini {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: var(--radio-chico, 10px);
overflow: hidden;
background: var(--color-fondo);
}
.linea__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linea__datos { flex: 1 1 auto; min-width: 0; }
.linea__nombre { margin: 0 0 3px; font-size: 0.95rem; font-family: var(--fuente-titulos); }
.linea__opciones,
.linea__nota {
margin: 0;
font-size: 0.8rem;
color: var(--color-texto-suave);
line-height: 1.4;
}
.linea__nota { font-style: italic; margin-top: 2px; }
.linea__derecha {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.linea__precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.carrito__vacio { padding: 44px 20px; text-align: center; color: var(--color-texto-suave); }
.carrito__pie {
padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-borde, #2A2A30);
}
.carrito__renglon {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 1.05rem;
margin-bottom: 4px;
}
.carrito__renglon strong { font-variant-numeric: tabular-nums; }
.carrito__nota {
margin: 0 0 14px;
font-size: 0.76rem;
color: var(--color-texto-suave);
/* Si algún día un texto sí necesita dos renglones, que los reparta parejo
en vez de dejar una palabra sola abajo. Donde no se entiende, se ignora
sin consecuencias. */
text-wrap: pretty;
}
/* La nota que va DEBAJO del botón de enviar: sin margen inferior —no hay nada
después— y centrada bajo el botón que explica. */
.carrito__nota--pie {
margin: 10px 0 0;
text-align: center;
}
/* LA BARRA FLOTANTE TAPABA LOS CRÉDITOS
-------------------------------------
El aire estaba en `.contenido`, pero el pie es HERMANO de `.contenido`, no
está dentro: la barra lo tapaba completo al llegar al final de la carta.
Y no se le deja el hueco siempre, porque la barra solo existe cuando hay
algo en el pedido: reservarlo de fábrica dejaría un vacío al final de una
carta que nadie ha empezado a pedir. El JavaScript pone `con-bolsa` en el
cuando la barra aparece. */
.contenido { padding-bottom: 24px; }
body.con-bolsa .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
/* ===========================================================================
v0.3.1 — MOVIMIENTO
---------------------------------------------------------------------------
Las animaciones son la respuesta al toque: sin ellas la persona no sabe si
el sistema la escuchó, vuelve a tocar, y termina pidiendo dos veces.
Tres reglas, y por eso se ven "de app" y no de página:
· CORTAS. Nada pasa de 260 ms. Si se nota que estás esperando, sobra.
· Solo `transform` y `opacity`, que el navegador anima sin repintar. Animar
`height` o `top` produce ese arrastre que delata a una web hecha a prisa.
· Nunca bloquean: se puede seguir tocando mientras ocurren.
Y todo se apaga si el sistema pidió menos movimiento (ver el final).
=========================================================================== */
/* --- Aviso flotante ------------------------------------------------------- */
.aviso {
position: fixed;
left: 50%;
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
z-index: 70;
display: flex;
align-items: center;
gap: 14px;
max-width: min(92vw, 440px);
padding: 12px 16px;
border-radius: var(--radio, 14px);
background: var(--color-superficie, #17171A);
border: 1px solid var(--color-borde, #2A2A30);
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
font-size: 0.86rem;
/* Nace un poco abajo y transparente; la clase --visible lo trae. */
transform: translate(-50%, 14px);
opacity: 0;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.aviso--visible { transform: translate(-50%, 0); opacity: 1; }
.aviso__texto { flex: 1 1 auto; }
.aviso__accion {
flex: 0 0 auto;
padding: 6px 12px;
border: 0;
border-radius: var(--radio-boton, 999px);
background: transparent;
color: var(--color-primario);
font-family: inherit;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
}
.aviso__accion:hover { background: rgba(255, 255, 255, 0.06); }
/* --- Latido del contador de la bolsa -------------------------------------- */
/* Un pulso corto en el número. Es la señal de "lo que agregaste está aquí",
y no hace falta más: la cifra ya cambió sola. */
.late { animation: latido 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes latido {
0% { transform: scale(1); }
38% { transform: scale(1.32); }
100% { transform: scale(1); }
}
/* --- La barra del pedido entra deslizándose ------------------------------- */
.barra-bolsa__boton {
animation: bolsa-entra 0.28s cubic-bezier(0.22, 1, 0.36, 1);
transition: transform 0.15s ease;
}
.barra-bolsa__boton:active { transform: scale(0.985); }
@keyframes bolsa-entra {
from { transform: translateY(120%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* --- Cierre del popup ------------------------------------------------------ */
.modal--cerrando .modal__caja { animation: bajar 0.18s ease forwards; }
.modal--cerrando .modal__fondo { animation: desvanecer 0.18s ease forwards; }
@keyframes bajar { to { transform: translateY(16px); opacity: 0; } }
@keyframes desvanecer { to { opacity: 0; } }
/* --- Renglón del carrito: tachita y salida -------------------------------- */
.linea { transition: opacity 0.18s ease; }
.linea__quitar {
flex: 0 0 auto;
align-self: flex-start;
width: 30px;
height: 30px;
margin-top: -2px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--color-texto-suave);
font-size: 0.78rem;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.linea__quitar:hover,
.linea__quitar:focus-visible {
opacity: 1;
color: #FCA5A5;
background: rgba(239, 68, 68, 0.12);
}
/* Se encoge en su sitio en vez de desaparecer de golpe: así se ve QUÉ se fue
y la lista no pega un salto. */
.linea--saliendo {
animation: salir-linea 0.24s cubic-bezier(0.4, 0, 1, 1) forwards;
pointer-events: none;
}
@keyframes salir-linea {
to {
opacity: 0;
transform: translateX(28px);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
}
.linea { max-height: 320px; }
/* --- Micro-respuestas al toque -------------------------------------------- */
.platillo { transition: transform 0.16s ease; }
.platillo:not(.platillo--agotado):active { transform: scale(0.985); }
.opcion { transition: background 0.14s ease; }
.opcion:not(.opcion--agotada):not(.opcion--bloqueada):hover { background: rgba(255, 255, 255, 0.03); }
.contador__boton,
.boton { transition: transform 0.14s ease, background 0.15s ease, opacity 0.15s ease; }
.contador__boton:active,
.boton:active { transform: scale(0.94); }
/* --- Menos movimiento, si el sistema lo pide ------------------------------- */
/* Muchas personas lo activan por mareo o por migraña. No es una preferencia
estética: se respeta y punto. Todo sigue funcionando, sin desplazamientos. */
@media (prefers-reduced-motion: reduce) {
.aviso,
.late,
.barra-bolsa__boton,
.modal__caja,
.carrito__caja,
.linea--saliendo,
.platillo,
.boton,
.contador__boton {
animation: none !important;
transition: opacity 0.01ms !important;
transform: none !important;
}
.aviso { transform: translateX(-50%) !important; }
.aviso--visible { opacity: 1; }
}
/* ===========================================================================
DISPOSICIÓN DE LA CARTA — cuadrícula o lista
---------------------------------------------------------------------------
Se elige en config/theme.php ('disposicion'). Dos formas de ver lo mismo,
para dos tipos de restaurante:
cuadricula Foto grande, dos columnas. Para cartas cortas donde casi todo
tiene fotografía y la foto es la que vende.
lista Un renglón por platillo, con foto chica a un lado. Para cartas
largas o con pocas fotos: una cuadrícula llena de huecos
grises se ve peor que una lista bien hecha, y en una carta de
setenta renglones la lista se recorre mucho más rápido.
=========================================================================== */
.platillos--lista {
display: flex;
flex-direction: column;
gap: 0;
}
.platillos--lista .platillo {
display: flex;
flex-direction: row-reverse; /* texto primero, foto al final */
align-items: center;
gap: 14px;
padding: 14px 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-borde, #2A2A30);
border-radius: 0;
}
.platillos--lista .platillo:last-child { border-bottom: 0; }
.platillos--lista .platillo__foto {
flex: 0 0 auto;
width: 84px;
height: 84px;
aspect-ratio: auto; /* manda el alto fijo */
border-radius: var(--radio-chico, 10px); /* las cuatro esquinas, no solo arriba */
overflow: hidden;
}
.platillos--lista .platillo__datos { flex: 1 1 auto; min-width: 0; padding: 0; }
.platillos--lista .platillo__descripcion { -webkit-line-clamp: 2; }
.platillos--lista .platillo__pie {
margin-top: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
/* Sin foto no hay marco: el platillo es puro texto. */
.platillo--sinmarco .platillo__datos { padding-top: 14px; }
.platillos--lista .platillo--sinmarco { padding-left: 0; }
/* ===========================================================================
v0.4 — CHECKOUT
---------------------------------------------------------------------------
Es el último paso antes de que exista el pedido y el punto donde más gente
se cae. Todo aquí busca lo mismo: que se llene rápido, en un celular, con
una mano, y que el total nunca se pierda de vista.
=========================================================================== */
.checkout { overflow-y: auto; padding: 4px 20px 8px; }
.campo-grupo { margin: 16px 0; }
.campo-c { display: block; margin: 16px 0; }
.campo-c__etiqueta {
display: block;
font-size: 0.82rem;
color: var(--color-texto-suave);
font-weight: 600;
margin-bottom: 6px;
}
.campo-c__etiqueta small { font-weight: 400; opacity: 0.75; }
.campo-c__control {
width: 100%;
padding: 13px 14px;
background: var(--color-fondo);
border: 1px solid var(--color-borde, #2A2A30);
border-radius: var(--radio-chico, 10px);
color: var(--color-texto);
font-family: inherit;
font-size: 0.95rem; /* 16px o más: menos que eso hace que el iPhone
acerque la pantalla al tocar el campo */
transition: border-color 0.15s ease;
}
.campo-c__control:focus {
outline: none;
border-color: var(--color-primario);
}
.campo-c__ayuda { display: block; font-size: 0.76rem; color: var(--color-texto-suave); margin-top: 5px; }
.campo-c__error { display: block; font-size: 0.78rem; color: #FCA5A5; margin-top: 5px; }
.campo-c__error:empty { display: none; }
/* --- Selector de dos o tres opciones -------------------------------------- */
/* Botones grandes en vez de una lista desplegable: en un celular, abrir un
desplegable para elegir entre dos cosas es un toque de más y un momento de
duda. Aquí las dos opciones se ven de golpe. */
.segmentado {
display: flex;
gap: 6px;
padding: 5px;
background: var(--color-fondo);
border: 1px solid var(--color-borde, #2A2A30);
border-radius: var(--radio-boton, 999px);
}
.segmentado__opcion { flex: 1 1 0; position: relative; cursor: pointer; }
.segmentado__opcion input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.segmentado__opcion span {
display: block;
padding: 11px 10px;
text-align: center;
border-radius: var(--radio-boton, 999px);
font-size: 0.88rem;
font-weight: 600;
color: var(--color-texto-suave);
transition: background 0.16s ease, color 0.16s ease;
}
.segmentado__opcion input:checked + span {
background: var(--color-primario);
color: #fff;
}
.segmentado__opcion input:focus-visible + span {
outline: 2px solid var(--color-primario);
outline-offset: 2px;
}
/* --- Ubicación ------------------------------------------------------------- */
.ubicacion { margin: 16px 0; }
.ubicacion .boton { justify-content: center; }
/* --- Cupón ----------------------------------------------------------------- */
.cupon__fila { display: flex; gap: 8px; align-items: stretch; }
.cupon__fila .campo-c__control { flex: 1 1 auto; text-transform: uppercase; }
.cupon__fila .boton { flex: 0 0 auto; }
.cupon__exito {
display: block;
margin-top: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-secundario);
}
.checkout__aviso {
margin: 8px 0 4px;
padding: 12px 14px;
border-radius: var(--radio-chico, 10px);
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.4);
color: #FCA5A5;
font-size: 0.85rem;
}
/* --- Totales --------------------------------------------------------------- */
.carrito__renglon--chico {
font-size: 0.86rem;
color: var(--color-texto-suave);
margin-bottom: 2px;
}
.carrito__cabecera { position: relative; }
.modal__cerrar--atras { order: -1; }
.carrito__cabecera .carrito__titulo { flex: 1 1 auto; text-align: center; }
/* --- Pantalla de "listo" --------------------------------------------------- */
.modal__caja--angosta { max-width: 380px; }
.enviado { padding: 34px 26px 26px; text-align: center; }
.enviado__icono {
width: 62px;
height: 62px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--color-secundario) 18%, transparent);
color: var(--color-secundario);
font-size: 1.7rem;
animation: marca 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes marca {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.enviado__titulo { margin: 0 0 8px; font-family: var(--fuente-titulos); font-size: 1.2rem; }
.enviado__folio {
margin: 0 0 14px;
font-size: 0.88rem;
color: var(--color-texto-suave);
}
.enviado__folio strong {
color: var(--color-texto);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.06em;
}
.enviado__texto {
margin: 0 0 22px;
font-size: 0.88rem;
color: var(--color-texto-suave);
line-height: 1.55;
}
.enviado__texto strong { color: var(--color-texto); }
.enviado .boton + .boton { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
.enviado__icono { animation: none !important; }
}
/* ==========================================================================
v0.6 — El mapa del checkout
========================================================================== */
/* Altura fija: un mapa no tiene contenido que lo estire, y sin altura Leaflet
lo dibuja de 0 px. Queda un hueco en blanco y parece que se rompió. */
.mapa-c {
height: 260px;
border-radius: var(--radio, 14px);
border: 1px solid var(--borde, rgba(255,255,255,0.12));
overflow: hidden;
background: rgba(127,127,127,0.12);
margin-bottom: 8px;
}
.mapa-c__pie {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
/* Leaflet trae su propio tema claro; se le baja el brillo al crédito para que
no grite dentro de un checkout oscuro. */
.mapa-c .leaflet-control-attribution {
background: rgba(255,255,255,0.8);
font-size: 10px;
color: #333;
}
.mapa-c .leaflet-control-attribution a { color: #0645ad; }
/* --- Aviso de cerrado ---------------------------------------------------- */
.cerrado {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 14px;
padding: 12px 16px;
border-radius: var(--radio, 14px);
background: rgba(232,185,35,0.12);
border: 1px solid rgba(232,185,35,0.4);
font-size: 0.9rem;
}
.cerrado__titulo { font-weight: 700; }
.cerrado__detalle { opacity: 0.85; }
/* EL AVISO DE SERVICIO SUSPENDIDO
------------------------------
Más apagado que el de «cerrado», a propósito. El de cerrado es información
útil —vuelve a las 9— y conviene que salte. Este no le sirve de nada al
cliente que vino a ver la carta: no puede hacer nada al respecto, y pintarlo
en amarillo de alerta sobre el menú de un restaurante que sigue trabajando
sería hacerle un daño que no le toca. Se dice, se ve, y no grita. */
.cerrado--aviso {
background: color-mix(in srgb, var(--color-texto-suave) 12%, transparent);
border-color: var(--color-borde);
}
/* La tarjeta de una carta que no pide: sin botón y sin manita, porque no hay
nada que tocar. Se deja el texto seleccionable —hay quien copia el nombre de
un platillo para buscarlo o para mandarlo por mensaje—. */
.platillo--solo-lectura { cursor: default; }
/* Elegir sucursal. Solo aparece si hay más de una. */
.sucursales-elige {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 0 0 14px;
}
.sucursales-elige__etiqueta {
font-size: 0.82rem;
opacity: 0.75;
}
/* Aviso del envío: fuera del área, o falta marcar el punto.
Se ve del tamaño del problema que es, no como una nota al pie. */
.aviso-envio {
margin: 10px 0 0;
padding: 12px 14px;
border-radius: var(--radio, 14px);
background: rgba(232,185,35,0.14);
border: 1px solid rgba(232,185,35,0.45);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
/* Fuera del área es más grave que "te falta marcar el punto": eso no se
arregla moviendo un pin. */
.aviso-envio--fuera {
background: rgba(239,68,68,0.14);
border-color: rgba(239,68,68,0.5);
}
/* ===========================================================================
v0.7.3 — Promociones y sucursal
=========================================================================== */
/* --- La tira de promociones ---------------------------------------------- */
/*
Se desliza con el dedo y cada banner queda encuadrado solo, sin JavaScript:
`scroll-snap` ya lo hace el navegador. Los bordes negativos son para que la
tira llegue de orilla a orilla —un carrusel con margen se ve como una caja
dentro de otra— pero conservando el aire al inicio y al final con el padding.
*/
.promos {
margin: 0 calc(var(--espacio) * -1) 20px;
}
.promos__tira {
display: flex;
gap: 10px;
padding: 0 var(--espacio);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Igual que la barra de categorías: sin esto, al llegar al final el gesto
se encadena y la página entera se va de lado. */
overscroll-behavior-x: contain;
}
.promos__tira::-webkit-scrollbar { display: none; }
.promo {
flex: 0 0 100%;
scroll-snap-align: center;
border-radius: var(--radio, 14px);
overflow: hidden;
background: var(--color-superficie);
/* 2:1, la medida que se pide en el panel. Se declara aquí para que el
hueco exista ANTES de que la imagen baje: sin esto la carta salta hacia
abajo cuando carga, justo cuando alguien iba a tocar un platillo. */
aspect-ratio: 2 / 1;
}
.promo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
/* En pantalla ancha un banner de orilla a orilla queda desproporcionado:
se muestran dos y pico, que además invita a deslizar. */
.promo { flex-basis: 46%; }
}
.promos__puntos {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 10px;
}
.promos__punto {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-borde);
transition: background 0.2s ease, width 0.2s ease;
}
.promos__punto--activo {
width: 18px;
border-radius: 999px;
background: var(--color-primario);
}
/* La hoja de sucursales crece con su contenido en vez de ocupar la pantalla.
El pedido y el checkout sí la ocupan toda porque son formularios largos y
cada píxel cuenta; esto es una lista de dos o tres renglones, y estirarla a
pantalla completa deja media pantalla negra debajo del último local, que se
lee como que falta algo por cargar. */
#panel-sucursales .carrito__caja {
height: auto;
max-height: 86svh;
border-radius: var(--radio, 14px) var(--radio, 14px) 0 0;
}
/* --- Cada sucursal en la lista -------------------------------------------- */
.sucursal-op {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 4px;
border-bottom: 1px solid var(--color-borde);
}
.sucursal-op:last-child { border-bottom: 0; }
.sucursal-op__datos { flex: 1 1 auto; min-width: 0; }
.sucursal-op__nombre {
display: block;
font-family: var(--fuente-titulos);
font-size: 1rem;
}
.sucursal-op__direccion {
display: block;
margin-top: 2px;
font-size: 0.82rem;
color: var(--color-texto-suave);
}
/* Cerrada: se avisa AQUÍ, al elegir. Enterarse dos pantallas después de que
la sucursal que escogiste está cerrada es perder el pedido. */
.sucursal-op__cerrada {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-texto-suave) 22%, transparent);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sucursal-op--activa .sucursal-op__nombre { color: var(--color-primario); }
.sucursal-op__paloma {
flex: 0 0 auto;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-primario);
color: #fff;
font-size: 0.75rem;
}
/* ===========================================================================
v0.7.4 — El checkout con espacio de verdad
=========================================================================== */
/* La cuenta, ahora dentro del formulario en vez de pegada abajo. Se separa con
un borde para que no se lea como un campo más. */
.cuenta {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid var(--color-borde);
}
.carrito__renglon--total {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--color-borde);
font-size: 1.15rem;
}
.carrito__renglon--total strong { color: var(--color-primario); }
/* El pie con un solo botón no necesita el borde que separaba la cuenta: ahora
lo que hay arriba es el propio formulario, y una línea ahí solo corta. */
.carrito__pie--solo-boton {
border-top: 0;
padding-top: 10px;
/* El degradado evita que el formulario se corte a filo contra el botón. */
background: linear-gradient(to top, var(--color-superficie) 72%, transparent);
}
/* --- El mapa: mismo trabajo, menos espacio ------------------------------- */
/*
Se le quitaron 60 px de alto y los dos botones de abajo. En una pantalla
donde hay que llenar nombre, teléfono, dirección, referencias, hora y forma
de pago, el mapa no puede ser el elemento más grande.
200 px siguen bastando para reconocer la manzana y mover el pin.
*/
.mapa-c { height: 200px; margin-bottom: 6px; }
.mapa-c__estado {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 4px;
min-height: 22px;
font-size: 0.8rem;
color: var(--color-texto-suave);
}
/* «Quitar» como enlace y no como botón: es una salida, no la acción de la
pantalla, y un segundo botón compite con el que cierra la venta. */
.mapa-c__quitar {
flex: 0 0 auto;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 0.78rem;
color: var(--color-primario);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
/* ===========================================================================
v0.8.1 — El pie, en tres franjas
=========================================================================== */
/*
La v0.8 puso la información correcta pero la dejó como dos columnas de texto
suelto: sin nada que marcara dónde empieza una cosa y termina otra, se leía
como un párrafo largo en gris. Aquí van tres franjas separadas por línea
—marca, datos, firma— porque una línea cuesta un píxel y hace el trabajo que
no hace ninguna cantidad de espaciado.
En celular todo se centra. Con la pantalla angosta, el texto pegado a la
izquierda deja un vacío a la derecha que se ve como un error de armado.
*/
.pie {
border-top: 1px solid var(--color-borde);
padding: 34px var(--espacio) 40px;
margin-top: 48px;
color: var(--color-texto-suave);
font-size: 0.82rem;
text-align: center;
}
/* --- 1. La marca ---------------------------------------------------------- */
.pie__marca {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
/* El logo repetido. Alto fijo y ancho automático: los logos llegan en todas
las proporciones posibles y lo que tiene que coincidir entre uno y otro es
cuánto miden de alto, no cuánto ocupan de ancho. */
.pie__logo {
height: 54px;
width: auto;
max-width: 220px;
object-fit: contain;
}
.pie__marca-nombre {
font-family: var(--fuente-titulos);
font-size: 1.35rem;
color: var(--color-texto);
letter-spacing: -0.01em;
}
.pie__lema {
margin: 0;
max-width: 46ch;
font-size: 0.85rem;
line-height: 1.5;
}
/* --- Las líneas ----------------------------------------------------------- */
/*
No llegan a los bordes de la pantalla: se detienen donde termina el
contenido. Una línea de borde a borde parte la página en dos; esta agrupa.
*/
.pie__linea {
max-width: 1100px;
margin: 30px auto;
border: 0;
border-top: 1px solid var(--color-borde);
}
/* --- 2. Los datos --------------------------------------------------------- */
.pie__caja {
max-width: 1100px;
margin: 0 auto;
display: grid;
gap: 30px;
}
@media (min-width: 760px) {
/* Tres columnas de igual peso: dónde, cuándo, cómo. Con anchos distintos
una se veía como la principal y las otras como notas al pie de esa. */
.pie__caja { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pie { text-align: left; }
.pie__marca { align-items: center; } /* la marca sigue centrada siempre */
.pie__firma { text-align: left; }
}
.pie__bloque { min-width: 0; }
.pie__subtitulo {
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-borde);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--color-texto-suave);
}
.pie__dato {
display: flex;
align-items: flex-start;
justify-content: center; /* centrado en celular */
gap: 8px;
margin: 0 0 8px;
font-size: 0.85rem;
line-height: 1.5;
}
@media (min-width: 760px) { .pie__dato { justify-content: flex-start; } }
.pie__dato:last-child { margin-bottom: 0; }
.pie__dato--fuerte {
color: var(--color-texto);
font-weight: 600;
font-size: 0.92rem;
}
.pie__dato--suave { font-size: 0.8rem; }
/* El icono no se encoge ni se estira con el texto de al lado, y se alinea con
la primera línea aunque el correo ocupe dos renglones. */
.pie__icono {
flex: 0 0 auto;
margin-top: 3px;
color: var(--color-texto-suave);
}
.pie__dato a { text-decoration: underline; text-underline-offset: 3px; }
.pie__dato a:hover { color: var(--color-primario); }
/* Abierto / cerrado. Un punto de color antes de la palabra: se reconoce de
lejos sin tener que leer, que es justo lo que se busca aquí. */
.pie__estado { display: inline-flex; align-items: center; gap: 7px; }
.pie__estado::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.pie__estado--abierto { color: #22C55E; }
.pie__estado--cerrado { color: var(--color-texto-suave); }
/* Un botón que se lee como enlace: "ver horario" y "ver sucursales" abren una
hoja, no navegan, así que no pueden ser ; pero visualmente son enlaces. */
.pie__enlace {
display: inline;
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--color-primario);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
/* --- Las redes ----------------------------------------------------------- */
/*
Iconos en un cuadro neutro, no los logotipos de colores oficiales. Sobre un
tema oscuro, seis marcas con su color de marca es un semáforo que se lleva
la vista y compite con el botón de pedir, que es lo único que importa aquí.
*/
.pie__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pie__red {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--color-borde);
border-radius: var(--radio-boton, 999px);
background: var(--color-superficie);
color: var(--color-texto-suave);
transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pie__red:hover {
color: var(--color-primario);
border-color: var(--color-primario);
transform: translateY(-2px);
}
/* --- 3. La firma ---------------------------------------------------------- */
.pie__firma {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: 0.78rem;
}
@media (min-width: 760px) {
.pie__firma {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
}
.pie__creditos { margin: 0; }
/* Dentro de la firma es un renglón más de la fila, no un bloque suelto: el
margen de arriba que .creditos-dev necesita en el panel aquí la descuadra. */
.pie__firma .creditos-dev { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
.pie__red { transition: none; }
.pie__red:hover { transform: none; }
}
/* --- El horario completo -------------------------------------------------- */
.horario-dia {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 12px 4px;
border-bottom: 1px solid var(--color-borde);
font-size: 0.9rem;
}
.horario-dia:last-child { border-bottom: 0; }
.horario-dia span { color: var(--color-texto-suave); }
/* Hoy se distingue: es el renglón por el que se abrió esta hoja. */
.horario-dia--hoy span,
.horario-dia--hoy strong { color: var(--color-primario); }
/* La hoja del horario crece con su contenido, como la de sucursales: son siete
renglones, y estirarla a pantalla completa deja medio negro debajo. */
#panel-horario .carrito__caja,
#panel-sucursales .carrito__caja {
height: auto;
max-height: 86svh;
border-radius: var(--radio, 14px) var(--radio, 14px) 0 0;
}
/* --- La barra del pedido con una sola sucursal ---------------------------- */
/*
Se dice igual dónde se está pidiendo —quien llega por un enlace compartido no
lo sabe— pero más chico: sin varias sucursales, el nombre es contexto, no una
decisión.
*/
.bolsa--unica .bolsa__sucursal {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-texto-suave);
font-family: var(--fuente-textos);
}
.bolsa--unica .bolsa__resumen {
margin-top: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-texto);
}
/* ===========================================================================
v0.8.1 — La cabecera del checkout deja de ocupar lugar fijo
=========================================================================== */
/* Va dentro del área que se desplaza. Se le quitan los lados porque .checkout
ya los pone, y el borde de abajo se queda: sigue siendo la línea que separa
el título del primer campo. */
.carrito__cabecera--suelta {
margin: 0 -20px 10px;
padding: 14px 20px 12px;
align-items: flex-start;
}
/* Título y recordatorio, juntos en el centro. */
.carrito__encabezado {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
/* "Estás pidiendo en Centro". Es un dato de confirmación, no un botón: va en
chico y en gris, y el nombre del local en negritas para que se lea de un
vistazo sin competir con la pregunta de arriba. */
.carrito__origen {
font-size: 0.75rem;
line-height: 1.3;
color: var(--color-texto-suave);
}
.carrito__origen strong { color: var(--color-texto); font-weight: 600; }
/* La ✕ y la ← medían 34 px con letra de 0.9rem, sobre fondo translúcido: en el
celular se perdían contra la foto y contra el propio fondo del cajón. 42 px
es el tamaño que se toca sin apuntar, y el fondo sólido las despega. */
.carrito__cabecera .modal__cerrar {
width: 42px;
height: 42px;
flex: 0 0 auto;
font-size: 1.25rem;
line-height: 1;
background: rgba(255, 255, 255, 0.08);
color: var(--color-texto);
}
.carrito__cabecera .modal__cerrar:active { transform: scale(0.94); }
/* ===========================================================================
v1.0 — El platillo que se queda solo en su renglón
===========================================================================
Con un número impar de platillos, el último quedaba en media columna con un
hueco a su derecha; y una categoría de UN solo platillo —"Wraps", con su
único wrap— era una tarjeta chiquita y media pantalla vacía al lado. Se lee
como un error de armado, no como una decisión.
Ahora ocupa el renglón entero y, ya que lo tiene, se acomoda como en la
vista de lista: la foto a un lado y el texto junto a ella. Poner una foto de
4:3 a todo lo ancho de la pantalla convertiría el último platillo de cada
categoría en el más importante de todos, que es exactamente al revés de lo
que se quiere.
NO SE MARCA NADA DESDE PHP. El que sea el ÚLTIMO y caiga en la primera
columna es, por definición, el único de su renglón, y eso :nth-child lo sabe
solo. Lo que PHP no puede saber es cuántas columnas hay en ese momento
—cambia con el ancho de la pantalla—, así que la regla va por corte:
2 columnas → el último si es impar (1, 3, 5…)
3 columnas → el último si cae en 3n+1 (1, 4, 7…)
4 columnas → el último si cae en 4n+1 (1, 5, 9…)
Los tres bloques repiten las mismas declaraciones a propósito: cada corte
necesita SU patrón y no hay forma en CSS de preguntar "¿estás ocupando todo
el renglón?". Aplicar los tres patrones juntos dejaría, por ejemplo, al
tercero de tres en una columna angosta y con la foto de lado.
=========================================================================== */
/* --- 2 columnas ---------------------------------------------------------- */
@media (max-width: 699px) {
.platillos--cuadricula > .platillo:last-child:nth-child(odd) {
grid-column: 1 / -1;
flex-direction: row-reverse; /* texto primero, foto al final */
align-items: center;
gap: 14px;
padding: 12px;
}
.platillos--cuadricula > .platillo:last-child:nth-child(odd) > .platillo__foto {
flex: 0 0 auto;
width: 96px;
height: 96px;
aspect-ratio: auto;
border-radius: var(--radio-chico, 10px);
overflow: hidden;
}
.platillos--cuadricula > .platillo:last-child:nth-child(odd) > .platillo__datos {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
/* Ocupando el renglón hay sitio para respirar: la descripción se corta en
dos líneas y no en las tres apretadas de la tarjeta angosta. */
.platillos--cuadricula > .platillo:last-child:nth-child(odd) .platillo__descripcion {
-webkit-line-clamp: 2;
}
}
/* --- 3 columnas ---------------------------------------------------------- */
@media (min-width: 700px) and (max-width: 999px) {
.platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
flex-direction: row-reverse;
align-items: center;
gap: 16px;
padding: 14px;
}
.platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) > .platillo__foto {
flex: 0 0 auto;
width: 120px;
height: 120px;
aspect-ratio: auto;
border-radius: var(--radio-chico, 10px);
overflow: hidden;
}
.platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) > .platillo__datos {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
/* Ocupando el renglón hay sitio para respirar: la descripción se corta en
dos líneas y no en las tres apretadas de la tarjeta angosta. */
.platillos--cuadricula > .platillo:last-child:nth-child(3n + 1) .platillo__descripcion {
-webkit-line-clamp: 2;
}
}
/* --- 4 columnas ---------------------------------------------------------- */
@media (min-width: 1000px) {
.platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) {
grid-column: 1 / -1;
flex-direction: row-reverse;
align-items: center;
gap: 16px;
padding: 14px;
}
.platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) > .platillo__foto {
flex: 0 0 auto;
width: 120px;
height: 120px;
aspect-ratio: auto;
border-radius: var(--radio-chico, 10px);
overflow: hidden;
}
.platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) > .platillo__datos {
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
/* Ocupando el renglón hay sitio para respirar: la descripción se corta en
dos líneas y no en las tres apretadas de la tarjeta angosta. */
.platillos--cuadricula > .platillo:last-child:nth-child(4n + 1) .platillo__descripcion {
-webkit-line-clamp: 2;
}
}