/* ═══════════════════════════════════════════════════════════════════════════
   JARTAR · Hoja de estilos única
   Dos capas: la del comensal (cálida, grande, para el celular) y la del
   equipo (densa, para leer de un vistazo en una pantalla).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --marca:        #A8700B;   /* dorado legible sobre blanco */
  --marca-claro:  #D99A0C;
  --marca-suave:  #FBF0D6;
  --tinta:        #2E2205;
  --tinta-2:      #6B5B3A;
  --papel:        #FFFBF2;
  --superficie:   #FFFFFF;
  --borde:        #EFE6D2;
  --ok:           #2C670C;
  --alerta:       #96470A;
  --error:        #A61B2B;
  --sombra:       0 1px 2px rgba(46,34,5,.06), 0 8px 24px rgba(46,34,5,.06);
  --radio:        18px;
  --radio-chico:  12px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(26px, 5vw, 34px); font-weight: 800; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p  { margin: 0; }
a  { color: inherit; }
img { max-width: 100%; display: block; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; border-radius: 6px; }

/* ── Piezas compartidas ──────────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 13px 22px; font: inherit; font-weight: 650;
  background: var(--marca); color: #fff;
  transition: filter .15s ease, transform .05s ease;
  text-decoration: none;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.boton--suave   { background: var(--marca-suave); color: var(--tinta); }
.boton--fantasma{ background: transparent; color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--borde); }
.boton--peligro { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1px #F0D2D6; }
.boton--bloque  { width: 100%; }
.boton--chico   { padding: 8px 14px; font-size: 13px; }

.campo { display: block; }
.campo > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-2); margin-bottom: 5px;
}
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], input[type=search],
select, textarea {
  width: 100%; padding: 11px 13px; font: inherit;
  background: #FAF7EF; color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
textarea { resize: vertical; min-height: 70px; }

.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; background: var(--marca-suave); color: var(--tinta);
}

.aviso {
  border-radius: var(--radio-chico); padding: 12px 15px; font-size: 14.5px;
  border-left: 3px solid var(--alerta); background: #FFF8EC; color: #6B4506;
}
.aviso--error { border-color: var(--error); background: #FDF1F2; color: #7A1420; }
.aviso--ok    { border-color: var(--ok);    background: #F1F8EC; color: #24540A; }

.vacio { text-align: center; padding: 42px 20px; color: var(--tinta-2); }

.pila     { display: flex; flex-direction: column; gap: 12px; }
.fila     { display: flex; align-items: center; gap: 12px; }
.fila--sep{ justify-content: space-between; }
.crece    { flex: 1; min-width: 0; }
.numero   { font-variant-numeric: tabular-nums; }

/* ═══ CAPA DEL COMENSAL ═══════════════════════════════════════════════════ */
.cliente { max-width: 560px; margin: 0 auto; padding-bottom: 96px; }

.cabecera-local {
  background: linear-gradient(135deg, var(--marca), var(--marca-claro));
  color: #fff; padding: 18px 20px 20px;
  position: sticky; top: 0; z-index: 20;
}
.cabecera-local h1 { color: #fff; }
.cabecera-local .datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.pastilla {
  background: rgba(255,255,255,.22); color: #fff;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 650;
  text-decoration: none;
}
.pastilla--enlace:hover { background: rgba(255,255,255,.34); }

/* Barra de categorías que salta a cada sección */
.categorias {
  position: sticky; top: 0; z-index: 15;
  display: flex; gap: 7px; overflow-x: auto; padding: 11px 16px;
  background: var(--papel); border-bottom: 1px solid var(--borde);
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categorias a {
  flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650;
  background: var(--superficie); border: 1px solid var(--borde);
  text-decoration: none; color: var(--tinta-2); white-space: nowrap;
}
.categorias a.activa { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.buscador { padding: 12px 16px 0; }

.seccion-carta { padding: 18px 16px 0; scroll-margin-top: 62px; }
.seccion-carta > h2 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marca); margin-bottom: 10px;
}

.plato {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px; margin-bottom: 10px;
}
.plato--elegido { box-shadow: 0 0 0 2px var(--marca), var(--sombra); }
.plato .foto {
  width: 68px; height: 68px; flex: none; border-radius: var(--radio-chico);
  object-fit: cover; background: var(--marca-suave);
}
.plato .inicial {
  display: grid; place-items: center;
  font-weight: 800; font-size: 22px; color: var(--marca);
}
.plato .nombre { font-weight: 700; font-size: 15.5px; }
.plato .desc   { font-size: 13px; color: var(--tinta-2); margin-top: 2px; }
.plato .precio { font-weight: 800; color: var(--marca); font-size: 16px; }
.plato .meta   { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }

/* Contador +/- : funciona con formularios, sin depender de JavaScript */
.contador { display: flex; align-items: center; gap: 6px; flex: none; }
.contador button {
  width: 38px; height: 38px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: 19px; line-height: 1; font-weight: 700;
  background: var(--marca-suave); color: var(--tinta);
}
.contador button.mas { background: var(--marca); color: #fff; }
.contador .cantidad { min-width: 22px; text-align: center; font-weight: 700; }

/* Barra del carrito, siempre a la vista */
.barra-carrito {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--papel) 70%, transparent);
}
.barra-carrito .interior { max-width: 560px; margin: 0 auto; }
.barra-carrito .boton { box-shadow: 0 8px 24px rgba(168,112,11,.35); }

