/* ==========================================================================
   Qarta · demo interactiva
   Una sola hoja para las cuatro pantallas. Los datos vienen de la API.
   ========================================================================== */

@font-face {
    font-family: 'Caviar Dreams';
    src: url('../assets/fonts/CaviarDreams/CaviarDreams.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*  `hidden` esconde de verdad: la hoja del navegador pierde contra cualquier
    `display` nuestro. Aqui todavia no habia pasado, pero el carrito y el
    logotipo del vestibulo usan el atributo y la trampa es la misma.  */
[hidden] { display: none !important; }

:root {
    --marron:        #75613f;
    --marron-claro:  #b58b42;
    --marron-oscuro: #3e2c00;
    --crema:         #faf7f1;
    /* El color de las tarjetas. Aparte del fondo porque en claro son casi
       el mismo y en oscuro no. */
    --superficie:    #ffffff;
    --marca-fondo:   #75613f;
    --filtro-iconos: none;
    --letra-titulos: inherit;
    --escala:        1;
    --radio-boton:   25px;
    --tarjeta-borde: 1px solid var(--linea);
    --tarjeta-sombra: none;
    --foto-radio:    var(--radio);
    --foto-alto:     68px;
    --foto-ancho:    68px;
    --cabecera-fondo: var(--marca-fondo);
    --cabecera-texto: #fff;
    --linea:         #e7dfd0;
    --texto:         #2f2a22;
    --texto-suave:   #7b7367;
    --error:         #963029;
    --error-fondo:   #fdeceb;
    --ok:            #3f6b1c;
    --ok-fondo:      #eefbdc;
    --radio:         16px;
    --marco:         690px;
}

*, *::before, *::after { box-sizing: border-box; }

/* El tamaño base de toda la carta. Se escala desde aquí para que TODO crezca
   junto —títulos, precios, alérgenos— y no se descoloque nada. */
html { font-size: calc(100% * var(--escala)); }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Caviar Dreams', 'Trebuchet MS', sans-serif;
    color: var(--texto);
    background: #1c1a17;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------ Marco móvil */
.marco {
    position: relative;
    max-width: var(--marco);
    min-height: 100%;
    margin: 0 auto;
    background: var(--superficie);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* Pantallas con foto de fondo (selector de idioma y vestíbulo) */
.marco--fondo {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
}
/* La foto y el velo salen de variables: el bloque de la marca los manda, y así
   el constructor los cambia en vivo. Los valores de aquí son los de siempre,
   por si la página se sirve sin diseño. */
.marco--fondo {
    --vestibulo-foto: url('../assets/background/FONDO1.png');
    --vestibulo-velo: rgba(20, 17, 12, .55);
    --vestibulo-fondo: transparent;
    background: var(--vestibulo-fondo);
}
.marco--fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vestibulo-foto) center / cover no-repeat;
    z-index: 0;
}
.marco--fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vestibulo-velo);
    z-index: 0;
}

/* Sin foto no hay nada que oscurecer, y el texto pasa a leerse sobre el color
   de abajo: blanco sobre crema no se ve. */
.marco--fondo.sin-foto::before,
.marco--fondo.sin-foto::after { display: none; }
.marco--fondo.sin-foto { color: var(--texto); }
.marco--fondo.sin-foto .titulo,
.marco--fondo.sin-foto .subtitulo { color: inherit; }
.marco--fondo > * { position: relative; z-index: 1; }

/* Transición al pasar de pantalla, como en la demo original */
.se-va { animation: deslizar .38s forwards; }
@keyframes deslizar {
    to { transform: translateX(-100vw); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .se-va { animation: none; opacity: 0; }
}

/* ------------------------------------------------------------------ Marca */
/* El nuestro. Se queda para la página de «esta carta no está disponible», que
   es una página de Qarta, y para el pie. */
.logo-qarta { width: 150px; margin: 0 auto 1.5rem; }

/* El logotipo del negocio, arriba del vestíbulo. El nuestro va abajo, en el
   «powered by», y ese sí es nuestro. */
.logo-negocio { display: block; width: 150px; max-height: 130px;
                object-fit: contain; margin: 0 auto 1.5rem; }
.pie-qarta {
    margin-top: auto;
    padding-top: 2rem;
}
.pie-qarta img { width: 110px; margin: 0 auto; opacity: .85; }

/* ----------------------------------------------------------- Tipografía */
.titulo {
    font-size: 2.1rem;
    margin: 0 0 .4em;
    color: #fff;
}
.subtitulo {
    font-size: .95rem;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 2rem;
    max-width: 32ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------- Botones */
.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: min(100%, 20rem);
    margin: 0 auto .9rem;
    height: 3.5rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: var(--radio-boton);
    background: var(--marca-fondo);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    letter-spacing: .2px;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.boton:hover { background: var(--marron-claro); }
.boton:active { transform: scale(.98); }
.boton[disabled] { opacity: .6; cursor: progress; }

.boton--contorno {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .35);
}
.boton--contorno:hover { background: rgba(255, 255, 255, .12); }

.boton--pleno { width: 100%; }

.idioma-iso {
    font-size: .8rem;
    opacity: .7;
}

/* ------------------------------------------------------------- Cabecera */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cabecera-fondo);
    color: var(--cabecera-texto);
    padding: .6rem 1rem .5rem;
}
.cabecera-fila {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.6rem;
}
.cabecera h1 {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
}
.volver {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cabecera-texto) 14%, transparent);
    color: var(--cabecera-texto);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.volver:hover { background: color-mix(in srgb, var(--cabecera-texto) 26%, transparent); }
