/*
=========================================================
PROYECTO: TAQUERÍA EL COMAL
DESARROLLADOR: LAPAZIMPRESION3D
ARCHIVO: estilos.css
=========================================================

DESCRIPCIÓN:
Controla la presentación visual de la página,
las tarjetas de productos, el menú interactivo,
el carrito flotante y la adaptación a pantallas.

ARCHIVOS RELACIONADOS:
- index.html: estructura HTML.
- app.js: funciones e interactividad.
- menu.json: productos y configuraciones.

REGLAS DE MANTENIMIENTO:
- Mantener los colores principales en :root.
- No cambiar nombres de clases sin revisar HTML y JS.
- Conservar el diseño adaptable.
- No eliminar reglas sin comprobar dónde se utilizan.
- Realizar modificaciones en la rama desarrollo.

=========================================================
*/


/* =====================================================
   SECCIÓN 1 — COLORES Y CONFIGURACIÓN GENERAL
   Variables de color y estilos base de la página.
   ===================================================== */

/* Colores principales */

:root {
  --rojo: #b63822;
  --amarillo: #f5b841;
  --crema: #fff6e7;
  --oscuro: #29211c;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--crema);
  color: var(--oscuro);
}

.regreso-demo {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--oscuro);
  padding-inline: clamp(12px, 3vw, 24px) 100px;
}

.regreso-demo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--amarillo);
  font-size: .875rem;
  text-underline-offset: .18em;
}

.regreso-demo a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#menu, #reservacion {
  scroll-margin-top: 52px;
}

/* =====================================================
   SECCIÓN 2 — ENCABEZADO PRINCIPAL
   Presentación de la identidad de Taquería El Comal.
   ===================================================== */
/* Encabezado principal */
header {
  position: relative;
  background: var(--oscuro);
  color: white;
  text-align: center;
  padding: 110px 20px 100px;
  border-bottom: 8px solid var(--amarillo);
}

.encabezado-fotos {
  position: absolute;
  inset: 0;
  background: url("imagenes/banner-el-comal.webp") center / cover no-repeat;
  pointer-events: none;
  filter: saturate(.18);
  transition: filter .35s ease;
}

#encabezado-negocio.en-horario .encabezado-fotos {
  filter: saturate(1);
}

.encabezado-fotos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(25, 17, 13, .20), rgba(25, 17, 13, .52) 34%,
    rgba(25, 17, 13, .52) 66%, rgba(25, 17, 13, .20)
  );
}

.encabezado-contenido {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .encabezado-fotos {
    background-position: 88% center;
  }

  .encabezado-fotos::after {
    background: rgba(25, 17, 13, .62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .encabezado-fotos {
    transition: none;
  }
}

header h1 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 20px 0;
  color: var(--amarillo);
  font-weight: 900;
}

.subtitulo {
  color: var(--amarillo);
  letter-spacing: 5px;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* =====================================================
   SECCIÓN 3 — BOTONES GENERALES
   Estilo del botón principal y su interacción.
   ===================================================== */
.boton {
  display: inline-block;
  background: var(--amarillo);
  color: var(--oscuro);
  padding: 16px 32px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 25px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.boton-reservacion {
  margin-left: 8px;
}

.boton:hover {
  background: #ffd06b;
  transform: translateY(-2px);
}

/* =====================================================
   SECCIÓN 4 — ESTRUCTURA DEL MENÚ
   Contenedor, títulos y cuadrícula de productos.
   ===================================================== */
/* Menú */
main {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 50px 30px;
}

/* Encabezado de la sección del menú */
#menu h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--rojo);
  font-weight: 800;
  margin-bottom: 10px;
}

#menu > p {
  font-size: 1.1rem;
  color: #705c4d;
  margin-top: 0;
}
#productos {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

/* =====================================================
   SECCIÓN 5 — TARJETAS Y FOTOGRAFÍAS
   Tarjetas, imágenes, nombres y precios.
   ===================================================== */
/* Tarjeta de producto */
.producto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: white;
  border-radius: 16px;
  padding: 15px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.producto:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Fotografías de los productos */
.producto-imagen {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.producto:hover .producto-imagen {
  transform: scale(1.025);
}

.producto h3 {
  margin-top: 0;
  color: var(--rojo);
}

.precio {
  color: var(--oscuro);
  font-size: 1.4rem;
  font-weight: bold;
}

/* =====================================================
   SECCIÓN 6 — PIE DE PÁGINA
   Estilos del pie de la página.
   ===================================================== */
/* Pie de página */
footer {
  background: var(--oscuro);
  color: white;
  text-align: center;
  padding: 25px;
}


/* =====================================================
   SECCIÓN 7 — DISEÑO ADAPTABLE
   Distribución del menú en teléfonos y tabletas.
   ===================================================== */
/* Adaptación a teléfonos */
@media (max-width: 600px) {
  header {
    padding: 65px 15px;
  }

  main {
    padding: 35px 15px;
  }

  #menu h2 {
    font-size: 1.9rem;
  }

  #productos {
    grid-template-columns: 1fr;
  }
}