/* Ticket */
.ticket { overflow: hidden; }
.ticket .cabecera {
  background: linear-gradient(135deg, var(--marca), var(--marca-claro));
  color: #fff; padding: 20px; text-align: center;
}
.ticket .codigo { font-size: 44px; font-weight: 800; letter-spacing: .06em; line-height: 1.05; }
.ticket .troquel { height: 16px; position: relative; }
.ticket .troquel::before, .ticket .troquel::after {
  content: ""; position: absolute; top: -8px; width: 16px; height: 16px;
  background: var(--papel); border-radius: 999px;
}
.ticket .troquel::before { left: -8px; }
.ticket .troquel::after  { right: -8px; }
.ticket .linea-corte { border-top: 2px dashed var(--borde); margin: 0 18px; }

.progreso { display: flex; gap: 5px; margin: 14px 0; }
.progreso span { height: 6px; flex: 1; border-radius: 999px; background: var(--marca-suave); }
.progreso span.hecho { background: var(--marca); }

/* Sellos */
.sellos { display: flex; flex-wrap: wrap; gap: 7px; }
.sello {
  width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  border: 2px dashed var(--borde); color: var(--borde); font-size: 15px;
}
.sello.lleno { border-style: solid; border-color: var(--marca); background: var(--marca); color: #fff; }

.barra-progreso { height: 8px; border-radius: 999px; background: var(--marca-suave); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--marca); }

/* Métodos de pago como opciones grandes */
.pagos { display: grid; gap: 9px; }
.pago {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 15px; border-radius: var(--radio-chico);
  background: var(--superficie); border: 1px solid var(--borde);
}
.pago input { accent-color: var(--marca); width: 20px; height: 20px; }
.pago:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }

/* ═══ CAPA DEL EQUIPO ═════════════════════════════════════════════════════ */
.barra-admin {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.barra-admin .interior {
  max-width: 1180px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 14px;
}
.barra-admin .marca { font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -.02em; }
.barra-admin nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.barra-admin nav::-webkit-scrollbar { display: none; }
.barra-admin nav a {
  flex: none; padding: 7px 13px; border-radius: 999px; font-size: 14px;
  color: var(--tinta-2); text-decoration: none; white-space: nowrap;
}
.barra-admin nav a:hover { background: #F4EFE2; }
.barra-admin nav a.activa { background: var(--tinta); color: #fff; }
.barra-admin .quien { text-align: right; font-size: 12px; line-height: 1.25; }
.barra-admin .quien b { display: block; font-size: 13px; }

.admin { max-width: 1180px; margin: 0 auto; padding: 26px 18px 70px; }
.admin > header { margin-bottom: 20px; }
.admin > header p { color: var(--tinta-2); margin-top: 5px; max-width: 65ch; }

.rejilla { display: grid; gap: 13px; }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.dato { padding: 15px 17px; }
.dato .rotulo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.dato .cifra  { font-size: 27px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em; }
.dato .pie    { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }
.dato--marcado { box-shadow: inset 3px 0 0 var(--marca), var(--sombra); }

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-2); font-weight: 600; padding: 11px 14px;
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid #F6F1E5; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FDFAF3; }
.der { text-align: right; }
td.der, th.der { white-space: nowrap; }

.insignia {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #fff;
}
.insignia--recibido       { background: #5B5BD6; }
.insignia--en_preparacion { background: var(--alerta); }
.insignia--listo          { background: #0E7490; }
.insignia--entregado      { background: var(--ok); }
.insignia--anulado        { background: #8A8578; }

.filtros { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding: 15px; }
.filtros .acciones { display: flex; gap: 8px; align-items: flex-end; }

/* Comanda de cocina */
.comanda { overflow: hidden; }
.comanda .tapa {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 15px; background: var(--marca); color: #fff; font-weight: 700;
}
.comanda .tapa .cod { font-size: 21px; letter-spacing: .05em; }
.comanda.tarde .tapa { background: var(--error); }
.comanda .cuerpo { padding: 14px 15px; }
.comanda li { list-style: none; }
.comanda ul { margin: 0; padding: 0; }

/* Gráfico de barras, sin librerías */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.barras .col { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.barras .col i { display: block; width: 100%; background: var(--tinta); border-radius: 4px 4px 0 0; min-height: 3px; }

.mini { font-size: 12.5px; color: var(--tinta-2); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 640px) {
  .barra-admin .quien { display: none; }
  .admin { padding: 18px 14px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .barra-admin, .barra-carrito, .no-imprimir { display: none !important; }
  body { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARTA CON FOTOS · se adapta a celular, tablet y escritorio
   ═══════════════════════════════════════════════════════════════════════════ */

/* En pantallas grandes la carta deja de ser una columna angosta */
@media (min-width: 720px) {
  .cliente { max-width: 1060px; padding-bottom: 110px; }
  .cabecera-local { padding: 26px 32px 28px; }
  .cabecera-local h1 { font-size: 40px; }
  .categorias { padding: 14px 32px; }
  .seccion-carta { padding: 26px 32px 0; scroll-margin-top: 74px; }
  .buscador { padding: 18px 32px 0; }
  .barra-carrito .interior { max-width: 1060px; padding: 0 32px; }
}

/* Banner de la categoría, con el arte del local */
.banner-categoria {
  position: relative; border-radius: var(--radio); overflow: hidden;
  margin-bottom: 14px; background: var(--tinta);
}
.banner-categoria img {
  width: 100%; height: 104px; object-fit: cover; object-position: center;
  opacity: .78;
}
.banner-categoria h2 {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 12px 16px;
  color: #fff; font-size: 20px; letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(20,16,8,.86), transparent);
}
@media (min-width: 720px) { .banner-categoria img { height: 150px; } }

/* La lista de platos se vuelve rejilla cuando hay sitio */
.platos { display: grid; gap: 12px; }
@media (min-width: 720px)  { .platos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .platos { grid-template-columns: repeat(3, 1fr); } }

.plato { margin: 0; align-items: stretch; }
.plato .foto { width: 92px; height: 92px; }
@media (min-width: 720px) { .plato .foto { width: 104px; height: 104px; } }

/* Un plato sin foto propia no queda huérfano: lleva su inicial en color */
.plato .inicial {
  background: linear-gradient(140deg, var(--marca-suave), #F3E2B5);
  color: var(--marca); font-size: 30px;
}

/* ── Pantalla de cocina en tablet: se lee de lejos ──────────────────────── */
@media (min-width: 720px) {
  .comanda .tapa .cod { font-size: 26px; }
  .comanda .cuerpo { font-size: 16px; }
  .comanda .cuerpo .boton { padding: 15px 22px; font-size: 16px; }
}

/* ── Ayudas de lectura ─────────────────────────────────────────────────── */
.pista {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--marca-suave); border-radius: var(--radio-chico);
  padding: 12px 14px; font-size: 14px; color: #6B4506;
}
.pista b { display: block; }

/* Todo lo que se toca con el dedo, cómodo en tablet */
@media (pointer: coarse) {
  .boton, .contador button, .pago { min-height: 46px; }
  .categorias a { padding: 9px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CUPONES
   Un cupón se lee de un vistazo: qué premio, cuánto vale, hasta cuándo.
   El talón dorado a la derecha imita el troquel de un cupón de papel.
   ═══════════════════════════════════════════════════════════════════════════ */

.insignia--activo  { background: var(--ok); }
.insignia--usado   { background: #8A8578; }
.insignia--vencido { background: var(--error); }

/* Una fecha que aprieta se ve venir */
.urge { color: var(--alerta); font-weight: 700; }

/* ── Ancho de las pantallas sueltas del comensal ────────────────────────── */
.simple { max-width: 420px; margin: 0 auto; padding: 44px 22px; }
@media (min-width: 720px)  { .simple--ancho { max-width: 640px; } }
@media (min-width: 1040px) { .simple--ancho { max-width: 820px; } }

.pastilla--premio { background: rgba(255,255,255,.34); }
.pastilla--premio:hover { background: rgba(255,255,255,.46); }

/* ── Cupón en el módulo del equipo ──────────────────────────────────────── */
.cupon {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  overflow: hidden; padding: 0;
}
.cupon__cuerpo  { padding: 15px 16px; }
.cupon__premio  { font-weight: 700; font-size: 16px; }
.cupon__talon {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; min-width: 128px; padding: 15px 14px; text-align: center;
  background: var(--marca-suave); border-left: 2px dashed var(--borde);
}
.cupon__codigo { font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.cupon__valor  { font-weight: 800; font-size: 19px; color: var(--marca); }
.cupon__acciones {
  grid-column: 1 / -1; display: grid; gap: 5px;
  padding: 12px 16px 14px; border-top: 1px solid var(--borde);
}

.cupon--usado, .cupon--vencido { opacity: .8; }
.cupon--usado   .cupon__talon { background: #F3F1EC; }
.cupon--vencido .cupon__talon { background: #FBEDEE; }
.cupon--vencido .cupon__valor { color: var(--error); }

/* ── Cupón en la cuenta del comensal ────────────────────────────────────── */
.cupones { display: grid; gap: 10px; }
@media (min-width: 720px) { .cupones { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.cupon-mini {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 5px solid var(--marca);
  border-radius: var(--radio-chico); padding: 14px 15px; box-shadow: var(--sombra);
}
.cupon-mini:hover { border-color: var(--marca); }
.cupon-mini--urge { border-left-color: var(--alerta); }
.cupon-mini--urge .mini:first-of-type { color: var(--alerta); font-weight: 650; }
.cupon-mini__premio { font-weight: 700; font-size: 16px; }
.cupon-mini__valor {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right; white-space: nowrap;
}
.cupon-mini__valor > span:first-child {
  font-weight: 800; font-size: 19px; color: var(--marca);
}

/* ── El cupón a pantalla completa, el que se enseña en caja ─────────────── */
.cupon-grande {
  margin-top: 14px; padding: 26px 22px 24px; text-align: center;
  border-radius: var(--radio); box-shadow: var(--sombra);
  background: linear-gradient(160deg, var(--marca-suave), #FFFDF7);
  border: 2px dashed var(--marca);
}
.cupon-grande__rotulo {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--marca);
}
.cupon-grande h1 { margin-top: 7px; }
.cupon-grande__valor {
  margin-top: 4px; font-size: 30px; font-weight: 800; color: var(--marca);
}
.cupon-grande__qr {
  display: inline-block; margin: 18px 0 4px; padding: 13px;
  background: #fff; border-radius: var(--radio-chico);
}
.cupon-grande__qr svg { display: block; }
.cupon-grande__codigo {
  margin-top: 10px; font-size: 21px; font-weight: 800; letter-spacing: .1em;
}
.cupon-grande__pie { margin-top: 8px; font-size: 13.5px; color: var(--tinta-2); }

.cupon-grande--usado, .cupon-grande--vencido {
  background: #F6F4EF; border-color: #C9C3B4;
}
.cupon-grande--usado .cupon-grande__rotulo,
.cupon-grande--usado .cupon-grande__valor   { color: var(--tinta-2); }
.cupon-grande--vencido .cupon-grande__rotulo,
.cupon-grande--vencido .cupon-grande__valor { color: var(--error); }

/* En el celular los cuatro números del comensal caben de dos en dos:
   apilados ocupaban toda la primera pantalla y empujaban los cupones fuera. */
.simple .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.simple .dato { padding: 13px 14px; }
.simple .dato .cifra { font-size: 23px; }
@media (min-width: 560px) {
  .simple .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .simple .dato .cifra { font-size: 27px; }
}