.hueco { width: 2.4rem; }

/* Pestañas de categoría, con desplazamiento horizontal */
.categorias {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: .7rem .2rem .1rem;
    scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categorias button {
    flex: none;
    padding: .45rem 1rem;
    border: 0;
    border-radius: 999px;
    /* En color medio se pinta con un velo claro; con la cabecera clara o
       transparente el velo no se ve, y quedan como texto suelto, que es lo
       que toca. */
    background: color-mix(in srgb, var(--cabecera-texto) 16%, transparent);
    color: var(--cabecera-texto);
    font: inherit;
    font-size: .95rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s;
}
.categorias button:hover { background: color-mix(in srgb, var(--cabecera-texto) 28%, transparent); }
.categorias button.activa { background: var(--superficie); color: var(--texto); font-weight: 600; }

/* --------------------------------------------------------------- Listado */
.contenido { flex: 1; padding: 1rem; }

.plato {
    display: flex;
    gap: .9rem;
    width: 100%;
    padding: .8rem;
    margin-bottom: .7rem;
    border: var(--tarjeta-borde);
    box-shadow: var(--tarjeta-sombra);
    border-radius: var(--radio);
    background: var(--superficie);
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .2s, transform .2s;
}
.plato:hover {
    box-shadow: 0 6px 18px rgba(62, 44, 0, .12);
    transform: translateY(-2px);
}
.plato-foto {
    width: var(--foto-ancho);
    height: var(--foto-alto);
    flex: none;
    object-fit: cover;
    border-radius: var(--foto-radio);
}
.plato-datos {
    flex: 1;
    min-width: 0;
    /* Una columna de verdad. Eran `span` sueltos, así que el nombre seguía
       siendo `inline` y su margen inferior no llegaba a aplicarse nunca. */
    display: flex;
    flex-direction: column;
    /* Y centrada contra la foto: al quitar la descripción, el nombre y el
       precio se quedaban arriba con media tarjeta vacía debajo. Centrar
       aguanta cualquier altura de foto; empujar el precio al fondo, no. */
    justify-content: center;
}
h1, h2, h3, .plato-nombre, .ficha-cuerpo h2 { font-family: var(--letra-titulos); }

.plato-nombre {
    margin: 0 0 .15rem;
    font-size: 1.05rem;
    font-weight: 600;
}
/* Sin descripción, el precio se pegaba al nombre: la separación la daba el
   margen inferior de ella, que ya no está. */
.plato-nombre + .plato-pie { margin-top: .45rem; }

.plato-desc {
    margin: 0 0 .4rem;
    font-size: .85rem;
    color: var(--texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.plato-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.plato-precio {
    font-weight: 600;
    color: var(--marron);
    font-size: .95rem;
}
.alergenos-mini {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.alergenos-mini img { width: 17px; height: 17px; filter: var(--filtro-iconos); }
.alergenos-mini span { font-size: .75rem; color: var(--texto-suave); }

.categoria-desc {
    margin: 0 0 .9rem;
    font-size: .88rem;
    color: var(--texto-suave);
}

/* ---------------------------------------------------------- Ficha plato */
.velo {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 12, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 40;
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.ficha {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 100%);
    width: min(100%, var(--marco));
    max-height: 92%;
    overflow-y: auto;
    background: var(--superficie);
    border-radius: 22px 22px 0 0;
    z-index: 50;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
    scrollbar-width: none;
}
.ficha::-webkit-scrollbar { display: none; }
.ficha.abierta { transform: translate(-50%, 0); }

.ficha-asa {
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: var(--linea);
}
.ficha-foto {
    width: calc(100% - 2rem);
    margin: .8rem 1rem 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radio);
}
/* Varias fotos: una entera y se pasa, como en la app.
   Antes iban al 82 % con hueco, que enseña un trozo de la siguiente. Eso está
   bien en una tira de miniaturas —dice «hay más»— pero aquí la foto es lo que
   se ha venido a ver, y verla a medias es peor que no verla. Que hay más lo
   dicen los puntos de abajo. */
.ficha-galeria {
    position: relative;
    display: flex;
    gap: 0;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.ficha-galeria::-webkit-scrollbar { display: none; }
.ficha-galeria img {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;   /* no se saltan dos de un manotazo */
}

/* Los puntos: cuántas hay y en cuál estás. Sin ellos, una foto a pantalla
   completa no dice que se pueda pasar. */
.galeria-marco { position: relative; }
.galeria-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .7rem;
    display: flex;
    justify-content: center;
    gap: .35rem;
    pointer-events: none;
}
.galeria-punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: width .2s, background-color .2s;
}
.galeria-punto.activo { width: 16px; border-radius: 3px; background: #fff; }

.ficha-cuerpo { padding: 1.1rem 1.3rem 2rem; }
.ficha-cuerpo h2 { margin: 0 0 .2em; font-size: 1.45rem; }
.ficha-texto { font-size: .92rem; color: var(--texto-suave); line-height: 1.55; }

.precios {
    display: flex;
    margin: 1.1rem 0;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--crema);
    overflow: hidden;
}
.precios div {
    flex: 1;
    padding: .8rem .3rem;
    text-align: center;
}
.precios div + div { border-left: 1px solid var(--linea); }
.precios dt {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: .25rem;
}
.precios dd { margin: 0; font-size: 1.05rem; font-weight: 600; }
/* Se llamaba `vacio`, igual que el bloque de «aquí no hay nada» —que lleva
   3rem de relleno—, así que una celda sin precio medía 115 px en vez de 19 y
   estiraba la fila entera a 160. Dos cosas distintas no pueden llamarse igual. */
.precios dd.sin-precio { color: var(--texto-suave); font-weight: 400; }

.alergenos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .6rem;
}
.alergenos-lista figure {
    width: 68px;
    margin: 0;
    text-align: center;
}
.alergenos-lista img { width: 52px; margin: 0 auto; filter: var(--filtro-iconos); }
.alergenos-lista figcaption {
    font-size: .7rem;
    color: var(--texto-suave);
    margin-top: .2rem;
}

.aviso-alergenos {
    display: flex;
    gap: .5rem;
    margin-top: 1.2rem;
    padding: .8rem;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--crema);
    font-size: .8rem;
    color: var(--texto-suave);
}

