/* Elotes Don Kike — pizarrón negro, amarillo maíz, rojo chile y precios "a mano", como el menú impreso. */
:root {
    --pizarra: #141416;
    --pizarra-2: #1e1e22;
    --pizarra-3: #2a2a30;
    --linea: #3a3a42;
    --maiz: #ffc629;
    --chile: #e2372b;
    --crema: #f7f1e1;
    --gris: #b3aea2;
    --verde: #6fcf73;
    --titulo: "Anton", "Arial Narrow", Impact, sans-serif;
    --mano: "Caveat Brush", "Comic Sans MS", cursive;
    --texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
    margin: 0;
    font: 500 17px/1.5 var(--texto);
    color: var(--crema);
    background: var(--pizarra) radial-gradient(circle at 15% 0%, #26262b 0, transparent 45%) fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--maiz); }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--maiz); outline-offset: 2px; }

/* Barra */
.barra {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px clamp(12px, 3vw, 32px);
    background: rgba(20, 20, 22, .94);
    border-bottom: 3px solid var(--maiz);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--crema); font: 22px/1 var(--titulo); text-transform: uppercase; letter-spacing: .5px; }
.marca img { border-radius: 50%; object-fit: cover; }
.marca b { color: var(--maiz); font-weight: 400; }
.barra nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.barra nav a, .salir button {
    padding: 8px 12px; border-radius: 8px; border: 0; background: none; cursor: pointer;
    color: var(--crema); text-decoration: none; font: 600 16px var(--texto);
}
.barra nav a:hover, .salir button:hover { background: var(--pizarra-3); }
.barra nav a.activo { background: var(--maiz); color: #141416; }
.barra nav a.acceso { border: 1px solid var(--linea); color: var(--gris); }
.salir { margin: 0; }

/* Piezas comunes */
.contenido { width: min(1200px, 100%); margin: 0 auto; padding: 24px clamp(12px, 3vw, 32px) 48px; flex: 1; }
.contenido.angosto { width: min(560px, 100%); }
.contenido > * + * { margin-top: 16px; }
.titulo { font: 400 clamp(28px, 4vw, 40px)/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .5px; }
.titulo small { font: 500 15px var(--texto); color: var(--gris); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.subtitulo { font: 400 22px var(--titulo); text-transform: uppercase; color: var(--maiz); margin-top: 28px; }
.panel { background: var(--pizarra-2); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.nota { color: var(--gris); font-size: 15px; }
.vacio { color: var(--gris); padding: 16px 0; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.brocha {
    display: inline-block; padding: 2px 22px 4px; transform: rotate(-1.5deg);
    font: 400 26px var(--titulo); text-transform: uppercase; color: #fff; background: var(--chile);
    border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 8px 20px; border: 2px solid var(--maiz); border-radius: 10px;
    background: var(--maiz); color: #141416; font: 700 17px var(--texto); text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sec { background: transparent; color: var(--maiz); }
.btn.grande { width: 100%; min-height: 54px; font-size: 19px; }
.enlace { background: none; border: 0; padding: 6px 0; font: 600 15px var(--texto); color: var(--maiz); cursor: pointer; text-decoration: underline; }
.enlace.peligro { color: #ff8a80; }

.mensaje { margin: 12px clamp(12px, 3vw, 32px) 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.panel .mensaje, .contenido .mensaje { margin-inline: 0; }
.mensaje.aviso { background: #173a1c; border: 1px solid var(--verde); color: #d6f5d8; }
.mensaje.error { background: #45130f; border: 1px solid var(--chile); color: #ffd9d5; }
.mensaje.error:empty, .mensaje.error.validation-summary-valid { display: none; }
.mensaje ul { list-style: disc; padding-left: 20px; }

.campo { display: grid; gap: 4px; font-weight: 600; font-size: 15px; color: var(--gris); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
    width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--linea); background: var(--pizarra); color: var(--crema); font: 500 17px var(--texto);
}
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--maiz); }
.casilla { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.formulario { display: grid; gap: 14px; }
fieldset { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
legend { padding: 0 6px; font-weight: 700; color: var(--maiz); }
fieldset .fila { flex-wrap: nowrap; }
fieldset .fila input:last-child { flex: 0 0 120px; }
.foto-actual { width: 160px; border-radius: 10px; border: 1px solid var(--linea); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { color: var(--gris); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.inactivo td { color: #77736b; }

.rejilla-form { display: grid; grid-template-columns: minmax(140px, 2fr) 130px 100px 90px 60px 120px; gap: 8px; align-items: center; margin-top: 8px; }
.rejilla-form.encabezado { color: var(--gris); font-size: 14px; text-transform: uppercase; }
.rejilla-form input[type=checkbox] { justify-self: center; }

.pie { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px clamp(12px, 3vw, 32px); border-top: 1px solid var(--linea); color: var(--gris); font-size: 14px; }

/* Página pública */
.hero { position: relative; min-height: min(78vh, 640px); display: grid; align-items: end; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 22, .35) 0%, rgba(20, 20, 22, .82) 60%, var(--pizarra) 100%); }
.hero-texto { position: relative; z-index: 1; padding: 48px clamp(16px, 5vw, 64px) 40px; display: grid; gap: 12px; justify-items: start; }
.hero-anio { font: 400 28px var(--titulo); text-transform: uppercase; }
.hero-anio b { color: var(--maiz); font-weight: 400; font-size: 1.5em; }
.hero h1 { font: 400 clamp(54px, 11vw, 132px)/.92 var(--titulo); text-transform: uppercase; }
.hero h1 span { display: block; color: var(--maiz); }
.hero-lema { font: 400 clamp(22px, 3.4vw, 34px)/1.15 var(--mano); }
.hero-lema b { color: var(--maiz); font-weight: 400; }
.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-horario { color: var(--gris); font-size: 15px; }

.seccion { width: min(1200px, 100%); margin: 0 auto; padding: 44px clamp(12px, 3vw, 32px) 0; }
.cat { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid var(--chile); }
.cat h2 { font: 400 clamp(34px, 6vw, 60px)/1 var(--titulo); text-transform: uppercase; }
.cat h2 span { color: var(--maiz); }
.cat p { margin-top: 6px; font: 400 22px var(--mano); color: var(--maiz); }

.platos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.plato { background: var(--pizarra-2); border: 2px solid var(--maiz); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.plato > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plato-info { padding: 14px; display: grid; gap: 8px; justify-items: start; align-content: start; flex: 1; }
.plato h3 { font: 400 24px/1.1 var(--titulo); text-transform: uppercase; }
.plato p { color: var(--gris); font-size: 15px; }
.precio {
    display: inline-block; padding: 0 18px 2px; transform: rotate(-2deg);
    font: 400 32px/1.25 var(--mano); color: #141416; background: #fff;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.precio small { font-size: .55em; }
.tamanos { width: 100%; display: grid; gap: 2px; }
.tamanos li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--linea); color: var(--maiz); font-weight: 600; }
.tamanos b { font: 400 22px/1 var(--mano); color: #fff; }
.sabores { display: flex; flex-wrap: wrap; gap: 6px; }
.sabores li { padding: 2px 10px; border-radius: 999px; background: var(--pizarra-3); font-size: 14px; }

.toppings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.toppings ul { margin-top: 14px; display: grid; gap: 8px; }
.toppings li { font: 400 24px var(--titulo); text-transform: uppercase; letter-spacing: .5px; }
.toppings li::before { content: "♥ "; color: var(--maiz); }
.toppings li b { font: 400 22px var(--mano); color: var(--maiz); }

.fiestas { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: 28px; align-items: center; }
.fiestas img { border-radius: 14px; border: 2px solid var(--maiz); }
.pasos { display: grid; gap: 12px; font-size: 19px; }
.pasos li { padding-left: 16px; border-left: 4px solid var(--maiz); }
.pasos b { color: var(--maiz); }
.fiestas .nota { margin-top: 16px; }

.cumple { text-align: center; }
.cumple p { margin-top: 14px; font-size: 19px; }
.cumple b { color: var(--maiz); }

.visita { padding-bottom: 56px; }
.visita-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.visita-datos h3 { font: 400 20px var(--titulo); text-transform: uppercase; color: var(--maiz); }
.visita-datos p { margin: 6px 0 12px; font-size: 18px; }

/* Acceso */
.login { display: grid; gap: 14px; justify-items: stretch; margin-top: 24px; }
.login img { justify-self: center; border-radius: 50%; object-fit: cover; }
.login .titulo { text-align: center; }

/* Pedidos (mostrador) */
.pos { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 20px; align-items: start; }
.pos > * + * { margin-top: 0; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs button { min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--linea); background: var(--pizarra-2); color: var(--crema); font: 600 16px var(--texto); cursor: pointer; }
.tabs button[aria-pressed=true] { background: var(--maiz); border-color: var(--maiz); color: #141416; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-prod { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 0 0 10px; border: 2px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--pizarra-2); color: var(--crema); font: 600 16px/1.2 var(--texto); text-align: left; cursor: pointer; }
.pos-prod:hover { border-color: var(--maiz); }
.pos-prod img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pos-prod span { padding: 6px 10px 0; }
.pos-prod b { padding: 0 10px; color: var(--maiz); font: 400 20px var(--mano); }
.pos-cuenta { position: sticky; top: 76px; display: grid; gap: 12px; }
.carrito { display: grid; gap: 8px; max-height: 38vh; overflow: auto; }
.carrito li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: start; padding-bottom: 8px; border-bottom: 1px dashed var(--linea); }
.carrito small { display: block; color: var(--gris); font-size: 14px; }
.carrito button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--linea); background: none; color: #ff8a80; font-size: 18px; cursor: pointer; }
.opciones { display: flex; gap: 18px; flex-wrap: wrap; }
.opciones label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cobro { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--linea); border-radius: 12px; }
.cobro-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.comanda .cobro-datos { grid-template-columns: 1fr 1fr auto; }
.cambio { font: 400 24px var(--mano); color: var(--verde); }
.total { display: flex; justify-content: space-between; align-items: baseline; font: 400 22px var(--titulo); text-transform: uppercase; }
.total b { font: 400 38px/1 var(--mano); color: var(--maiz); }

dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); color: var(--crema); overflow: auto; }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
#dlg-cuerpo { display: grid; gap: 14px; margin: 14px 0; }
#dlg-cuerpo h3 { font: 700 14px var(--texto); text-transform: uppercase; letter-spacing: .5px; color: var(--maiz); margin-bottom: 6px; }
.elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.elegir label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; }
.elegir label:has(input:checked) { border-color: var(--maiz); background: var(--pizarra-3); }
.dlg-foto { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 2px solid var(--maiz); }
.tamanos-grandes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tamanos-grandes label { position: relative; flex-direction: column; justify-content: center; text-align: center; gap: 2px; min-height: 64px; }
.tamanos-grandes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.tamanos-grandes span { font-weight: 700; }
.tamanos-grandes b { font: 400 24px/1 var(--mano); color: var(--maiz); }
.tamanos-grandes label:has(input:focus-visible) { outline: 3px solid var(--maiz); }
.pos-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.dlg-pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dlg-pie .btn[type=submit] { flex: 1; }
.cantidad { display: flex; align-items: center; gap: 4px; }
.cantidad button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linea); background: var(--pizarra); color: var(--crema); font-size: 24px; cursor: pointer; }
.cantidad output { min-width: 36px; text-align: center; font: 400 28px var(--mano); }

/* Cocina y Caja */
.comandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.comanda { display: grid; gap: 10px; border-top: 6px solid var(--chile); }
.comanda.lista { border-top-color: var(--verde); }
.comanda header { display: flex; align-items: baseline; gap: 10px; }
.comanda header b { font: 400 34px/1 var(--mano); color: var(--maiz); }
.comanda header span { flex: 1; font-weight: 700; font-size: 19px; }
.comanda header time { color: var(--gris); }
.comanda ul { display: grid; gap: 6px; }
.comanda li { font-size: 18px; }
.comanda li em { display: block; font-style: normal; font-size: 15px; color: var(--gris); padding-left: 28px; }
.comanda em.nota, .comanda p.nota { color: var(--maiz); }
.comanda .importe { float: right; color: var(--gris); }
.comanda form { margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 1px 10px; border-radius: 999px; background: var(--pizarra-3); font-size: 14px; font-weight: 600; }
.chip.ok { background: #173a1c; color: #d6f5d8; }
.chip.falta { background: #45130f; color: #ffd9d5; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.cifras .panel { display: grid; gap: 2px; }
.cifras span { color: var(--gris); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.cifras b { font: 400 30px/1.1 var(--mano); color: var(--maiz); }

@media (max-width: 860px) {
    .pos { grid-template-columns: 1fr; }
    .pos-cuenta { position: static; }
    .fiestas { grid-template-columns: 1fr; }
    .rejilla-form { grid-template-columns: 1fr 1fr; }
    .rejilla-form.encabezado { display: none; }
    .tabla { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}