:root {
  /* Acentos configurables (se sobreescriben desde ajustes en index.html) */
  --morado: #3f8018;        /* primario: precios, acentos */
  --dorado: #7cbf2e;        /* acento lima */
  /* Verdes del diseño */
  --verde-vivo: #56c619;
  --hdr1: #61cf1f;
  --hdr2: #2f7b12;
  --verde-osc: #1b5e20;
  --exito: #1f8a3b;
  --exito-osc: #166b2d;
  --rojo: #e11d1d;
  /* Neutros */
  --tinta: #16350a;
  --gris-texto: #24301c;
  --gris-suave: #7a8a68;
  --fondo1: #eef3e5;
  --fondo2: #e3ebd6;
  --tarjeta: #ffffff;
  --borde: #e2eed4;
  --blanco: #fff;
  --negro-grupo: #141414;      /* barra de categoría (fondo) */
  --categoria-txt: #ffffff;    /* barra de categoría (texto) */
  --crema: #f0f7e6;
  --sombra: 0 8px 22px rgba(24, 71, 8, .12);
  --sombra-fuerte: 0 14px 34px rgba(24, 71, 8, .28);
  --radio: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--gris-texto);
  background:
    radial-gradient(120% 55% at 92% 0%, color-mix(in srgb, var(--dorado) 30%, transparent), transparent 60%),
    linear-gradient(180deg, var(--fondo1) 0%, var(--fondo2) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.45;
  padding-bottom: 96px;
}
h1, h2, h3, .marca-texto, .barra-go, .btn-pagar, .precio { font-family: "Poppins", system-ui, sans-serif; }

/* ---------- Cabecera ---------- */
.cabecera {
  background: linear-gradient(135deg, var(--hdr1) 0%, var(--hdr2) 100%);
  padding: 16px 18px 22px;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 12px 30px rgba(24, 71, 8, .30);
}
.cab-top { display: flex; align-items: center; justify-content: space-between; }
.marca { display: flex; align-items: center; text-decoration: none; gap: 8px; }
.banner { height: 46px; width: auto; max-width: 66vw; object-fit: contain; display: block; }
.logo { height: 46px; width: auto; display: block; }
.marca-emoji { font-size: 1.8rem; line-height: 1; }
.marca-texto { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: .5px; }