h3.apartado {
    margin: 1.4rem 0 .2rem;
    font-size: 1rem;
    font-weight: 600;
}

/* ------------------------------------------------------------ Formulario */
.campo { margin-bottom: .9rem; }
.campo label {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    font-weight: 600;
}
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: var(--superficie);
    font: inherit;
    font-size: .95rem;
    color: var(--texto);
}
.campo textarea { min-height: 4.5rem; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--marron-claro);
    box-shadow: 0 0 0 3px rgba(181, 139, 66, .2);
}
.campo .error {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--error);
}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--error); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.turnos { display: flex; gap: .5rem; margin-bottom: .6rem; }
.turnos button {
    flex: 1;
    padding: .5rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--superficie);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.turnos button.activo {
    background: var(--marca-fondo);
    border-color: var(--marca-fondo);
    color: #fff;
}

.horas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .4rem;
    margin-bottom: .9rem;
}
.horas button {
    padding: .5rem 0;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--superficie);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.horas button.activa {
    background: var(--marron);
    border-color: var(--marron);
    color: #fff;
}

/* --------------------------------------------------------------- Estados */
.aviso {
    padding: .8rem 1rem;
    border-radius: 12px;
    font-size: .88rem;
    margin-bottom: 1rem;
}
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }

.cargando, .vacio {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--texto-suave);
    font-size: .92rem;
}
.cargando::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 1rem;
    border: 3px solid var(--linea);
    border-top-color: var(--marron);
    border-radius: 50%;
    animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.cargando--claro { color: rgba(255, 255, 255, .8); }
.cargando--claro::before {
    border-color: rgba(255, 255, 255, .25);
    border-top-color: #fff;
}

/* Las pantallas con foto de fondo escriben en claro */
.marco--fondo .aviso--error { background: rgba(150, 48, 41, .9); color: #fff; }

.exito {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.exito-marca {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-fondo);
    color: var(--ok);
    font-size: 2rem;
}

/* -----------------------------------------------------------------------------
 *  Bloques que aportan las apps instaladas
 *
 *  Los pinta el propio cliente a partir del `tipo` que trae cada bloque en el
 *  JSON de la carta, así que estos estilos valen para cualquier app que use
 *  el tipo «aviso», no solo para la que lo estrenó.
 * -------------------------------------------------------------------------- */
/* Mismo margen lateral que los platos: si no, el bloque va a sangre y
   parece de la casa en vez de del negocio. */
.extensiones { padding: 1rem 1rem 0; }
.extensiones:empty { display: none; padding: 0; }

.avisos-app {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--crema);
    font-size: .95rem;
    line-height: 1.4;
}
.avisos-app p { margin: 0; }
.avisos-app p + p { margin-top: 6px; }

