/* Carta pública: letras, colores, cabecera, barra fija (buscador, filtro de alérgenos y
   secciones), avisos y pie. Diseño nuevo (fase 4, paso 8b; boceto aprobado por Adolfo el
   24 oct 2026): siempre papel claro y tinta casi negra, un solo color de acento, nada que se
   lea por debajo de 15 px y botones de al menos 44 px. Modo noche solo con su botón.
   Las letras se sirven desde nuestro servidor (no desde Google: no mandar la IP del cliente). */

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fuentes/AtkinsonHyperlegible-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fuentes/AtkinsonHyperlegible-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Young Serif';
    src: url('../fuentes/YoungSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --papel: #F6F5F2;
    --hoja: #FFFFFF;
    --tinta: #1D1A1B;
    --tinta-2: #4B4547;
    --linea: #DCD6D3;
    --acento: #7A2333;        /* granate de serie; cada restaurante lo cambia en Carta → Aspecto (carta_inicio.js) */
    --acento-suave: color-mix(in srgb, var(--acento) 7%, var(--papel)); /* sigue al acento de cada restaurante */
    --placa: #F6F5F2;         /* fondo claro del logo oscuro en modo noche (no cambia de noche) */
    --sobre-acento: #FFFFFF;
    --f-titulo: 'Young Serif', Georgia, 'Times New Roman', serif;
    --f-texto: 'Atkinson Hyperlegible', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --t-nombre: 1.0625rem;    /* 17 px: nombre y precio, en negrita */
    --t-texto: 1rem;          /* 16 px */
    --t-detalle: .9375rem;    /* 15 px: lo más pequeño que se lee */
    --t-tipo: 1.875rem;
    --t-region: 1.1875rem;
    --boton: 44px;            /* alto mínimo de lo que se toca */
    --foto-lado: 5.75rem;     /* 92 px: la foto cuadrada del modo Compacto (carta_modos.css) */
    --ancho: 40rem;
    color-scheme: light;
}

/* Modo noche: solo si el cliente lo pide con el botón (se recuerda en ese móvil) */
html.noche {
    --papel: #161314;
    --hoja: #211C1E;
    --tinta: #F3EFED;
    --tinta-2: #C2B9B6;
    --linea: #3A3336;
    --acento: #E8A0AE;
    --acento-suave: color-mix(in srgb, var(--acento) 17%, var(--papel));
    --sobre-acento: #161314;
    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 160px;
}

body {
    font-family: var(--f-texto);
    font-size: var(--t-texto);
    line-height: 1.45;
    background: var(--papel);
    color: var(--tinta);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

button, input { font: inherit; color: inherit; }

button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.marco {
    max-width: var(--ancho);
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Modo incrustado (iframe o ?embed=1): sin cabecera ni pie */
body.embed-mode .carta-header,
body.embed-mode .carta-footer,
body.is-iframe .carta-footer {
    display: none;
}

/* ============ Cabecera pequeña: nombre o logo, carta, modo noche y nota ============ */
.carta-header {
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: .75rem;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    align-items: start;
}

.header-logo { display: none; }
.header-logo.has-logo { display: block; }
.header-logo img { display: block; max-height: 56px; max-width: 200px; width: auto; }
/* Logo oscuro con fondo transparente: en modo noche, sobre una placa clara (carta_inicio.js) */
html.noche .header-logo.logo-oscuro img { background: var(--placa); border-radius: 10px; padding: 6px 8px; box-sizing: content-box; }

/* Con logo, el nombre no se ve (sigue ahí para los lectores de pantalla) */
.header-logo.has-logo + .header-text .header-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.header-title {
    font-family: var(--f-titulo);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: .01em;
}

/* El nombre con enlace a la web (sin QR, 8 nov 2026): se ve igual que sin él */
.header-title a.header-enlace { color: inherit; text-decoration: none; }

.header-subtitle {
    font-size: var(--t-detalle);
    color: var(--tinta-2);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .15rem;
}

.modo-btn {
    font-size: var(--t-detalle);
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 999px;
    padding: .4rem .9rem;
    min-height: var(--boton);
    cursor: pointer;
    grid-row: 1 / span 2;
    grid-column: 2;
}

/* ============ Barra fija: buscador, filtro de alérgenos y secciones ============ */
.carta-barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding-top: env(safe-area-inset-top, 0px);
}

.carta-toolbar .toolbar-inner {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: .25rem;
}

/* Buscador plegado en una lupa (Adolfo, 3 nov 2026): cerrado, «¿Alguna alergia?» y la lupa a la
   derecha; abierto (.buscando), solo el campo, a todo el ancho, con la ✕ que lo cierra */
.lupa-btn {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--boton);
    height: var(--boton);
    padding: 0;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 10px;
    cursor: pointer;
}

.lupa-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--tinta);
}

.toolbar-inner.buscando .lupa-btn,
.toolbar-inner.buscando .filter-btn { display: none; }

.search-box {
    flex: 1;
    min-width: 0;
    display: none;
    align-items: center;
    gap: .5rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 0 .25rem 0 .75rem;
    min-height: var(--boton);
}