/* Adaptación a tabletas */
@media (min-width: 601px) and (max-width: 900px) {
  #productos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =====================================================
   SECCIÓN 8 — NAVEGACIÓN POR CATEGORÍAS
   Botones de filtro y categoría activa.
   ===================================================== */
/* Navegación por categorías */
#categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
}

.categoria-boton {
  background: white;
  color: var(--oscuro);
  border: 2px solid var(--rojo);
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.categoria-boton:hover {
  background: var(--crema);
  transform: translateY(-2px);
}

.busqueda-menu {
  margin-top: 20px;
}

.busqueda-menu label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.busqueda-menu input {
  width: min(100%, 360px);
  padding: 12px;
  border: 1px solid #c9c2bb;
  border-radius: 8px;
  font: inherit;
}

#resultado-busqueda {
  margin: 8px 0 0;
}

#resultado-busqueda:empty {
  display: none;
}

/* Categoría seleccionada */
.categoria-boton.activo {
  background: var(--rojo);
  color: white;
}

/* Adaptación a teléfonos */
@media (max-width: 600px) {
  #categorias {
    gap: 8px;
  }

  .categoria-boton {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
}

/* =====================================================
   SECCIÓN 9 — SELECTORES DE CANTIDAD
   Controles y subtotal en cada tarjeta.
   ===================================================== */
/* Selector de cantidades */
.cantidad-controles {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: auto;
  padding-top: 15px;
}

.cantidad-controles button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: var(--rojo);
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
}

.cantidad-controles button:hover:not(:disabled) {
  background: #922c1a;
}

.cantidad-controles button:disabled {
  background: #c9c2bb;
  cursor: not-allowed;
}

.cantidad-controles span {
  min-width: 25px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Subtotal */
.subtotal {
  margin: 15px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e5ddd3;
  font-weight: bold;
  color: var(--oscuro);
}

/* Botón para agregar al pedido */
.agregar-pedido {
  width: 100%;
  background: var(--rojo);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px;
  margin-top: 15px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.agregar-pedido:hover:not(:disabled) {
  background: #922c1a;
}

.agregar-pedido:disabled {
  margin-top: auto;
  background: #705c4d;
  cursor: not-allowed;
}

.precio-anterior {
  margin: 0 0 8px;
  color: #705c4d;
}

#aviso-carrito {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--crema);
  line-height: 1.4;
}

/* Botón para eliminar productos del carrito */
.eliminar-producto {
  margin-left: 15px;
  padding: 7px 12px;
  background: transparent;
  color: var(--rojo);
  border: 1px solid var(--rojo);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.eliminar-producto:hover {
  background: var(--rojo);
  color: white;
}

/* =====================================================
   SECCIÓN 10 — CARRITO FLOTANTE Y PEDIDOS
   Acceso fijo, panel, controles, total y acciones del pedido.
   ===================================================== */
/* Acceso al carrito en el encabezado */
#abrir-carrito {
  position: fixed;
  z-index: 1000;
  top: 20px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rojo);
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 18px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}