.avisos-app--atencion { border-color: #e6cf9a; background: #fdf5e3; color: #5e4200; }
.avisos-app--info     { border-color: #bcd7f0; background: #eef5fc; color: #1c3f5e; }
.avisos-app--exito    { border-color: #b9dfa4; background: var(--ok-fondo); color: var(--ok); }

/* =========================================================================
   El carrito de la carta

   Vive pegado abajo. Cerrado es una barra de una linea; abierto, una hoja que
   sube. No tapa la carta entera a proposito: quien esta pidiendo sigue
   queriendo ver lo que hay.
   ========================================================================= */
.carrito {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.carrito:empty { display: none; }
.carrito > * { pointer-events: auto; }

/* --- cerrado: la barra --- */
.carrito-barra {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: min(100%, var(--marco));
    margin: .7rem;
    padding: .85rem 1.1rem;
    border: 0;
    border-radius: var(--radio);
    background: var(--marca-fondo);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    cursor: pointer;
    animation: carrito-sube .22s ease;
}
.carrito-barra:active { transform: scale(.99); }

.carrito-cuenta {
    flex: none;
    min-width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-weight: 700;
    font-size: .85rem;
}
.carrito-que { opacity: .85; }
.carrito-suma { margin-left: auto; font-weight: 700; }
.carrito-ver {
    padding-left: .7rem;
    border-left: 1px solid rgba(255, 255, 255, .3);
    font-weight: 600;
}
.carrito-barra .carrito-suma + .carrito-ver { margin-left: 0; }
.carrito-barra .carrito-que ~ .carrito-ver:first-of-type { margin-left: auto; }

/* --- abierto: la hoja --- */
.carrito.abierto {
    top: 0;
    background: rgba(20, 17, 12, .45);
    align-items: flex-end;
    pointer-events: auto;
}

.carrito-panel {
    width: min(100%, var(--marco));
    max-height: 88vh;
    overflow-y: auto;
    padding: 1rem 1.1rem 1.2rem;
    border-radius: var(--radio) var(--radio) 0 0;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);
    animation: carrito-sube .24s ease;
}

@keyframes carrito-sube { from { transform: translateY(18px); opacity: 0; } }

.carrito-cabecera {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
}
.carrito-cabecera h2 {
    margin: 0;
    font-family: var(--letra-titulos);
    font-size: 1.15rem;
}
.carrito-donde {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--crema);
    font-size: .78rem;
    color: var(--texto-suave);
}
.carrito-cerrar {
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: var(--crema);
    color: var(--texto-suave);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.carrito-vacio {
    margin: 1.4rem 0;
    text-align: center;
    color: var(--texto-suave);
    font-size: .92rem;
}

.carrito-lineas { list-style: none; margin: 0 0 .8rem; padding: 0; }
.carrito-lineas li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--linea);
}
.carrito-lineas li:last-child { border-bottom: 0; }

.carrito-linea-nombre { flex: 1; min-width: 0; font-size: .95rem; }
.carrito-linea-nombre small {
    display: block;
    color: var(--texto-suave);
    font-size: .78rem;
}
.carrito-linea-precio { flex: none; font-weight: 600; font-size: .92rem; }

/* Menos y mas: dos dianas grandes. Se pulsan de pie, con una mano. */
.carrito-mas-menos {
    flex: none;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.carrito-mas-menos button {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.carrito-mas-menos button:active { background: var(--crema); }
.carrito-mas-menos strong { min-width: 1.2rem; text-align: center; font-size: .95rem; }

.carrito-total {
    display: flex;
    justify-content: space-between;
    margin: 0 0 .9rem;
    padding-top: .7rem;
    border-top: 2px solid var(--linea);
    font-size: 1.05rem;
}
.carrito-total strong { font-weight: 700; }

.carrito-campo { display: block; margin-bottom: .8rem; }
.carrito-campo > span {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    color: var(--texto-suave);
}
.carrito-campo input,
.carrito-campo textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--linea);
    border-radius: calc(var(--radio) / 2);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: .95rem;
}

/* Lo mas importante de toda la pantalla: que esto NO esta pagado. */
.carrito-aviso {
    margin: 0 0 .9rem;
    padding: .7rem .85rem;
    border-radius: calc(var(--radio) / 2);
    background: var(--crema);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--texto-suave);
}

.carrito-fallo {
    margin: .7rem 0 0;
    padding: .7rem .85rem;
    border-radius: calc(var(--radio) / 2);
    background: var(--error-fondo);
    color: var(--error);
    font-size: .88rem;
}

