/* ============================================================================
   PICHI BURGUER · Sistema de pedidos en línea
   ARCHIVO: css/styles.css
   ----------------------------------------------------------------------------
   QUÉ CONTIENE: TODOS los estilos del proyecto — la página del cliente
   (index.html), el panel del vendedor (panel.html), la página 404 y las cuatro
   páginas legales. Un solo archivo para que todo comparta exactamente el mismo
   diseño y no haya dos estilos distintos conviviendo.

   MODO DE DISEÑO: Modo 2 (libre, a partir de imagen de referencia).
   La paleta se sacó píxel a píxel del logo que entregó el cliente:
   fondo negro sólido, marco rojo, tipografía blanca, pan naranja y queso
   amarillo. El logo tiene fondo negro sin transparencia, por eso todo el
   sistema va en negro: así el logo se funde y no queda un recuadro feo.

   ORDEN DEL ARCHIVO:
     1. Variables y base            5. Menú y productos
     2. Utilidades y botones        6. Carrito, modal y turno
     3. Barra superior y estado     7. Horarios, mapa y footer
     4. Portada                     8. Panel del vendedor
                                    9. Legales, 404, cookies y responsive
   ========================================================================== */


/* ============================================================================
   1) VARIABLES Y BASE
   Qué hace: define la paleta, las tipografías y el comportamiento global.
   Ojo: NUNCA escribir colores en hexadecimal suelto por el archivo. Todo color
   sale de estas variables; así cambiar la marca es tocar un solo bloque.
   ========================================================================== */
:root {
  /* --- Paleta extraída del logo --- */
  --negro:          #000000;   /* fondo del logo, 68% de sus píxeles */
  --negro-sup:      #0C0C0C;   /* superficie de tarjetas, un punto más claro */
  --negro-sup-2:    #141414;   /* superficie elevada (modal, panel) */
  --linea:          rgba(255,255,255,.10);   /* bordes sutiles */
  --linea-fuerte:   rgba(255,255,255,.18);

  --rojo:           #E01220;   /* rojo de marca para bloques y botones */
  --rojo-vivo:      #FB0212;   /* rojo exacto del marco del logo, solo detalles */
  --rojo-oscuro:    #9E0A14;   /* estados presionados */

  --amarillo:       #FFD100;   /* etiquetas de categoría, igual que el menú impreso */
  --naranja:        #FE9B05;   /* pan de la hamburguesa: acentos cálidos */
  --verde:          #29B24A;   /* local abierto */

  --blanco:         #FFFFFF;
  --texto:          #F2F2F2;
  --texto-suave:    #B5B5B5;   /* descripciones y textos secundarios */
  --texto-tenue:    #7E7E7E;   /* notas al pie y avisos menores */

  /* --- Tipografías --- */
  /* Archivo: itálica y pesos altos, se parece a la del logo (títulos).
     Inter: neutra y muy legible en pantallas pequeñas (cuerpo y precios). */
  --fuente-titulo: 'Archivo', 'Arial Black', sans-serif;
  --fuente-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Radios, sombras y espaciados (escala única de todo el proyecto) --- */
  --radio-sm: 10px;
  --radio:    14px;
  --radio-lg: 20px;
  --radio-full: 999px;
  --sombra:    0 4px 16px rgba(0,0,0,.55);
  --sombra-alta: 0 10px 34px rgba(0,0,0,.7);
  --espacio-seccion: clamp(48px, 8vw, 84px);
  --ancho-max: 1180px;

  /* Altura de la barra superior fija; la usan el scroll-margin de las
     secciones y el desplazamiento del menú de categorías. */
  --alto-barra: 62px;
}

/* Reinicio mínimo: solo lo necesario, sin librerías externas. */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* evita que iOS agrande el texto al girar */
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  /* Sin esto, en móvil el carrito flotante llegaría a tapar el footer. */
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;               /* seguro extra contra scroll horizontal */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-style: italic;               /* la inclinación viene del logo */
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 7vw, 3.4rem); color: var(--blanco); }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.3rem); color: var(--blanco); }
h3 { font-size: clamp(1.02rem, 2.6vw, 1.18rem); font-style: normal; letter-spacing: 0; }