.toolbar-inner.buscando .search-box { display: flex; }

.search-box:focus-within {
    border-color: var(--acento);
    box-shadow: 0 0 0 2px var(--acento-suave);
}

.search-icon {
    flex: none;
    width: 18px;
    height: 18px;
    stroke: var(--tinta-2);
}

#search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 1rem;
    padding: .6rem 0;
    outline: none;
}

#search-input::placeholder { color: var(--tinta-2); opacity: 1; }
#search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
    flex: none;
    width: var(--boton);
    height: var(--boton);
    border: 0;
    background: none;
    color: var(--tinta-2);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.filter-btn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--boton);
    padding: 0 .9rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 10px;
    font-size: var(--t-detalle);
    cursor: pointer;
}

.filter-btn.active {
    border-color: var(--acento);
    color: var(--acento);
}

.filter-count {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--acento);
    color: var(--sobre-acento);
    font-size: var(--t-detalle);
    font-weight: 700;
}

.alergenos-panel-inner {
    padding-top: .5rem;
    padding-bottom: .75rem;
}

/* «¿Alguna alergia?» y debajo, en pequeño, qué hace (26 oct 2026, como el boceto de menús) */
.alergenos-panel-title {
    font-size: var(--t-texto);
    font-weight: 700;
    color: var(--tinta);
}

.alergenos-panel-ayuda {
    font-size: var(--t-detalle);
    color: var(--tinta-2);
    margin-bottom: .5rem;
}

.alergenos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.alergeno-tag {
    display: inline-flex;
    align-items: center;
    min-height: var(--boton);
    padding: .4rem .9rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--hoja);
    font-size: var(--t-detalle);
    cursor: pointer;
}

.alergeno-tag.active {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--sobre-acento);
}

/* «Ver platos» cierra el panel; «Quitar filtro» lo quita todo (paso 8b, parte 5) */
.alergenos-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.alergenos-ver,
.alergenos-clear {
    min-height: var(--boton);
    padding: 0 .9rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--hoja);
    color: var(--tinta);
    font-size: var(--t-detalle);
    cursor: pointer;
}

.alergenos-ver {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--sobre-acento);
    font-weight: 700;
}

.no-results .alergenos-clear { margin-top: .75rem; }

/* Franja con el filtro de alérgenos puesto: "Sin lácteos ni gluten · quedan 12 platos" */
.alergenos-aviso {
    background: var(--acento-suave);
    border-top: 1px solid var(--linea);
}

.alergenos-aviso-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.alergenos-aviso-texto {
    flex: 1;
    min-width: 0;
    font-size: var(--t-detalle);
    font-weight: 700;
}

.alergenos-aviso-quitar {
    flex: none;
    min-height: var(--boton);
    padding: 0 1rem;
    border: 1px solid var(--acento);
    border-radius: 10px;
    background: var(--hoja);
    color: var(--acento);
    font-size: var(--t-detalle);
    font-weight: 700;
    cursor: pointer;
}

/* ============ Cargando, avisos y pie ============ */
.loading-carta {
    text-align: center;
    padding: 3rem 0;
    color: var(--tinta-2);
}

.spinner-carta {
    width: 32px;
    height: 32px;
    margin: 0 auto 1rem;
    border: 3px solid var(--linea);
    border-top-color: var(--acento);
    border-radius: 50%;
    animation: girar .8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.no-results {
    padding: 2.5rem 0;
    color: var(--tinta-2);
}

.no-results-icon { display: none; }
.no-results-text { font-size: var(--t-texto); }

.carta-footer {
    padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
    color: var(--tinta-2);
    font-size: var(--t-detalle);
}

.footer-nota { margin: 0; }

/* ============ La carta del servidor (fase 4, paso 12, A) ============
   Para quien lee sin JavaScript (Google): los platos que mete publico/carta/pagina.php. Con
   JavaScript (html.con-js, puesto en la cabecera antes de pintar nada) no se ve nunca: la carta la
   pinta el JavaScript como siempre y borra el bloque. Sin JavaScript, sin la rueda de «Cargando». */
html.con-js .carta-servidor { display: none; }
html:not(.con-js) .carta-servidor ~ .loading-carta,
html:not(.con-js) .loading-carta:has(~ .carta-servidor) { display: none; }
.carta-servidor { padding: 1rem 0 2rem; font-size: var(--t-texto); color: var(--tinta); }
.carta-servidor h2 { font-family: var(--f-titulo); font-size: var(--t-tipo); font-weight: 400; margin: 2rem 0 .75rem; }
.carta-servidor h3, .carta-servidor h4 { font-size: var(--t-nombre); margin: 1.25rem 0 .25rem; }
.carta-servidor p { margin: .25rem 0; }
.carta-servidor .srv-precio { font-weight: 700; }
.carta-servidor .srv-alergenos { color: var(--tinta-2); font-size: var(--t-detalle); }
.carta-servidor a { color: var(--acento); }
.no-existe-ir { color: var(--acento); }