.carrito-estado {
    margin: 0 0 .9rem;
    padding: .9rem 1rem;
    border-radius: calc(var(--radio) / 2);
    background: var(--crema);
    font-size: .98rem;
    text-align: center;
}
/*  Por TONO, no por el nombre del estado: cuantos estados hay y como se
    llaman es de quien puso el carrito. Aqui solo se sabe pintar bien, mal o
    ni una cosa ni otra, igual que se sabe el borde y el radio.  */
.carrito-estado.es-bien { background: var(--ok-fondo); color: var(--ok); }
.carrito-estado.es-mal  { background: var(--error-fondo); color: var(--error); }

.carrito-codigo {
    margin: 0 0 .9rem;
    text-align: center;
    color: var(--texto-suave);
    font-size: .85rem;
}
.carrito-codigo strong {
    display: block;
    margin-top: .15rem;
    font-size: 1.25rem;
    letter-spacing: .12em;
    color: var(--texto);
}

/* Sin mesa: una tira callada, sin velo y sin tapar nada. */
.carrito-tira {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: min(100%, var(--marco));
    margin: .7rem;
    padding: .75rem 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto-suave);
    font-size: .88rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.carrito-tira > span { flex: 1; }
.carrito-tira .carrito-cerrar { width: 1.7rem; height: 1.7rem; font-size: 1.1rem; }

/* --- los botones de anadir, en la ficha del plato --- */
.pedir-formatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: .5rem;
    margin: 1rem 0;
}
.pedir-formatos.es-uno { grid-template-columns: 1fr; }

.boton.pedir-boton {
    flex-direction: column;
    gap: .1rem;
    width: 100%;
    height: auto;
    min-height: 3rem;
    margin: 0;
    padding: .6rem .8rem;
    font-size: .92rem;
}
.boton.pedir-boton .pedir-precio { font-size: .8rem; opacity: .8; }
.boton.pedir-boton.es-anadido { background: var(--ok); }

/* =========================================================================
   Las pantallas que traen las apps

   Una app declara `{tipo, tono}` y esto lo pinta. NO elige colores: los tonos
   salen de las variables del tema, que es lo que hace que su pagina se vea
   como el resto de la carta del bar sin que la app sepa nada del diseno.
   ========================================================================= */
.pantalla-app { display: flex; flex-direction: column; gap: .75rem; }

.pant-titulo h2 {
    margin: 0;
    font-family: var(--letra-titulos);
    font-size: 1.15rem;
}
.pant-titulo p { margin: .2rem 0 0; font-size: .85rem; color: var(--texto-suave); }
.pantalla-app > .pant-titulo:not(:first-child) { margin-top: .5rem; }