p { margin: 0 0 1em; }
a { color: inherit; }

/* Foco visible en TODO lo que se puede enfocar: obligatorio para que la página
   sea usable con teclado y con lector de pantalla. */
:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace "Saltar al contenido": invisible hasta que se enfoca con el tabulador. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amarillo); color: var(--negro);
  padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--radio-sm) 0;
}
.skip-link:focus { left: 0; }

/* Texto solo para lectores de pantalla (no se ve, pero se lee en voz alta). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

section { padding-block: var(--espacio-seccion); }
/* Para que al saltar a una sección desde el menú no quede tapada por la barra. */
section[id] { scroll-margin-top: calc(var(--alto-barra) + 58px); }


/* ============================================================================
   2) UTILIDADES Y BOTONES
   Qué hace: un solo patrón de botón para todo el sistema. Cualquier botón nuevo
   que se agregue a futuro usa estas clases; no se inventan estilos sueltos.
   Táctil: mínimo 48px de alto en todos, como exige el estándar de JX.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  font-family: var(--fuente-texto);
  font-size: 1rem; font-weight: 700;
  border: 0; border-radius: var(--radio-sm);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, transform .12s ease, opacity .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--rojo   { background: var(--rojo); color: var(--blanco); }
.btn--ama    { background: var(--amarillo); color: var(--negro); }
.btn--linea  { background: transparent; color: var(--texto); border: 1px solid var(--linea-fuerte); }
.btn--ancho  { width: 100%; }

/* Los efectos al pasar el cursor van SOLO aquí dentro: en pantallas táctiles no
   existe el "pasar por encima" y el estado se quedaría pegado tras el toque. */
