/**
 * Diseño "Nocturna" — siempre oscuro (no depende del modo del sistema), con
 * el color primario del local como luz de neón y el secundario como reflejo.
 * Títulos en una sans estrecha y en mayúsculas, como un cartel de sala.
 * Clases propias: n-*.
 */

.p-nocturna {
    color-scheme: dark;
    /* Todo el color sale de --c1 / --c2: el fondo es casi negro teñido del
       primario, las líneas y el texto tenue del secundario. Esto de aquí es
       solo la reserva neutra para navegadores sin color-mix(). */
    --fondo: #0e0e0e;
    --fondo-2: #1a1a1a;
    --texto: #f2f2f2;
    --tenue: #a0a0a0;
    --linea: #2c2c2c;
    --etq: #2c2c2c;
    --velo-suave: rgba(14, 14, 14, .45);
    --velo: rgba(14, 14, 14, .6);
    --velo-fuerte: rgba(14, 14, 14, .86);
    --radio: 12px;
    --fuente-titulo: "Bahnschrift SemiCondensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, var(--fuente);
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .5);
    /* el neón: los colores del local, aclarados para que brillen sobre negro */
    --neon: var(--c1);
    --neon-2: var(--c2);
    --c1-tinta: var(--c1);
    --c2-tinta: var(--c2);
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --c1-oscuro: #000;
    --brillo: 0 0 14px rgba(255, 255, 255, .25);
    background: var(--fondo);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-nocturna {
        --fondo: color-mix(in srgb, var(--c1) 9%, #070707);
        --fondo-2: color-mix(in srgb, var(--c1) 15%, #121212);
        --texto: color-mix(in srgb, var(--c2) 6%, #f7f7f7);
        --tenue: color-mix(in srgb, var(--c2) 28%, #9c9c9c);
        --linea: color-mix(in srgb, var(--c2) 22%, #1e1e1e);
        --etq: color-mix(in srgb, var(--c2) 40%, #161616);
        --velo-suave: color-mix(in srgb, var(--fondo) 45%, transparent);
        --velo: color-mix(in srgb, var(--fondo) 60%, transparent);
        --velo-fuerte: color-mix(in srgb, var(--fondo) 86%, transparent);
        --neon: color-mix(in srgb, var(--c1) 72%, #fff);
        --neon-2: color-mix(in srgb, var(--c2) 72%, #fff);
        --c1-tinta: var(--neon);
        --c2-tinta: var(--neon-2);
        --c1-suave: color-mix(in srgb, var(--c1) 16%, var(--fondo));
        --c2-suave: color-mix(in srgb, var(--c2) 14%, var(--fondo));
        --c1-oscuro: color-mix(in srgb, var(--c1) 30%, #000);
        --brillo: 0 0 18px color-mix(in srgb, var(--c1) 70%, transparent);
    }
}

html:has(> .p-nocturna) { background: #000; }
.p-nocturna .carta { background: var(--fondo); }
@media (min-width: 600px) {
    .p-nocturna .carta { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 60px rgba(0, 0, 0, .6); }
}

/* piezas comunes, a oscuras (base.css solo las oscurece con el modo del sistema) */
.p-nocturna .c-nota--aviso { background: #3b1613; color: #ffb4ab; }
.p-nocturna .c-dieta--vegano, .p-nocturna .c-dieta--vegetariano, .p-nocturna .c-dieta--singluten { color: #84c770; }
.p-nocturna .c-dieta--picante, .p-nocturna .c-form-msg.es-error { color: #ff7a6e; }
.p-nocturna .c-ficha-desc { color: var(--texto); opacity: .86; }
.p-nocturna .c-toast { background: var(--texto); color: var(--fondo); }
.p-nocturna .c-num { color: var(--tenue); }
.p-nocturna .c-etq { background: var(--etq); color: var(--texto); }
.p-nocturna .c-etq--agotado { background: #c8261b; color: #fff; }
.p-nocturna dialog.c-hoja { border-top: 1px solid var(--linea); }
.p-nocturna dialog.c-hoja::backdrop { background: rgba(0, 0, 0, .72); }
.p-nocturna .c-boton { box-shadow: var(--brillo); }
.p-nocturna .c-edad { background: var(--fondo); }
.p-nocturna .c-edad-cab h1 { text-transform: uppercase; letter-spacing: .02em; }
.p-nocturna .c-edad-op { border: 1px solid var(--linea); }
.p-nocturna .c-edad-op--si { border-color: var(--neon); background: none; color: var(--neon); box-shadow: var(--brillo), inset var(--brillo); }
.p-nocturna .c-edad-op--si span { color: var(--texto); }
.p-nocturna .c-ficha-nombre { text-transform: uppercase; letter-spacing: .01em; }
.p-nocturna .c-ficha-precio { text-shadow: var(--brillo); }
.p-nocturna .c-alergenos h3 { color: var(--neon-2); }

/* ---- portada ---- */

.n-portada {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 64vh; min-height: 64svh;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, var(--c1-oscuro), var(--fondo) 70%);
}
.n-portada--sinfoto { min-height: calc(300px + env(safe-area-inset-top)); }
.n-portada-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* la foto se funde en el negro de la página; arriba, un velo para la tira */
.n-portada::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(var(--velo), transparent 22%),
        linear-gradient(transparent 30%, var(--velo-fuerte) 68%, var(--fondo));
}

.n-tira {
    position: absolute; z-index: 2; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    min-height: 52px; padding: env(safe-area-inset-top) 10px 0;
    color: #fff;
}
.n-redes { justify-content: flex-start; }
.n-idioma {
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .28);
    background: var(--velo-suave);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.n-portada-cont {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 72px 24px 26px;
    text-align: center;
}
.n-logo { width: auto; max-width: 66%; max-height: 104px; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6)); }
.n-portada h1 {
    font: 700 2.375rem/1.02 var(--fuente-titulo);
    font-stretch: condensed;
    letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .7);
}
.n-portada-dir {
    font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue);
}
.n-portada-dir::before { content: ""; display: block; width: 28px; height: 1px; margin: 2px auto 12px; background: var(--neon); box-shadow: var(--brillo); }

/* ---- las cartas, numeradas como un cartel ---- */

.n-menus { padding: 8px 16px 0; counter-reset: n; }
.n-menus a {
    position: relative;
    display: flex; align-items: center; gap: 16px;
    min-height: 76px; padding: 14px 6px;
    border-top: 1px solid var(--linea);
    transition: background-color .15s;
}
.n-menus a:last-child { border-bottom: 1px solid var(--linea); }
.n-menus a:active { background: var(--fondo-2); }
.n-menus-num {
    flex: none; width: 2ch;
    font: 700 1rem/1 var(--fuente-titulo); letter-spacing: .04em;
    color: var(--neon); text-shadow: var(--brillo);
    font-variant-numeric: tabular-nums;
}
.n-menus-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.n-menus-nombre {
    font: 700 1.75rem/1.05 var(--fuente-titulo);
    font-stretch: condensed;
    text-transform: uppercase; letter-spacing: .01em; text-wrap: balance;
}
.n-menus .c-precio { font-size: .9375rem; color: var(--tenue); }
.n-menus .ic { width: 22px; height: 22px; color: var(--neon); transition: transform .15s; }
.n-menus a:hover .ic { transform: translateX(3px); }

/* ---- recomendaciones: carteles verticales ---- */

.n-recos { padding: 34px 0 6px; }
.n-recos h2 {
    display: flex; align-items: center; gap: 10px;
    padding: 0 22px 14px;
    font: 700 .8125rem/1 var(--fuente); letter-spacing: .18em; text-transform: uppercase;
    color: var(--neon-2);
}
.n-recos h2::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--neon-2); box-shadow: 0 0 10px var(--neon-2);
    animation: n-late 2.4s ease-in-out infinite;
}
@keyframes n-late { 50% { opacity: .35; } }

.n-carteles {
    display: flex; gap: 12px;
    padding: 0 16px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    scrollbar-width: none;
}
.n-carteles::-webkit-scrollbar { display: none; }
.n-cartel {
    position: relative; flex: none;
    display: flex; flex-direction: column; justify-content: space-between;
    width: 150px; height: 214px;
    border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
    background: linear-gradient(160deg, var(--c1-suave), var(--fondo-2));
    scroll-snap-align: start;
    transition: transform .15s;
}
.n-cartel:only-child { width: 100%; height: 190px; }
.n-cartel:active { transform: scale(.97); }
.n-cartel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.n-cartel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .25) 50%, var(--velo-fuerte));
}
.n-cartel-grupo, .n-cartel-info { position: relative; z-index: 1; padding: 10px 12px; }
.n-cartel-grupo {
    align-self: flex-start;
    font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}
.n-cartel-info { display: grid; gap: 4px; }
.n-cartel-nombre {
    font: 700 1.1875rem/1.05 var(--fuente-titulo);
    font-stretch: condensed;
    text-transform: uppercase; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.n-cartel .c-precio { color: var(--neon); text-shadow: var(--brillo); }

/* ---- pie ---- */

.n-pie { padding: 36px 16px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.n-acciones { display: grid; gap: 8px; margin-bottom: 30px; }
.n-accion {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 16px;
    border: 1px solid var(--linea); border-radius: 999px;
    font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    transition: border-color .15s, box-shadow .15s;
}
.n-accion .ic { width: 18px; height: 18px; color: var(--neon); }
/* la primera acción (normalmente reservar) se enciende */
.n-accion:first-child { border-color: var(--neon); color: var(--neon); box-shadow: var(--brillo), inset 0 0 12px rgba(255, 255, 255, .04); }
.n-accion:active { border-color: var(--neon); background: var(--c1-suave); }
.n-pie-nombre { font: 700 1.25rem/1.15 var(--fuente-titulo); text-transform: uppercase; letter-spacing: .03em; }
.n-pie-dir { margin-top: 4px; font-size: .875rem; color: var(--tenue); }

/* ---- una carta ---- */

.n-barra {
    background: var(--velo-fuerte);
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    border-bottom-color: var(--linea);
}
.n-barra h1 { text-align: center; font-size: 1.1875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.n-barra h1:last-child { padding-right: 44px; }
.n-barra .c-idioma { border: 1px solid var(--linea); }

.n-carta .c-indice { background: var(--fondo); }
.n-carta .c-indice a {
    border: 1px solid var(--linea); background: none;
    font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tenue);
}
.n-carta .c-indice a[aria-current] { border-color: var(--neon); background: none; color: var(--neon); box-shadow: var(--brillo); }

.n-grupos { padding: 4px 18px calc(40px + env(safe-area-inset-bottom)); }
.n-grupo h2 {
    display: flex; align-items: center; gap: 12px;
    padding: 30px 0 8px;
    font: 700 1.625rem/1.05 var(--fuente-titulo);
    font-stretch: condensed;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--neon); text-shadow: var(--brillo);
}
.n-grupo h2 span { min-width: 0; text-wrap: balance; }
.n-grupo h2::after {
    content: ""; flex: 1; min-width: 24px; height: 1px;
    background: linear-gradient(90deg, var(--neon), transparent);
    opacity: .6;
}
.n-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.n-platos li + li { border-top: 1px solid var(--linea); }
.n-plato { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.n-plato:active { background: var(--fondo-2); }
.n-plato-foto {
    width: 64px; height: 64px; flex: none;
    border-radius: 50%; object-fit: cover;
    background: var(--fondo-2);
    box-shadow: 0 0 0 1px var(--linea);
}
.n-plato-txt { flex: 1; min-width: 0; align-self: center; }
/* con el nombre en dos líneas, guía y precio van con la última */
.n-plato-linea { display: flex; align-items: flex-end; align-items: last baseline; gap: 8px; }
.n-plato-nombre { font-weight: 600; line-height: 1.3; }
/* puntos guía hasta el precio, como en la pizarra de la barra */
.n-plato-guia { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--linea); transform: translateY(-4px); }
.n-plato-linea .c-precio { color: var(--neon); }
.n-plato-extra { display: block; margin-top: 3px; font-size: .875rem; color: var(--tenue); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .n-recos h2::before { animation: none; }
}

/* la isla de la botonera, un punto más clara que el fondo para que se despegue de él */
.p-nocturna .c-nav { background: var(--fondo-2); }
.p-nocturna .c-nav-n { box-shadow: 0 0 0 2px var(--fondo-2); }

/* botón "+": a la derecha del precio, en su misma línea (la última del nombre) */
.n-plato-linea .c-mas { align-self: flex-end; margin: -8px 0 -8px auto; }