.pant-texto { margin: 0; font-size: .95rem; line-height: 1.5; }
.pant-texto.es-suave { color: var(--texto-suave); font-size: .88rem; }
.pant-texto.es-aviso { color: #5e4200; }
.pant-texto.es-error { color: var(--error); }
.pant-texto.es-bien  { color: var(--ok); }
.pant-texto.es-marca { color: var(--marron); font-weight: 600; }

/* El numero grande: el dato que se lee de un vistazo desde lejos. */
.pant-numero {
    padding: 1rem;
    border: var(--tarjeta-borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--tarjeta-sombra);
    text-align: center;
}
.pant-numero strong {
    display: block;
    font-family: var(--letra-titulos);
    font-size: 1.7rem;
    line-height: 1.15;
}
.pant-numero span { font-size: .85rem; color: var(--texto-suave); }
.pant-numero p { margin: .45rem 0 0; font-size: .85rem; color: var(--texto-suave); }

.pant-numero.es-bien  { border-color: #b9dfa4; background: var(--ok-fondo); }
.pant-numero.es-bien strong { color: var(--ok); }
.pant-numero.es-aviso { border-color: #e6cf9a; background: #fdf5e3; }
.pant-numero.es-aviso strong { color: #5e4200; }
.pant-numero.es-error { border-color: #eec4c1; background: var(--error-fondo); }
.pant-numero.es-error strong { color: var(--error); }
.pant-numero.es-marca strong { color: var(--marron); }

/* La tarjeta agrupa; las filas de dentro comparten linea, no borde. */
.pant-tarjeta {
    border: var(--tarjeta-borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--tarjeta-sombra);
    overflow: hidden;
}
.pant-tarjeta > * + * { border-top: 1px solid var(--linea); }
.pant-tarjeta .pant-texto,
.pant-tarjeta .pant-titulo { padding: .75rem .9rem; }

.pant-fila {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .7rem .9rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
button.pant-fila { cursor: pointer; }
button.pant-fila:hover { background: var(--crema); }
button.pant-fila:active { transform: scale(.995); }
button.pant-fila[disabled] { opacity: .6; cursor: progress; }

.pant-fila-textos { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pant-fila-titulo { font-size: .95rem; font-weight: 600; }
.pant-fila-sub { font-size: .82rem; color: var(--texto-suave); }
.pant-fila.es-suave .pant-fila-titulo { color: var(--texto-suave); font-weight: 500; }
.pant-fila.es-marca { background: var(--crema); }
.pant-fila.es-marca .pant-fila-titulo { color: var(--marron); }

.pant-pastilla {
    flex: none;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--marca-fondo);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}

.pant-separador { height: .5rem; }

/* Un boton de pantalla no es el boton grande del vestibulo: aqui hay varios
   y a 3,5rem cada uno la pagina se convierte en una escalera. */
.boton.pant-boton { width: 100%; height: 2.9rem; margin: 0; font-size: .95rem; }
.boton.pant-boton.es-error { background: var(--error); }
.boton.pant-boton.es-suave {
    background: transparent;
    border: 1px solid var(--linea);
    color: var(--texto);
}

.pant-interruptor {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .75rem .9rem;
    border: var(--tarjeta-borde);
    border-radius: var(--radio);
    background: var(--superficie);
    cursor: pointer;
}
.pant-interruptor input { margin-top: .2rem; flex: none; width: 1.1rem; height: 1.1rem; }
.pant-interruptor-textos { display: grid; gap: .15rem; font-size: .95rem; }
.pant-interruptor-textos small { color: var(--texto-suave); font-size: .82rem; }
.pant-tarjeta .pant-interruptor { border: 0; border-radius: 0; }

.pant-campo { display: grid; gap: .3rem; }
.pant-campo label { font-size: .85rem; color: var(--texto-suave); }
.pant-campo input,
.pant-campo textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--linea);
    border-radius: calc(var(--radio) / 2);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: .95rem;
}

.pant-vacio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--texto-suave);
}
.pant-vacio h3 { margin: 0 0 .3rem; font-family: var(--letra-titulos); color: var(--texto); }
.pant-vacio p { margin: 0; font-size: .9rem; }

/* Lo que contesta una accion. Vive poco: cinco segundos y se va. */
.pant-dicho {
    margin: 0 0 .3rem;
    padding: .7rem .9rem;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--crema);
    font-size: .9rem;
}
.pant-dicho.es-bien  { border-color: #b9dfa4; background: var(--ok-fondo); color: var(--ok); }
.pant-dicho.es-error { border-color: #eec4c1; background: var(--error-fondo); color: var(--error); }

/* Tipos de bloque que puede traer una app, además de «aviso» */
.etiquetas-app { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.etiqueta-app {
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: var(--crema);
    font-size: .8rem;
    color: var(--marron);
}

.texto-app { margin: .8rem 0; }
.texto-app h3 { margin: 0 0 .25rem; font-size: .95rem; }
.texto-app p  { margin: 0; color: var(--texto-suave); font-size: .9rem; }

/* ========================================================== Valoraciones
   La nota de cada plato y el sitio donde se deja la tuya.

   El dorado de las estrellas es el único color que no sale de la paleta:
   una estrella marrón no se lee como una estrella. */
.plato-nota {
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-suave);
    white-space: nowrap;
}

.ficha-nota {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .9rem;
    font-size: .9rem;
    color: var(--texto-suave);
}
.ficha-nota strong { color: var(--texto); font-size: 1.05rem; }
.nota-estrellas { color: #d9a520; letter-spacing: .05em; }

.valorar {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linea);
}
.valorar .apartado { margin-bottom: .5rem; }

.valorar-estrellas { display: flex; gap: .15rem; }

.estrella {
    background: none;
    border: 0;
    padding: .1rem .15rem;
    font-size: 1.9rem;
    line-height: 1;
    color: #d9a520;
    cursor: pointer;
}
.estrella:disabled { cursor: default; }
/* El foco se ve: aquí se vota con el dedo, pero también con el teclado. */
.estrella:focus-visible { outline: 2px solid var(--marron); border-radius: 4px; }

.valorar-gracias {
    margin: 0;
    font-size: .9rem;
    color: var(--ok);
    font-weight: 600;
}

.valorar-texto { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.valorar-texto textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font: inherit;
    font-size: .9rem;
    resize: vertical;
    background: var(--superficie);
}
.valorar-texto textarea:focus { outline: 2px solid var(--marron); border-color: transparent; }
.valorar-texto .boton { align-self: flex-start; }

/* El asterisco de la lista, dorado como en la ficha; el número, discreto,
   para no competir con el precio, que es lo que se ha venido a mirar. */
.plato-nota { color: var(--texto-suave); }
.plato-nota::first-letter { color: #d9a520; font-size: 1.05em; }

/* En la pantalla de valoraciones no hay ficha de la que colgar: la caja va
   suelta y centrada, que es donde cae el pulgar. */
.valorar--sitio {
    margin: 0 0 .4rem;
    padding: 0 0 1.2rem;
    border-top: 0;
    border-bottom: 1px solid var(--linea);
    text-align: center;
}
.valorar--sitio .valorar-estrellas { justify-content: center; }
.valorar--sitio .estrella { font-size: 2.4rem; padding: .1rem .25rem; }
.valorar--sitio .apartado { margin-bottom: .6rem; }
.valorar--sitio .valorar-texto { text-align: left; }
.valorar--sitio .valorar-texto .boton { align-self: center; }

/* ====================================================== Bloques del diseño
   Lo que el hostelero pone en su carta. Todo hereda del tema: aquí no se
   escribe ni un color a pelo, porque entonces un tema oscuro dejaría estos
   bloques en claro y se vería el remiendo. */
.bloque-texto { margin: 0 0 1.1rem; }
.bloque-texto.es-centro { text-align: center; }
.bloque-texto h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--texto); }
.bloque-texto p { margin: 0 0 .4rem; color: var(--texto-suave); line-height: 1.6; }
.bloque-texto.es-pequeno p { font-size: .85rem; }
.bloque-texto.es-grande p { font-size: 1.05rem; }

.bloque-imagen { display: block; width: 100%; margin: 0 0 1.1rem; }
.bloque-imagen.es-medio { width: 50%; }
.bloque-imagen.es-redondo { border-radius: var(--radio); }

.bloque-boton { display: block; margin: 0 0 .7rem; text-align: center; }

.bloque-redes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.bloque-redes .red {
    padding: .45rem .9rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    color: var(--marron);
    text-decoration: none;
    font-size: .9rem;
}
.bloque-redes .red:hover { background: var(--linea); }

.bloque-wifi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem .9rem;
    margin: 0 0 1.1rem;
    border: 1px dashed var(--linea);
    border-radius: var(--radio);
}
.wifi-red { color: var(--texto-suave); font-size: .9rem; }
.wifi-clave { font-family: ui-monospace, monospace; font-size: 1rem; color: var(--texto); }

.bloque-horario { margin: 0 0 1.1rem; }
.bloque-horario h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--texto); }
.bloque-horario p { margin: 0; color: var(--texto-suave); font-size: .9rem; line-height: 1.7; }