@media (hover: hover) {
  .btn--rojo:hover  { background: #F41B2A; }
  .btn--ama:hover   { background: #FFDC3D; }
  .btn--linea:hover { background: rgba(255,255,255,.07); }
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; pointer-events: none;
}

/* Encabezado de sección: etiqueta amarilla + título, igual que el menú impreso
   del local, donde cada categoría lleva un trazo amarillo encima. */
.seccion-cab { margin-bottom: 30px; }
.etiqueta {
  display: inline-block;
  background: var(--amarillo); color: var(--negro);
  font-family: var(--fuente-titulo);
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .06em;
  padding: 5px 14px; border-radius: 3px;
  margin-bottom: 12px;
  transform: rotate(-1.2deg);   /* leve inclinación: recuerda el trazo pintado */
}
.seccion-cab p { color: var(--texto-suave); max-width: 62ch; margin: 0; }

/* Marcador de dato pendiente. Es INTENCIONALMENTE visible: obliga a completar
   el dato antes de publicar en vez de dejar un valor inventado. */
.pendiente {
  color: var(--naranja); font-weight: 700; font-size: .9em;
  background: rgba(254,155,5,.10);
  border: 1px dashed rgba(254,155,5,.45);
  padding: 1px 7px; border-radius: 5px; white-space: nowrap;
}


/* ============================================================================
   3) BARRA SUPERIOR Y SEMÁFORO DE ESTADO
   Qué es: la barra fija de arriba con el logo, el estado del local y el acceso
   al menú de categorías.
   Función: que el visitante sepa SIEMPRE, sin hacer scroll, si el local está
   abierto y si puede pedir. Es lo primero que preguntaría por WhatsApp.
   Depende de: js/script.js pone la clase .esta-abierto / .esta-cerrado.
   ========================================================================== */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--alto-barra);
  display: flex; align-items: center;
  background: rgba(0,0,0,.94);
  border-bottom: 1px solid var(--linea);
  padding-top: env(safe-area-inset-top);   /* respeta el notch del iPhone */
}
.barra__int {
  width: 100%; max-width: var(--ancho-max); margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 28px);
  display: flex; align-items: center; gap: 12px;
}
.barra__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.barra__logo { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.barra__nombre {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: 1.02rem; text-transform: uppercase; color: var(--blanco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Semáforo verde/rojo. Es un punto de color + texto: nunca solo el color, para
   que también lo entienda alguien que no distingue verde de rojo. */
.estado {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; flex-shrink: 0;
  padding: 7px 13px; border-radius: var(--radio-full);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--linea);
  background: var(--negro-sup);
}
.estado__luz {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--texto-tenue); flex-shrink: 0;
}
.estado.esta-abierto  { border-color: rgba(41,178,74,.5);  color: #7FE39A; }
.estado.esta-abierto  .estado__luz { background: var(--verde); }
.estado.esta-cerrado  { border-color: rgba(224,18,32,.5);  color: #FF8B93; }
.estado.esta-cerrado  .estado__luz { background: var(--rojo); }

/* Barra de categorías: se desliza horizontalmente en móvil en vez de apilarse.
   Se eligió así porque un menú hamburguesa para 6 categorías esconde el
   contenido que justamente vino a ver el cliente. */
.categorias {
  position: fixed; top: calc(var(--alto-barra) + env(safe-area-inset-top));
  inset-inline: 0; z-index: 55;
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }
.categorias__int {
  display: flex; gap: 8px; align-items: center;
  padding: 9px clamp(14px, 4vw, 28px);
  width: max-content; min-width: 100%;
  max-width: var(--ancho-max); margin-inline: auto;
}
.categorias a {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 15px;
  border-radius: var(--radio-full);
  border: 1px solid var(--linea);
  font-size: .84rem; font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--texto-suave);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.categorias a.activa { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
@media (hover: hover) { .categorias a:hover { color: var(--blanco); border-color: var(--linea-fuerte); } }


/* ============================================================================
   4) PORTADA
   Qué es: el bloque de entrada con el logo, el estado grande y los datos que
   más se preguntan (dirección y horario de hoy).
   Función: en tres segundos el visitante sabe dónde está, si está abierto y
   que puede pedir desde ahí mismo.
   ========================================================================== */
.portada {
  padding-top: calc(var(--alto-barra) + 58px + env(safe-area-inset-top) + 26px);
  padding-bottom: 34px;
  text-align: center;
  /* Degradado sutil de negro a negro-rojizo muy bajo: da profundidad sin
     convertirse en el degradado de plantilla que delata una web hecha por IA. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224,18,32,.13) 0%, rgba(0,0,0,0) 62%),
    var(--negro);
  border-bottom: 1px solid var(--linea);
}
.portada__logo {
  width: min(220px, 54vw); height: auto;
  margin: 0 auto 18px;
  border-radius: var(--radio-lg);
}
.portada h1 { margin-bottom: .25em; }
.portada__lema {
  color: var(--texto-suave); font-size: 1.02rem;
  max-width: 46ch; margin: 0 auto 22px;
}

/* Aviso grande de estado. Cuando el local está cerrado explica a qué hora
   abre, en vez de dejar al cliente adivinando. */
.aviso-estado {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--negro-sup);
  font-weight: 600; font-size: .96rem; text-align: left;
  max-width: 100%;
}
.aviso-estado .estado__luz { width: 12px; height: 12px; }
.aviso-estado.esta-abierto { border-color: rgba(41,178,74,.42); }
.aviso-estado.esta-abierto .estado__luz { background: var(--verde); }
.aviso-estado.esta-cerrado { border-color: rgba(224,18,32,.42); }
.aviso-estado.esta-cerrado .estado__luz { background: var(--rojo); }

.portada__datos {
  margin-top: 20px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 22px;
  color: var(--texto-suave); font-size: .9rem;
}
.portada__datos span { display: inline-flex; align-items: center; gap: 7px; }


/* ============================================================================
   5) MENÚ Y PRODUCTOS
   Qué es: el catálogo completo agrupado en categorías.
   Función: es LA sección que vende. Todo lo demás existe para llegar aquí.
   Depende de: js/script.js lee los atributos data-nombre y data-precio de cada
   botón "Agregar" para armar el carrito. Si se cambia un precio en el HTML,
   el carrito lo toma solo — no hay que tocar el JavaScript.
   Responsive: 1 columna hasta 640px, 2 columnas desde ahí, 3 desde 1000px.
   ========================================================================== */
.grupo { padding-block: 0 var(--espacio-seccion); }
.grupo:first-of-type { padding-top: var(--espacio-seccion); }

.menu-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}

.plato {
  display: flex; flex-direction: column;
  background: var(--negro-sup);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 17px 17px 15px;
  transition: border-color .2s ease;
}
@media (hover: hover) { .plato:hover { border-color: var(--linea-fuerte); } }

.plato__cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.plato__nombre { margin: 0; flex: 1; color: var(--blanco); font-weight: 700; }
.plato__precio {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: 1.16rem; color: var(--amarillo); white-space: nowrap;
}
.plato__desc {
  color: var(--texto-suave); font-size: .885rem; line-height: 1.5;
  margin: 0 0 15px; flex: 1;
}
.plato .btn { margin-top: auto; }

/* Contador que aparece cuando el plato ya está en el carrito.
   Reemplaza al botón "Agregar" para no ocupar el doble de espacio en móvil. */
.contador { display: none; align-items: center; gap: 12px; margin-top: auto; }
.plato.en-carrito .contador { display: flex; }
.plato.en-carrito .plato__agregar { display: none; }
.contador__btn {
  width: 48px; height: 48px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  background: var(--negro-sup-2); color: var(--blanco);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  cursor: pointer;
}
.contador__n {
  flex: 1; text-align: center; font-weight: 700; font-size: 1.06rem;
  font-variant-numeric: tabular-nums;
}

/* Aviso de bebidas y adiciones: datos que el cliente todavía no confirmó.
   Se muestra el aviso en vez de inventar precios. */
.aviso-caja {
  background: var(--negro-sup);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--naranja);
  border-radius: var(--radio);
  padding: 18px 20px;
}
.aviso-caja h3 { color: var(--blanco); margin-bottom: .5em; }
.aviso-caja p:last-child { margin-bottom: 0; }

/* Pasos de "cómo pedir": tres números grandes, sin iconos genéricos. */
.pasos { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: paso; }
.paso {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--negro-sup); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px;
}
.paso__n {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: 1.7rem; color: var(--rojo); line-height: 1; flex-shrink: 0;
  min-width: 34px;
}
.paso h3 { margin-bottom: .3em; color: var(--blanco); }
.paso p { margin: 0; color: var(--texto-suave); font-size: .9rem; }


/* ============================================================================
   6) CARRITO, MODAL DE PEDIDO Y PANTALLA DE TURNO
   Qué es: la barra inferior con el resumen, el formulario del pedido y la
   confirmación con el número de turno.
   Función: es el flujo de compra completo. Todo ocurre sin cambiar de página
   para que el cliente no pierda lo que ya escogió.
   Depende de: js/script.js (abre y cierra) y js/almacen.js (guarda el pedido).
   ========================================================================== */

/* --- Barra flotante del carrito --- */
.carrito-barra {
  position: fixed; inset: auto 0 0 0; z-index: 65;
  background: rgba(10,10,10,.97);
  border-top: 1px solid var(--linea-fuerte);
  padding: 11px clamp(14px, 4vw, 28px) calc(11px + env(safe-area-inset-bottom));
  transform: translateY(115%);
  transition: transform .26s ease;
}
.carrito-barra.visible { transform: translateY(0); }
.carrito-barra__int {
  max-width: var(--ancho-max); margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
}
.carrito-barra__info { min-width: 0; }
.carrito-barra__n { font-size: .8rem; color: var(--texto-suave); display: block; }
.carrito-barra__total {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: 1.3rem; color: var(--blanco); line-height: 1.1;
}
.carrito-barra .btn { margin-left: auto; flex-shrink: 0; }

/* --- Ventana modal (formulario y turno) ---
   z-index 100: por encima del banner de cookies (95). Si fuera menor, el banner
   se dibujaría sobre la ventana del pedido y taparía el formulario. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.82);
  padding: 0;
}
.modal.abierto { display: flex; }
.modal__caja {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--negro-sup-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  padding: 22px clamp(18px, 5vw, 28px) calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.modal__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.modal__cab h2 { margin: 0; font-size: 1.3rem; }
.modal__cerrar {
  margin-left: auto; width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linea);
  border-radius: var(--radio-sm); color: var(--texto);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}

/* Resumen de lo que se va a pedir, dentro del modal. */
.resumen { border-top: 1px solid var(--linea); margin-bottom: 18px; }
.resumen__fila {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
  font-size: .92rem;
}
.resumen__fila span:last-child { margin-left: auto; font-weight: 700; white-space: nowrap; }
.resumen__total {
  display: flex; gap: 12px; align-items: baseline;
  padding-top: 13px; font-size: 1.1rem; font-weight: 700;
}
.resumen__total span:last-child {
  margin-left: auto; color: var(--amarillo);
  font-family: var(--fuente-titulo); font-style: italic; font-size: 1.35rem;
}

/* --- Campos del formulario --- */
.campo { margin-bottom: 15px; }
.campo label {
  display: block; margin-bottom: 6px;
  font-size: .87rem; font-weight: 600; color: var(--texto);
}
.campo input, .campo textarea, .campo select {
  width: 100%; padding: 13px 14px;
  /* 16px como mínimo: por debajo de eso, iOS hace zoom solo al tocar el campo
     y descuadra toda la pantalla. No bajar este valor. */
  font-size: 16px; font-family: var(--fuente-texto);
  color: var(--texto); background: var(--negro);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
}
.campo textarea { min-height: 78px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-tenue); }
.campo__ayuda { font-size: .78rem; color: var(--texto-tenue); margin: 6px 0 0; }

