/* La página de la tienda (D-200), sobre tokens.css. La maqueta aprobada el
   23-10 manda: dos columnas, «Añadir» en el azul de la casa, la cesta fija
   abajo y «Pedir por WhatsApp» en verde. */
body { padding-bottom: 12rem; }
/* La barra de la carta es más alta (menús, recoger o domicilio): 270 px a 390;
   el hueco sube para que el último plato y el pie queden por encima. */
body:has(#cesta[data-carta]) { padding-bottom: 19rem; }
.barra { display: block; padding: var(--s-3) var(--s-4); background: var(--casa); border-bottom: 3px solid var(--casa-hondo); }
.barra a { color: var(--papel); font-weight: 700; text-decoration: none; }
.cabeza { padding: var(--s-5) var(--s-4) var(--s-4); background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabeza h1 { font-size: 1.75rem; line-height: 1.15; }
.revisada { margin: var(--s-2) 0; color: var(--tinta-suave); font-size: 1rem; }
.botones { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
/* D-208: la pausa de pedidos, llamativa (pedido del director): rojo de la
   casa lleno y letra blanca. Sin ámbar, que es de las ofertas. */
.cabeza .pausa { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); background: var(--brasa); color: #fff; border-radius: var(--r-md); box-shadow: var(--relieve); }
.cabeza .pausa p { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
/* D-204: el aviso del comercio. Sin ámbar, que es de las ofertas. */
.cabeza .aviso { margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); background: var(--fondo); border-left: 4px solid var(--casa); border-radius: var(--r-sm); }
.cabeza .aviso p { margin: 0; font-size: 1.05rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.cabeza .aviso .cuando { margin-top: var(--s-2); color: var(--tinta-suave); font-size: .9rem; }
.boton { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); border: 2px solid var(--casa-tenue); border-radius: var(--r-md); color: var(--casa); font-weight: 700; text-decoration: none; }
.articulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 44rem; margin: 0 auto; padding: var(--s-4) var(--s-3); }
.articulo { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.articulo .foto { position: relative; display: block; background: var(--linea); }
.articulo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cuantas { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 27, 38, .7); color: #fff; font-size: .8rem; }
.articulo h2 { margin: 8px 10px 0; font-size: 1.05rem; line-height: 1.25; }
.precio { margin: 0 10px; font-family: var(--maquina); font-weight: 700; font-size: 1.05rem; }
.precio.consultar { font-family: var(--gente); font-weight: 400; font-size: .95rem; color: var(--tinta-suave); }
.descripcion { margin: 0 10px; color: var(--tinta-suave); font-size: .9rem; line-height: 1.35; }
.anadir { margin: 8px 10px 0; min-height: 48px; border: 0; border-radius: var(--r-md); background: var(--casa); color: var(--papel); font: inherit; font-size: 1.05rem; font-weight: 700; box-shadow: inset 0 -3px 0 var(--casa-hondo); }
.cantidad { display: flex; align-items: center; justify-content: space-between; margin: 8px 10px 0; min-height: 48px; border: 2px solid var(--casa); border-radius: var(--r-md); background: var(--casa-suave); }
.cantidad[hidden], .anadir[hidden] { display: none; }
.cantidad button { width: 48px; min-height: 44px; border: 0; background: none; color: var(--casa); font: inherit; font-size: 1.5rem; font-weight: 700; }
.cantidad .n { font-family: var(--maquina); font-weight: 700; }
.pie { max-width: 44rem; margin: var(--s-4) auto; padding: 0 var(--s-4); color: var(--tinta-suave); font-size: .9rem; text-align: center; }
.cesta { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: var(--s-3) var(--s-4) var(--s-4); background: var(--papel); border-top: 1px solid var(--linea); box-shadow: var(--relieve-alto); }
.cesta[hidden] { display: none; }
.resumen { display: flex; justify-content: space-between; margin: 0; font-size: 1.05rem; }
.total { font-family: var(--maquina); font-weight: 700; }
.ver-mensaje { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--casa); font: inherit; font-size: 1rem; font-weight: 700; text-decoration: underline; }
.mensaje { margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--fondo); font-family: var(--gente); font-size: .95rem; white-space: pre-wrap; }
.pedir { display: flex; align-items: center; justify-content: center; min-height: var(--tap); border-radius: var(--r-md); background: var(--valido); color: var(--papel); font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.sin-pedido { margin: var(--s-3) 0 0; font-weight: 700; }

/* D-211: la carta de la semana, una línea por plato (maqueta del 27-10). */
.carta { display: flex; flex-direction: column; gap: var(--s-4); max-width: 44rem; margin: 0 auto; padding: var(--s-4) var(--s-3); }
.carta-titulo { margin: 0; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
/* El precio del menú, destacado (27-10, opción A de la maqueta). */
.menu-precio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); background: var(--casa); color: var(--papel); border-radius: var(--r-md); box-shadow: inset 0 -4px 0 var(--casa-hondo); }
.menu-precio p { margin: 0; }
.mp-etiqueta { font-size: 1.15rem; font-weight: 700; }
.mp-cifra { grid-row: span 2; font-family: var(--maquina); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.mp-que { font-size: .95rem; opacity: .9; }
.dia { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); }
.dia h3 { margin: 0; font-size: 1.2rem; color: var(--casa); }
.dia h4 { margin: var(--s-2) 0 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); }
.dia.cerrado { opacity: .6; }
.dia-cerrado { margin: 0; font-weight: 700; }
.plato { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--linea); }
.plato.con-foto { grid-template-columns: 48px 1fr auto; }
.plato > div { min-width: 0; }
.p-foto img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.p-nombre { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.p-desc { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
.p-precio { margin: 0; font-family: var(--maquina); font-weight: 700; }
.plato .anadir, .plato .cantidad { grid-column: 1 / -1; margin: 0; }
.entrega-pide { margin: 0; font-weight: 700; }
.entrega { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.entrega button { min-height: 48px; border: 2px solid var(--casa-tenue); border-radius: var(--r-md); background: var(--papel); color: var(--casa); font: inherit; font-size: 1.05rem; font-weight: 700; }
.entrega button[aria-pressed="true"] { background: var(--casa); border-color: var(--casa-hondo); color: var(--papel); }
.pedir[aria-disabled="true"] { background: var(--linea); color: var(--tinta-suave); }
.falta-entrega { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
/* Las pestañas de día y «Para hoy, martes 27» en la cesta (27-10). */
.pide-para { margin: 0; font-weight: 700; font-size: 1.1rem; }
.pestanas-dia { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr)); gap: 6px; }
.pestanas-dia button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 4px; border: 2px solid var(--casa-tenue); border-radius: var(--r-md); background: var(--papel); color: var(--casa); font: inherit; }
.pestanas-dia b { font-size: 1.05rem; }
.pestanas-dia span { font-size: .9rem; }
.pestanas-dia button[aria-selected="true"] { background: var(--casa); border-color: var(--casa-hondo); color: var(--papel); }
.para-dias { display: flex; flex-direction: column; gap: 4px; }
.para-dias:empty { display: none; }
.para-dia { margin: 0; padding: var(--s-2) var(--s-3); background: var(--casa-suave); border-radius: var(--r-sm); font-weight: 700; font-size: 1.1rem; }
.para-dia.otro { background: var(--ambar-suave); border-left: 4px solid var(--ambar); }

/* D-213: la carta, más amable para la gente mayor (maqueta C del 27-10).
   Excepción a D-12 aprobada por el director, solo en las tiendas de menú:
   un color de cocina igual para todas, no un color por comercio. Pinta
   rótulos y la tarjeta del menú; lo pulsable sigue en el azul de la casa. */
.carta { --nogal: #6B4A2E; --nogal-hondo: #4E3520; --nogal-suave: #F3ECE4; --oliva: #4F5A1E; --oliva-suave: #EEF0E0; }
.como { margin: 0; padding: var(--s-3); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); font-size: 1rem; line-height: 1.4; }
.como b { color: var(--casa); }
.carta .menu-precio { background: var(--nogal); box-shadow: inset 0 -4px 0 var(--nogal-hondo); }
.carta .dia { border-top: 5px solid var(--nogal); }
/* D-229: la carta «pendiente», entre una semana y otra: el mismo formato, en gris. */
.carta-pendiente { margin: 0; padding: var(--s-3); background: var(--nogal-suave); color: var(--nogal); border-radius: var(--r-md); font-weight: 700; }
.carta .dia.pendiente { background: transparent; border-style: dashed; border-top: 5px solid var(--linea); }
.dia.pendiente h3 { color: var(--tinta-suave); }
.dia.pendiente p { margin: 0; color: var(--tinta-suave); font-style: italic; }
.dia h4.grupo { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 2px; padding: 6px 10px; border-radius: var(--r-sm); font-size: .85rem; font-weight: 800; letter-spacing: .1em; }
.grupo .ico { font-size: 1.25rem; letter-spacing: 0; }
.grupo.primero { background: var(--oliva-suave); color: var(--oliva); }
.grupo.segundo { background: var(--nogal-suave); color: var(--nogal); }
/* El plato manda y el botón va a su lado, del alto del nombre y el precio. */
.plato { grid-template-columns: 1fr 7.2rem; gap: 2px var(--s-3); padding-block: var(--s-3); }
.plato.con-foto { grid-template-columns: 48px 1fr 7.2rem; }
.plato .p-foto { grid-row: 1 / span 2; }
.p-nombre { font-size: 1.15rem; }
.plato .p-precio { grid-column: -3; color: var(--tinta-suave); font-weight: 600; }
.plato .anadir, .plato .cantidad { grid-column: -2; grid-row: 1 / span 2; }
.plato .cantidad button { width: 40px; }
/* «Añadido»: el contador entra en verde y vuelve al azul. */
.plato .cantidad.recien { animation: recien 1.2s ease-out; }
@keyframes recien { from { background: var(--valido-suave); border-color: var(--valido); } }
@media (prefers-reduced-motion: reduce) { .plato .cantidad.recien { animation: none; } }