.btn-carrito {
  position: relative;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  font-size: 1.25rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.contador {
  position: absolute; top: -6px; right: -6px;
  background: var(--rojo); color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px;
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid #fff;
}
.saludo { color: #eaffd6; font-size: .92rem; font-weight: 600; margin: 14px 2px 0; }
.buscador-wrap {
  margin-top: 10px; background: rgba(255, 255, 255, .94);
  border-radius: 16px; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 16px rgba(24, 71, 8, .18);
}
.buscador-ico { font-size: .95rem; opacity: .7; }
.buscador {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .95rem; font-family: inherit; color: var(--gris-texto);
}

/* ---------- Chip de mesa ---------- */
.mesa-chip {
  text-align: center; background: #e2f3d2; color: #14400a;
  font-size: .88rem; padding: 9px 14px; border-bottom: 1px solid #cfe6b8;
}
.mesa-chip strong { color: #1b5e20; }

/* ---------- Chips de categorías ---------- */
.chips {
  position: sticky; top: 0; z-index: 15;
  display: flex; gap: 10px; overflow-x: auto;
  padding: 12px 16px; white-space: nowrap; scrollbar-width: none;
  background: var(--fondo1);
  box-shadow: 0 6px 14px rgba(24, 71, 8, .08);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; border-radius: 18px; padding: 10px 14px; min-width: 72px;
  box-shadow: 0 6px 14px rgba(24, 71, 8, .1);
  font-size: .74rem; color: var(--tinta); font-weight: 600;
  text-decoration: none; transition: transform .12s;
}
.chip img { width: 36px; height: 36px; object-fit: contain; }
.chip-emoji { font-size: 24px; }
.chip.on { background: linear-gradient(135deg, var(--hdr1), var(--hdr2)); color: #fff;
  box-shadow: 0 10px 20px rgba(47, 143, 20, .40); }
.chip.on img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }

/* ---------- Carta ---------- */
.carta { max-width: 760px; margin: 0 auto; padding: 10px 16px 0; }
.categoria { margin-bottom: 24px; scroll-margin-top: 82px; }
.categoria h2 {
  font-size: 1.3rem; color: var(--categoria-txt); background: var(--negro-grupo);
  padding: 8px 18px; margin-bottom: 14px; display: inline-block;
  border-radius: 12px; box-shadow: var(--sombra);
}
.lista-productos { display: flex; flex-direction: column; gap: 14px; }

.producto {
  background: var(--tarjeta); border-radius: 22px; padding: 12px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s;
}
.producto:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.prod-img {
  width: 88px; height: 88px; flex: 0 0 auto; border-radius: 18px;
  object-fit: contain; background: linear-gradient(135deg, #f4f0e6, #eef3e5);
  padding: 6px;
}
.prod-img.ph { display: flex; align-items: center; justify-content: center; font-size: 38px; }
.prod-body { flex: 1; min-width: 0; }
.prod-body h3 { font-size: 1.02rem; font-weight: 700; color: #1b2f10; }
.desc {
  font-size: .82rem; color: var(--gris-suave); margin: 3px 0 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.precio { font-weight: 800; color: var(--morado); font-size: 1.05rem; }
.zona-control { display: flex; align-items: center; gap: 8px; }

/* Botón + circular */
.btn-add {
  width: 40px; height: 40px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--dorado), var(--morado));
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 16px rgba(47, 143, 20, .35);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.btn-add:active { transform: scale(.92); }
.badge-cant { font-size: .72rem; color: var(--exito); font-weight: 700; }

/* Contador en la tarjeta */
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 34px; height: 34px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--dorado), var(--morado)); color: #fff;
  font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 12px rgba(47, 143, 20, .3); transition: transform .1s;
}
.stepper button:active { transform: scale(.9); }
.stepper .cant { min-width: 20px; text-align: center; font-weight: 700; font-size: 1.05rem; }

.sin-resultados { text-align: center; color: var(--gris-suave); padding: 30px 10px; }

/* ---------- Barra inferior ---------- */
.barra {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(140%);
  width: 100%; max-width: 460px; padding: 12px 16px 18px; z-index: 25;
  transition: transform .25s ease;
}
.barra.visible { transform: translateX(-50%) translateY(0); }
.barra-inner {
  width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--exito-osc), var(--exito));
  border-radius: 20px; padding: 14px 18px; color: #fff;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 14px 30px rgba(24, 71, 8, .40);
}
.barra-l { font-size: .82rem; opacity: .9; }
.barra-total { font-family: "Poppins"; font-weight: 700; font-size: 1.05rem; }
.barra-go { margin-left: auto; background: var(--dorado); color: #16350a;
  font-weight: 700; font-size: .9rem; padding: 8px 14px; border-radius: 13px; }

