/* =====================================================================
   TEMA · Confitería Aurora (confitería clásica)
   La pizarra de fieltro negro del mostrador, con marco de roble,
   letras blancas de plástico pinchadas una por una y los precios en
   letras rojas. Todo el sitio vive adentro de esa pizarra.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  --fieltro: #141414;
  --letra: #F3EFE6;          /* letra de plástico blanca */
  --letra-roja: #FF6A5C;     /* letra roja (se lee sobre el fieltro) */
  --roble: #A87B45;

  /* Colores */
  --fondo: #141414;
  --fondo-2: #1F1E1C;
  --fondo-3: #2B2926;
  --linea: rgba(243, 239, 230, .14);
  --linea-2: rgba(243, 239, 230, .3);
  --texto: #E7E2D8;
  --texto-2: #C7C0B3;
  --texto-3: #A9A194;
  --titulo: #F3EFE6;
  --acento: #C8281F;         /* rojo de las letras, para rellenos */
  --acento-2: #A91F18;
  --acento-texto: #FF7A6E;   /* rojo para textos sobre el fieltro */
  --acento-suave: rgba(255, 106, 92, .14);
  --sobre-acento: #FFFFFF;
  --ok: #5CB87A; --ok-suave: rgba(92, 184, 122, .16); --ok-texto: #8FD9A7;
  --alerta: #E8B43A; --alerta-suave: rgba(232, 180, 58, .16); --alerta-texto: #F2CD72;
  --peligro: #FF6B5F; --peligro-suave: rgba(255, 107, 95, .14);
  --whatsapp: #0E7468; --whatsapp-2: #0B5E54;
  --demo-fondo: #F3EFE6; --demo-texto: #141414;
  --foco: #F3EFE6;

  /* Tipografías: Antonio como las letras de la pizarra, Karla para leer */
  --f-titulo: "Antonio", "Arial Narrow", sans-serif;
  --f-texto: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-peso: 700;
  --t-mayus: uppercase;
  --t-espaciado: .04em;
  --t-alto: 1.06;
  --marca-tam: 28px;

  /* Botones: fichas de plástico blanco */
  --f-boton: var(--f-titulo);
  --boton-peso: 700;
  --boton-tam: 18px;
  --boton-mayus: uppercase;
  --boton-espaciado: .08em;
  --radio-boton: 4px;
  --radio-chip: 4px;
  --radio: 6px;
  --radio-hoja: 8px;
  --radio-entrada: 4px;
  --cabecera-fondo: #0E0E0E;
  --cabecera-linea: rgba(243, 239, 230, .1);
  --aviso-fondo: #F3EFE6;
  --aviso-texto: #141414;
  --barra-fondo: #0E0E0E;
  --barra-titulo: #F3EFE6;
  --barra-boton: #F3EFE6;
  --barra-boton-texto: #141414;
  --barra-n: #C8281F;
  --barra-n-texto: #fff;
  --entrada-fondo: #111;
}
body { background-color: var(--fieltro); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 7px); }
.btn { background: var(--letra); color: #141414; box-shadow: 0 3px 0 #9C968A, 0 8px 14px -6px rgba(0, 0, 0, .7); }
.btn:not(.btn--linea):not(.btn--suave):not(.btn--whatsapp):not(.btn--peligro):hover { background: #fff; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9C968A; }
.btn--linea { background: transparent; color: var(--letra); box-shadow: inset 0 0 0 2px var(--linea-2); }
.btn--linea:hover { background: rgba(243, 239, 230, .08); }
.btn--whatsapp { background: var(--whatsapp); color: #fff; box-shadow: none; }
.btn--suave { background: var(--fondo-3); color: var(--titulo); box-shadow: none; }
.marca { letter-spacing: .08em; }
.marca small { font-family: var(--f-texto); letter-spacing: .1em; color: var(--letra-roja); opacity: 1; }
.cabecera nav a:not(.btn):hover { background: rgba(243, 239, 230, .08); }

/* ---------- Letras sueltas ---------- */
.palabra { display: inline-block; white-space: nowrap; }
.espacio { display: inline-block; width: .32em; }
.l { display: inline-block; transform: translateY(var(--y)) rotate(var(--r)); color: var(--letra); text-shadow: 0 .06em .02em rgba(0, 0, 0, .75), 0 0 1px rgba(255, 255, 255, .2); animation: prensar .42s var(--ease-rebote) both; animation-delay: calc(var(--i) * 22ms + var(--demora, 0ms)); }
.l.roja { color: var(--letra-roja); }
@keyframes prensar { from { opacity: 0; transform: translateY(calc(var(--y) - .35em)) rotate(calc(var(--r) * 3)) scale(1.18); } }

/* ---------- La pizarra con su marco de roble ---------- */
.pizarra {
  position: relative; background-color: #121212;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 6px), radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%);
  border: clamp(12px, 1.8vw, 22px) solid transparent; border-radius: 6px;
  border-image: url(img/marco-roble.webp) 44 stretch;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 0 50px rgba(0, 0, 0, .85);
  padding: clamp(18px, 3vw, 40px);
}
.fila-p { display: flex; align-items: baseline; gap: .35em; font: 600 clamp(20px, 2.6vw, 32px)/1.25 var(--f-titulo); letter-spacing: .06em; }
.fila-p .puntos { flex: 1; min-width: 20px; border-bottom: .12em dotted rgba(243, 239, 230, .32); transform: translateY(-.28em); }

/* =====================================================================
   PORTADA (index.html)
   ===================================================================== */
.portada { padding: clamp(14px, 3vw, 34px) var(--margen) clamp(40px, 6vw, 70px); }
.portada .pizarra { max-width: 1180px; margin: 0 auto; min-height: min(78svh, 760px); display: grid; align-content: center; gap: clamp(10px, 2vw, 22px); text-align: center; }
.pizarra__nombre { font: 700 clamp(46px, 9.5vw, 128px)/.95 var(--f-titulo); letter-spacing: .06em; }
.pizarra__desde { font: 600 clamp(16px, 2vw, 24px)/1.2 var(--f-titulo); letter-spacing: .16em; }
.pizarra__lista { width: min(100%, 820px); margin: 6px auto 0; display: grid; gap: 4px; text-align: left; }
.pizarra__hoy { font: 600 clamp(16px, 1.8vw, 22px)/1 var(--f-titulo); letter-spacing: .14em; margin-top: 4px; }
.pizarra__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(8px, 2vw, 20px); }
.pizarra__abierto { font: 600 15px/1 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.pizarra__abierto[data-abierto="si"] { color: var(--letra); }
@media (max-width: 640px) {
  .portada .pizarra { min-height: 0; padding: 22px 14px; }
  .fila-p { font-size: 17px; }
  .pizarra__acciones .btn { width: 100%; }
}

/* ---------- Pedí desde la mesa ---------- */
.mesa-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.mesa-foto__foto { position: relative; }
.mesa-foto__foto img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 6px; filter: saturate(.9); }
.cartelito { position: absolute; right: 8%; bottom: -26px; width: 170px; background: #fff; color: #141414; border-radius: 6px; padding: 14px 14px 12px; text-align: center; box-shadow: 0 24px 34px -18px rgba(0, 0, 0, .9); transform: rotate(-4deg); text-decoration: none; transition: transform .35s var(--ease-rebote); }
.cartelito:hover { transform: rotate(0) translateY(-4px); }
.cartelito b { display: block; font: 700 30px/1 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; }
.cartelito small { display: block; font: 700 11px/1.2 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: #6A6358; margin-top: 8px; }
.cartelito svg { width: 96px; height: 96px; margin: 8px auto 0; display: block; }
.mesa-foto h2 { color: var(--letra); }
.mesa-foto .btn { white-space: normal; text-align: center; line-height: 1.2; }
.mesa-foto p { color: var(--texto-2); font-size: 18px; max-width: 44ch; margin: 14px 0 24px; }
@media (max-width: 860px) { .mesa-foto { grid-template-columns: 1fr; } .cartelito { width: 140px; right: 4%; } }

/* ---------- La vitrina de masas: fotos con su cartelito de fieltro ---------- */
.vitrina-a { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.masa { display: grid; text-decoration: none; background: #0E0E0E; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 30px -22px rgba(0, 0, 0, .9); transition: transform .35s var(--ease); }
.masa:hover { transform: translateY(-5px); }
.masa img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.masa__cartel { padding: 12px 14px 14px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 6px); display: grid; gap: 4px; }
.masa__cartel b { font: 700 21px/1.05 var(--f-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--letra); }
.masa__cartel span { font: 700 21px/1 var(--f-titulo); letter-spacing: .06em; color: var(--letra-roja); }
@media (max-width: 900px) { .vitrina-a { grid-template-columns: 1fr 1fr; gap: 12px; } .masa__cartel b, .masa__cartel span { font-size: 17px; } }

.chapa { background: #0E0E0E; border: 2px solid var(--linea-2); color: var(--letra); }
.chapa__cuando { font: 600 13px/1 var(--f-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--letra-roja); }
.chapa__precio { color: var(--letra-roja); font-family: var(--f-titulo); font-size: 30px; }
.promo-a { max-width: 380px; border: 12px solid transparent; border-image: url(img/marco-roble.webp) 44 stretch; background-color: #121212; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 6px); }
.ver-mas { display: flex; justify-content: flex-end; margin-top: 26px; }

.lugar__mapa { border-radius: 6px; border: 12px solid transparent; border-image: url(img/marco-roble.webp) 44 stretch; }
.horarios dt { color: var(--letra); font-family: var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; font-size: 18px; }
.dueno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background-color: #121212; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 6px); color: var(--letra); padding: clamp(24px, 4vw, 44px); border: clamp(12px, 1.8vw, 20px) solid transparent; border-image: url(img/marco-roble.webp) 44 stretch; box-shadow: inset 0 0 40px rgba(0, 0, 0, .8); }
.dueno h2 { color: var(--letra); font-size: clamp(34px, 4.6vw, 58px); line-height: 1.08; text-shadow: 0 .06em .02em rgba(0, 0, 0, .75); }
.dueno p { color: var(--texto-2); max-width: 54ch; margin-top: 10px; }

/* =====================================================================
   LA PIZARRA (menu.html)
   ===================================================================== */
.menu-a { max-width: 1060px; margin: 0 auto; padding: clamp(14px, 3vw, 30px) var(--margen) 30px; }
.menu-a__cabeza { text-align: center; margin-bottom: 18px; }
.menu-a__cabeza h1 { font-size: clamp(44px, 8vw, 96px); letter-spacing: .08em; }
.menu-a__cabeza p { color: var(--texto-2); max-width: 52ch; margin: 10px auto 0; }
.promos-menu { margin-bottom: 18px; }
.promo-menu { --promo-fondo: #0E0E0E; --promo-texto: var(--letra); --promo-boton: var(--letra); border: 2px solid var(--linea-2); }
.promo-menu__cuando { color: var(--letra-roja); opacity: 1; font-family: var(--f-titulo); }
.promo-menu strong { font-size: 24px; letter-spacing: .05em; }
.promo-menu__sumar { color: #141414; border-radius: 4px; }
.aviso-mesa { background: var(--letra); color: #141414; justify-content: center; margin-bottom: 16px; font-weight: 700; }
.fichas-a { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 16px; justify-content: center; }
.fichas-a::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .fichas-a { justify-content: flex-start; } }
.fichas-a button { flex: none; min-height: 46px; padding: 0 16px; border-radius: 4px; font: 700 17px/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--letra); box-shadow: inset 0 0 0 2px var(--linea-2); transition: background-color .2s, color .2s; }
.fichas-a button[aria-pressed="true"] { background: var(--letra); color: #141414; box-shadow: 0 3px 0 #9C968A; }
.menu-a .pizarra { min-height: 420px; }
.pizarra__cat { text-align: center; font: 700 clamp(30px, 4.6vw, 52px)/1 var(--f-titulo); letter-spacing: .12em; margin-bottom: clamp(16px, 3vw, 30px); }
.linea-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 0; }
.linea-p__abrir { display: flex; align-items: baseline; gap: .35em; text-align: left; font: 600 clamp(19px, 2.6vw, 30px)/1.25 var(--f-titulo); letter-spacing: .06em; min-width: 0; color: inherit; }
.linea-p__abrir .puntos { flex: 1; min-width: 14px; border-bottom: .12em dotted rgba(243, 239, 230, .32); transform: translateY(-.28em); }
.linea-p__abrir:hover .l:not(.roja) { color: #fff; }
.linea-p__abrir:focus-visible { outline-offset: 6px; }
.linea-p__mas { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--letra); color: #141414; box-shadow: 0 3px 0 #9C968A; transition: transform .2s var(--ease-rebote); position: relative; }
.linea-p__mas .ico { width: 22px; height: 22px; stroke-width: 2.6; }
.linea-p__mas:active { transform: translateY(2px); box-shadow: 0 1px 0 #9C968A; }
.linea-p__mas .n { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: var(--acento); color: #fff; font: 800 12px/22px var(--f-texto); }
.linea-p.no-hay .linea-p__abrir { opacity: .5; cursor: default; }
.linea-p__tams { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -2px 0 4px; font: 600 15px/1.2 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.linea-p__tams b { color: var(--letra-roja); font-weight: 600; }
@media (max-width: 560px) { .linea-p__tams { font-size: 13px; } }

.barra-pedido { border-top: 3px solid var(--roble); }
.barra-pedido__info b { font: 700 24px/1 var(--f-titulo); letter-spacing: .06em; }
.barra-pedido__ir { box-shadow: 0 3px 0 #9C968A; }

/* Hoja del producto, sobre fieltro */
.hoja-producto { background: #1B1A18; }
.hoja-producto__nombre { font-size: 36px; letter-spacing: .06em; }
.hoja-producto__lleva li { background: var(--fondo-3); }
.hoja-producto__tams button[aria-checked="true"] { background: var(--letra); border-color: var(--letra); }
.hoja-producto__tams button[aria-checked="true"] b, .hoja-producto__tams button[aria-checked="true"] span { color: #141414; }
.hoja__cerrar { background: var(--letra); color: #141414; }
.cantidad { background: var(--fondo-3); }
.hoja-producto__pie .btn { font-size: 16px; }

/* =====================================================================
   CAJA (pedido.html)
   ===================================================================== */
.caja-cabeza h1 { font-size: clamp(40px, 7vw, 68px); letter-spacing: .06em; }
.modo.is-on { background: var(--letra); border-color: var(--letra); }
.modo.is-on b, .modo.is-on .ico, .modo.is-on span { color: #141414; }
.fila .txt em, .linea.total b { color: var(--letra-roja); }
.linea.total b { font-family: var(--f-titulo); letter-spacing: .04em; font-size: 32px; }
.ticket__numero { background: #0E0E0E; border-color: var(--linea-2); }
.ticket__numero .cod { font: 700 64px/1 var(--f-titulo); color: var(--letra-roja); letter-spacing: .08em; }
.volver { background: var(--letra); color: #141414; font-family: var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; font-size: 18px; }
.aviso-demo { border-color: var(--letra-roja); }
.entrada { color: var(--letra); }
select.entrada option { background: #111; }
.compro .tilde { background: #0E0E0E; box-shadow: inset 0 0 0 2px var(--linea-2); }
.compro .tilde svg { stroke: var(--letra); }
.seguimiento li.ahora span { border-color: var(--letra-roja); box-shadow: 0 0 0 5px var(--acento-suave); }
.seguimiento li.hecho span { background: var(--letra); border-color: var(--letra); }
.seguimiento li.hecho::after { background: var(--letra) !important; }

/* =====================================================================
   PANEL: claro para trabajar en el mostrador, con la pizarra al costado
   ===================================================================== */
body.panel {
  background-image: none;
  --fondo: #F1EFEA;
  --fondo-2: #FFFFFF;
  --fondo-3: #E6E2DA;
  --linea: #E0DBD1;
  --linea-2: #C9C2B5;
  --texto: #28251F;
  --texto-2: #57514A;
  --texto-3: #6F685E;
  --titulo: #141414;
  --acento: #C8281F;
  --acento-2: #A91F18;
  --acento-texto: #A91F18;
  --acento-suave: rgba(200, 40, 31, .09);
  --ok: #1F7A4D; --ok-suave: #DDF1E6; --ok-texto: #125C37;
  --alerta: #E3A21A; --alerta-suave: #FBEFCF; --alerta-texto: #6E4A00;
  --peligro: #B42318; --peligro-suave: #FBE4E1;
  --entrada-fondo: #fff;
  --panel-lateral: #141414;
  --panel-lateral-texto: #CFC8BB;
  --panel-lateral-titulo: #F3EFE6;
  --panel-activo: #F3EFE6;
  --panel-activo-texto: #141414;
  --columna-fondo: #E6E2DA;
  --mostrador-fondo: #141414;
  --mostrador-texto: #F3EFE6;
  --mostrador-numero: #FF6A5C;
  --f-numero: "Antonio", sans-serif;
  --foco: #141414;
}
body.panel .btn { background: #141414; color: #F3EFE6; box-shadow: none; }
body.panel .btn:not(.btn--linea):not(.btn--suave):not(.btn--whatsapp):not(.btn--peligro):hover { background: var(--acento); }
body.panel .btn--linea { background: transparent; color: #141414; box-shadow: inset 0 0 0 2px var(--linea-2); }
body.panel .btn--suave { background: var(--fondo-3); color: #141414; }
body.panel .btn--peligro { background: transparent; color: var(--peligro); box-shadow: inset 0 0 0 2px currentColor; }
body.panel .entrada { color: #141414; }
body.panel select.entrada option { background: #fff; }
body.panel .lateral { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 7px); }
body.panel .marca small { color: #FF8A7E; }
body.panel .hoja__cerrar { background: #fff; color: #141414; }
.pedido-t__num { color: var(--acento); letter-spacing: .06em; }