/* Grupo de opciones tipo "pastilla" (recoger/domicilio y método de pago). */
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 17px; margin: 0;
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.opciones input:checked + label { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.opciones input:focus-visible + label { outline: 3px solid var(--amarillo); outline-offset: 3px; }

/* Mensaje de error del formulario: rojo, pero legible sobre negro. */
.error-form {
  display: none; margin: 0 0 14px;
  background: rgba(224,18,32,.13); border: 1px solid rgba(224,18,32,.5);
  color: #FFB4B9; border-radius: var(--radio-sm);
  padding: 11px 14px; font-size: .88rem;
}
.error-form.visible { display: block; }

/* --- Pantalla de turno confirmado --- */
.turno { text-align: center; padding: 8px 0 4px; }
.turno__n {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: clamp(3.4rem, 17vw, 5.2rem); line-height: 1;
  color: var(--amarillo); margin: 6px 0 2px;
}
.turno__etq { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.turno__datos {
  margin: 20px 0; padding: 15px; text-align: left;
  background: var(--negro); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: .89rem;
}
.turno__datos div { display: flex; gap: 12px; padding: 4px 0; }
.turno__datos div span:first-child { color: var(--texto-suave); min-width: 88px; }
.turno__datos div span:last-child { font-weight: 600; }


/* ============================================================================
   7) HORARIOS, MAPA Y FOOTER
   Qué es: el cierre de la página con la información de siempre.
   Función: que el cliente sepa cuándo abren y cómo llegar.
   Ojo con el mapa: el iframe de Google instala cookies, así que NO se carga
   hasta que el visitante acepte en el banner. Hasta entonces se ve un aviso
   con botón. Esto lo exige la Resolución 32.126 de 2022 de la SIC.
   ========================================================================== */
.bloque-2 { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }

.tabla-horario { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-horario th { text-align: left; font-weight: 600; color: var(--texto-suave); }
.tabla-horario th, .tabla-horario td {
  padding: 11px 0; border-bottom: 1px solid var(--linea);
}
.tabla-horario td:last-child { text-align: right; font-weight: 600; }
.tabla-horario tr.hoy th, .tabla-horario tr.hoy td { color: var(--amarillo); }

.mapa-caja {
  position: relative; width: 100%; aspect-ratio: 16 / 11;
  background: var(--negro-sup); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.mapa-caja iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa-aviso {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; text-align: center; padding: 24px;
}
.mapa-aviso p { color: var(--texto-suave); font-size: .89rem; max-width: 34ch; margin: 0; }

.pie {
  border-top: 1px solid var(--linea);
  background: var(--negro);
  padding: 40px 0 26px;
}
.pie__grid { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 26px; }
.pie h3 { font-size: .82rem; letter-spacing: .12em; color: var(--texto-suave); margin-bottom: .9em; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; font-size: .9rem; color: var(--texto-suave); }
.pie a { color: var(--texto-suave); text-decoration: none; }
@media (hover: hover) { .pie a:hover { color: var(--blanco); text-decoration: underline; } }
.pie__legales { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .8rem; }
.pie__copy {
  border-top: 1px solid var(--linea); padding-top: 20px;
  text-align: center; font-size: .8rem; color: var(--texto-tenue);
}

/* Botón de texto para reabrir el panel de cookies desde el footer. */
.btn-texto {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--texto-suave); font: inherit; font-size: .8rem; text-decoration: underline;
}

/* --- Crédito de JX Company (formato exacto obligatorio, no modificar) --- */
.footer-dev {
  width: 100%;
  text-align: center;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .62rem;
  margin: 16px 0 0;
  text-transform: uppercase;
}
.footer-dev-jx,
.footer-dev-co {
  background: linear-gradient(180deg, #E8C86A, #C9A84C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-dev-txt {
  background: linear-gradient(180deg, #F0F0F0, #A8A8A8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Botón flotante de WhatsApp (uno solo en toda la página) --- */
.wa-float {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 70;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: var(--sombra);
  transition: transform .22s ease, bottom .26s ease;
}
/* Cuando el carrito está visible, el botón sube para no quedar encima.
   La clase la pone js/script.js al agregar el primer producto. */
body.carrito-visible .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (hover: hover) { .wa-float:hover { transform: scale(1.06); } }

/* --- Banner de cookies ---
   ⚠ PUNTO DELICADO (detectado probando en celular): cuando el cliente ya tenía
   productos en el carrito, el banner quedaba justo encima de la barra del
   carrito y TAPABA el botón "Hacer el pedido". El visitante no podía comprar.
   Solución: si el carrito está visible, el banner se sube por encima de él, y
   mientras el banner está en pantalla se oculta el botón flotante de WhatsApp
   para que no queden tres cosas amontonadas abajo. No quitar estas dos reglas. */
.cookies {
  position: fixed; inset: auto 12px 12px; z-index: 95;
  max-width: 560px; margin-inline: auto;
  background: var(--negro-sup-2); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  display: none;
}
.cookies.visible { display: block; }
/* El carrito ocupa unos 70px de alto: el banner se sube para dejarlo libre. */
body.carrito-visible .cookies { bottom: calc(88px + env(safe-area-inset-bottom)); }
/* Mientras se decide lo de las cookies, el botón de WhatsApp se quita de en medio. */
body.cookies-visibles .wa-float { display: none; }
.cookies p { font-size: .87rem; color: var(--texto-suave); margin-bottom: 14px; }
.cookies__btns { display: flex; gap: 10px; }
/* Aceptar y Rechazar con EXACTAMENTE el mismo peso visual: lo exige la
   Resolución 32.126 de 2022 de la SIC. No agrandar ni resaltar "Aceptar". */
.cookies__btns .btn { flex: 1; min-height: 48px; font-size: .92rem; }


/* ============================================================================
   8) PANEL DEL VENDEDOR (panel.html)
   Qué es: la pantalla donde el vendedor ve los pedidos que entran.
   Función: reemplazar la libreta del mostrador. Turno 1 arriba, los siguientes
   debajo, con nombre, teléfono, hora exacta y todo el detalle.
   Depende de: js/panel.js (lo llena) y js/almacen.js (trae los datos).
   Diseño: el MISMO del sitio público — mismos colores, tipografías y tarjetas.
   ========================================================================== */
.panel-cuerpo { padding-top: calc(var(--alto-barra) + env(safe-area-inset-top) + 20px); }

/* Pantalla de entrada con la clave */
.acceso { max-width: 420px; margin: 8vh auto; padding-inline: 20px; text-align: center; }
.acceso img { width: 120px; margin: 0 auto 20px; border-radius: var(--radio); }
.acceso form { text-align: left; }

/* Pestañas activos / historial */
.pestanas { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pestana {
  min-height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--negro-sup); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); color: var(--texto-suave);
  font-weight: 600; font-size: .92rem; cursor: pointer;
}
.pestana.activa { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.pestana__n {
  background: rgba(255,255,255,.18); border-radius: var(--radio-full);
  padding: 1px 8px; font-size: .78rem; font-variant-numeric: tabular-nums;
}

/* Tarjeta de pedido */
.pedido {
  background: var(--negro-sup); border: 1px solid var(--linea);
  border-left: 4px solid var(--rojo);
  border-radius: var(--radio); padding: 16px 17px; margin-bottom: 13px;
}
.pedido.entregado { border-left-color: var(--verde); opacity: .62; }
.pedido.viejo { border-left-color: var(--texto-tenue); }

.pedido__cab { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 12px; }
.pedido__turno {
  flex-shrink: 0; min-width: 60px; text-align: center;
  background: var(--negro); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm); padding: 7px 9px;
}
.pedido__turno b {
  display: block; font-family: var(--fuente-titulo); font-style: italic;
  font-size: 1.55rem; color: var(--amarillo); line-height: 1;
}
.pedido__turno span { font-size: .58rem; letter-spacing: .1em; color: var(--texto-tenue); text-transform: uppercase; }
.pedido__quien { min-width: 0; flex: 1; }
.pedido__quien h3 {
  margin: 0 0 3px; color: var(--blanco); font-size: 1.06rem;
  /* Excepción a los h3 del proyecto: el nombre del cliente se respeta tal cual
     lo escribió, sin pasarlo a mayúsculas. */
  text-transform: none;
}
.pedido__meta { font-size: .8rem; color: var(--texto-tenue); }
.pedido__tipo {
  flex-shrink: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 10px; border-radius: var(--radio-full);
  border: 1px solid var(--linea-fuerte); color: var(--texto-suave);
}
.pedido__tipo.domicilio { border-color: rgba(254,155,5,.5); color: var(--naranja); }

.pedido__items { list-style: none; margin: 0 0 12px; padding: 0; font-size: .9rem; }
.pedido__items li {
  display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--linea);
}
.pedido__items li b { color: var(--amarillo); min-width: 26px; }
.pedido__items li span:last-child { margin-left: auto; white-space: nowrap; color: var(--texto-suave); }

.pedido__extra {
  background: var(--negro); border-radius: var(--radio-sm);
  padding: 10px 12px; margin-bottom: 12px; font-size: .86rem;
}
.pedido__extra div { display: flex; gap: 10px; padding: 3px 0; }
.pedido__extra div span:first-child { color: var(--texto-tenue); min-width: 84px; flex-shrink: 0; }

.pedido__pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pedido__total {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: 1.2rem; color: var(--blanco); margin-right: auto;
}
.pedido__pie .btn { min-height: 44px; padding: 0 15px; font-size: .88rem; }

.vacio { text-align: center; color: var(--texto-tenue); padding: 46px 20px; }
.vacio strong { display: block; color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 6px; }

/* Aviso flotante del panel (pedido nuevo, error de conexión…).
   Sin parpadeos ni pulsos: aparece, se lee y se va. */
.aviso-flot {
  position: fixed; left: 50%; transform: translate(-50%, 20px);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 110;
  background: var(--negro-sup-2); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); padding: 13px 20px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--sombra-alta);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.aviso-flot.visible { opacity: 1; transform: translate(-50%, 0); }


/* ============================================================================
   9) PÁGINAS LEGALES, 404 Y RESPONSIVE
   ========================================================================== */

/* --- Páginas legales y 404: mismo diseño del sitio, nunca texto pelado --- */
.doc { padding-top: calc(var(--alto-barra) + env(safe-area-inset-top) + 40px); }
.doc__int { max-width: 760px; }
.doc h2 { font-size: clamp(1.2rem, 3.4vw, 1.5rem); margin-top: 2em; }
.doc h2:first-of-type { margin-top: 1.2em; }
.doc p, .doc li { color: var(--texto-suave); font-size: .95rem; }
.doc ul, .doc ol { padding-left: 20px; margin-bottom: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc__fecha { color: var(--texto-tenue); font-size: .84rem; }
.doc__aviso {
  background: var(--negro-sup); border: 1px solid var(--linea);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio); padding: 16px 18px; margin-bottom: 26px;
}
.doc__aviso p { margin: 0; font-size: .89rem; }

.error404 {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--alto-barra) + 40px) 20px 50px;
}
.error404 img { width: min(180px, 44vw); margin-bottom: 22px; border-radius: var(--radio); }
.error404__n {
  font-family: var(--fuente-titulo); font-style: italic; font-weight: 800;
  font-size: clamp(4rem, 20vw, 7rem); line-height: 1; color: var(--rojo); margin: 0;
}
.error404__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }


/* ----------------------------------------------------------------------------
   RESPONSIVE — revisado de pies a cabeza en todos los rangos exigidos.
   Se diseñó primero para móvil (todo lo de arriba es la versión de celular) y
   de aquí para abajo se va ampliando. Nunca al revés.
   -------------------------------------------------------------------------- */

/* Tablet pequeña en adelante: el menú pasa a dos columnas. */
@media (min-width: 600px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .pasos     { grid-template-columns: repeat(3, 1fr); }
  .modal     { align-items: center; padding: 20px; }
  .modal__caja { border-radius: var(--radio-lg); max-height: 88vh; }
}

/* Tablet y laptop: horarios y mapa lado a lado; footer en tres columnas. */
@media (min-width: 768px) {
  .bloque-2  { grid-template-columns: 1fr 1.25fr; gap: 34px; }
  .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
}

/* Escritorio: tres columnas de menú, que es donde el catálogo se lee mejor. */
@media (min-width: 1000px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Pantallas grandes y TV: se limita el ancho para que las líneas de texto no
   se estiren y sigan siendo cómodas de leer. */
@media (min-width: 1440px) {
  :root { --ancho-max: 1240px; }
  .portada__lema { font-size: 1.1rem; }
}

/* Teléfono pequeño (≤500px): se ajustan los tamaños que empiezan a apretarse. */
@media (max-width: 500px) {
  .barra__nombre  { font-size: .94rem; }
  .estado         { padding: 6px 11px; font-size: .73rem; }
  .plato          { padding: 15px; }
  .pedido__pie .btn { flex: 1; }
}

/* Gama baja (≤380px, tipo Redmi o Samsung de entrada): es donde de verdad se
   rompen las páginas. Se reduce lo justo para que NADA se salga ni se monte. */
@media (max-width: 380px) {
  :root { --alto-barra: 56px; }
  .barra__logo    { width: 32px; height: 32px; }
  .barra__nombre  { font-size: .86rem; }
  .estado         { padding: 5px 9px; font-size: .68rem; gap: 5px; }
  .portada__logo  { width: 62vw; }
  .plato__precio  { font-size: 1.05rem; }
  .carrito-barra__int { gap: 10px; }
  .carrito-barra .btn { padding: 0 15px; font-size: .92rem; }
  .opciones label { padding: 0 13px; font-size: .85rem; }
  .pedido__turno  { min-width: 52px; }
  .turno__datos div span:first-child { min-width: 74px; }
}

/* Pantallas muy bajas en horizontal (celular acostado): el modal necesita todo
   el alto disponible o el botón de confirmar queda fuera de la vista. */
@media (max-height: 520px) and (orientation: landscape) {
  .modal { align-items: flex-start; padding: 0; }
  .modal__caja { max-height: 100vh; border-radius: 0; }
}

/* Respeto a quien pidió menos movimiento en su sistema operativo.
   Obligatorio: hay personas a las que las animaciones les producen mareo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Impresión: el vendedor puede querer imprimir un pedido del panel.
   Se quita todo lo que no sirve en papel y se pasa a texto negro sobre blanco. */
@media print {
  .barra, .categorias, .carrito-barra, .wa-float, .cookies,
  .pestanas, .pedido__pie, .mapa-caja { display: none !important; }
  body { background: #fff; color: #000; }
  .pedido { border: 1px solid #999; break-inside: avoid; }
  .pedido__turno b, .plato__precio { color: #000; }
}