/* ---------- Carrito lateral ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(8, 26, 6, .55);
  opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 30;
}
.overlay.visible { opacity: 1; visibility: visible; }
.carrito {
  position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: #fbfdf7; box-shadow: -3px 0 24px rgba(8, 26, 6, .3);
  transform: translateX(100%); transition: transform .25s; z-index: 40;
  display: flex; flex-direction: column;
}
.carrito.abierto { transform: translateX(0); }
.carrito-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; background: linear-gradient(135deg, var(--hdr1), var(--hdr2)); color: #fff;
}
.carrito-cabecera h2 { font-size: 1.2rem; }
.btn-cerrar { background: rgba(255, 255, 255, .2); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; cursor: pointer; }
.carrito-items { flex: 1; overflow-y: auto; padding: 16px 18px; }
.carrito-vacio { color: var(--gris-suave); text-align: center; padding: 40px 0; }
.item { display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--borde); }
.item-nombre { font-weight: 600; font-size: .95rem; }
.item-extra { font-size: .78rem; color: var(--morado); margin-top: 2px; }
.item-precio { font-size: .85rem; color: var(--gris-suave); margin-top: 2px; }
.controles { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.controles button { width: 30px; height: 30px; border: none; border-radius: 9px;
  background: linear-gradient(135deg, var(--dorado), var(--morado)); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cantidad { min-width: 18px; text-align: center; font-weight: 700; }

.carrito-pie { border-top: 1px solid var(--borde); padding: 16px 18px 20px; background: #fff; }
.total-fila { display: flex; justify-content: space-between; font-weight: 800;
  font-family: "Poppins"; font-size: 1.15rem; color: var(--exito-osc); margin-bottom: 12px; }
.cliente-datos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cliente-datos input {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--borde);
  border-radius: 12px; font-size: .95rem; font-family: inherit; color: var(--gris-texto); background: #fff;
}
.cliente-datos input:focus { outline: none; border-color: var(--morado); }
.acepto { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem;
  color: var(--gris-suave); margin-bottom: 12px; cursor: pointer; }
.acepto input { width: 19px; height: 19px; accent-color: var(--morado); flex: 0 0 auto; margin-top: 1px; }
.acepto a { color: var(--morado); font-weight: 600; }

.btn-pagar {
  width: 100%; background: linear-gradient(135deg, var(--exito), var(--exito-osc)); color: #fff;
  border: none; border-radius: 14px; padding: 15px; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  transition: filter .15s; box-shadow: 0 10px 22px rgba(24, 71, 8, .25);
}
.btn-pagar:disabled { background: #c7cfbe; cursor: not-allowed; box-shadow: none; }
.btn-pagar:not(:disabled):hover { filter: brightness(.95); }
.btn-caja { margin-top: 10px; background: linear-gradient(135deg, var(--exito-osc), color-mix(in srgb, var(--exito-osc), #000 30%)); }
.mensaje-error { color: #c0392b; font-size: .85rem; margin-top: 8px; text-align: center; }

/* ---------- Modales ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(8, 26, 6, .6);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-overlay.visible { display: flex; }
.modal {
  background: #fff; border-radius: 22px; width: 100%; max-width: 440px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--sombra-fuerte);
}
.modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; background: linear-gradient(135deg, var(--hdr1), var(--hdr2)); color: #fff;
  border-radius: 22px 22px 0 0;
}
.modal-cabecera h3 { font-size: 1.1rem; }
.modal-desc { color: var(--gris-suave); font-size: .88rem; padding: 12px 18px 0; }
.modal-bloque { padding: 12px 18px; border-bottom: 1px solid var(--borde); }
.modal-label { font-weight: 700; margin-bottom: 8px; color: var(--exito-osc); }
.modal .opcion { display: flex; gap: 9px; align-items: center; padding: 7px 0; font-size: .95rem; cursor: pointer; }
.modal .opcion input { width: 18px; height: 18px; accent-color: var(--morado); }
.modal .btn-pagar { margin: 14px 18px 18px; width: calc(100% - 36px); }
.horario-info p { margin: 8px 0; }

/* ---------- Páginas de resultado ---------- */
.resultado {
  max-width: 520px; margin: 60px auto; background: #fff; border-radius: 20px;
  box-shadow: var(--sombra-fuerte); padding: 44px 30px; text-align: center;
}
.resultado .icono { font-size: 3.5rem; margin-bottom: 10px; }
.resultado h1 { color: var(--exito-osc); margin-bottom: 10px; }
.resultado p { color: var(--gris-suave); margin-bottom: 24px; }
.btn-volver { display: inline-block; background: linear-gradient(135deg, var(--exito), var(--exito-osc));
  color: #fff; text-decoration: none; padding: 13px 26px; border-radius: 13px; font-weight: 700; }

/* ---------- Ticket del cliente ---------- */
.ticket-wrap { max-width: 400px; margin: 0 auto; padding: 24px 16px; }
.ticket-card {
  background: #fff; border-radius: 20px; box-shadow: var(--sombra-fuerte);
  padding: 24px 22px; display: flex; flex-direction: column;
}
.t-marca { font-family: "Poppins"; font-weight: 800; font-size: 1.5rem; text-align: center; color: var(--exito-osc); }
.t-estado { text-align: center; font-weight: 700; font-size: .85rem; margin-top: 4px; padding: 4px 0; border-radius: 8px; }
.t-estado.ok { color: #15803d; }
.t-estado.pend { color: #b45309; }
.t-sep { border-top: 2px dashed #d8e3cc; margin: 14px 0; }
.t-linea { display: flex; justify-content: space-between; font-size: .9rem; padding: 3px 0; color: var(--gris-texto); }
.t-linea span:first-child { color: var(--gris-suave); }
.t-item { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 5px 0; }
.t-item span:last-child { font-weight: 600; white-space: nowrap; }
.t-total { display: flex; justify-content: space-between; font-family: "Poppins"; font-weight: 800; font-size: 1.2rem; color: var(--exito-osc); }
.t-nota { text-align: center; color: var(--gris-suave); font-size: .82rem; margin: 12px 0 18px; }
.ticket-card .btn-pagar { text-decoration: none; text-align: center; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 30px 20px; background: #fff; }
.legal h1 { color: var(--exito-osc); margin-bottom: 14px; }
.legal h2 { margin: 20px 0 8px; font-size: 1.1rem; }
.legal p { margin-bottom: 10px; color: var(--gris-texto); }
.legal-volver { display: inline-block; margin-top: 18px; color: var(--morado); font-weight: 700; text-decoration: none; }

@media (max-width: 480px) {
  .banner { height: 42px; }
  .prod-img { width: 78px; height: 78px; }
  .categoria h2 { font-size: 1.18rem; }
}