.bloque-separador { margin: 0 0 1.1rem; }
.bloque-separador.es-poco { height: .4rem; }
.bloque-separador.es-normal { height: 1rem; }
.bloque-separador.es-mucho { height: 2.2rem; }
.bloque-separador.con-linea { border-top: 1px solid var(--linea); }

/* --- las categorías, según el diseño */
.categorias.es-lista { flex-direction: column; overflow: visible; }
.categorias.es-lista button { width: 100%; text-align: left; }
.categorias.es-subrayado button { background: none; border-radius: 0; border-bottom: 2px solid transparent; }
.categorias.es-subrayado button.activa { background: none; color: var(--marron); border-bottom-color: var(--marron); }
.categoria-icono { width: 16px; height: 16px; vertical-align: -3px; margin-right: .3rem; }

/* --- la lista de platos, según el diseño */
.contenido.es-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.contenido.es-rejilla .plato { flex-direction: column; align-items: stretch; text-align: left; }
.contenido.es-rejilla .plato-foto { width: 100%; height: 110px; }

/* ----------------------------------------------- El vestíbulo, a su gusto */
.logo-negocio.es-pequeno { width: 74px;  max-height: 70px; }
.logo-negocio.es-medio   { width: 110px; max-height: 100px; }
.logo-negocio.es-grande  { width: 170px; max-height: 150px; }

.acciones.es-ajustado { display: flex; flex-direction: column; align-items: center; }
.acciones.es-ajustado .boton { width: auto; padding-inline: 2.2rem; }

/* La forma de los botones del vestíbulo la manda su bloque, no el tema: en el
   vestíbulo son la pantalla entera y ahí sí se quiere decidir aparte. */
.boton.es-recto   { border-radius: 0; }
.boton.es-suave   { border-radius: 10px; }
.boton.es-redondo { border-radius: 25px; }

/* --- las categorías, si no se quieren pegadas */
.cabecera.suelta { position: static; }

/* --- línea entre platos, para quien no quiera tarjetas */
.contenido.con-lineas .plato {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--linea);
    box-shadow: none;
    margin-bottom: 0;
}
.contenido.con-lineas .plato:last-child { border-bottom: 0; }

/* --- el distintivo de plato destacado */
.plato-destacado {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marron);
    margin-left: .35rem;
}

/* ------------------------------------------------ El aspecto de un bloque
   El envoltorio que le pone a cada bloque su fondo, su color y su aire. Todo
   por variables: un valor sin poner es «el del tema», y así cambiar el tema
   sigue cambiándolo todo. */
.bloque-marco {
    --bloque-fondo: transparent;
    --bloque-color: inherit;
    color: var(--bloque-color);
}
.bloque-marco > *:last-child { margin-bottom: 0; }

