/**
 * Diseño "Ticket" — ticket de caja y cartel de mercado: letra
 * monoespaciada, líneas discontinuas finas y bordes dentados (lo único
 * decorativo: el resto, sobrio). El primario va en la etiqueta del nombre, la
 * barra y los precios; el
 * secundario tiñe la mesa sobre la que están los tickets. Siempre en claro
 * (es papel térmico). Clases propias: t-*.
 */

.p-ticket {
    color-scheme: light;
    /* reserva neutra para navegadores sin color-mix(); abajo, todo sale de --c1 / --c2 */
    --papel: #fff;
    --mesa: #ecebe8;
    --fondo: var(--papel);
    --fondo-2: #f1f0ee;
    --texto: #1b1b1b;
    --tenue: #6b6b6b;
    --linea: #cfcfcf;
    --radio: 4px;
    --fuente: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --fuente-titulo: var(--fuente);
    --c1-tinta: inherit;
    --c2-tinta: inherit;
    --c1-suave: var(--fondo-2);
    --c2-suave: var(--fondo-2);
    --diente: 7px;
    background: var(--mesa);
    color: var(--texto);
}
@supports (color: color-mix(in srgb, #000, #fff)) {
    .p-ticket {
        --papel: color-mix(in srgb, var(--c2) 3%, #fff);
        --mesa: color-mix(in srgb, var(--c2) 26%, #f2f2f2);
        --fondo-2: color-mix(in srgb, var(--c2) 9%, #fafafa);
        --texto: color-mix(in srgb, var(--c1-tinta) 10%, #181818);
        --tenue: color-mix(in srgb, var(--c1-tinta) 18%, #6a6a6a);
        --linea: color-mix(in srgb, var(--c2) 30%, #c8c8c8);
        --c1-suave: color-mix(in srgb, var(--c1) 12%, #fff);
        --c2-suave: color-mix(in srgb, var(--c2) 14%, #fff);
    }
    html:has(> .p-ticket) { background: color-mix(in srgb, var(--c2) 40%, #dcdcdc); }
}
.p-ticket .carta { background: var(--mesa); }

/* piezas comunes: base.css las oscurece con el modo del sistema; aquí, siempre claro */
.p-ticket .c-ficha-desc { color: var(--texto); }
.p-ticket .c-toast { background: var(--texto); color: var(--papel); }
.p-ticket .c-nota--aviso { background: #fdecea; color: #9b1c13; }
.p-ticket .c-dieta--vegano, .p-ticket .c-dieta--vegetariano, .p-ticket .c-dieta--singluten { color: #3f7a2f; }
.p-ticket .c-dieta--picante, .p-ticket .c-form-msg.es-error { color: #c8261b; }
.p-ticket .c-etq { border-radius: 0; background: var(--texto); color: var(--papel); text-transform: uppercase; letter-spacing: .04em; }
.p-ticket .c-etq--agotado { background: #c8261b; color: #fff; }
.p-ticket .c-ficha-nombre { text-transform: uppercase; letter-spacing: -.01em; }
.p-ticket .c-formato { border-top-style: dashed; }
.p-ticket .c-alergenos { border-top-style: dashed; }
.p-ticket .c-boton { border-radius: var(--radio); text-transform: uppercase; }
.p-ticket .c-edad-op { border-radius: var(--radio); border: 1.5px solid var(--linea); }
.p-ticket .c-nav { background: var(--papel); }
.p-ticket .c-intro { padding: 14px 12px 0; }
.p-ticket .c-nota { border-radius: 0; background: var(--papel); }

/* ---- el papel: tira con los bordes dentados arriba y abajo ---- */

.t-ticket {
    position: relative;
    margin: var(--diente) 12px calc(var(--diente) + 14px);
    padding: 18px 16px 20px;
    background: var(--papel);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .1));
}
.t-ticket::before, .t-ticket::after {
    content: ""; position: absolute; left: 0; right: 0; height: var(--diente);
    background-size: calc(var(--diente) * 2) 100%; background-repeat: repeat-x;
}
/* dientes: triángulos de papel que apuntan hacia fuera */
.t-ticket::before { bottom: 100%; background-image: conic-gradient(from 135deg at 50% 0, var(--papel) 90deg, transparent 0); }
.t-ticket::after { top: 100%; background-image: conic-gradient(from -45deg at 50% 100%, var(--papel) 90deg, transparent 0); }

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

.t-cab {
    position: relative;
    display: grid; place-items: center;
    min-height: 250px; padding: calc(68px + env(safe-area-inset-top)) 20px 40px;
    overflow: hidden;
    background: var(--c1);
}
.t-cab-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-idioma {
    position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); right: 12px;
    border-radius: var(--radio);
    background: var(--papel); color: var(--texto);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
/* la etiqueta con el nombre: tinta del primario sobre el papel, un solo filete */
.t-sello {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    max-width: 92%; padding: 14px 20px;
    border: 2px solid currentColor;
    background: var(--papel); color: var(--c1-tinta);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    text-align: center;
}
.t-logo { width: auto; max-width: 100%; max-height: 72px; margin-top: 4px; }
.t-sello h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }

.t-ticket--portada { margin-top: calc(var(--diente) - 22px); padding-top: 22px; }
.t-dir {
    padding-bottom: 12px; margin-bottom: 4px;
    border-bottom: 1.5px dashed var(--linea);
    font-size: .8125rem; text-align: center; text-transform: uppercase; color: var(--tenue);
}

.t-menus a {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; padding: 12px 0;
    border-bottom: 1.5px dashed var(--linea);
}
.t-menus a:active { background: var(--fondo-2); }
.t-menus-num { flex: none; font-size: .8125rem; font-weight: 700; color: var(--c1-tinta); }
.t-menus-nombre { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: -.02em; }
.t-menus .c-precio { font-size: .9375rem; }
.t-menus .ic { width: 20px; height: 20px; color: var(--c1-tinta); }

/* ---- recomendaciones: pegatinas un poco giradas ---- */

.t-recos { padding: 18px 0 4px; }
.t-recos h2 { padding: 0 16px 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.t-pegatinas {
    display: flex; gap: 14px;
    padding: 6px 18px 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px;
    scrollbar-width: none;
}
.t-pegatinas::-webkit-scrollbar { display: none; }
.t-pegatina {
    position: relative; flex: none;
    display: flex; flex-direction: column;
    width: 148px; padding: 7px 7px 10px;
    border-radius: 6px;
    background: var(--papel);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    transform: rotate(-1deg);
    scroll-snap-align: start;
}
.t-pegatina:nth-child(even) { transform: rotate(1deg); }
.t-pegatina:active { transform: scale(.97); }
.t-pegatina-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--fondo-2); }
.t-pegatina-nombre { margin-top: 8px; font-size: .8125rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-pegatina-precio {
    position: absolute; top: -8px; right: -8px;
    padding: 5px 8px; border-radius: 999px;
    background: var(--c1); color: var(--sobre-c1);
    font-size: .8125rem; font-weight: 800;
    transform: rotate(8deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

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

.t-pie { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.t-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-accion {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 6px 10px;
    border: 1.5px solid var(--linea); border-radius: var(--radio);
    background: var(--papel);
    font-size: .75rem; font-weight: 700; text-transform: uppercase; line-height: 1.15;
}
.t-accion:only-child, .t-accion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.t-accion .ic { width: 18px; height: 18px; color: var(--c1-tinta); }
.t-accion:first-child { background: var(--c1); color: var(--sobre-c1); border-color: var(--c1); }
.t-accion:first-child .ic { color: inherit; }
.t-accion:active { transform: scale(.98); }
.t-redes { margin-top: 12px; color: var(--texto); }

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

.t-barra h1 { text-transform: uppercase; letter-spacing: -.02em; font-weight: 800; }

.t-carta .c-indice { background: var(--mesa); border-bottom: 0; }
.t-carta .c-indice a {
    border: 1.5px solid var(--linea); border-radius: var(--radio);
    background: var(--papel);
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
}
.t-carta .c-indice a[aria-current] { border-color: var(--c1); background: var(--c1); color: var(--sobre-c1); }

.t-grupos { padding: 14px 0 calc(24px + env(safe-area-inset-bottom)); }
.t-grupo { margin-top: calc(var(--diente) + 10px); }
.t-grupo h2 {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; text-align: center;
}
.t-grupo h2::before, .t-grupo h2::after { content: ""; flex: 1; min-width: 12px; border-top: 1.5px dashed var(--linea); }

.t-platos li { border-top: 1.5px dashed var(--linea); }
.t-plato { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; }
.t-plato:active { background: var(--fondo-2); }
.t-plato-foto { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: var(--radio); background: var(--fondo-2); }
.t-plato-txt { flex: 1; min-width: 0; align-self: center; }
.t-plato-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.t-plato-nombre { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.t-plato-linea .c-precio { font-weight: 800; }
.t-plato-extra { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.35; color: var(--tenue); }
.t-plato .c-mas { align-self: center; border-radius: var(--radio); }
.t-plato .c-mas::after { border-radius: var(--radio); }