/**
 * Diseño "Pizarra" — el encerado de la barra: fondo de pizarra (casi negro
 * teñido del primario, con borrones de tiza), texto en tiza blanca, títulos
 * en tiza del color secundario y marcos de trazo irregular. Los títulos usan
 * la letra "a mano" que traiga el dispositivo (Chalkboard en Apple, Segoe
 * Print en Windows, Coming Soon —`casual`— en Android); sin ella, la de
 * sistema. Siempre oscuro. Clases propias: pz-*.
 */

.p-pizarra {
    color-scheme: dark;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --fondo: #1f2321;
    --fondo-2: #2a2f2c;
    --texto: #f1efe8;
    --tenue: #b5b3ab;
    --linea: rgba(241, 239, 232, .28);
    --tiza: var(--c2);
    --marco: #3a3a3a;
    --radio: 8px;
    --fuente-tiza: "Chalkboard SE", "Chalkboard", "Segoe Print", "Bradley Hand", casual, "Comic Neue", cursive;
    --fuente-titulo: var(--fuente-tiza);
    --c1-tinta: var(--tiza);
    --c2-tinta: var(--tiza);
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --c1-oscuro: #000;
    --sombra: 0 2px 10px rgba(0, 0, 0, .4);
    --trazo: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--fondo);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-pizarra {
        --fondo: color-mix(in srgb, var(--c1) 20%, #1b1d1c);
        --fondo-2: color-mix(in srgb, var(--c1) 24%, #262928);
        --texto: color-mix(in srgb, var(--c2) 5%, #f3f1ea);
        --tenue: color-mix(in srgb, var(--c2) 15%, #b7b4ac);
        --linea: color-mix(in srgb, var(--texto) 30%, transparent);
        --tiza: color-mix(in srgb, var(--c2) 58%, #fff);
        --marco: color-mix(in srgb, var(--c2) 40%, #191919);
        --c1-suave: color-mix(in srgb, var(--c1) 30%, var(--fondo));
        --c2-suave: color-mix(in srgb, var(--c2) 20%, var(--fondo));
        --c1-oscuro: color-mix(in srgb, var(--c1) 35%, #000);
    }
    html:has(> .p-pizarra) { background: color-mix(in srgb, var(--c2) 30%, #121212); }
}
/* la pizarra: borrones de tiza mal borrada y el marco del encerado */
.p-pizarra .carta {
    background:
        radial-gradient(ellipse 70% 40% at 18% 12%, rgba(255, 255, 255, .055), transparent 70%),
        radial-gradient(ellipse 60% 30% at 85% 48%, rgba(255, 255, 255, .04), transparent 70%),
        radial-gradient(ellipse 80% 35% at 30% 88%, rgba(255, 255, 255, .045), transparent 70%),
        var(--fondo);
    box-shadow: inset 0 0 0 7px var(--marco), inset 0 0 0 8px rgba(0, 0, 0, .35), inset 0 0 60px rgba(0, 0, 0, .35);
}
.p-pizarra h1, .p-pizarra h2, .p-pizarra .c-precio { text-shadow: 0 0 1px rgba(255, 255, 255, .45), 0 0 8px rgba(255, 255, 255, .08); }

/* piezas comunes, a oscuras */
.p-pizarra .c-nota--aviso { background: #3b1613; color: #ffb4ab; }
.p-pizarra .c-nota { background: var(--fondo-2); }
.p-pizarra .c-dieta--vegano, .p-pizarra .c-dieta--vegetariano, .p-pizarra .c-dieta--singluten { color: #9ad487; }
.p-pizarra .c-dieta--picante, .p-pizarra .c-form-msg.es-error { color: #ff8a7e; }
.p-pizarra .c-ficha-desc { color: var(--texto); opacity: .88; }
.p-pizarra .c-toast { background: var(--texto); color: var(--fondo); }
.p-pizarra .c-etq { background: none; border: 1.5px solid currentColor; border-radius: var(--trazo); color: var(--tiza); font-family: var(--fuente-tiza); font-weight: 400; }
.p-pizarra .c-etq--agotado { color: #ff8a7e; }
.p-pizarra .c-ficha-nombre { color: var(--tiza); font-weight: 400; }
.p-pizarra .c-boton { background: var(--tiza); color: var(--fondo); border-radius: var(--trazo); font-family: var(--fuente-tiza); }
.p-pizarra .c-anadir[aria-pressed="true"] { background: var(--fondo-2); color: var(--texto); }
.p-pizarra .c-mas { background: none; color: var(--tiza); box-shadow: none; border: 1.5px solid var(--linea); border-radius: var(--trazo); }
.p-pizarra .c-mas[aria-pressed="true"] { background: var(--tiza); color: var(--fondo); }
.p-pizarra .c-nav { background: var(--fondo-2); }
.p-pizarra .c-nav a[aria-current] .ic { background: var(--tiza); color: var(--fondo); }
.p-pizarra .c-nav-n { box-shadow: 0 0 0 2px var(--fondo-2); }
.p-pizarra .c-edad-op { border: 2px solid var(--linea); border-radius: var(--trazo); background: none; }
.p-pizarra .c-edad-op--si { border-color: var(--tiza); color: var(--tiza); }
.p-pizarra .c-alergenos h3 { font-family: var(--fuente-tiza); color: var(--tiza); text-transform: none; letter-spacing: 0; font-size: 1rem; }

/* marco "a mano" */
.pz-trazo { border: 2px solid var(--linea); border-radius: var(--trazo); }

/* puntos guía de tiza hasta el precio */
.pz-guia { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--linea); transform: translateY(-5px); }

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

.pz-tira { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: calc(8px + env(safe-area-inset-top)) 16px 0; }
.pz-redes { justify-content: flex-start; color: var(--tenue); }
.pz-idioma { margin-left: auto; border: 1.5px solid var(--linea); border-radius: var(--trazo); }

.pz-cab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 24px 6px; text-align: center; }
/* el logo, en un papel clavado a la pizarra: así se ve aunque sea oscuro */
.pz-logo {
    display: grid; place-items: center;
    max-width: 70%; padding: 10px 16px;
    background: var(--texto);
    transform: rotate(-2deg);
    box-shadow: var(--sombra);
}
.pz-logo img { width: auto; max-width: 100%; max-height: 80px; }
.pz-cab h1 {
    font: 400 2.25rem/1.15 var(--fuente-tiza);
    color: var(--texto); text-wrap: balance;
}
/* debajo del nombre, un solo trazo de tiza de color (no subraya cada línea) */
.pz-cab h1::after {
    content: ""; display: block; width: 96px; height: 3px; margin: 12px auto 2px;
    border-radius: 3px; background: var(--tiza); opacity: .85;
    transform: rotate(-1.5deg);
}
.pz-cab p { font-size: .875rem; color: var(--tenue); }
.pz-foto {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 14px;
    border: 3px solid var(--texto); border-radius: var(--trazo);
    transform: rotate(1deg);
    box-shadow: var(--sombra);
}

.pz-menus { display: grid; gap: 14px; padding: 26px 22px 4px; }
.pz-menus a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 76px; padding: 14px 16px;
    text-align: center;
    transition: border-color .15s;
}
.pz-menus a:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.pz-menus a:active { border-color: var(--tiza); }
.pz-menus-nombre { font: 400 1.625rem/1.15 var(--fuente-tiza); color: var(--tiza); text-wrap: balance; }
.pz-menus .c-precio { color: var(--texto); }

/* ---- recomendaciones: "hoy" en un recuadro de tiza ---- */

.pz-recos { margin: 30px 18px 4px; padding: 14px 16px 8px; border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.pz-recos h2 { padding-bottom: 6px; font: 400 1.5rem/1.2 var(--fuente-tiza); color: var(--tiza); text-align: center; }
.pz-reco { display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; }
.pz-reco:active { background: var(--fondo-2); }
.pz-reco-nombre { font-size: 1.0625rem; line-height: 1.3; }
.pz-reco .c-precio { color: var(--tiza); }

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

.pz-pie { padding: 30px 18px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.pz-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pz-accion {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 6px 10px;
    font: 400 1rem/1.15 var(--fuente-tiza);
}
.pz-accion:nth-child(even) { border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px; }
.pz-accion:only-child, .pz-accion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pz-accion .ic { width: 18px; height: 18px; color: var(--tiza); }
.pz-accion:active { border-color: var(--tiza); }

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

.pz-barra { background: var(--fondo); border-bottom: 2px solid var(--marco); }
.pz-barra h1 { text-align: center; font: 400 1.375rem/1.2 var(--fuente-tiza); color: var(--tiza); }
.pz-barra h1:last-child { padding-right: 44px; }
.pz-barra .c-idioma { border: 1.5px solid var(--linea); border-radius: var(--trazo); }

.pz-carta .c-indice { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.pz-carta .c-indice a { background: none; border: 1.5px solid transparent; border-radius: var(--trazo); font-family: var(--fuente-tiza); font-size: .9375rem; color: var(--tenue); }
.pz-carta .c-indice a[aria-current] { background: none; border-color: var(--tiza); color: var(--tiza); }

.pz-grupos { padding: 0 20px calc(40px + env(safe-area-inset-bottom)); }
.pz-grupo h2 {
    padding: 30px 0 10px;
    font: 400 1.75rem/1.15 var(--fuente-tiza);
    color: var(--tiza); text-align: center; text-wrap: balance;
}
.pz-grupo:first-child:not(:has(h2)) { padding-top: 14px; }

.pz-plato { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.pz-plato:active { background: var(--fondo-2); }
.pz-plato-foto { width: 56px; height: 56px; flex: none; object-fit: cover; border: 2px solid var(--linea); border-radius: var(--trazo); background: var(--fondo-2); }
.pz-plato-txt { flex: 1; min-width: 0; align-self: center; }
.pz-plato-linea { display: flex; align-items: flex-end; align-items: last baseline; gap: 8px; }
.pz-plato-nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.pz-plato-linea .c-precio { color: var(--tiza); font-size: 1.0625rem; }
.pz-plato-linea .c-mas { align-self: center; margin: -6px 0 -6px 4px; }
.pz-plato-extra { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.35; color: var(--tenue); }
.pz-plato .c-formato { border-top-style: dotted; }