.bloque-marco.con-fondo {
    background: var(--bloque-fondo);
    border-radius: var(--radio);
    padding: 1rem;
}
.bloque-marco.fondo-suave  { --bloque-fondo: color-mix(in srgb, var(--texto) 5%, var(--superficie)); }
.bloque-marco.fondo-marca  { --bloque-fondo: var(--marca-fondo); --bloque-color: #fff; }
.bloque-marco.fondo-propio { /* el color va en el atributo style */ }

/* Con fondo de marca, lo de dentro también tiene que leerse */
.bloque-marco.fondo-marca h3,
.bloque-marco.fondo-marca p,
.bloque-marco.fondo-marca code { color: inherit; }

.bloque-marco.borde-linea  { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.bloque-marco.borde-arriba { border-top: 1px solid var(--linea); padding-top: 1rem; }
.bloque-marco.borde-abajo  { border-bottom: 1px solid var(--linea); padding-bottom: 1rem; }

.bloque-marco.aire-ninguno { margin: 0; }
.bloque-marco.aire-poco    { margin: .4rem 0; }
.bloque-marco.aire-normal  { margin: 1rem 0; }
.bloque-marco.aire-mucho   { margin: 2.2rem 0; }

/* De lado a lado: se sale del ancho del marco, para una foto o una franja */
.bloque-marco.es-lleno {
    margin-left: calc(var(--aire) * -1);
    margin-right: calc(var(--aire) * -1);
    border-radius: 0;
}

/* Vestíbulo sobre el color de marca: hay que invertir lo de dentro. Un botón
   con el color de marca sobre un fondo del color de marca no se ve, y el texto
   oscuro sobre un color fuerte tampoco. */
.marco--fondo.sobre-marca { color: #fff; }
.marco--fondo.sobre-marca .titulo,
.marco--fondo.sobre-marca .subtitulo { color: inherit; }
.marco--fondo.sobre-marca .boton {
    background: var(--superficie);
    color: var(--marca-fondo);
}
.marco--fondo.sobre-marca .boton--contorno {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .5);
}
.marco--fondo.sobre-marca .boton--contorno:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------- La ficha, a su gusto
   La altura de la foto sale de su bloque. `aspect-ratio` y no una altura fija:
   así la foto se recorta igual en un móvil estrecho que en una tableta. */
.ficha-foto.es-baja,   .ficha-galeria.es-baja img   { aspect-ratio: 21 / 9; }
.ficha-foto.es-normal, .ficha-galeria.es-normal img { aspect-ratio: 16 / 10; }
.ficha-foto.es-alta,   .ficha-galeria.es-alta img   { aspect-ratio: 4 / 5; }

/* Los precios, uno debajo de otro: para quien tiene nombres largos de formato
   o solo dos, donde la caja de tres columnas se ve coja. */
.precios.es-lista { flex-direction: column; }
.precios.es-lista div { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
.precios.es-lista div + div { border-left: 0; border-top: 1px solid var(--linea); }
.precios.es-lista dt { margin-bottom: 0; }

/* ------------------------------------------------ Listas y tarjetas de app
   Dos maneras de ensenar VARIAS cosas. La app declara las filas y el dibujo
   es este, con el tema del local: sin esto, cada app que tuviera algo que
   listar acabaria pidiendo pintar HTML en la carta de un cliente. */
.bloque-lista h3,
.bloque-tarjetas h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 .6rem;
}

.lista-cuerpo { display: flex; flex-direction: column; }

.lista-fila {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--linea);
}
.lista-fila:last-child { border-bottom: 0; }

.lista-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lista-titulo { font-weight: 600; }
.lista-detalle { font-size: .85rem; opacity: .75; }

/* El apunte es el precio, la hora, lo que sea: va a la derecha y no se parte */
.lista-apunte { white-space: nowrap; font-weight: 600; }

.tarjetas-cuerpo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
}

.tarjetas-fila {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: .7rem;
}
.tarjetas-fila img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: calc(var(--radio) - 2px);
}
.tarjetas-titulo { font-weight: 600; }
.tarjetas-detalle { font-size: .85rem; opacity: .75; }
.tarjetas-apunte { font-weight: 600; }

/* ---------------------------------------------------- A pantalla completa
   Para el televisor de la barra: ocupa el alto de la ventana y centra lo que
   lleve dentro. Nadie va a desplazar eso con el dedo. */
.bloque-marco.es-pantalla {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem var(--aire);
    margin-top: 0;
    margin-bottom: 0;
}
.bloque-marco.es-pantalla .tarjetas-cuerpo {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bloque-marco.es-pantalla .lista-titulo,
.bloque-marco.es-pantalla .tarjetas-titulo { font-size: 1.3rem; }
.bloque-marco.es-pantalla h3 { font-size: 1.8rem; }