#abrir-carrito:hover {
  background: #922c1a;
}

#carrito-contador {
  background: var(--amarillo);
  color: var(--oscuro);
  border-radius: 50%;
  min-width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  #abrir-carrito {
    top: 15px;
    right: 15px;
    padding: 9px 13px;
  }
}


/* Ocultar el carrito cuando está cerrado */
#carrito[hidden] {
  display: none;
}


/* Panel flotante del carrito */
#carrito {
  position: fixed;
  top: 80px;
  right: 25px;
  z-index: 999;
  width: min(380px, calc(100vw - 30px));
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  background: white;
  padding: 25px;
  border: 2px solid var(--amarillo);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* Adaptación a teléfonos */
@media (max-width: 600px) {
  #carrito {
    top: 70px;
    right: 15px;
    padding: 18px;
    max-height: calc(100dvh - 85px);
  }
}


/* Controles de cantidad dentro del carrito */
.carrito-cantidad {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px 10px 0;
}

.carrito-cantidad button {
  width: 32px;
  height: 32px;
  background: var(--rojo);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}

.carrito-cantidad button:hover:not(:disabled) {
  background: #922c1a;
}

.carrito-cantidad button:disabled {
  background: #c9c2bb;
  cursor: not-allowed;
}

.carrito-cantidad span {
  min-width: 20px;
  text-align: center;
  font-weight: bold;
}


/* Presentación de productos dentro del carrito */
#carrito-productos > p {
  background: var(--crema);
  padding: 15px;
  margin: 12px 0;
  border-radius: 12px;
  border: 1px solid #e5ddd3;
  line-height: 1.8;
}

/* Separación visual del total */
.carrito-resumen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid var(--amarillo);
  font-size: 1.2rem;
}

#carrito-total {
  color: var(--rojo);
  font-size: 1.4rem;
}


/* Botón para vaciar el carrito */
#vaciar-carrito {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px 18px;
  background: transparent;
  color: var(--rojo);
  border: 2px solid var(--rojo);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

#vaciar-carrito:hover {
  background: var(--rojo);
  color: white;
}

#vaciar-carrito:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 3px;
}


/* Botón de envío por WhatsApp */
#enviar-pedido {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  background: #25d366;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

#enviar-pedido:hover:not(:disabled) {
  background: #1da851;
}

#enviar-pedido:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* Aviso de demostración comercial */
.aviso-demo {
  background: #fff0cf;
  border-left: 4px solid var(--amarillo);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 20px 0;
}


/* Datos del cliente */
.datos-cliente {
  margin-top: 20px;
}

.datos-cliente label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.datos-cliente input,
.datos-cliente select,
.datos-cliente textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #c9c2bb;
  border-radius: 8px;
  font-size: 1rem;
}

.datos-cliente input + label {
  margin-top: 12px;
}

.datos-cliente select {
  background: white;
  color: var(--oscuro);
}

.datos-cliente .etiqueta-notas {
  margin-top: 12px;
}

.datos-cliente textarea {
  font-family: inherit;
  resize: vertical;
}

#horario-negocio {
  margin: 20px 0;
  padding: 10px 16px;
  border-left: 4px solid var(--amarillo);
  border-radius: 8px;
  background: white;
}

#horario-negocio p {
  margin: 4px 0;
}

#revision-pedido {
  width: min(480px, calc(100vw - 30px));
  max-height: calc(100dvh - 30px);
  padding: 20px;
  border: 2px solid var(--amarillo);
  border-radius: 16px;
  color: var(--oscuro);
}

#revision-pedido::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

#revision-titulo {
  margin-top: 0;
  color: var(--rojo);
}

#revision-resumen,
#revision-fuera-horario {
  padding: 12px;
  border-radius: 8px;
  background: var(--crema);
}

#revision-resumen {
  max-height: 36dvh;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.5;
}

.revision-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.revision-acciones button {
  flex: 1 1 165px;
  padding: 10px;
  border: 2px solid var(--rojo);
  border-radius: 8px;
  background: white;
  color: var(--rojo);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

#registro-pedido-estado:empty {
  display: none;
}

#registrar-pedido-demo {
  background: var(--rojo);
  color: white;
}

#registrar-pedido-demo:disabled {
  opacity: .65;
}

#continuar-whatsapp {
  border-color: #146c39;
  background: #146c39;
  color: white;
}

#aviso-entrega {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--crema);
  font-size: 0.95rem;
  line-height: 1.5;
}

#desglose-entrega { margin: 8px 0 0; }
#desglose-entrega > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
#desglose-entrega dd { margin: 0; font-weight: bold; }
#desglose-entrega > div:last-child { color: var(--rojo); font-weight: bold; }
#recoger-sin-cobertura {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rojo);
  border-radius: 8px;
  background: white;
  color: var(--rojo);
  font: inherit;
  cursor: pointer;
}

#datos-entrega {
  min-inline-size: 0;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

#datos-entrega legend {
  margin-bottom: 10px;
  padding: 0;
  color: var(--rojo);
  font-weight: bold;
}


/* =====================================================
   SECCIÓN 11 — INGREDIENTES Y EXTRAS
   Casillas y opciones de personalización por producto.
   ===================================================== */
/* Personalización de productos */
.personalizacion {
  background: #fff8ed;
  border: 1px solid #e5ddd3;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
}

.personalizacion h4 {
  color: var(--rojo);
  font-size: 1rem;
  margin: 10px 0;
}

.personalizacion h4:first-child {
  margin-top: 0;
}

.personalizacion label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.95rem;
  cursor: pointer;
}

.personalizacion input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rojo);
  cursor: pointer;
  flex-shrink: 0;
}


/* Ingredientes obligatorios */
.ingrediente-obligatorio {
  color: #705c4d;
  font-weight: bold;
}

.ingrediente-obligatorio::after {
  content: "(obligatorio)";
  font-size: 0.8rem;
  font-weight: normal;
  color: #80766d;
}



/* Solicitud de reservación */
#reservacion {
  max-width: 720px;
  margin: 40px auto 0;
  padding: clamp(16px, 4vw, 28px);
  border-radius: 12px;
  background: white;
}

#reservacion > summary {
  color: var(--rojo);
  cursor: pointer;
}

#reservacion > summary:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 4px;
  border-radius: 4px;
}

#reservacion > summary h2 {
  display: inline;
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

#formulario-reservacion {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#formulario-reservacion label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

#formulario-reservacion input,
#formulario-reservacion select,
#formulario-reservacion textarea {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #c9c2bb;
  border-radius: 8px;
  font: inherit;
}

#formulario-reservacion textarea {
  resize: vertical;
}

#reserva-horarios-estado {
  display: block;
  margin-top: 6px;
}

#formulario-reservacion .boton:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.reserva-ancho-completo {
  grid-column: 1 / -1;
}

#reserva-error {
  margin: 0;
  color: #9d2e1c;
}

#formulario-reservacion .boton {
  justify-self: start;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

@media (max-width: 480px) {
  #formulario-reservacion {
    grid-template-columns: 1fr;
  }

  .boton-reservacion {
    margin-left: 0;
  }
}
.acceso-seguimiento {
  margin: 20px 0;
  padding: 14px 18px;
  border: 2px solid var(--rojo);
  border-radius: 10px;
  background: white;
}
.acceso-seguimiento a { color: var(--rojo); font-weight: bold; }
#aviso-mesa-texto { margin: 0 0 8px; }
.salir-mesa { color: var(--rojo); font-weight: bold; }
#contacto-negocio {
  max-width: 720px;
  margin: 24px auto 0;
  padding: clamp(16px, 4vw, 28px);
  border-radius: 12px;
  background: white;
}
#contacto-negocio h2, #contacto-negocio a { color: var(--rojo); }
#direccion-negocio { white-space: pre-line; overflow-wrap: anywhere; }
#nombre-negocio { text-transform: uppercase; }