* {
  /* Elimina el recuadro gris/azul al tocar en iOS/Android */
  -webkit-tap-highlight-color: transparent;
  
  /* Evita que el texto se pueda seleccionar con el ratón o el dedo */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* =========================================
   POLISH: ESTÉTICA KIOSKO NATIVO
   ========================================= */

/* 1. Ocultar barras de scroll (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    display: none;
}

:root {
    background-color:var(--kiosk-bg); /* Pon el color HEX real, no la variable, por seguridad */
}

html {
    background-color: var(--kiosk-bg) !important; 
    height: 100%;
}

body {
    background-color: var(--kiosk-bg) !important;
    min-height: 100%;
}

/* 2. Ocultar barras de scroll (Firefox) */
* {
    scrollbar-width: none;
}

/* 3. Deshabilitar selección de texto (Para que no salga el cursor de texto azul) */
body {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent; /* Quita el flash azul al tocar botones en Android/Chrome */
    background-color: var(--kiosk-bg) !important;
  }

/* Opcional pero recomendado: permite la selección en campos de texto */
input, textarea {
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
}

button:active, 
.menu-item:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* :root es donde definimos las variables CSS globales */
:root {
    /* Tema de colores */
    --primary-color: #062829;
    --secondary-color: #a80022;
    --background-color: #FFF;
    --font-family: 'Roboto', sans-serif;
    --modal-header-bg: #f0f0f0;
    --modal-footer-bg: #f0f0f0;
    --modal-bg: #FFF;
    --modal-border-color: #ccc;
    --category-bg: #F5F5F5;
    
    /* Layout y Dimensiones */
    --footer-height: 120px;
    
    /* Tamaños de tarjetas y componentes */
    --card-width: 320px;
    --card-height: 520px;
    --card-image-height: 315px;
    --max-title-length: 150ch; /* Usar 'ch' para caracteres es semántico */
    
    --subcategory-card-width: 280px;
    --subcategory-card-height: 300px;
    
    --category-card-width: 140px;
    --category-card-height: 140px;
    
    --addin-image-size: 80px;
    --allergen-image-size: 24px; /* Aumentado para mejor visibilidad */
    
    --modal-max-height: 80vh;
}

/* ─── Global ─────────────────────────────────────────────────────────────────── */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 11 / Edge Legacy */
}
*::-webkit-scrollbar {
  display: none;                /* WebKit/Blink */
}

html {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  touch-action: pan-x pan-y;
  -ms-touch-action: pan-x pan-y;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--kiosk-bg) !important;
}

/* ─── Navegación de categorías ──────────────────────────────────────────────── */
nav {
  background-color: var(--primary-color);
  padding: 10px;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.category-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 8px;
}

/* ─── Contenido principal ───────────────────────────────────────────────────── */
main {
  padding: 20px;
  padding-top: 70px;
  padding-bottom: 70px;
  min-height: calc(100vh - 140px);
}


/* ─── Tarjeta de producto ───────────────────────────────────────────────────── */
.menu-item {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  width: 250px;               /* coincide con CARD_WIDTH */
  text-align: center;
  padding: 15px;
  box-shadow: 0 0 14px rgba(143,143,143,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100% !important;
}

/* Imagen del producto */
.menu-item img {
    width: 100%;
    height: var(--card-image-height);
    object-fit: cover;
    border-radius: 4px;
}

/* Título */
.menu-item h3 {
  margin: 10px 0;
  font-size: 1.4em;
  color: var(--primary-color);
  line-height: 1.2;
}

/* Precio */
.menu-item p {
  font-size: 1.7em;
}

/* Botón “Añadir” */
.menu-item button {
  background-color: var(--primary-color);
  height: 3.7vh;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 1.5em;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 10px;
}


/* ─── Iconos de alérgenos ────────────────────────────────────────────────────── */
.product-allergens {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0rem 0 0 0;
  padding: 0;
}


/* ─── Modal genérico ────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  overflow-y: auto;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  width: 90%;
  max-width: 600px;
  margin: 5% auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.modal-header {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2 {
  margin: 0;
  font-size: 1.5em;
}
.close-modal {
  background: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
}
.modal-body {
  padding: 1rem;
}

#product-detail-modal #detail-img {
    height: auto;
    max-height: 98%;
    object-fit: cover; 
    background: white;
}

.detail-modal-visual,.detail-img{
  width: 400px !important;
  height: 400px !important;
}


#product-detail-modal #detail-img {
    height: 30%;
    position: center;
    width: 100%;
}

#detail-img {
    position: center !important;
    height: 350px; /* Altura fija para la imagen principal */
    object-fit: cover;
    display: flex !important;
    align-items: center !important;
}

.product-detail-img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.product-detail-price {
  font-size: 1.2em;
  margin: 1rem 0;
  font-weight: bold;
}
.modal-footer {
  padding: 1rem;
  border-top: 1px solid #FFF;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.btn-confirm {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-secondary {
  background: #eee;
  color: #333;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
}


/* ─── Subcategorías ────────────────────────────────────────────────────────── */
.subcategories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.subcategory-item {
  text-align: center;
  cursor: pointer;
}
.subcategory-image {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}
.subcategory-item span {
  font-size: 1.4em;
  color: var(--primary-color);
}

/* ─── Cards de añadidos y formatos ──────────────────────────────────────────── */
.addin-card-label,
.menu-group-card-label,
.sale-format-card-label {
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  margin: 5px;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, transform 0.2s, box-shadow 0.2s;
}

.addin-card-label.selected,
.menu-group-card-label.selected,
.sale-format-card-label.selected {
  border-color: var(--primary-color);
  background-color: #f5f5f5;
}

/* ─── Sticky footer con mini‐preview y carrito ─────────────────────────────── */
.footer-sticker {
  position: absolute; /* Lo fija en la pantalla */
  bottom: 0;
  background-color: var(--back-color);
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  z-index: 1000;
  left: 0;
  width: 100%;
  display: flex; /* Aseguramos que sea visible por defecto */
  align-items: center;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}
.last-product {
  display: flex;
  align-items: center;
}
.last-product-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
}
.last-product-info {
  display: flex;
  flex-direction: column;
}
.last-product-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.last-product-description {
  margin: 0;
  font-size: 12px;
  color: #666;
}
.cart-button-container button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.card-product-price{
  margin-left: -233px;
  font-size: 1.2vh;
}


body.modal-open {
  overflow: hidden;
}

/* Fondo oscuro */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* El backdrop semitransparente */
.modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

/* Contenido del modal centrado */
.modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  margin: 5% auto;
  background: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header, body y footer */
.modal-header, .modal-footer {
  padding: 1rem;
  background: #FFF;
}

.modal-body {
  padding: 1rem;
  overflow-y: auto;
  flex: 1;
}

/* Opciones de formato/addin */
.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  cursor: pointer;
}
.option-item input {
  margin-right: 0.5rem;
}
.option-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.option-label {
  flex: 1;
}

/* Imagen grande en la cabecera */
.addin-product-img {
    width: auto;
    max-height: 400px;
    object-fit: contain;
    margin-bottom: 12px;
    border-radius: 20px !important;
    align-items: center;
    margin: auto;
    display: flex;
}

.addin-grid {
  display: grid;
  gap: 1rem; /* espacio entre tarjetas */
  /* por defecto 3 columnas iguales */
  grid-template-columns: repeat(3, 1fr);
}


/* Tarjeta de addin */
.addin-card {
  position: relative;
  width: 120px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s;
}


/* Imagen del addin */
.addin-card-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* Nombre y precio */
.addin-card-name {
  font-size: 0.9em;
  margin: 4px 0;
}
.addin-card-price {
  font-size: 0.8em;
  color: #555;
}

/* Contador */
.count-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.75em;
}

/* ── SUBMENU ADDINS FULLSCREEN ──────────────────────────────────────────────── */
#sale-modal .modal-backdrop{
  background-color: white !important;
}

/* 1) El modal-content ocupa TODO el viewport */
#addin-modal .modal-content.addin-modal-content {
  position: fixed !important;
  top:      0 !important;
  left:     0 !important;
  width:    100vw !important;
  height:   100vh !important;
  margin:   0 !important;
  padding:  2rem 1rem 0 1rem !important; /* sólo padding arriba */
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  z-index:   10000 !important;
  background-color: white !important;
}

/* 2) Backdrop transparente */
#addin-modal .modal-backdrop {
  background: white !important;
}

/* ── HEADER ─────────────────────────────────────────────────────────────────── */

/* Ajuste de header sin huecos */
#addin-modal .addin-modal-header {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
  background-color: transparent !important;
}

/* “X” pegada al borde */
#addin-modal .btn-close-large {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  background-color: none !important;
}

/* Título intenso y pegado */
#addin-modal .addin-header-title {
  margin-left: 1rem !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  color: var(--primary-color) !important;
}

/* ── BODY ───────────────────────────────────────────────────────────────────── */

/* Sin márgenes laterales */
#addin-modal .addin-modal-body {
  padding: 0 0 1rem 0 !important;
  flex: 1 1 auto !important;
}

/* Imagen + descripción aprovechan todo el ancho */
#addin-modal .addin-info {
  display: flex !important;
  gap: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Imagen principal más grande */
#addin-modal .addin-product-img {
  width: 350px !important;
  height: 350px !important;
}

/* Título de sección “Añadidos” ajustado */
#addin-modal .addin-section-title {
  margin: 1rem 0 0.5rem 0 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #ddd !important;
  padding-bottom: 0.5rem !important;
}

/* ── GRID Y TARJETAS ────────────────────────────────────────────────────────── */

/* Grid sin padding lateral */
#addin-modal .addin-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tarjeta más grande para kiosco vertical */
#addin-modal .addin-card {
  width: 200px !important;
  padding: 1.5rem !important;
}
#addin-modal .addin-card-img {
  width: 120px !important;
  height: 120px !important;
}

/* ── FOOTER ─────────────────────────────────────────────────────────────────── */

/* Footer pegado al pie, sin hueco inferior */
#addin-modal .addin-modal-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  padding: 1rem 2rem !important;
  background: #fff !important;
}
#addin-modal .btn-back,
#addin-modal .btn-next {
  font-size: 1.5rem !important;
  padding: 1rem 2rem !important;
}

#addin-modal .modal{
  background-color: white !important;
}

/* ─── Tarjeta de producto (Menú) ──────────────────────────────────────────── */
.menu-item {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  width: 250px;               /* coincide con CARD_WIDTH */
  text-align: center;
  padding: 15px;
  box-shadow: 0 0 14px rgba(143, 143, 143, 0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

/* Imagen del producto */
.menu-item img {
  width: 200px;               /* CARD_IMAGE_WIDTH */
  height: 200px;              /* CARD_IMAGE_HEIGHT */
  object-fit: cover;
  border-radius: 8px;
}

/* Título */
.card-product-name {
  margin: 10px 0 5px;
  font-size: 1.4em;
  color: var(--primary-color);
  line-height: 1.2;
  text-align: left;
  font-weight: 700;
}

/* Precio */
.card-product-price {
  margin: 0 0 10px;
  font-size: 1.1em;
  color: #333;
  text-align: left;
}

/* Alérgenos: fila de iconos centrada */
.product-allergens {
  display: flex;
  justify-content: center;
}


/* ─── ESTILOS SOLO PARA TARJETAS DE MENÚ ─────────────────────────────────────── */
.menu-item.menu-type-menu {
  background-color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  width: 250px !important;
  padding: 15px !important;
  box-shadow: 0 0 14px rgba(143,143,143,0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
  cursor: pointer !important;
}


/* Imagen */
.menu-item.menu-type-menu .menu-item-image {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin: 0 auto 10px !important;
  display: block !important;
}

/* Título */
.menu-item.menu-type-menu .card-product-name {
  margin: 10px 0 5px !important;
  font-size: 1.4em !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

/* Precio */
.menu-item.menu-type-menu .card-product-price {
  margin: 0 0 10px !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-align: left !important;
}

/* Alergenos */
.menu-item.menu-type-menu .product-allergens {
  display: flex !important;
  justify-content: flex-start !important;
  margin-bottom: 10px !important;
}


/* Botón Añadir */
.menu-item.menu-type-menu button {
  background-color: var(--primary-color) !important;
  color: #fff  !important;
  border: none !important;
  border-radius: 5px !important;
  padding: 10px 20px !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.3s, transform 0.2s !important;
  margin-top: 10px !important;
}

/* Si la pantalla es más estrecha (< 1200px), pasar a 2 columnas */
/* ─── Grid centrado de añadidos ───────────────────────────────────────────── */
/* ─── Grid centrado 3 columnas fijas ───────────────────────────────────────── */
.addin-grid {
  display: grid;
  gap: 1rem;
  /* Tres columnas de 180px cada una (ajusta 180px al ancho que necesites) */
  grid-template-columns: repeat(3, 180px);
  justify-content: center;   /* centra todo el bloque de columnas */
  margin: 0 auto;
}

/* Para pantallas medias: 2 columnas */
@media (max-width: 1199px) {
  .addin-grid {
    grid-template-columns: repeat(2, 180px);
  }
}

/* Para móviles: 1 columna */
@media (max-width: 767px) {
  .addin-grid {
    grid-template-columns: 1fr;
  }
}

/* Asegura que cada tarjeta ocupe todo su espacio */
.addin-grid .addin-card {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Submenu (wizard de Menús) ─────────────────────────────────────────────── */

/* Hacemos el modal full-screen y limpio */
#submenu-modal .modal-content {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 2rem;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
}

/* Header con título grande y botón X a la derecha */
#submenu-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 2px solid #eee;
}
#submenu-modal .modal-header h2 {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--primary-color);
  margin: 0;
}
#submenu-modal .modal-header .close-btn {
  background: none;
  border: none;
  font-size: 2.5rem;
  font-weight: 900;
  cursor: pointer;
}

/* Cuerpo: título de grupo y grid de opciones */
#submenu-modal .modal-body {
  flex: 1;
  padding: 1.5rem 0;
  overflow-y: auto;
}
#submenu-modal #group-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Tarjeta de opción */
.submenu-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

/* Opción seleccionada */
.submenu-option.selected {
  border-color: var(--primary-color);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Imagen dentro de la tarjeta */
.submenu-option-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

/* Nombre de la opción */
.submenu-option-name {
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: #333;
}

/* Footer con botones grandes y pegados abajo */
#submenu-modal .modal-footer {
  padding: 1.5rem 0 0;
  border-top: 2px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
#submenu-modal .modal-footer .btn-secondary,
#submenu-modal .modal-footer .btn-confirm {
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1.5rem;
}
#submenu-modal .modal-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
}

/* --- Estilos para el Asistente de Añadidos (Addins Wizard) --- */

.addin-modal-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 2rem;
  background-color: #fff !important;
  border-radius: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.addin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
}

.addin-header-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--primary-color);
  margin-left: 1rem;
}

.btn-close-large {
  background: none;
  border: none;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.addin-modal-body {
  flex: 1;
  padding: 0 0 1rem 0;
  overflow: auto;
}

.addin-section-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 1rem 0 1.5rem 0;
  border-bottom: 2px solid #ddd;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#addin-role-counter {
  font-size: 1.5rem;
  color: #555;
  font-weight: 600;
}

.addin-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.addin-card {
  width: 200px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s, box-shadow 0.2s;
}



.addin-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}

.addin-card img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 auto 1rem auto;
}

.addin-card p:first-of-type {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.5rem 0;
  flex-grow: 1;
}

.addin-card p:last-of-type {
  font-size: 1rem;
  color: #555;
  margin-bottom: 0.5rem;
}

.count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}

.addin-modal-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.addin-modal-footer button {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 1rem 2rem;
}

/* --- Estilos para el Modal de Añadidos en Pantalla Completa --- */

/* Usamos el #id del modal para que esta regla sea más específica 
  y anule los estilos por defecto de .modal-content.
*/
#addin-modal .modal-content {
    width: 100vw;          /* Ocupa el 100% del ancho de la pantalla */
    height: 100vh;         /* Ocupa el 100% de la altura de la pantalla */
    max-width: 100%;       /* Anula cualquier max-width anterior */
    max-height: 100%;      /* Anula cualquier max-height anterior */
    border-radius: 0;      /* Quita los bordes redondeados para un look de pantalla completa */
    margin: 0;             /* Quita cualquier margen que pueda centrarlo */
    padding: 2rem;         /* Añade un poco de espacio interior para que no se pegue a los bordes */
    box-sizing: border-box; /* Asegura que el padding no haga que el div se desborde */
}

/* --- Estilos para el nuevo Modal del Carrito --- */

/* Contenedor principal del modal del carrito (pantalla completa) */
#cart-modal .cart-modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa; /* Un fondo gris muy claro */
}

/* Cabecera del carrito */
.cart-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cart-modal-header h2 {
    margin: 0;
    font-size: 2.7rem;
    font-weight: 700;
}

.cart-modal-header .close-modal {
    font-size: 2.5rem;
    font-weight: 300;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
}

/* Cuerpo del carrito (lista de productos) */
.cart-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-empty-message {
    text-align: center;
    font-size: 1.2rem;
    color: #6c757d;
    margin-top: 5rem;
}

/* Cada producto en el carrito */
.cart-modal-item {
    display: flex;
    align-items: flex-start; /* <--- VALOR CORREGIDO */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cart-item-quantity {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #005a87);
    margin-right: 1rem;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.cart-item-sublist {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.cart-item-price {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 60px;
    text-align: right;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 1rem;
    padding: 0.5rem;
}

/* Pie de página del carrito */
.cart-modal-footer {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

.cart-total-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cart-total-container span:first-child {
    font-size: 1.2rem;
    font-weight: 600;
    color: #495057;
}

.cart-total-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
}

.btn-confirm-cart {
    width: 100%;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--primary-color, #005a87);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-confirm-cart:disabled {
    background-color: #ced4da;
    cursor: not-allowed;
}



/* --- Estilos para el Nuevo Footer --- */

.footer-sticker {
    position: fixed;
    margin-top: 5px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1 2rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    z-index: 100;
}

.footer-product-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#footer-product-text {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}

.footer-cart-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--primary-color, #062829);
    color: white;
    border: none;
    border-radius: 50px; /* Bordes muy redondeados */
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cart-modal-header .close-modal-btn {
    font-size: 4rem;
    font-weight: 300;
    border: none;
    background-color: transparent !important;
    cursor: pointer;
   }

/* --- Estilos para la imagen del producto en el carrito --- */

.cart-item-image {
  width: 50px;
  height: 50px;
  border-radius: 8px; /* Bordes ligeramente redondeados */
  object-fit: cover; /* Asegura que la imagen no se deforme */
  margin-right: 1rem;
  border: 1px solid #f0f0f0;
}

/* --- ESTILOS PARA EL NUEVO MODAL DE DETALLE (PANTALLA COMPLETA) --- */

#product-detail-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    display: flex; /* Cambiamos a flex para controlar el layout interno */
    flex-direction: column; /* Por defecto, para que el footer se vaya abajo */
    overflow: hidden;
}

#product-detail-modal .detail-modal-container {
    display: flex;
    flex-direction: row; /* En pantallas grandes, las columnas van una al lado de la otra */
    flex-grow: 1; /* Hace que ocupe todo el espacio disponible */
    overflow: hidden;
}

/* Columna Izquierda (Visual) */
.detail-modal-visual {
    width: 50%; /* Ocupa la mitad de la pantalla */
    height: 100%;
    background-color: #fff; /* Un fondo sutil para la imagen */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}


/* Columna Derecha (Información) */
.detail-modal-info {
    width: 50%;
    padding: 3rem;
    box-sizing: border-box;
    overflow-y: auto; /* Permite scroll si el contenido es muy largo */
    display: flex;
    flex-direction: column;
}

.detail-modal-info h2 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    line-height: 1.1;
    color: #1a1a1a;
}

.detail-modal-info p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 2rem;
}

.detail-options-section {
    margin-bottom: 2rem;
}

.detail-options-section h4 {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 0.75rem;
}

.detail-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.detail-option-tag {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
}

.detail-option-tag strong {
    color: var(--primary-color, #062829);
}

/* Footer del Modal */
#product-detail-modal .modal-footer {
    margin-top: auto; /* Empuja el footer siempre hacia abajo */
    padding: 2rem 0 0 0; /* Espacio por encima de los botones */
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 1rem;
}

#product-detail-modal .modal-footer .btn-secondary,
#product-detail-modal .modal-footer .btn-confirm {
    flex-grow: 1;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* --- Responsive: Diseño para pantallas pequeñas (móviles/tablets en vertical) --- */
@media (max-width: 800px) {
    #product-detail-modal .detail-modal-container {
        flex-direction: column; /* Pone la info debajo de la foto */
        overflow-y: auto;
    }

    .detail-modal-visual,
    .detail-modal-info {
        width: 100%;
        height: auto;
    }

    .detail-modal-visual {
        padding: 1rem;
        min-height: 300px;
    }

    .detail-modal-info {
        padding: 1.5rem;
    }

    .detail-modal-info h2 {
        font-size: 2rem;
    }
}

/* Estilo para la sub-lista de añadidos dentro de un producto de menú en el carrito */
.cart-item-sub-sublist {
  list-style-type: none;
  padding-left: 1.5rem; /* Indentación para que se vea anidado */
  margin: 0.25rem 0 0.75rem 0;
  font-size: 0.85rem;
  color: #555;
}

/* --- ESTILOS PARA EL NUEVO MODAL DE DETALLE INTERACTIVO --- */

#product-detail-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Fondo general más suave */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Contenedor para la información superior (foto + desc) */
.detail-modal-header-info {
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

/* Columna de la imagen */
.detail-modal-visual {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}


/* Columna de la información */
.detail-modal-info {
    flex-grow: 1;
}

.detail-modal-info h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

.detail-modal-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Contenedor para las pestañas y las opciones */
.detail-options-container {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
}

/* Barra de navegación de pestañas */
.detail-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.detail-tab-button {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
}

.detail-tab-button.active {
    border-bottom-color: var(--primary-color, #062829);
    color: var(--primary-color, #062829);
}

/* Footer del modal con los botones de acción */
#product-detail-modal .modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0; /* Evita que se encoja */
    display: flex;
    gap: 1rem;
    margin-top: auto; /* Empuja el footer siempre hacia abajo */
}

#product-detail-modal .modal-footer .btn-secondary,
#product-detail-modal .modal-footer .btn-confirm {
    flex-grow: 1;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* --- Responsive: Ajustes para pantallas más pequeñas --- */
@media (max-width: 800px) {
    .detail-modal-header-info {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-modal-visual {
        width: 100%;
        height: 250px; /* Altura fija para la imagen en móvil */
    }

    .detail-modal-info h2 {
        font-size: 2rem;
    }
}

/* --- Estilos para el nuevo control de cantidad (Stepper) --- */

.quantity-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.quantity-stepper button {
    background-color: var(--light-gray);
    border: 1px solid var(--medium-gray);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s, transform 0.1s;
}

.quantity-stepper button:active {
    transform: scale(0.95);
}

.quantity-stepper .count-display {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 25px;
    text-align: center;
}

/* Hacemos que la tarjeta de añadido ya no tenga el contador en la esquina */
.addin-product-card .count-badge {
    display: none;
}

/* --- ESTILOS PARA MODAL DE DETALLE (LAYOUT VERTICAL PARA KIOSKO) --- */

#product-detail-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Fondo general */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#product-detail-modal .btn-close-large {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
}

.detail-modal-body {
    flex-grow: 1;
    overflow-y: auto;
}



.detail-modal-text-content {
    background-color: #ffffff;
    padding: 1.5rem;
}

.detail-modal-text-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

.detail-modal-text-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}

.detail-options-container {
    padding: 1.5rem;
    margin-top: 1rem;
}

.detail-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    overflow-x: auto; /* Permite scroll horizontal si hay muchas pestañas */
}

.detail-tab-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
    white-space: nowrap; /* Evita que el texto del botón se parta */
}

.detail-tab-button.active {
    border-bottom-color: var(--primary-color, #062829);
    color: var(--primary-color, #062829);
}

#product-detail-modal .modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
}

#product-detail-modal .btn-confirm {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* Estilo para cada sección de añadidos en la vista de una sola página */
.addin-role-section {
    margin-bottom: 2.5rem;
}

/* --- ESTILOS UNIFICADOS PARA MODALES DE PANTALLA COMPLETA (FICHA Y AÑADIDOS) --- */

#product-detail-modal .modal-content,
#addin-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Fondo general */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#product-detail-modal .btn-close-large,
#addin-modal .btn-close-large {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
}

.detail-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

/* Cabecera visual con foto y texto */
.detail-modal-header-info {
    padding-bottom: 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.detail-modal-header-info img {
    height: 40%;
    position: center;
    width: 100%;
}
.detail-modal-header-info img {
    height: auto;
    max-height: 98%;
    object-fit: cover;
    background: white;
}
.detail-modal-header-info > img {
    position: center !important;
    height: 30%;
    object-fit: cover;
    display: flex !important;
    align-items: center !important;
}

.detail-modal-header-info h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

.detail-modal-header-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}

/* Contenedor para las pestañas y las opciones */
.detail-options-container {
    padding: 1.5rem;
}

/* Barra de Pestañas */
.detail-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    overflow-x: auto;
}

.detail-tab-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
    white-space: nowrap;
}

.detail-tab-button.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}


/* Control de cantidad (+/-) */
.quantity-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.quantity-stepper button {

    color: var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s, transform 0.1s;
}

.quantity-stepper button:active {
    transform: scale(0.95);
}

.quantity-stepper .count-display {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 25px;
    text-align: center;
}

/* Footer del modal */
.modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
    margin-top: auto;
}

.modal-footer .btn-confirm {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    flex-grow: 1;
}

/* --- ESTILOS UNIFICADOS PARA MODALES DE PANTALLA COMPLETA (FICHA Y AÑADIDOS) --- */

#product-detail-modal .modal-content,
#addin-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa; /* Fondo general */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#product-detail-modal .btn-close-large,
#addin-modal .btn-close-large {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
}

.detail-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

/* Cabecera visual con foto y texto */
.detail-modal-header-info {
    padding-bottom: 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.detail-modal-header-info img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.detail-modal-header-info h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

.detail-modal-header-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
}

/* Contenedor para las pestañas y las opciones */
.detail-options-container {
    padding: 1.5rem;
}

/* Barra de Pestañas */
.detail-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    overflow-x: auto;
}

.detail-tab-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
    white-space: nowrap;
}

.detail-tab-button.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}


/* Control de cantidad (+/-) */
.quantity-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.quantity-stepper button {
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    color: var(--text-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s, transform 0.1s;
}

.quantity-stepper button:active {
    transform: scale(0.95);
}

.quantity-stepper .count-display {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 25px;
    text-align: center;
}

/* Footer del modal */
.modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
    margin-top: auto;
}

.modal-footer .btn-confirm {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* PUTA DESDE AQUI */

.detail-modal-body #detail-img {
    height: auto;
    max-height: 98%;
    object-fit: cover; 
    background: white;
}

.detail-modal-visual,.detail-img{
  width: 400px !important;
  height: 400px !important;
}

#addin-modal #detail-img {
    height: 30%;
    position: center;
    width: 100%;
}
#addin-modal #detail-img {
    height: auto;
    max-height: 98%;
    object-fit: cover;
    background: white;
}
.detail-modal-body #detail-img {
    height: auto;
    max-height: 98%;
    object-fit: cover;
    background: white;
}

#addin-img {
    position: center !important;
    height: 30%; /* Altura fija para la imagen principal */
    object-fit: cover;
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

#product-detail-modal .btn-close-large, #addin-modal .btn-close-large{
  position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    width: 65px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem !important;
    border: none;
    cursor: pointer;
    font-weight: 300 !important;
    line-height: 1 !important;
}


/* Estilos generales para todos los modales (opcional, si los tienes) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------- */
/* -- ESTILOS PARA EL MODAL DE SELECCIÓN (PANTALLA COMPLETA) -- */
/* -------------------------------------------------- */

.modal-fullscreen .modal-content {
  width: 100%;
  height: 100%;
  background-color: #f8f9fa; /* Un color de fondo ligeramente gris para distinguir */
  border-radius: 0; /* Sin bordes redondeados en pantalla completa */
  box-shadow: none; /* Sin sombra */
  display: flex;
  flex-direction: column;
}

/* Posición del botón de cerrar */
.modal-fullscreen .btn-close-large {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2.5rem;
  color: #333;
  z-index: 10; /* Asegura que esté por encima del contenido scrolleable */
}

/* Cuerpo del modal (con el scroll) */
.modal-fullscreen .detail-modal-body {
  flex-grow: 1; /* Ocupa el espacio disponible */
  overflow-y: auto; /* Scroll vertical si el contenido excede la pantalla */
  padding: 20px;
  padding-top: 70px; /* Espacio para que el botón de cerrar no se superponga */
}

/* Contenedor de la cabecera */
.modal-fullscreen .detail-modal-header-info {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.modal-fullscreen .detail-modal-header-info img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* Pie de página fijo en la parte inferior */
.modal-fullscreen .modal-footer {
  flex-shrink: 0; /* Evita que se encoja */
  padding: 15px 20px;
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Sombra sutil */
}

.modal-fullscreen .btn-confirm {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

/* --- ESTILOS UNIFICADOS PARA MODALES DE PANTALLA COMPLETA --- */

#product-detail-modal .modal-content,
#sale-format-modal .modal-content,
#addin-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#product-detail-modal .btn-close-large,
#sale-format-modal .btn-close-large,
#addin-modal .btn-close-large {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    background: rgba(0,0,0,0.3);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    z-index: 1000 !important;
}

.detail-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.detail-modal-header-info {
    padding-bottom: 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.detail-modal-header-info img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.detail-modal-header-info .detail-modal-info {
    padding: 1.5rem;
    width: 100%;
}

.detail-modal-header-info h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
}

.detail-modal-header-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

.options-section-header {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    padding: 0;
}

.detail-options-container {
    padding: 1.5rem;
}

.detail-tabs-container {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    overflow-x: auto;
}

.detail-tab-button {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: #6c757d;
    white-space: nowrap;
}

.detail-tab-button.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

.detail-options-content {
  display: grid;
  /* ¡LA CLAVE ESTÁ AQUÍ! */
  /* Crea tantas columnas como quepan, con un mínimo de 350px de ancho cada una */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px !important; 
  padding: 1rem;
}

.detail-option-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid #eee;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.detail-option-card.selected {
    border-color: 1px solid var(--primary-color);
    transform: scale(1.05);
}

.detail-option-card-name { font-weight: 600; min-height: 40px; }
.detail-option-card-price { font-weight: 700; }

.modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
    margin-top: auto;
}

.modal-footer .btn-confirm {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* Footer del modal */
.modal-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #ffffff;
    flex-shrink: 0;
    margin-top: auto;
    display: flex; /* Asegura que el contenedor use flexbox */
    gap: 1rem;     /* Añade un espacio entre los botones */
}

/* Regla general para botones de confirmación en footers */
.modal-footer .btn-confirm {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
}

/* --- NUEVO: Regla específica para los botones del modal de añadidos --- */
/* Hacemos que ambos botones (Atrás y Siguiente) ocupen el mismo espacio */
#addin-modal .modal-footer button {
    flex: 1; /* <-- La magia está aquí: ambos botones crecen por igual */
    padding: 1.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 12px;
}

/* --- ESTILOS PARA LA PANTALLA DE BIENVENIDA --- */

#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(10px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.welcome-container {
    background-color: #ffffff;
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 600px;
}

.welcome-container h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 2rem 0;
}

.welcome-options {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.welcome-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0;
}

.language-buttons,
.service-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.welcome-btn {
    flex: 1;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    border: 2px solid #eee;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s;
}

.welcome-btn.selected {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

/* Añade esto al final de tu src/css/styles.css */

/* Reemplaza los estilos anteriores de lang-btn en tu styles.css por estos */

.lang-btn {
  /* Estilos para el botón contenedor */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%; /* Hacemos el botón circular */
  
  /* Efectos para la selección */
  opacity: 0.6;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-btn.selected {
  /* Cuando un botón está seleccionado */
  opacity: 1;
  transform: scale(1.1); /* Lo hacemos un poco más grande */
}

/* === ESTILOS BIENVENIDA (DISEÑO MINIMALISTA BLANCO/NEGRO) === */

.welcome-fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Fondo general blanco */
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.welcome-fullscreen.exiting { opacity: 0; }

.welcome-top {
  padding: 40px 20px 20px 20px;
  text-align: center;
}
#welcome-title {
  font-size: 4em;
  font-weight: 700;
  color: #000000;
}

.welcome-middle {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-selection-container {
  display: flex;
  gap: 50px;
}
.service-option {
  cursor: pointer;
  text-align: center;
}

/* --- CAMBIOS PRINCIPALES AQUÍ --- */


/* Estilos para el SVG: ahora será negro */
.service-box svg {
  width: 60%;
  height: 60%;
  fill: #000000; /* SVG en color negro */
}
/* ---------------------------------- */

.service-option.selected .service-box {
  border-color: #a80022;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.service-option h2 {
  font-size: 3em;
  color: #000;
  margin-top: 20px;
}

.welcome-bottom {
  width: 100%;
  padding: 20px 0 0 0;
}

.language-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
}
.lang-btn {
  background: none; border: none; padding: 0;
  cursor: pointer; border-radius: 50%;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-flag {
  width: 100px; 
  height: 100px;
  border-radius: 50%; 
  object-fit: cover;
}

.lang-btn.selected {
  opacity: 1;
  transform: scale(1.1);
}

#confirm-welcome-btn {
    width: calc(100% - 2rem);
    margin: 1rem;
    margin-top: 2rem;
    padding: 1.25rem;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    background-color: var(--secondary-color, #a80022);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#confirm-welcome-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.start-prompt {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1.25rem;
    font-size: 3em;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    background-color: rgba(0,0,0,0.3);
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center; 
}

/* === ESTILOS PARA LA PANTALLA DE PAGO === */

.payment-fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.payment-content {
  text-align: center;
  color: white;
}

#payment-title {
  font-size: 3em;
  font-weight: 700;
  margin-bottom: 50px;
}

.payment-options-container {
  display: flex;
  gap: 50px;
}

.payment-option-box {
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.payment-svg-container {
  width: 120px;
  height: 120px;
}
.payment-svg-container img {
  width: 100%;
  height: 100%;
}

.payment-option-box h2 {
  font-size: 1.8em;
  color: #000;
  margin-top: 20px;
}

.btn-back-to-cart {
  margin-top: 50px;
  background: none;
  border: 2px solid black;
  color: black;
  padding: 10px 30px;
  font-size: 1.2em;
  border-radius: 10px;
  cursor: pointer;
}

/* === ESTILOS PARA SCREENSAVER Y TIMEOUTS === */


/* 1. EL PUTO SLIDER SE QUEDA QUIETO SI SOLO HAY UNO */
#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
    overflow: hidden;
}

.screensaver-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.screensaver-slide:nth-child(2) { animation-delay: 5s; }
.screensaver-slide:nth-child(3) { animation-delay: 10s; }

@keyframes fadeSlides {
    0% { opacity: 1; }
    30% { opacity: 1; }
    33% { opacity: 0; }
    97% { opacity: 0; }
    100% { opacity: 1; }
}

/* Si solo hay un slide, se muestra fijo y sin animación */
.screensaver-slide:only-child {
    opacity: 1;
}

/* 2. LOS PUTOS BOTONES DEL CARRITO, AHORA GUAPOS */

/* Botón de Editar */
.btn-edit-item,  .btn-note-item {
    background: none;
    border: 1px solid #ccc;
    color: #555;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 5px; /* Pequeño margen superior */
}

.btn-edit-item .fas { /* Si usas FontAwesome para el icono de lápiz */
    margin-right: 0.4rem;
}

/* Contador de Cantidad (+/-) */
.quantity-stepper-cart {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-quantity-cart {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.2s;
}

.quantity-stepper-cart .count-display {
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

/* Modal de Confirmación */
.confirmation-message {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 2rem;
}
.confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.confirmation-buttons button {
  padding: 1rem 2rem;
  font-size: 1em;
}

/* Aparece cuando el footer principal es visible */
#footer-sticker:not([style*="display: none;"]) + .cancel-order-tab {
    right: 0;
}


#cancel-order-btn {
  position: fixed; /* Fijo en la pantalla */
  bottom:  15rem;
  right: -55px; /* Lo movemos hacia afuera para que solo se vea el borde */
  
  /* Dimensiones y transformación para ponerlo vertical */
  width: 120px;
  padding: 5;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: bottom right;

  /* Estilos visuales */
  color: black;
  border: 1px solid black;
  border-radius: 8px 8px 0 0; /* Bordes redondeados solo arriba */
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
  
  /* Animación suave */
  transition: right 0.3s ease;
}


/* 1. Añadimos padding al contenedor del modal */
.confirmation-modal .modal-content {
    padding: 2.5rem; /* Aumenta el espacio interior */
}

/* 2. Ajustamos los elementos internos */
.confirmation-message {
  font-size: 1.5em;
  text-align: center;
  margin: 0; /* Quitamos el margen para que el padding lo controle todo */
  margin-bottom: 2.5rem; /* Espacio entre el texto y los botones */
}
.confirmation-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.confirmation-buttons button {
  padding: 1rem 2rem;
  font-size: 1em;
}

/* === NUEVOS ESTILOS PARA WIZARDS DE MENÚ Y EXTRAS === */

.wizard-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 90vh; /* Ocupa casi toda la altura de la pantalla */
  width: 80vw; /* Y gran parte del ancho */
  max-width: 1200px;
  border-radius: 15px;
  overflow: hidden;
}

.wizard-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}

.wizard-header img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 20px;
}

.wizard-header-info h2 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
}

.wizard-header-info p {
  margin: 0;
  color: #6c757d;
}

.btn-close-wizard {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2em;
  background: none;
  border: none;
  cursor: pointer;
}

.wizard-body {
  display: flex;
  flex-grow: 1; /* Ocupa todo el espacio sobrante */
  overflow: hidden;
}

.wizard-steps {
  width: 150px;
  padding: 20px;
  border-right: 1px solid #dee2e6;
}

.wizard-step {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  opacity: 0.5;
}

.wizard-step span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-weight: bold;
}

.wizard-step p {
  margin: 0;
  font-weight: 500;
}

.wizard-step.active {
  opacity: 1;
}
.wizard-step.active span {
  background-color: var(--secondary-color, #a80022);
}

.wizard-step.completed span {
  background-color: #28a745; /* Verde de completado */
}

.wizard-step-content {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.wizard-step-content h3 {
  margin-bottom: 20px;
}
.wizard-step-content h3 small {
  color: #6c757d;
  font-weight: 400;
}

.wizard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  overflow-y: auto; /* Permite scroll si hay muchas opciones */
  padding-right: 10px;
}

/* Tarjetas para Menús (selección simple) */
.wizard-option-card {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;

}

.wizard-option-card.selected {
  border-color: var(--secondary-color, #a80022);
  background-color: #fff3f5;
}
.wizard-option-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}
.wizard-option-card p {
  font-weight: 600;
  margin: 0;
}
.wizard-option-card .checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
}
.wizard-option-card.selected .checkmark {
  background-color: var(--secondary-color, #a80022);
  border-color: var(--secondary-color, #a80022);
}

/* Tarjetas para Extras (con cantidad) */
.wizard-option-card-qty {
  display: flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 10px;
}
.wizard-option-card-qty img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 10px;
}
.wizard-option-card-qty .info {
  flex-grow: 1;
}
.wizard-option-card-qty .info p {
  margin: 0;
  font-weight: 600;
}
.wizard-option-card-qty .info .price {
  color: #6c757d;
  font-size: 0.9em;
}
.quantity-stepper {
  display: flex;
  align-items: center;
}
.quantity-stepper button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 1.2em;
}
.quantity-stepper .count-display {
  width: 40px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-top: 1px solid #dee2e6;
}

/* === NUEVOS ESTILOS PARA FICHA DE PRODUCTO A PANTALLA COMPLETA === */

.fullscreen-ficha {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  background-color: #fff;
  opacity: 0;
  transform: translateY(20px);
  animation: ficha-fade-in 0.3s ease-out forwards;
}
.fullscreen-ficha.exiting {
  animation: ficha-fade-out 0.3s ease-in forwards;
}
@keyframes ficha-fade-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ficha-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(20px); }
}

.ficha-image-panel {
  width: 45%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.ficha-options-panel {
  width: 55%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ficha-header {
  padding: 2rem;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}
.ficha-header h2 {
  font-size: 2.5em;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.ficha-header p {
  font-size: 1.2em;
  color: #6c757d;
  margin: 0;
}
.btn-close-ficha {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2.5em;
  background: none;
  border: none;
  cursor: pointer;
  color: #6c757d;
}

.ficha-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.ficha-steps {
  width: 280px;
  padding: 2rem;
  border-right: 1px solid #dee2e6;
  background-color: #f8f9fa;
}
.ficha-step {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  opacity: 0.4;
}
.ficha-step span {
  width: 35px; height: 35px; border-radius: 50%;
  background-color: #6c757d; color: white;
  display: flex; align-items: center; justify-content: center;
  margin-right: 15px; font-weight: bold; font-size: 1.2em;
}
.ficha-step p { margin: 0; font-weight: 500; font-size: 1.1em; }
.ficha-step.active { opacity: 1; }
.ficha-step.active span { background-color: var(--secondary-color, #a80022); }
.ficha-step.completed span { background-color: #28a745; }

.ficha-step-content {
  flex-grow: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.ficha-step-content h3 {
  margin-bottom: 1.5rem;
  font-size: 1.5em;
}
.ficha-step-content h3 small {
  color: #6c757d;
  font-weight: 400;
}

.ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  overflow-y: auto;
  padding-right: 1rem;
}

/* Reutilizamos los estilos de las tarjetas de los wizards anteriores */
.wizard-option-card, .wizard-option-card-qty {
  transition: all 0.2s ease;
}

.ficha-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}
.ficha-footer .btn-secondary, .ficha-footer .btn-confirm {
  padding: 0.8rem 2rem;
  font-size: 1.1em;
}

/* === ESTILOS PARA WIZARD DE MENÚS (VERSIÓN !IMPORTANT) === */

.wizard-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1000 !important;
  background-color: #fff !important;
  display: flex !important; /* Añadido para asegurar que se muestra */
  opacity: 0;
  transform: scale(0.95);
  animation: wizard-fade-in 0.3s ease-out forwards;
}
.wizard-fullscreen.exiting {
  animation: wizard-fade-out 0.3s ease-in forwards;
}
@keyframes wizard-fade-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes wizard-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

.wizard-fullscreen .wizard-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.wizard-fullscreen .wizard-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}
.wizard-fullscreen .wizard-header h2 {
  font-size: 2em;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
}
.wizard-fullscreen .wizard-header p {
  font-size: 1.1em;
  color: #6c757d;
  margin: 0;
}
.wizard-fullscreen .btn-close-wizard {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2.5em;
  background: none;
  border: none;
  cursor: pointer;
  color: #6c757d;
}

.wizard-fullscreen .wizard-body {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.wizard-fullscreen .wizard-steps {
  width: auto;
  padding: 2rem;
  border-right: 1px solid #dee2e6;
}
.wizard-fullscreen .wizard-step {
  display: flex; align-items: center; margin-bottom: 25px; opacity: 0.4;
}
.wizard-fullscreen .wizard-step span {
  width: 35px; height: 35px; border-radius: 50%;
  background-color: #6c757d; color: white;
  display: flex; align-items: center; justify-content: center;
  margin-right: 15px; font-weight: bold; font-size: 1.2em;
}
.wizard-fullscreen .wizard-step p { margin: 0; font-weight: 500; font-size: 1.1em; }
.wizard-fullscreen .wizard-step.active { opacity: 1; }
.wizard-fullscreen .wizard-step.active span { background-color: var(--secondary-color, #a80022); }
.wizard-fullscreen .wizard-step.completed span { background-color: #28a745; }

.wizard-fullscreen .wizard-step-content {
  flex-grow: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.wizard-fullscreen .wizard-step-content h3 {
  margin-bottom: 1.5rem;
  font-size: 1.5em;
}
.wizard-fullscreen .wizard-step-content h3 small { color: #6c757d; font-weight: 400; }

.wizard-fullscreen .wizard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  overflow-y: auto;
  padding-right: 1rem;
}

.wizard-fullscreen .wizard-option-card {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.wizard-fullscreen .wizard-option-card.selected {
  border-color: var(--secondary-color, #a80022);
  background-color: #fff3f5;
}
.wizard-fullscreen .wizard-option-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}
.wizard-fullscreen .wizard-option-card p {
  font-weight: 600;
  margin: 0;
}
.wizard-fullscreen .wizard-option-card .checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
}
.wizard-fullscreen .wizard-option-card.selected .checkmark {
  background-color: var(--secondary-color, #a80022);
  border-color: var(--secondary-color, #a80022);
}

.wizard-fullscreen .wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}
.wizard-fullscreen .btn-secondary,
.wizard-fullscreen .btn-confirm {
  padding: 0.8rem 2rem;
  font-size: 1.1em;
}


/* === ESTILOS PARA LAS TARJETAS DEL WIZARD (MÁS GRANDES Y JUNTAS) === */

.wizard-fullscreen .wizard-grid {
  display: grid;
  /* Hacemos las tarjetas más grandes, con un mínimo de 200px de ancho */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Reducimos el espacio entre ellas */
  gap: 15px;
  overflow-y: auto;
  padding-right: 1rem;
}

.wizard-fullscreen .wizard-option-card {
  border: 2px solid #dee2e6;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  /* Forzamos a que todas las tarjetas se comporten igual */
  display: flex;
  flex-direction: column;
}


.wizard-fullscreen .wizard-option-card.selected {
  border-color: var(--secondary-color, #a80022);
  background-color: #fff3f5;
}

.wizard-fullscreen .wizard-option-card img {
  width: 100%;
  /* Aumentamos la altura de la imagen para hacer la tarjeta más grande */
  height: 150px; 
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}

.wizard-fullscreen .wizard-option-card p {
  font-weight: 600;
  margin: 0;
  /* Esta regla es la clave para que todas tengan el mismo tamaño */
  flex-grow: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-fullscreen .wizard-option-card .checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.2s ease;
}

.wizard-fullscreen .wizard-option-card.selected .checkmark {
  background-color: var(--secondary-color, #a80022);
  border-color: var(--secondary-color, #a80022);
}

.wizard-option-card {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.product-allergens {
  display: flex !important;
  justify-content: center !important; /* Centra el bloque de iconos en la tarjeta */
  align-items: center !important;
}

.product-allergens img {
  width: 20px !important;
  height: 20px !important;
  margin: 0 5px !important; /* 0px arriba/abajo, 3px a los lados */
}

#submenu-modal #wizard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* <-- Valor reducido */
  gap: 1.5rem;
  justify-items: center;
}

/* --- Footer del Asistente (Wizard) --- */
.wizard-footer {
  display: flex;
  gap: 1rem; /* Espacio entre los botones cuando hay dos */
  padding: 1.7rem;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

.wizard-footer button {
  flex: 1; /* La magia: hace que los botones crezcan para ocupar el espacio disponible */
  padding: 1.7rem;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

/* --- ESTILOS PARA FIDELIZACIÓN --- */
.cart-actions-secondary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cart-actions-secondary button {
    flex: 1; /* Para que ocupen el 50% cada uno */
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
}

.loyalty-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001; /* Por encima de otros modales */
}

.loyalty-content {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    width: 90vw;
    max-width: 550px;
    text-align: center;
    position: relative;
}

.btn-close-loyalty {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}

.keypad-display-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 1rem 0;
    padding: 0 1rem;
}
.keypad-prefix {
    font-size: 1.5rem;
    font-weight: bold;
    color: #888;
    margin-right: 0.5rem;
}
.keypad-display {
    height: 60px;
    font-size: 2.5rem;
    letter-spacing: 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.btn-keypad {
    padding: 1.5rem 0;
    font-size: 2rem;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #f9f9f9;
    cursor: pointer;
}
.btn-keypad:active {
    background: #ddd;
}

.keypad-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-keypad-action {
    flex: 1;
    padding: 1rem;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn-keypad-action.confirm {
    background: var(--primary-color);
    color: white;
}
.btn-keypad-action.confirm:disabled {
    background: #ccc;
}

/* Resultados de Fidelización */
#loyalty-rewards-view h2 {
    color: var(--primary-color);
}
.loyalty-balance {
    font-size: 1.2rem;
    margin: 0.5rem 0 1.5rem 0;
}
.rewards-grid {
    display: grid;
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
}
.reward-box {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reward-box strong {
    display: block;
    color: var(--secondary-color);
    margin-bottom: 0.25rem;
}
.loyalty-error {
    color: var(--secondary-color);
}

.cart-modal-footer {
    padding: 1rem;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    display: flex;
    flex-direction: column; /* Apilamos los elementos verticalmente */
    gap: 1rem; /* Espacio entre los elementos */
}

.cart-total-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    order: 1; /* El total va primero */
}

.cart-actions-secondary {
    display: flex;
    gap: 1rem;
    order: 2; /* Los botones de seguir comprando/fidelización van después */
}

.cart-actions-secondary button {
    flex: 1; /* Para que ocupen el 50% cada uno */
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    font-weight: bold;
}

.btn-confirm-cart {
    order: 3; /* El botón de pagar es el último */
    width: 100%;
    padding: 1.2rem;
    font-size: 1.5rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.btn-confirm-cart:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* --- PANTALLA DE CONFIRMACIÓN DE PEDIDO Y EMAIL --- */
.confirmation-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.confirmation-fullscreen.exiting {
    opacity: 0;
}

.confirmation-box {
    text-align: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirmation-box h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.confirmation-box p {
    font-size: 1.5rem;
    opacity: 0.9;
}

.order-number-display {
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    margin: 2rem 0;
    color: var(--secondary-color);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.pickup-instruction {
    font-size: 1.2rem !important;
    max-width: 40ch;
    margin: 0 auto 3rem auto;
}

.confirmation-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
}

.confirmation-actions button {
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-width: 250px;
    flex: 1;
}
.confirmation-actions .btn-confirm {
    background-color: white;
    color: var(--primary-color);
    width: 100% !important;
}
.confirmation-actions .btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}
.confirmation-actions .btn-confirm:disabled {
    background-color: #aaa;
    cursor: not-allowed;
    width: 100% !important;
}

/* Teclado de Email */
.email-input {
    font-size: 1.5rem;
    padding: 0.8rem;
    border-radius: 5px;
    border: 2px solid white;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin-top: 1rem;
}

.email-keyboard {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}

.email-keyboard button {
    padding: 1rem 0.5rem;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.email-keyboard button:active {
    background: #ccc;
}

/* Fondo blanco, texto negro */
.confirmation-fullscreen {
    background: var(--background-color);
    color: var(--primary-color);
    width: 100% !important;
}

.confirmation-box h2 {
    color: var(--primary-color);
}

.confirmation-box p {
    color: #555;
}

.order-number-display {
    color: var(--secondary-color);
    text-shadow: none; /* Quitamos la sombra que no pega con fondo blanco */
}

/* Botones con tema claro */
.confirmation-actions .btn-confirm {
    background-color: var(--primary-color);
    color: white;
    width: 100% !important;

}
.confirmation-actions .btn-secondary {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    width: 100%;
}

/* Teclado con tema claro */
.email-input {
    border: 1px solid #ccc;
    background: #f9f9f9;
    color: #333;
}

.email-keyboard button {
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
}
.email-keyboard button:active {
    background: #e0e0e0;
}

#cart-loyalty{
  background: #a80022;
    color: white;
    padding: 1.2rem;
    font-size: 1rem;
}

#cart-continue-shopping{
    background: #a80022;
    color: white;
    padding: 1.2rem;
    font-size: 1.5rem;
    border: none;
    border-radius: 11px;
}

.category-grid-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: var(--background-color, #FFF);
    z-index: 999;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
}

.category-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 2rem;
    justify-items: center;
}

/* El contenedor de productos que ocupa el resto */
.menu-container {
    flex-grow: 1; /* Hace que crezca para ocupar todo el espacio sobrante */
    overflow-y: auto; /* Le pone el scroll si hace falta */
    padding: 2rem;
}

/* El pie de página que se queda abajo del todo */
.footer-sticker {
    flex-shrink: 0; /* Evita que se encoja */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 120px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.category-grid-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: var(--background-color);
    z-index: 999;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
}

.category-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 2rem;
    justify-items: center;
}

/* Añadir a styles.css */
.category-splash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
    padding: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.category-splash-card {
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #ddd;
}

.category-splash-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.category-splash-card p {
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
}


/* ============================================= */
/* --- ESTILOS PARA EL BANNER DE FIDELIZACIÓN --- */
/* ============================================= */

/* Contenedor principal que añadimos en index.html */

.loyalty-invite-banner p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
}

/* Estilo para cuando el usuario SÍ se ha identificado */
.loyalty-welcome-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.loyalty-welcome-banner h3 {
    margin: 0 0 0.25rem 0;
    color: var(--primary-color); /* Usa tu color primario */
    font-size: 1.5rem;
}

.loyalty-welcome-banner p {
    margin: 0;
    font-size: 1.1rem;
    color: #555;
}

.rewards-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.reward-chip {
    background-color: #e9ecef;
    color: #495057;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #ced4da;
}

/* ============================================= */
/* --- ESTILOS MEJORADOS PARA BANNER Y CUPONES --- */
/* ============================================= */

/* Contenedor principal del banner de bienvenida (post-login) */
.loyalty-welcome-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
}

.loyalty-user-info h3 {
    margin: 0 0 0.25rem 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    white-space: nowrap;
}

.loyalty-user-info p {
    margin: 0;
    font-size: 1.1rem;
    color: #555;
}

/* Contenedor del carrusel de tarjetas */
.rewards-carousel-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto; /* ESTA es la clave para el carrusel/scroll */
    padding: 1rem 0;
 
}

/* Ocultar la barra de scroll (estilo) */
.rewards-carousel-container::-webkit-scrollbar {
    height: 8px;
}
.rewards-carousel-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.rewards-carousel-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* Estilo de cada TARJETA de cupón */
.reward-card {
    flex-shrink: 0; /* Evita que las tarjetas se encojan */
    width: 220px; /* Ancho fijo para cada tarjeta */
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.reward-icon {
    font-size: 2rem;
}

.reward-info strong {
    display: block;
    font-size: 1rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reward-info span {
    font-size: 0.85rem;
    color: #6c757d;
}

.no-rewards-message {
    color: #6c757d;
    font-style: italic;
}


.loyalty-invite-banner p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
}


/* Banner de bienvenida (cuando SÍ se ha iniciado sesión) */
.loyalty-banner-logged-in {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
    padding: 0.9rem 1.4rem;
    border-radius: 16px;
    margin-left: -1.5%;
    margin-right: -1.5%;
}

.user-details {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-right: 2px solid rgba(255,255,255,0.25);
    padding-right: 1.5rem;
}

.user-details h2 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Badge de puntos */
.loyalty-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    width: fit-content;
}
.loyalty-points-icon {
    font-size: 0.95rem;
    line-height: 1;
}
.loyalty-points-value {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.loyalty-points-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rewards-section {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rewards-section h4 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.65;
}

/* El carrusel de cupones */
.rewards-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto; /* La magia del scroll horizontal */
    padding-bottom: 10px; /* Espacio para la barra de scroll */
   
}

/* Estilo de la barra de scroll para Chrome/Safari */
.rewards-carousel::-webkit-scrollbar {
    height: 6px;
}
.rewards-carousel::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}
.rewards-carousel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
}

/* Tarjeta individual de cada cupón */
.reward-card-small {
    flex-shrink: 0;
    width: 220px;
    border-radius: 18px;
    padding: 0;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.reward-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.1rem 0.8rem;
    flex: 1;
}

.reward-card-name {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    display: block !important;
    line-height: 1.25 !important;
    margin: auto !important;
}

.reward-card-desc {
    font-size: 0.9rem !important;
    opacity: 0.72;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.no-rewards-message {
    font-style: italic;
    opacity: 0.8;
}

.loyalty-invite-banner p {
    margin: 0;
    font-size: 1.5rem; /* Letra más grande */
    font-weight: 700;  /* Letra en negrita */
}

/* Estilo para el botón "IDENTIFICATE" */
.loyalty-invite-banner button {
    background-color: #ffffff; /* Fondo blanco */
    color: #d9534f; /* Texto rojo/coral */
    font-weight: 700;
    border: 2px solid #d9534f; /* Borde rojo/coral */
    border-radius: 8px;
    padding: 1rem 4rem !important;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    text-transform: uppercase;
}

#loyalty-splash-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el contenido abajo */
    align-items: center;
}

.loyalty-splash-content {
    padding: 3rem;
    display: flex;
    gap: 2rem; /* Espacio entre botones */
    width: 100%;
    max-width: 900px; /* Ancho máximo para el contenedor de los botones */
    justify-content: center;
}

/* Estilos para que los botones sean más grandes */
.loyalty-splash-content .btn-secondary,
.loyalty-splash-content .btn-confirm {
    font-size: 1.5rem; /* Letra más grande */
    font-weight: 600;
    padding: 1.5rem 2rem; /* Relleno (padding) más grande */
    border-radius: 12px; /* Bordes más redondeados */
    flex-grow: 1; /* Ocupan el espacio disponible */
    max-width: 400px; /* Ancho máximo por botón */
    border: none;
}



/* ============================================= */
/* --- ESTILOS PANTALLA DE CATEGORÍAS (TARJETAS MÁS CORTAS + SCROLL) --- */
/* ============================================= */

#category-splash-screen {
    display: flex;
    flex-direction: column;
    background-color: #f7f8fc;
    overflow-y: auto; /* Permite el scroll vertical */
}

.welcome-top {
    padding: 2rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.welcome-top h1 {
    font-size: 3rem;
    color: var(--text-color-dark, #333333);
    margin-bottom: 0;
    font-weight: 700;
}

/* Contenedor de la parrilla de categorías principales */
.category-splash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 2rem; /* <-- Espacio entre tarjetas reducido un poco */
    padding: 0 2.5rem 2.5rem 2.5rem;
    width: 100%;
    max-width: 1300px;
    box-sizing: border-box;
}

/* Estilo de cada Tarjeta de Categoría Principal */
.category-splash-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.category-splash-card img {
    width: 100%;
    height: 220px; /* <--- IMAGEN MÁS CORTA (antes 300px) */
    object-fit: cover;
    border-bottom: 1px solid #eeeeee;
}

.category-splash-card p {
    font-size: 1.6rem; /* <-- TEXTO LIGERAMENTE AJUSTADO */
    font-weight: 600;
    color: var(--text-color-dark, #333333);
    padding: 1rem; /* <-- PADDING REDUCIDO */
    margin: 0;
}

/* --- Adaptación para Pantallas Pequeñas --- */
@media (max-width: 768px) {
    .category-splash-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

/* ============================================= */
/* --- ESTILOS PARA EL MODAL DE SUGERENCIAS --- */
/* ============================================= */
.suggestions-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #eee;
}

.suggestions-modal-header h2 {
    margin: 0;
    font-size: 2rem;
    color: #333;
}

.suggestions-modal-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Columnas automáticas */
    gap: 1.5rem;
    padding: 2rem;
    max-height: 70vh; /* Altura máxima para el cuerpo */
    overflow-y: auto; /* Scroll si hay muchos productos */
}

/* ============================================= */
/* --- ESTILOS PARA LA PANTALLA DE SUGERENCIAS (PÁGINA COMPLETA) --- */
/* ============================================= */

.suggestions-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color, #f5f5f5);
    z-index: 2500;
    display: flex;
    flex-direction: column;
    /* Animación de entrada/salida */
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.suggestions-fullscreen.exiting {
    animation: fadeOut 0.3s forwards;
}

/* Reutilizamos el estilo del título de otras pantallas */
.suggestions-fullscreen .welcome-top {
    flex-shrink: 0;
}

/* ============================================= */
/* --- ESTILOS REFINADOS PARA PANTALLA DE CATEGORÍAS --- */
/* ============================================= */

#category-splash-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f7f8fc; /* Un blanco roto, más suave a la vista */
    overflow-y: auto;
}

.welcome-top {
    padding: 3rem 2rem 2rem 2rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

.welcome-top h1 {
    font-size: 3.2rem;
    color: #1a202c; /* Un negro menos intenso */
    font-weight: 700;
}

/* Contenedor de la parrilla de categorías principales */
.category-splash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 3rem; /* <-- MAYOR ESPACIO ENTRE TARJETAS */
    /* Padding que se adapta a la pantalla, con un máximo */
    padding: 0 clamp(1.5rem, 4vw, 4rem) 4rem clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
}

/* Estilo de cada Tarjeta de Categoría Principal */
.category-splash-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Borde más sutil */
    border-radius: 24px; /* Bordes más redondeados para un look moderno */
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* Sombra más suave */
    transition: all 0.25s cubic-bezier(.4,0,.2,1); /* Transición más suave */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.category-splash-card img {
    width: 100%;
    height: 250px; /* Altura equilibrada */
    object-fit: cover;
}

.category-splash-card p {
    font-size: 2rem; /* Texto grande */
    font-weight: 600; /* Un poco menos pesado que negrita total */
    color: #2d3748; /* Color de texto suave */
    padding: 1.5rem 1rem;
    margin: 0;
    line-height: 1.2; /* Mejora la legibilidad del texto */
}

/* --- Adaptación para Pantallas Pequeñas --- */
@media (max-width: 768px) {
    .category-splash-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

/* ============================================= */
/* --- ANIMACIONES GLOBALES (fadeIn / fadeOut) --- */
/* ============================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* ============================================= */
/* --- ESTILOS FINALES PARA PANTALLA DE CATEGORÍAS (2 COLUMNAS) --- */
/* ============================================= */

#category-splash-screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #f7f8fc;
    overflow-y: auto;
}

.welcome-top {
    padding: 1rem 2rem 2rem 2rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    text-transform: capitalize;
}

.welcome-top h1 {
    font-size: 3rem;
    color: #1a202c;
    font-weight: 700;
}

/* Contenedor de la parrilla (Grid) */
.category-splash-grid {
    display: grid;
    /* --- LA LÍNEA CLAVE --- */
    grid-template-columns: repeat(2, 1fr); /* <-- Dos columnas de espacio flexible */
    gap: 2.5rem;
    padding: 0 2.5rem 2.5rem 2.5rem;
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
}

/* Estilo de cada Tarjeta */
.category-splash-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.category-splash-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.category-splash-card p {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2d3748;
    padding: 1.5rem 1rem;
    margin: 0;
}

/* Adaptación para Pantallas Pequeñas */
@media (max-width: 768px) {
    .category-splash-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================= */
/* --- ESTILOS FINALES PARA SUGERENCIAS (SOLO CSS y 100% SEGURO) --- */
/* ============================================= */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }
.suggestions-fullscreen .welcome-top h2 { font-size: 2.5rem; padding: 2rem 1.5rem; margin: 0; color: #1a202c; font-weight: 700; }

/* =================================================================== */
/* --- ESTILOS DEFINITIVOS Y FORZADOS PARA LA PANTALLA DE SUGERENCIAS --- */
/* =================================================================== */

/* Contenedor principal de la pantalla */
.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* =================================================================== */
/* --- ESTILOS FINALES PARA PANTALLA DE SUGERENCIAS (2 COLUMNAS) --- */
/* =================================================================== */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* Animaciones de entrada/salida (mantener) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Adaptación para pantallas muy estrechas */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================== */
/* --- ESTILOS FINALES PARA PANTALLA DE SUGERENCIAS (TARJETAS ESTRECHAS) --- */
/* =================================================================== */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* La parrilla de productos en 2 columnas */
.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
    /* --- CAMBIO CLAVE: Hacemos el contenedor más estrecho --- */
    max-width: 1100px; /* Antes 1300px. Esto crea más margen a los lados. */
    margin: 0 auto; /* Centra el contenedor */
}

/* Animaciones de entrada/salida (mantener) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Adaptación para pantallas muy estrechas */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================== */
/* --- ESTILOS FINALES PARA PANTALLA DE SUGERENCIAS (MÁS ESPACIO) --- */
/* =================================================================== */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* La parrilla de productos en 2 columnas */
.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* --- CAMBIO CLAVE 1: MÁS ESPACIO ENTRE TARJETAS --- */
    gap: 2.5rem; /* Antes 1.5rem */
    padding: 0 2.5rem 2.5rem 2.5rem; /* Aumentamos el padding para consistencia */
    /* --- CAMBIO CLAVE 2: HACEMOS EL CONTENEDOR MÁS ESTRECHO (TARJETAS MÁS PEQUEÑAS) --- */
    max-width: 950px; /* Antes 1100px */
    margin: 0 auto;
}

/* Animaciones de entrada/salida (mantener) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Adaptación para pantallas muy estrechas */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}


.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    padding: 0 2.5rem 2.5rem 2.5rem;
    /* --- CAMBIO AQUÍ: HACEMOS EL CONTENEDOR MÁS ANCHO --- */
    max-width: 1100px; /* Antes 950px */
    margin: 0 auto;
}

/* =================================================================== */
/* --- ESTILOS FINALES PARA PANTALLA DE SUGERENCIAS (TARJETAS MÁS GRANDES) --- */
/* =================================================================== */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* La parrilla de productos en 2 columnas */
.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 0 2rem 2rem 2rem;
    /* --- CAMBIO CLAVE: HACEMOS EL CONTENEDOR MÁS ANCHO --- */
    max-width: 1200px; /* Antes 950px */
    margin: 0 auto;
}

/* Animaciones de entrada/salida (mantener) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Adaptación para pantallas muy estrechas */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================== */
/* --- ESTILOS FINALES PARA PANTALLA DE SUGERENCIAS (TARJETAS MÁS GRANDES) --- */
/* =================================================================== */

.suggestions-fullscreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f7f8fc;
    z-index: 2500;
    display: flex; flex-direction: column;
    opacity: 0; animation: fadeIn 0.3s forwards;
}
.suggestions-fullscreen.exiting { animation: fadeOut 0.3s forwards; }

.suggestions-fullscreen .welcome-top h2 {
    font-size: 2.5rem;
    padding: 2rem 1.5rem;
    margin: 0;
    color: #1a202c;
    font-weight: 700;
}

/* La parrilla de productos en 2 columnas */
.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 0 2rem 2rem 2rem;
    /* --- CAMBIO CLAVE: HACEMOS EL CONTENEDOR MÁS ANCHO --- */
    max-width: 1200px; /* Antes 950px */
    margin: 0 auto;
}

/* Animaciones de entrada/salida (mantener) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Adaptación para pantallas muy estrechas */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* La parrilla de productos en 2 columnas */
.suggestions-grid {
    flex-grow: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    /* --- CAMBIO 1: MÁS ESPACIO ENTRE TARJETAS --- */
    gap: 3rem; /* Aumentado para mayor separación entre columnas */
    
    /* --- CAMBIO 2: MENOS MARGEN CON LOS BORDES --- */
    padding: 0 1.5rem 1.5rem 1.5rem; /* Reducimos el espacio a los lados */
    
    max-width: 1600px; /* Aumentamos el ancho máximo para que se acerque a los bordes */
    margin: 0 auto;
}

/* Estilos para la pantalla de sugerencias (pantalla completa) */
.suggestions-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5; /* Un fondo claro para que resalte */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

.suggestions-header {
    background-color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.suggestions-header h2 {
    margin: 0;
    font-size: 2rem;
    color: #333;
}

.suggestions-grid-container {
    flex: 1; /* Permite que el contenedor de la cuadrícula ocupe todo el espacio vertical */
    overflow-y: auto;
    padding: 20px;
}

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ¡AQUÍ ESTÁ LA CLAVE! Siempre 2 columnas */
    gap: 30px; /* Aumentamos el espacio entre las tarjetas */
    max-width: 1000px; /* Mantenemos un ancho máximo para un diseño limpio */
    margin: 0 auto;
}

.suggestion-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.suggestion-item-image-wrapper {
    width: 100%;
    height: 250px; /* Hacemos las imágenes más grandes */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.suggestion-item-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suggestion-item-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Alineamos el texto al centro */
    flex-grow: 1;
}

.suggestion-item-name {
    font-weight: bold;
    font-size: 1.5em; /* Aumentamos el tamaño del nombre */
    color: #333;
    margin: 0;
    text-align: center;
}

.suggestion-item-price {
    font-size: 1.2em; /* Aumentamos el tamaño del precio */
    color: #666;
    margin-top: 5px;
    text-align: center;
}

.btn-add-suggestion {
    width: 100%;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 15px; /* Botón más grande */
    border-radius: 8px;
    font-size: 1.2em; /* Texto del botón más grande */
    font-weight: bold;
    cursor: pointer;
    margin-top: auto;
    transition: background-color 0.2s ease;
}

.btn-confirm {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

/* Cuerpo del carrito (lista de productos) */
.cart-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    /* AUMENTO: Más padding vertical */
    padding: 1rem 1.5rem; 
}

/* Pie de página del carrito */
.cart-modal-footer {
    display: flex;
    flex-direction: column;
    /* AUMENTO: Más padding general para el footer */
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

.cart-total-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    /* AUMENTO: Hacemos el contenedor más prominente */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.cart-total-container span:first-child {
    /* AUMENTO: Texto "Total" más grande */
    font-size: 1.8rem; 
    font-weight: 600;
}

.cart-total-amount {
    /* AUMENTO: El precio total es ENORME y audaz */
    font-size: 2.5rem; 
    font-weight: 900;
    color: var(--primary-color, #062829);
}

/* Botón principal (Pagar) */
.btn-confirm-cart {
    width: 100%;
    /* AUMENTO: Botón más grande */
    padding: 1.5rem; 
    font-size: 1.5rem; 
    font-weight: 700;
    border-radius: 12px;
}

/* Botones Secundarios (Fidelización / Seguir Comprando) */
.cart-actions-secondary {
    display: flex;
    gap: 1rem;
    order: 2;
    margin-bottom: 1rem; /* Espacio antes del botón de Pagar */
}

.cart-actions-secondary button {
    flex: 1;
    /* REDUCCIÓN: Hacemos los botones secundarios menos prominentes (Ghost Button look) */
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 8px;
    background-color: #f0f0f0; /* Fondo más suave */
    color: #333;
    border: 2px solid #ccc; /* Borde más visible */
}

.cart-actions-secondary.hidden-actions {
    display: none !important;
}

/* Si tienes la fidelización en rojo: */
#cart-loyalty {
    background: var(--secondary-color, #a80022);
    color: white;
    border-color: var(--secondary-color, #a80022);
}

.cart-modal-item {
    display: flex;
    align-items: center; /* Alineación al centro para mejor look */
    background-color: #ffffff;
    border-radius: 12px;
    /* AUMENTO: Más espacio interior y más separación */
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.cart-item-image {
    /* AUMENTO: Imágenes más grandes */
    width: 80px; 
    height: 80px;
    border-radius: 12px;
    margin-right: 1.5rem;
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-name {
    /* AUMENTO: Nombre del producto más grande y en negrita */
    font-size: 1.4rem; 
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

/* Sub-ítems (Añadidos/Sabores) */
.cart-item-sublist {
    /* AUMENTO: Hacemos los detalles del sabor más grandes y con sangría clara */
    list-style: none;
    padding-left: 1rem; 
    margin: 0;
    font-size: 1.1rem; 
    color: #495057;
}

/* Controles de Cantidad y Precio del Ítem */
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Separación entre el stepper, el precio y el botón de eliminar */
    flex-shrink: 0; /* Evita que se encoja */
}

/* 🚨 CONTROLES DE CANTIDAD (- y +) */
.quantity-stepper-cart {
    display: flex;
    align-items: center;
    border-radius: 25px; /* Bordes suaves */
    overflow: hidden;
}

.btn-quantity-cart {
    /* AUMENTO: Botones más grandes */
    width: 45px;
    height: 45px;
    border: none; /* Quitamos el borde para usar el borde del contenedor */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    font-size: 1.8rem; /* Símbolo más grande */
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.quantity-stepper-cart .count-display {
    /* AUMENTO: Cantidad más visible */
    font-size: 1.6rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
}

.cart-item-price {
    /* AUMENTO: Precio total del ítem más visible */
    font-size: 1.4rem; 
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

.cart-item-remove {
    /* AUMENTO: Botón de eliminar más grande (área de clic) */
    color: var(--secondary-color, #dc3545);
    font-size: 1.8rem; 
    padding: 0.5rem;
    transition: color 0.2s;
}

/* Botón de Editar más grande */
.btn-edit-item, .btn-note-item {
    font-size: 1rem !important;
    font-weight: bold;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}


/* --- 2. AJUSTE DE LA TARJETA DE PRODUCTO (AMPLITUD) --- */

.menu-item-clickable {
    /* La tarjeta ahora es completamente flexible dentro de la columna */
    width: 95% !important; 
    height: auto;
    
    /* Asegura que el contenido se apile correctamente */
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.product-visuals {
    height: 250px; /* Altura fija y grande para la imagen */
    width: 100%;
}

/* --- 3. BOTÓN DE ACCIÓN (Masivo) --- */

.btn-add-to-cart {
    width: 100%;
    /* Estilos para que el botón sea grande y llame la atención */
    padding: 18px 10px; 
    font-size: 1.5em;
    font-weight: 700;
    border-radius: 0 0 16px 16px; /* Asegura que se vea pegado abajo */
    margin-top: auto; /* Empuja el botón hacia la parte inferior */
}

/* Contenedor de la vista de factura (pantalla completa) */
.invoice-container-view {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #f0f0f0; /* Fondo ligeramente diferente al blanco */
    display: flex;
    flex-direction: column;
    z-index: 10003;
}

.invoice-header {
    background-color: #ffffff;
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
.invoice-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.invoice-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    justify-content: center; /* Centra el bloque del ticket */
}

/* Contenedor específico del Ticket (simula el papel) */
.invoice-escpos-content {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    width: 100%;
    overflow-x: hidden; /* Previene scroll horizontal */
}

/* Estilo para el texto del ticket */
.ticket-pre {
    /* La clave: fuente monoespaciada para alineación perfecta */
    font-family: 'Courier New', monospace; 
    font-size: 1rem;
    line-height: 1.2;
    color: #1a1a1a;
    text-align: left; /* Alineación izquierda, crucial */
    white-space: pre-wrap; /* Mantiene saltos de línea y wrapping */
    word-break: break-word; /* Rompe palabras si es necesario */
    margin: 0;
    padding: 0;
}

/* Estilo para la imagen QR */
.invoice-qr-code {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 1rem auto;
}

.loading-message, .error-message {
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
    color: #555;
}

/* Pie de página con el botón de Volver */
.invoice-footer-actions {
    padding: 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    text-align: center;
    flex-shrink: 0;
}
.invoice-footer-actions button {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    min-width: 200px;
}

/* --- Estilos para simular un Modal Centrado sobre el fondo Fullscreen --- */

.invoice-container-view {
    /* Mantiene el fondo oscuro/gris de la pantalla completa */
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro para simular modal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10003;
}

.modal-content-simulated {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    /* El max-width será sobrescrito por el JS para ajustarse al número de columnas */
    max-width: 500px; 
    overflow: hidden;
}

.invoice-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.invoice-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex; /* Asegura que el contenido del ticket se alinee correctamente */
    justify-content: center;
}

.invoice-footer-actions {
    padding: 1rem 1.5rem;
    border-top: 1px solid #ddd;
    text-align: center;
    flex-shrink: 0;
}

/* --- Estilos específicos para el Ticket ESC/POS --- */

.invoice-escpos-content {
    /* Quitamos el padding interno de este div, el padding lo maneja el wrapper */
    padding: 0; 
    width: 100%;
}

.ticket-pre {
    /* FUENTE MONOESPACIADA - LA CLAVE PARA LA ALINEACIÓN */
    font-family: 'Courier New', monospace; 
    font-size: 13px; /* Tamaño pequeño para simular ticket */
    line-height: 1.2;
    color: #1a1a1a;
    text-align: left; 
    white-space: pre-wrap; /* Mantiene saltos de línea y espaciado */
    word-break: break-all;
    margin: 0;
    padding: 0;
}

.invoice-qr-code {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 1rem auto;
}

/* --- ESTILOS PARA LA VISTA DE FACTURA (SIMULANDO UN MODAL) --- */

.invoice-container-view {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10003;
}

/* El Modal flotante simulado */
.modal-content-simulated {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    width: 90vw; /* El ancho se ajustará por el maxWidth dinámico en JS */
    overflow: hidden;
    position: relative; /* Para el botón de cerrar */
}

.invoice-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.invoice-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.btn-close-invoice {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #333;
}

/* Contenedor del contenido del ticket (permite el scroll) */
.invoice-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    /* Ajuste de padding para que el contenido respire */
    padding: 1.5rem 0; 
    display: flex;
    justify-content: center;
}

/* Contenedor del Ticket (Ancho Dinámico Aquí) */
.invoice-escpos-content {
    /* El max-width se establece en el JS para el número de columnas */
    background-color: #fcfcfc; /* Simula papel de ticket */
    padding: 15px; /* Padding interno fijo */
}

.ticket-pre {
    /* FUENTE MONOESPACIADA - CLAVE PARA LA ALINEACIÓN */
    font-family: 'Courier New', monospace; 
    font-size: 13px; 
    line-height: 1.2;
    color: #1a1a1a;
    text-align: left; 
    white-space: pre; /* Usamos 'pre' para que los espacios se respeten */
    word-break: break-all;
    margin: 0;
    padding: 0;
}

.invoice-qr-code {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 1rem auto;
}

.product-visuals {
    /* Mantenemos la altura, pero aumentamos el padding para el 'aire' visual */
    height: 200px; 
    width: 100%;
}

.product-visuals .product-image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}



/* =================================================================== */
/* --- INICIO: NUEVOS ESTILOS PARA LA PANTALLA DE CATEGORÍAS (SPLASH) --- */
/* =================================================================== */

#category-splash-screen .welcome-top h1 {
  font-size: 3.2rem;
  font-weight: 700;
  color: #1a202c;
  padding-bottom: 1rem;
}

.category-splash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas uniformes */
  gap: 2.5rem; /* Espacio generoso entre tarjetas */
  padding: 0 2.5rem 2.5rem 2.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* El contenedor de la tarjeta (el cuadrado) */
.category-card {
  position: relative; /* Clave para superponer elementos */
  aspect-ratio: 1 / 1; /* Mantiene la forma cuadrada perfectamente */
  border-radius: 16px;
  overflow: hidden; /* Oculta lo que se salga de los bordes redondeados */
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.25s ease-out;
}

/* La imagen de fondo de la categoría */
.category-card__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
}

/* La capa negra semitransparente */
.category-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 35%);
}

/* El contenedor del texto, centrado */
.category-card__text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  color: white;
  text-align: left;
}

/* El título de la categoría (GELATS ARTESANS) */
.category-card__title {
  font-family: var(--font-family-sans);
  font-size: 2.2rem;
  font-weight: 800; /* Bold */
  text-transform: uppercase; /* MAYÚSCULAS */
  line-height: 1.1;
  margin: 0;
}

/* El subtítulo descriptivo */
.category-card__subtitle {
  font-family: var(--font-family-sans);
  font-size: 1rem;
  opacity: 0.9;
  margin: 0.5rem 0 0 0;
}

/* Adaptación para pantallas más pequeñas (verticales) */
@media (max-width: 768px) {
  .category-splash-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
  .category-card__title {
    font-size: 1.8rem;
  }
}

.category-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 2rem 0; /* Espacio debajo del título */
}

/* =================================================================== */
/* --- INICIO: NUEVOS ESTILOS PARA TAGS DE PRODUCTO --- */
/* =================================================================== */

/* Hacemos el contenedor de la imagen "relativo" para posicionar los tags dentro */
.product-card__visuals {
  position: relative;
}

/* El contenedor de todos los tags, posicionado arriba a la derecha */
.product-card__tags-container {
  position: absolute;
  top: -12px;
  /* CAMBIO AQUÍ: Aumentamos el espacio con el borde derecho */
  right: 1rem; /* Puedes ajustar este valor si quieres más o menos espacio */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

/* Estilo base común para cualquier tag */
.product-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary); /* Fondo con tu color primario */
  color: white; /* Texto en blanco, como pediste (implícito para buen contraste) */
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Estilo para los tags que son solo TEXTO */
.product-tag--text {
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 20px; /* Forma de píldora */
}

/* Estilo para los tags que son una IMAGEN */
.product-tag--image {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Forma de círculo */
  padding: 4px; /* Pequeño borde interior */
  background-color: white; /* Fondo blanco para que la imagen del tag resalte */
}

.product-tag--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-item .product-visuals {
  position: relative;
}

/* =================================================================== */
/* --- ESTILOS MEJORADOS PARA TAGS DE PRODUCTO (MÁS GRANDES Y ALTOS) --- */
/* =================================================================== */

/* Esto asegura que el posicionamiento de los tags funcione correctamente */
.product-card__visuals {
  position: relative;
}

/* El contenedor de todos los tags */
.product-card__tags-container {
  position: absolute;
  /* CAMBIO: Lo movemos más arriba (valor negativo para que flote por encima) */
  top: -12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem; /* Un poco más de espacio entre tags */
}

.product-card__tags-container {
  position: absolute;
  top: 1rem;      /* 16px desde arriba */
  right: 1rem;    /* 16px desde la derecha */
  z-index: 2;
}

/* Estilo base común para cualquier tag */
.product-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  /* CAMBIO: Usamos el color secundario como fondo */
  background-color: var(--secondary-color);
  /* El texto se mantiene en blanco para un contraste perfecto */
  color: white; 
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25); /* Sombra un poco más marcada */
}

/* CAMBIO: Hacemos el tag de texto más grande */
.product-tag--text {
  font-size: 1rem;
  margin-left: 0.5em;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

/* CAMBIO: Hacemos el tag de imagen más grande */
.product-tag--image {
  margin-left: 0.5em;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background-color: white; /* Mantenemos el fondo blanco para que la imagen resalte */
}

.product-tag--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-visuals {
  position: relative;
}

.product-card__tags-container {
  position: absolute;
  top: -12px;
  right: 1rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

/* Estilo base común para todos los tags */
.product-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: white;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  white-space: nowrap; /* Evita que el texto se parta */
}

/* NUEVO ESTILO: Para tags con icono y texto */
.product-tag--with-icon {
  border-radius: 50px; /* Forma de píldora */
  padding: 0.3rem 0.8rem 0.3rem 0.3rem; /* Más padding a la derecha del texto */
  gap: 0.5rem; /* Espacio entre el icono y el texto */
}

.product-tag--with-icon .product-tag__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  background-color: white;
  padding: 4px;
}

.product-tag--with-icon .product-tag__name {
  font-size: 0.9rem;
}

/* Estilo para tags que son SOLO TEXTO */
.product-tag--text-only {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

/* Estilo para tags que son SOLO IMAGEN */
.product-tag--image-only {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 5px;
  background-color: white;
}

.product-tag--image-only img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* NUEVO ESTILO: Para tags con icono y texto (CON ALINEACIÓN CORREGIDA) */
.product-tag--with-icon {
  display: inline-flex; /* Usamos inline-flex para que se comporte como un bloque de texto */
  align-items: center;  /* <-- CLAVE: Alinea verticalmente el icono y el texto al centro */
  gap: 8px;             /* Espacio entre el icono y el texto */
  
  border-radius: 50px;  /* Forma de píldora */
  /* Padding ajustado para controlar mejor el espacio */
  padding: 4px 12px 4px 4px; 
}

/* El icono circular (la "bolita") */
.product-tag--with-icon .product-tag__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: contain;
  background-color: white;
  padding: 4px;
  
  /* --- ARREGLO: Estas dos líneas eliminan espacios indeseados --- */
  display: block;      /* Elimina el espacio extra debajo de la imagen */
  flex-shrink: 0;    /* Evita que la imagen se encoja */
}

/* El nombre del tag */
.product-tag--with-icon .product-tag__name {
  font-size: 0.9rem;
  line-height: 1; /* <-- ARREGLO: Ajusta la altura del texto para que no interfiera */
}

/* =================================================================== */
/* --- INICIO: NUEVOS ESTILOS PARA TARJETAS DE PRODUCTO MÁS GRANDES --- */
/* =================================================================== */

/* 1. Hacemos la tarjeta más alta y aseguramos que el contenido se distribuya bien */
.menu-item {
  /* CAMBIO: Aumentamos la altura mínima de la tarjeta */
  min-height: 420px; 
  
  /* Aseguramos que el contenido se estire para llenar el nuevo espacio */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 2. Ajustamos el área de información para crear más espacio */
.product-info-area {
  flex-grow: 1; /* Permite que esta área crezca para llenar el espacio extra */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el nombre y precio verticalmente en su espacio */

  /* CAMBIO: Aumentamos el espacio vertical (arriba y abajo) */
  padding: 1.5rem 0.5rem; 
}

/* Opcional: Hacemos la fuente un poco más grande para que encaje con el nuevo tamaño */
.card-product-name {
  font-size: 1.5em;
}
.card-product-price {
  font-size: 1.3em;
  margin-top: 0.5rem;
}

/* 3. Hacemos el botón de "Añadir" mucho más grande y claro */
.btn-add-to-cart {
  /* CAMBIO: Aumentamos el padding y el tamaño de la fuente */
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 700; /* Hacemos la letra más gruesa */
  
  /* Opcional: Quitamos el margen superior para que se alinee bien con flexbox */
  margin-top: 0;
}

/* =================================================================== */
/* --- FIN: NUEVOS ESTILOS PARA TARJETAS DE PRODUCTO --- */
/* =================================================================== */

/* 1. Quitamos la altura mínima fija de la tarjeta para que sea flexible */
.menu-item {
  display: flex;
  flex-direction: column;
  /* Ya no necesita min-height, se adaptará a su contenido */
}

/* 2. Hacemos la imagen responsive con límites de seguridad */
.product-visuals {
  /* CAMBIO PRINCIPAL: La altura ahora es el 40% de la altura de la pantalla */
  height: 40vh;

  /* LÍMITES: Para que no se vea mal en pantallas muy raras */
  min-height: 280px; /* Nunca será más pequeña que esto */
  max-height: 450px; /* Nunca será más grande que esto */
}

/* 1. Hacemos que la tarjeta no tenga padding superior ni a los lados */
.menu-item {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* Mantenemos un poco de padding solo en la parte de abajo */
  padding-bottom: 1rem; 
}

/* 2. Devolvemos el padding necesario solo a las áreas de texto y al botón */
.product-info-area {
  padding-left: 1rem;
  padding-right: 1rem;
}

.btn-add-to-cart {
  /* Hacemos que el botón ocupe casi todo el ancho, con un pequeño margen */
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
}

/* 3. Nos aseguramos de que la imagen tenga los bordes redondeados correctos */
.product-visuals {
  /* Redondea solo las esquinas superiores para que coincida con la tarjeta */
  border-radius: 16px 16px 0 0; /* Ajusta 16px si tu radio de borde es diferente */
}

/* =================================================================== */
/* --- SOLUCIÓN DEFINITIVA PARA IMAGEN DE PRODUCTO A BORDE COMPLETO --- */
/* =================================================================== */

/* 1. Reseteamos el padding de la tarjeta principal. ¡Esta es la clave! */
.menu-item {
  padding: 0;
  /* Mantenemos un poco de espacio solo abajo del todo */
  padding-bottom: 1rem; 
}

/* 2. Redondeamos solo las esquinas superiores del contenedor de la imagen */
.product-visuals {
  /* Asegúrate de que este valor (16px) es el mismo que el border-radius de tu tarjeta */
  border-radius: 16px 16px 0 0; 
}

/* 3. Añadimos el espaciado horizontal de vuelta, pero solo al texto y al botón */
.product-info-area,
.btn-add-to-cart {
  margin-left: 0.5rem;
  margin-right: 1rem;
}

/* 4. Ajustamos el espaciado vertical del área de texto */
.product-info-area {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* 5. Nos aseguramos de que el botón ocupe el ancho correcto con los nuevos márgenes */
.btn-add-to-cart {
  width: calc(100% - 2rem); /* Ancho total menos 1rem de margen a cada lado */
  box-sizing: border-box; /* Importante para que el cálculo del ancho sea correcto */
}

/* 1. La tarjeta principal ahora controla la proporción */
.menu-item {
  display: flex;
  flex-direction: column;
  
  /* CLAVE: Mantiene una proporción (ej: 5 de ancho por 7 de alto) */
  /* Puedes jugar con estos números para encontrar la forma que más te guste */
  aspect-ratio: 5 / 7; 
}

/* 2. El contenedor de la imagen ya no necesita altura fija, será flexible */
.product-visuals {
  /* Hacemos que ocupe la mayor parte del espacio vertical disponible */
  height: 65%; 
  position: relative; /* Sigue siendo necesario para los tags */
}

/* 3. Nos aseguramos de que la imagen llene su nuevo contenedor flexible */
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =================================================================== */
/* --- SOLUCIÓN PARA QUE LA IMAGEN NO SE "ESCAPE" DE LA TARJETA --- */
/* =================================================================== */

/* 1. (Seguridad) Le decimos a la tarjeta que "corte" cualquier
      contenido que intente salirse de sus bordes. */
.menu-item {
    overflow: hidden;
}

/* 2. (La Clave) Forzamos al contenedor de la imagen a calcular
      su tamaño correctamente, incluyendo bordes y padding. */
.product-visuals {
    box-sizing: border-box;
    width: 100%; /* Ocupa el 100% del espacio que le deja el padre, ni más ni menos */
}
.product-card__tags-container {
  position: absolute;
  /* CAMBIO: Usamos valores positivos para meterlos dentro de la esquina */
  top: 1rem; /* 16px (o ajusta al gusto) desde el borde superior */
  right: 1rem; /* 16px (o ajusta al gusto) desde el borde derecho */
  z-index: 2;
}

.suggestions-grid {
    display: grid;
    /* Usamos la misma configuración que el contenedor de productos principal */
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

.btn-add-to-cart {
  /* CAMBIO: Más padding, sobre todo vertical, para hacerlo más alto */
  padding: 1.5rem 1rem;

  /* CAMBIO: Letra más grande */
  font-size: 1.6rem; 
  
  font-weight: 700;
  margin-top: auto;
  
  /* Hereda el resto de tus estilos de botón (color, etc.) */
  width: calc(100% - 2rem);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.category-button:hover {
  color: var(--color-primary);
  transform: none;
}

/* El resto de reglas se mantienen igual */
.category-button:hover {
  color: var(--color-primary);
  transform: none;
}
/* =================================================================== */
/* --- 1. TRANSICIONES SUAVES PARA ELEMENTOS INTERACTIVOS --- */
/* =================================================================== */

/* Hacemos que cualquier cambio en las tarjetas sea suave */
.menu-item, .category-button, .service-option, .category-card {
  transition: all 0.25s ease-out;
}

/* Efecto de "levantarse" al interactuar con una tarjeta */
/* ':active' funciona en pantallas táctiles al mantener pulsado */
.menu-item:hover, .menu-item:active,
.category-card:hover, .category-card:active {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Hacemos que los botones tengan una respuesta táctil al pulsarlos */
.button, .btn-add-to-cart, .btn-confirm, .btn-secondary, .lang-btn, .service-option {
  transition: transform 0.15s ease;
}

.button:active, .btn-add-to-cart:active, .btn-confirm:active, .btn-secondary:active, .lang-btn:active, .service-option:active {
  transform: scale(0.97); /* El botón se encoge ligeramente al ser pulsado */
}


/* =================================================================== */
/* --- 2. ANIMACIÓN DE ENTRADA PARA LAS TARJETAS DE PRODUCTO --- */
/* =================================================================== */

/* Definimos la animación: aparecer desde abajo y con un fade-in */
@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplicamos la animación a las tarjetas de producto */
.menu-item {
  animation: fadeInFromBottom 0.5s ease-out forwards;
  /* 'forwards' mantiene el estado final de la animación */
}


/* =================================================================== */
/* --- 3. TRANSICIONES SUAVES PARA PANTALLAS COMPLETAS Y MODALES --- */
/* =================================================================== */

/* Base para todas las pantallas que ocupan todo (bienvenida, confirmación, etc.) */
.fullscreen-view, .welcome-fullscreen, .confirmation-fullscreen, .suggestions-fullscreen {
  transition: opacity 0.3s ease-in-out;
}

/* La clase 'exiting' que ya usas ahora tendrá una transición suave */
.fullscreen-view.exiting, .welcome-fullscreen.exiting, .confirmation-fullscreen.exiting, .suggestions-fullscreen.exiting {
  opacity: 0;
}

/* Animación de entrada para los modales que aparecen centrados */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hacemos que todos los modales usen esta animación */
.modal-content, .modal-content-simulated {
  animation: modal-fade-in 0.3s ease-out forwards;
}

/* =================================================================== */
/* --- 4. (OPCIONAL) INDICADOR DE CARGA ANIMADO --- */
/* =================================================================== */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0,0,0,0.1);
  border-left-color: var(--color-primary, #062829);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* =================================================================== */
/* --- 1. NUEVA ANIMACIÓN PARA EL CARRITO (SLIDE-IN) --- */
/* =================================================================== */

/* Animación de entrada: deslizar desde la derecha */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Animación de salida: deslizar hacia la derecha */
@keyframes slideOutToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Aplicamos la animación al contenido del carrito */
#cart-modal .cart-modal-content {
  animation: slideInFromRight 0.4s ease-out forwards;
}

/* Le decimos que haga la animación de salida cuando tenga la clase 'exiting' */
#cart-modal .cart-modal-content.exiting {
  animation: slideOutToRight 0.4s ease-out forwards;
}

/* =================================================================== */
/* --- 2. NUEVA ANIMACIÓN DE CASCADA PARA PRODUCTOS --- */
/* =================================================================== */

/* La animación que ya teníamos */
@keyframes fadeInFromBottom {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hacemos las tarjetas invisibles por defecto */
.menu-item {
  opacity: 0;
}

/* Cuando se aplica la animación, se harán visibles */
.menu-item.animate {
  animation: fadeInFromBottom 0.5s ease-out forwards;
}

/* =================================================================== */
/* --- ESTILOS PARA LA PANTALLA DE CARGA CON FUNDIDO (FADE) --- */
/* =================================================================== */

#global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
  /* Por defecto está invisible y preparado para la transición */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

#global-loader.visible {
  /* Cuando tiene esta clase, se hace visible suavemente */
  opacity: 1;
  visibility: visible;
}

/* =================================================================== */
/* --- AJUSTE PARA BORDES REDONDEADOS EN ANIMACIÓN DE MODAL --- */
/* =================================================================== */

/* 1. Modificamos la animación para forzar la aceleración por hardware */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    /* CAMBIO: Añadimos translateZ(0) */
    transform: scale(0.95) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}

/* 2. Modificamos la regla del modal para asegurar el recorte correcto */
.modal-content, .modal-content-simulated {
  /* CAMBIO: Nos aseguramos de que el overflow sea 'hidden' */
  overflow: hidden;

  /* CAMBIO: Le damos una pista al navegador para que optimice la animación */
  will-change: transform, opacity;

  /* El resto de tus estilos (border-radius, animation, etc.) se quedan igual */
  animation: modal-fade-in 0.3s ease-out forwards;
  border-radius: 12px; /* O el valor que estés usando */
}

/* =================================================================== */
/* --- INICIO: NUEVOS ESTILOS PARA LA PANTALLA DE PAGO --- */
/* =================================================================== */

.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  animation: fadeIn 0.3s forwards;
}

.payment-modal-content {
  width: 90%;
  max-width: 550px;
  background-color: var(--color-surface, #ffffff);
  border-radius: var(--border-radius-l, 16px);
  box-shadow: var(--box-shadow-strong, 0 12px 30px rgba(0,0,0,0.15));
  overflow: hidden;
  animation: modal-fade-in 0.4s ease-out forwards;
}

.payment-modal-header {
  padding: 1.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.payment-modal-header h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}
.payment-modal-header p {
  font-size: 1rem;
  color: var(--color-text-secondary, #555);
  margin: 0;
}

.payment-modal-body {
  padding: 1rem;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--border-radius-m, 12px);
  margin: 1rem;
  background-color: #f8f9fa;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.payment-option:hover {
  transform: scale(1.03);
  border-color: var(--color-primary, #062829);
  background-color: #fff;
}

.payment-option__icon {
  font-size: 2.5rem;
  color: var(--color-primary, #062829);
  width: 60px;
  text-align: center;
}

.payment-option__text {
  flex-grow: 1;
  margin-left: 1rem;
}

.payment-option__title {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
}

.payment-option__subtitle {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-secondary, #555);
}

.payment-option__chevron {
  font-size: 1.5rem;
  color: #ccc;
}

.payment-modal-footer {
  padding: 1rem;
  text-align: center;
}


/* =================================================================== */
/* --- 1. OPTIMIZACIÓN: ELIMINAR EFECTOS "PESADOS" --- */
/* =================================================================== */

/* Animamos solo la posición de la tarjeta, no su sombra (mucho más rápido) */
.menu-item:hover, .menu-item:active,
.category-card:hover, .category-card:active {
    box-shadow: var(--box-shadow-strong); /* La sombra aparece, pero no se anima */
}


/* =================================================================== */
/* --- 2. OPTIMIZACIÓN: FORZAR ACELERACIÓN POR HARDWARE --- */
/* =================================================================== */

/* Le damos una "pista" al navegador sobre qué elementos se van a animar.
   Esto permite que se prepare y use la GPU, resultando en animaciones más suaves. */
.menu-item,
.modal-content,
.cart-modal-content,
.category-button,
.service-option,
.button {
    /* Promueve el elemento a su propia capa de renderizado */
    transform: translateZ(0);
    
    /* Le avisa al navegador qué propiedades van a cambiar */
    will-change: transform, opacity;
}

/* =================================================================== */
/* --- 3. OPTIMIZACIÓN: SIMPLIFICAR ANIMACIÓN DE CASCADA --- */
/* =================================================================== */

/* Hacemos la animación de entrada de las tarjetas un poco más rápida y sutil */
@keyframes fadeInFromBottom {
  from {
    opacity: 0;
    transform: translateY(15px) translateZ(0); /* <-- Usamos translateZ */
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

/* Aplicamos la animación y un retardo más corto */
.menu-item.animate {
  animation: fadeInFromBottom 0.4s ease-out forwards;
  animation-delay: 0s; /* El retardo se sigue aplicando desde JS */
}

.cart-modal-content {
    /* Le añadimos el mismo truco de aceleración por hardware */
    transform: translateZ(0);
    will-change: transform;
    animation: slideInFromRight 0.4s ease-out forwards;
}

/* =================================================================== */
/* --- INICIO: AJUSTES PARA HACER EL FOOTER DEL CARRITO MÁS GRANDE --- */
/* =================================================================== */

/* Hacemos la barra del footer más alta y con más espacio interior */
.footer-sticker {
    height: 150px;
    padding: 1rem 2rem;
}

/* Aumentamos el tamaño de la imagen del último producto */
#footer-product-img {
    width: 110px;
    height: 110px;
    border-radius: 20px;
}

/* Hacemos el texto informativo más grande y legible */
#footer-product-text {
    font-size: 1.3rem;
    font-weight: 600;
}

/* El botón principal ahora es mucho más grande y llamativo */
.footer-cart-button {
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
}

/* 2. Ocultamos el footer por defecto y lo hacemos aparecer suavemente. */
.footer-sticker {
    /* Lo posicionamos de forma fija en la parte inferior de la PANTALLA, no de la página */
    position: fixed;

    /* Estado por defecto: Oculto (desplazado hacia abajo) */
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out; /* Animación suave */
}

/* Cuando el carrito tiene productos, JavaScript añade la clase '.visible' */
.footer-sticker.visible {
    /* Estado visible: Lo devolvemos a su posición original */
    transform: translateY(0);
}

/* El fondo desenfocado que cubre toda la pantalla */
#payment-waiting-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Blanco ligeramente traslúcido */
    backdrop-filter: blur(8px); /* Efecto cristal desenfocado */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* El contenedor del contenido (imagen y texto) */
.payment-waiting-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Espacio entre los elementos */
}

/* Imagen del datáfono mucho más grande y con una animación sutil */
.payment-waiting-content img {
    width: 800px; /* Aumentado desde 200px */
    margin-bottom: 2rem;
    animation: pulse 2s infinite ease-in-out; /* Animación de "latido" */
}

/* Título principal más grande y en negrita */
.payment-waiting-content h2 {
    font-size: 3.5rem; /* Aumentado desde 2rem */
    font-weight: 700;
    color: #333;
    margin: 0;
}

/* Texto secundario también más grande */
.payment-waiting-content p {
    font-size: 1.8rem; /* Aumentado desde 1.2rem */
    color: #666;
    margin: 0;
    max-width: 600px; /* Evita que el texto sea demasiado ancho en pantallas grandes */
}

/* Definición de la animación de pulso para la imagen */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.items-container,
.suggestions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Mantenemos las 2 columnas */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

/* Estilo para el nuevo botón de cierre "X" */
.btn-close-suggestions {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-close-suggestions:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* El contenedor de los dos botones (mantiene la distribución 50/50) */
.cart-actions-secondary {
    display: flex;
    gap: 1.5rem; /* Un poco más de espacio entre botones */
    margin-bottom: 1.5rem;
}

/* Estilo general para AMBOS botones, haciéndolos más grandes */
.cart-actions-secondary button {
    flex: 1; /* Esto hace que cada botón ocupe la mitad del espacio */
    
    /* --- CAMBIOS PRINCIPALES: Aumentamos padding y tamaño de letra --- */
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    
    border-radius: 12px; /* Bordes un poco más redondeados */
    border: none; /* Quitamos el borde para un look más limpio */
    cursor: pointer;
    transition: transform 0.15s ease;
}

.cart-actions-secondary button:active {
    transform: scale(0.98);
}

/* Estilo específico para el botón "Fidelización" (más llamativo) */
#cart-loyalty {
    background: var(--secondary-color, #a80022);
    color: white;
}

/* El contenedor de los dos botones, que los distribuye a 50/50 */
.cart-actions-secondary {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Estilo unificado para AMBOS botones */
.cart-actions-secondary button {
    flex: 1; /* Esto asegura que cada botón ocupe la mitad del ancho */

    /* Mismos estilos de tamaño y forma que el botón de Pagar */
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease;

    /* CAMBIO DE COLOR: Ambos botones en rojo con texto blanco */
    background-color: var(--secondary-color, #a80022);
    color: white;
}

.cart-actions-secondary button:active {
    transform: scale(0.98);
}

/* Estilo para cada botón de categoría */
.category-button {
    /* --- CAMBIO CLAVE: Layout vertical (imagen arriba, texto abajo) --- */
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido arriba */

    /* --- CAMBIO CLAVE: Hacemos el botón más grande --- */
    min-width: 180px;
    padding: 1rem;
    
    /* Estilos visuales para un look moderno */
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    color: #333;
    font-weight: 700;
    white-space: normal;
    transition: all 0.2s ease-out;

    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

/* La imagen dentro del botón */
.category-button .category-image {
    width: 120px;
    height: 120px;
    margin-right: 0; /* Eliminamos el margen lateral */
    margin-bottom: 1rem; /* Añadimos espacio debajo de la imagen */
    border-radius: 12px;
    object-fit: cover;
}

/* El texto de la categoría */
.category-button span {
    font-size: 1.3em;
    line-height: 1.2;
}

/* Estilo para el botón ACTIVO, más prominente */
.category-button.active {
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* 2. Estilo base del botón (inactivo) */
.category-button {
    flex-direction: column;
    justify-content: flex-start;
    min-width: 180px;
    padding: 1rem;
    
    background-color: transparent; /* Sin fondo de color */
    border: none;
    border-radius: 0; /* Sin bordes redondeados */
    box-shadow: none;

    color: #555; /* Color de texto gris para el estado inactivo */
    font-weight: 600;
    white-space: normal;
    transition: all 0.2s ease-out;

    /* Espacio reservado para la línea, para que no haya un salto de layout al activarse */
    border-bottom: 4px solid transparent;

    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

/* La imagen dentro del botón (sin cambios) */
.category-button .category-image {
    width: 120px;
    height: 120px;
    margin-right: 0;
    margin-bottom: 1rem;
    border-radius: 12px;
    object-fit: cover;
}

/* El texto de la categoría (sin cambios) */
.category-button span {
    font-size: 1.3em;
    line-height: 1.2;
}

/* 3. Estilo para el botón ACTIVO: solo la línea inferior y el color del texto */
.category-button.active {
    /* Eliminamos cualquier cambio de fondo, sombra o transformación */
    background-color: transparent; 
    transform: none;
    box-shadow: none;

    /* CAMBIOS: Cambiamos el color del texto y añadimos la línea inferior */
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* =================================================================== */
/* --- INICIO: ESTILOS MEJORADOS PARA LA PANTALLA DE SUGERENCIAS --- */
/* =================================================================== */

/* Estilo para el nuevo botón de cierre "X" */
.btn-close-suggestions {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-close-suggestions:hover {
    background: rgba(0, 0, 0, 0.5);
}

#continue-to-cart-btn{
      width: 100%; /* Ocupa todo el ancho disponible */
    padding: 1.5rem;   /* Más padding para hacerlo más alto */
    font-size: 1.8rem;   /* Letra más grande */
    font-weight: 700;
    border-radius: 12px;
}

/* 1. Hacemos el contenedor del modal más ancho */
.payment-modal-content {
  max-width: 700px; /* Aumentado desde 550px */
}

/* 2. Hacemos el título principal más grande */
.payment-modal-header h2 {
  font-size: 2.2rem; /* Aumentado desde 1.8rem */
}

/* 3. Aumentamos el tamaño del texto de las opciones de pago */
.payment-option__title {
  font-size: 1.5rem; /* Aumentado desde 1.2rem */
}
.payment-option__subtitle {
  font-size: 1rem; /* Aumentado desde 0.9rem */
}

/* 4. Ajustamos el pie de página para dar espacio al botón */
.payment-modal-footer {
  padding: 1.5rem; /* Más padding para que el botón no toque los bordes */
  background-color: #f8f9fa;
}

/* 5. Hacemos que el botón de "Volver" sea grande y ocupe todo el ancho */
#payment-back-btn {
  width: 100%; /* Ocupa todo el ancho disponible */
  padding: 2rem; /* Más alto */
  font-size: 1.8rem; /* Letra más grande */
  font-weight: 700;
  border-radius: 12px;
  margin-bottom: 3%;
}

/* =================================================================== */
/* --- INICIO: CORRECCIÓN DE RENDERIZADO PARA INDICADOR DE PASOS --- */
/* =================================================================== */

.wizard-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 60%;
    margin: 0 auto 1.5rem auto;
    padding: 1.5rem 0;
    border: none;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;
    flex: 1;
    background-color: transparent;
    padding: 0 0.5rem;
    z-index: 1;
}

.wizard-step::before {
    content: '';
    position: absolute;
    top: 35px; /* Alineado verticalmente con el centro del círculo (40px / 2) */
    /* Empieza en el borde izquierdo y termina en el centro del círculo actual */
    left: 0;
    width: 50%;
    height: 4px;
    background-color: #e0e0e0;
    z-index: 1; /* Detrás del círculo */
}

.wizard-step::after {
    content: '';
    position: absolute;
    top: 35px;
    /* Empieza en el centro del círculo actual y va hasta el borde derecho */
    left: 50%;
    width: 50%;
    height: 4px;
    background-color: #e0e0e0;
    z-index: 1; /* Detrás del círculo */
}


.wizard-step:first-child::before {
    display: none;
}
.wizard-step:last-child::after {
    display: none;
}

.wizard-step.completed::after {
    background-color: var(--primary-color);
}

/* También coloreamos la línea que LLEGA al paso activo o completado */
.wizard-step.completed::before,
.wizard-step.active::before {
    background-color: var(--primary-color);
}

.wizard-step span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 3px solid #ced4da;
    color: #ced4da;
    background-color: #ffffff;
    position: relative;
    z-index: 2; /* <-- Es crucial que tenga mayor z-index que las líneas */
    transform: translateZ(0); /* Mantenemos el fix de renderizado */
}

.wizard-step p {
    margin: 0.5rem 0 0 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    position: relative;
    z-index: 2;
}

.wizard-step.completed span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.wizard-step.active span {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    /* Mantenemos el translateZ aquí también para asegurar la consistencia */
    transform: scale(1.15) translateZ(0); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.wizard-step.active p {
    color: var(--secondary-color);
    font-size: 1rem;
}

.wizard-step.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.wizard-step:not(.disabled) {
    opacity: 1;
}

/* =================================================================== */
/* --- INICIO: ESTILOS PARA TARJETAS DE PRODUCTO MÁS GRANDES --- */
/* =================================================================== */

/* Contenedor principal de los productos */
.items-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  max-width: 1800px;
  margin: 0 auto;
  
  /* CAMBIO: Reducimos el espacio con los bordes de la pantalla */
  padding: 1rem; /* Antes era 1.5rem (o 30px) */
}

/* La tarjeta de producto */
.menu-item {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  
  /* CAMBIO CLAVE: Forzamos a que la tarjeta ocupe el 100% de su celda */
  width: 100%;
  height: 100% !important;
}

/* =================================================================== */
/* --- INICIO: AJUSTE PARA QUE EL CONTENIDO LLENE LA TARJETA --- */
/* =================================================================== */

/* 1. La tarjeta es un contenedor flex vertical (esto no cambia) */
.menu-item {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0; /* Quitamos el padding para que la imagen llegue a los bordes */
      width: 100% !important;

}

/* 2. El contenedor de la imagen ahora es flexible y crece */
.product-visuals {
    /* ELIMINAMOS la altura fija que limitaba la imagen */
    flex-grow: 1; /* <-- CAMBIO CLAVE: Hace que esta área crezca para llenar el espacio */
    position: relative;
    width: 100%;
}

/* 3. La imagen ahora llena el 100% de su nuevo contenedor flexible */
.product-visuals .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio sin deformarse */
}

/* 4. El área de texto y el botón se quedan en la parte inferior */
.product-info-area {
    flex-grow: 0; /* Evita que esta área crezca */
    padding: 1rem 1.5rem;
    text-align: left;
}

.card-product-price {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #333;
}

.card-product-name {
    margin: 0;
    font-size: 1.4em;
    color: var(--primary-color);
    line-height: 1.2;
    font-weight: 700;
}

.btn-add-to-cart {
    /* El botón se ajusta al nuevo padding */
    width: calc(100% - 3rem);
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
}

.menu-item .menu-item-clickable .large-product-card{
  width: 100% !important;
}

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES PARA PANTALLA DE IDIOMAS (70/30) --- */
/* =================================================================== */

/* Contenedor principal que ocupa toda la pantalla y distribuye los bloques */
.language-screen-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Bloque superior (70% de la altura) */
.language-screen-top {
    flex: 7; /* Ocupa 7 partes de 10 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bloque inferior (30% de la altura) */
.language-screen-bottom {
    flex: 3; /* Ocupa 3 partes de 10 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* El logo, centrado en su bloque superior */
.central-logo {
    width: 35vh; /* Ancho adaptable */
    height: auto;
}

/* El título en el bloque inferior */
.language-screen-bottom h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
}

/* El contenedor de las banderas en el bloque inferior */
.language-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* =================================================================== */
/* --- INICIO: ESTILOS DEFINITIVOS PARA PANTALLA DE IDIOMAS (70/30) --- */
/* =================================================================== */

/* Contenedor principal que ocupa toda la pantalla y distribuye los bloques */
.language-screen-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0; /* Sin padding para que los bloques ocupen todo */
      background-color: #000;
  }

/* Bloque superior (70% de la altura) */
.language-screen-top {
    flex: 7; /* Ocupa 7 partes de 10 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Bloque inferior (30% de la altura) */
.language-screen-bottom {
    flex: 3; /* Ocupa 3 partes de 10 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

/* El logo, centrado en su bloque superior */
.central-logo {
    width: 35vh;
    height: auto;
    object-fit: cover !important;
}

/* El título en el bloque inferior */
.language-screen-bottom h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* El contenedor de las banderas en el bloque inferior */
.language-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* =================================================================== */
/* --- INICIO: ESTILO FINAL Y DISCRETO PARA PESTAÑA DE SALIR --- */
/* =================================================================== */

#exit-kiosk-btn {
    position: fixed;
    z-index: 1001;
    bottom: 20rem; /* Mantenemos la altura vertical */
    right: 0;      /* Lo anclamos al borde derecho de la pantalla */
    
    /* CORRECCIÓN: Estilos mucho más discretos */
    background-color: #f0f0f0;     /* Color de fondo gris claro */
    color: #333;                  /* Color de texto oscuro */
    border: 1px solid #ccc;       /* Borde "micro" */
    border-bottom: none;          /* Sin borde en la parte que se une a la pantalla */
    border-radius: -20px 8px 8px -2px !;
    
    /* CORRECCIÓN: Dejamos que el tamaño se ajuste al texto */
    padding: 0.8rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap; /* Impide que el texto "Salir" se parta */
    
    cursor: pointer;
}

.loyalty-rewards-btn span {
    font-size: 1.5em; /* Aumentamos el tamaño de la fuente */
    font-weight: 700; /* La ponemos en negrita */
    color: var(--primary-color); /* Opcional: le damos el color principal del tema */
}

.category-button {
    flex-direction: column;
    justify-content: flex-start;
    
    /* CAMBIO: Ancho fijo para que el texto se ajuste y el botón sea más grande */
    width: 200px;
    flex-shrink: 0;

    padding: 1rem;
    
    /* ESTILO "PESTAÑA" RESTAURADO */
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* Espacio reservado para la línea inferior del estado activo */
    border-bottom: 4px solid transparent;

    color: #555; /* Color de texto para estado inactivo */
    font-weight: 600;
    white-space: normal; /* Permite que el texto se parta en varias líneas */
    transition: all 0.2s ease-out;

    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

/* La imagen de la categoría, ahora más grande */
.category-button .category-image {
    width: 150px;
    height: 150px;
    margin-right: 0;
    margin-bottom: 1rem;
    border-radius: 12px;
    object-fit: cover;
}

/* El texto de la categoría, también más grande */
.category-button span {
    font-size: 1.5em;
    line-height: 1.2;
    word-break: break-word; /* Ayuda a cortar palabras muy largas */
}

/* El estado activo vuelve a ser solo la línea inferior */
.category-button.active {
    background-color: transparent;
    transform: none;
    box-shadow: none;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}


/* El botón de categoría, más ancho */
.category-button {
    flex-direction: column;
    justify-content: flex-start;
    
    width: 240px; /* CAMBIO: Aumentado desde 200px */
    flex-shrink: 0;

    padding: 1.5rem; /* CAMBIO: Más padding interior */
    
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 4px solid transparent;

    color: #555;
    font-weight: 600;
    white-space: normal;
    transition: all 0.2s ease-out;

    display: flex;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

/* La imagen de la categoría, más grande */
.category-button .category-image {
    width: 180px;  /* CAMBIO: Aumentado desde 150px */
    height: 180px; /* CAMBIO: Aumentado desde 150px */
    margin-right: 0;
    margin-bottom: 1.5rem; /* Más espacio con el texto */
    border-radius: 16px;
    object-fit: cover;
}

/* El texto de la categoría, más grande */
.category-button span {
    font-size: 1.7em !important; /* CAMBIO: Aumentado desde 1.5em */
    line-height: 1.2;
    word-break: break-word;
}

/* El estado activo se mantiene igual (línea inferior) */
.category-button.active {
    background-color: transparent;
    transform: none;
    box-shadow: none;
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* =================================================================== */
/* --- INICIO: ESTILOS PARA UN FOOTER MÁS GRANDE --- */
/* =================================================================== */

/* 1. Hacemos la barra del footer más alta y con más espacio interior */
#footer-sticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    z-index: 100;

    height: 180px; /* CAMBIO: Aumentado desde 150px */
    padding: 1.5rem 2.5rem; /* CAMBIO: Más padding */

    /* Lógica para mostrar/ocultar */
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
}

#footer-sticker.visible {
    transform: translateY(0);
}

.footer-product-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* 3. Aumentamos el tamaño de la imagen del producto */
#footer-product-img {
    width: 140px; /* CAMBIO: Aumentado desde 120px */
    height: 140px; /* CAMBIO: Aumentado desde 120px */
    border-radius: 20%;
    object-fit: cover;
    border: 1px solid #f0f0f0;
}

/* 4. Hacemos el texto informativo más grande */
#footer-product-text {
    font-size: 1.5rem; /* CAMBIO: Aumentado desde 1.3rem */
    font-weight: 600;
    color: #333;
}

/* 5. El botón principal de "Ver Pedido" también crece */
.footer-cart-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--primary-color, #062829);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    
    padding: 1.5rem 3rem; /* CAMBIO: Más padding */
    font-size: 1.8rem;   /* CAMBIO: Letra más grande */
    font-weight: 700;
    border-radius: 16px;
}

.footer-cart-button .fa-shopping-bag {
    font-size: 2.5rem;
}

/* El texto del total dentro del botón también crece */
#footer-cart-total {
    font-size: 2rem;
    font-weight: 700;
}

/* 1. Ancho completo para la descripción en modales de detalle */
.detail-modal-info {
  flex: 1; /* Hace que el contenedor del texto crezca para ocupar el espacio disponible */
  padding-left: 20px; /* Añade un poco de separación con la imagen */
}

.detail-modal-info p {
  width: 100%; /* El párrafo usará todo el espacio de su contenedor */
}

/* 2. Bolitas de los pasos del wizard más grandes */
.wizard-step span {
  width: 70px;        /* Aumentamos el ancho */
  height: 70px;       /* Aumentamos la altura */
  font-size: 1.5rem;  /* Hacemos el número del paso más grande */
  line-height: 50px;  /* Centramos el número verticalmente */
}

/* Ajuste para la imagen dentro de la bolita */
.step-icon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* Asegura que la imagen se mantenga circular */
}

.suggestions-footer {
  width: 100%;              /* Insistimos en el ancho completo */
  align-self: stretch;      /* ¡ESTA ES LA LÍNEA CLAVE! Anula la alineación del padre y fuerza el estiramiento */
  display: flex;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #FFF;
}

#continue-to-cart-btn {
  flex-grow: 1;
  margin: 0;
}

/* Estilos para las Notificaciones Toast */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 8px;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 10000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateX(120%); /* Empieza fuera de la pantalla */
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toast-notification.visible {
  transform: translateX(0); /* Entra en la pantalla */
}

/* Color para mensajes de éxito */
.toast-notification.success {
  background-color: #28a745; /* Verde éxito */
}

/* Color para mensajes de error */
.toast-notification.error {
  background-color: #dc3545; /* Rojo error */
}

/* --- Estilos para Modales de Confirmación tipo SweetAlert --- */

.confirmation-modal .modal-content.sweet-alert-style {
  max-width: 480px;
  border-radius: 15px;
  padding: 2rem 1.5rem;
  text-align: center;
  overflow: hidden;
  /* Animación de entrada */
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.3s;
}

.confirmation-modal.visible .modal-content.sweet-alert-style {
  transform: scale(1);
  opacity: 1;
}

/* Animación de salida */
.confirmation-modal.exiting .modal-content.sweet-alert-style {
  transform: scale(0.9);
  opacity: 0;
}

.confirmation-modal .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.confirmation-modal.exiting .modal-backdrop {
  background-color: rgba(0, 0, 0, 0);
}


/* Estilo del Icono */
.sweet-alert-style .sa-icon {
  font-size: 5rem;
  margin: 0 auto 1.5rem auto;
}

.sweet-alert-style .sa-icon .fas {
  line-height: 1;
}

/* Colores de los iconos (usando FontAwesome) */
.sa-icon.sa-question .fas { color: #87adbd; }
.sa-icon.sa-warning .fas { color: #f8bb86; }
.sa-icon.sa-error .fas { color: #f27474; }
.sa-icon.sa-success .fas { color: #a5dc86; }


/* Estilo del Título/Mensaje */
.sweet-alert-style .confirmation-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #555;
  margin: 0;
}


/* Estilo de los Botones */
.sweet-alert-style .confirmation-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.sweet-alert-style .confirmation-buttons button {
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

.sweet-alert-style .confirmation-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sweet-alert-style .btn-confirm {
  background-color: #d33; /* Rojo para eliminar */
  color: white;
}

.sweet-alert-style .btn-secondary {
  background-color: #e9e9e9;
  color: #555;
}

/* --- Estilos para Modales de Confirmación tipo SweetAlert (VERSIÓN GRANDE) --- */

.confirmation-modal .modal-content.sweet-alert-style {
  max-width: 650px; /* Aumentado de 480px a 650px */
  border-radius: 20px; /* Bordes más redondeados */
  padding: 3rem; /* Más espacio interior */
  text-align: center;
  overflow: hidden;
  /* Animación de entrada */
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.3s;
}

.confirmation-modal.visible .modal-content.sweet-alert-style {
  transform: scale(1);
  opacity: 1;
}

/* Animación de salida */
.confirmation-modal.exiting .modal-content.sweet-alert-style {
  transform: scale(0.9);
  opacity: 0;
}

.confirmation-modal .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.confirmation-modal.exiting .modal-backdrop {
  background-color: rgba(0, 0, 0, 0);
}


/* Estilo del Icono (más grande) */
.sweet-alert-style .sa-icon {
  font-size: 7rem; /* Aumentado de 5rem a 7rem */
  margin: 0 auto 2rem auto; /* Más margen inferior */
}

.sweet-alert-style .sa-icon .fas {
  line-height: 1;
}

/* Colores de los iconos (sin cambios) */
.sa-icon.sa-question .fas { color: #87adbd; }
.sa-icon.sa-warning .fas { color: #f8bb86; }
.sa-icon.sa-error .fas { color: #f27474; }
.sa-icon.sa-success .fas { color: #a5dc86; }


/* Estilo del Título/Mensaje (más grande) */
.sweet-alert-style .confirmation-title {
  font-size: 2.2rem; /* Aumentado de 1.6rem a 2.2rem */
  font-weight: 600;
  color: #555;
  margin: 0;
}


/* Estilo de los Botones (más grandes y fáciles de pulsar) */
.sweet-alert-style .confirmation-buttons {
  margin-top: 2.5rem; /* Más separación */
  display: flex;
  justify-content: center;
  gap: 1.5rem; /* Más espacio entre botones */
}

.sweet-alert-style .confirmation-buttons button {
  padding: 18px 45px; /* Aumentado considerablemente */
  font-size: 1.4rem;  /* Aumentado de 1.1rem a 1.4rem */
  font-weight: bold;
  border-radius: 12px; /* Bordes más redondeados */
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

.sweet-alert-style .confirmation-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sweet-alert-style .btn-confirm {
  background-color: #d33;
  color: white;
}

.sweet-alert-style .btn-secondary {
  background-color: #e9e9e9;
  color: #555;
}

/* --- Estilos para Notificaciones Toast (Versión Mejorada) --- */
.toast-notification {
  position: fixed;
  top: 30px;
  right: 30px;
  display: flex; /* Para alinear el icono y el texto */
  align-items: center;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  color: white;
  z-index: 10000;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
  transform: translateX(120%);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 1.4rem; /* Más grande para el kiosko */
  font-weight: 500;  /* Un poco menos grueso que 'bold' */
  min-width: 350px;
}

.toast-notification.visible {
  transform: translateX(0);
}

.toast-notification .fas {
  font-size: 2rem;      /* Icono más grande */
  margin-right: 1rem;   /* Espacio entre icono y texto */
  line-height: 1;
}

/* Colores con un gradiente sutil */
.toast-notification.success {
  background: linear-gradient(135deg, #28a745, #218838);
}

.toast-notification.error {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

#invoice-content img {
  max-width: 100%;      /* 1. Asegura que la imagen nunca sea más ancha que el ticket. */
  height: auto;         /* 2. Mantiene la proporción de la imagen al reescalar el ancho. */
  display: block;       /* 3. Necesario para poder aplicar márgenes automáticos para centrar. */
  margin-left: auto;    /* 4. Centra la imagen horizontalmente. */
  margin-right: auto;   /* 5. Centra la imagen horizontalmente. */
  margin-top: 0.5rem;   /* Espacio opcional arriba de la imagen. */
  margin-bottom: 0.5rem;/* Espacio opcional debajo de la imagen. */
}

/* Estilos para el nuevo botón y contenedor de Finalizar Pedido */


.btn-finalize {
  width: 100%;
  padding: 20px;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background-color: #a80022; /* El color rojo que mencionaste */
  color: white;
  transition: transform 0.1s, box-shadow 0.2s;
}

.btn-finalize:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.wizard-counter {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  padding: 0.5rem 1rem;
  margin: 1rem auto;
  background-color: #f0f2f5;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
}


/* --- Estilos para el nuevo Visor de QR Interactivo --- */
.qr-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: #f0f2f5;
  border-radius: 12px;
}

.qr-placeholder p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #555;
  margin: 0 0 1rem 0;
}

.qr-placeholder .btn-secondary {
  font-size: 1.1rem;
  font-weight: bold;
}

.qr-placeholder .fas {
  margin-right: 0.5rem;
}

.qr-revealed {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-timer-bar {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-top: 1rem;
  overflow: hidden;
}

.qr-timer-bar-progress {
  width: 100%;
  height: 100%;
  background-color: var(--primary-color);
  border-radius: 4px;
  transition: width 0.1s linear;
}

.qr-revealed-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-qr-action {
  background: none;
  border: none;
  color: #888;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

#screensaver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  cursor: pointer;
}

.screensaver-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.screensaver-slide.active {
  opacity: 1;
}

/* --- Estilos para el nuevo Placeholder del QR --- */
.qr-placeholder {
  position: relative;
  width: 256px; /* Mismo tamaño que el QR */
  height: 256px; /* Mismo tamaño que el QR */
  margin: 0 auto;
  border-radius: 8px;
  background-color: #e9ecef;
  cursor: pointer;
  overflow: hidden;
}

.qr-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIGJhc2VGUmVxdWVuY3k9Ii4xIiBudW1PY3RhdmVzPSI1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNmKSIgb3BhY2l0eT0iLjIiIGQ9Ik0wIDBoMTAwdjEwMEgweiIvPjwvc3ZnPg==');
  filter: blur(5px); /* Efecto difuminado */
}

.qr-placeholder-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #343a40;
  text-align: center;
}

.qr-placeholder-overlay .fas {
  font-size: 4rem; /* Icono del ojo más grande */
}

.qr-placeholder-overlay p {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 1rem;
}

/* Aumentar el tamaño del placeholder del QR */
.qr-placeholder p {
  font-size: 1.5rem; /* Hacemos el texto de la pregunta más grande */
  margin-bottom: 1.5rem; /* Aumentamos la separación */
}

.qr-placeholder .btn-secondary {
  font-size: 1.3rem;   /* Hacemos el texto del botón más grande */
  padding: 18px 40px;  /* Aumentamos el tamaño del botón */
  border-radius: 12px;
}

.invoice-qr-display-container {
    position: relative;
}

/* Fuerzas al botón a estar por encima de todo lo demás
   dentro de su contenedor y a aceptar siempre los clics. */
#btn-view-qr {
    position: relative; 
    z-index: 10;      
    pointer-events: auto !important;
    padding: 1.5rem;
    border-radius: 12px;
}

#btn-hide-qr{
      position: relative; 
    z-index: 10;      
    pointer-events: auto !important;
    padding: 1.5rem;
    border-radius: 12px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10003 !important;
}

.modal-box {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    text-align: center;
    max-width: 700px;
}

.modal-box.warning {
    border-top: 5px solid #f0ad4e;
}

.modal-message {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* --- Estilos para el Asistente de Menús y Añadidos (Versión "To Gucci") --- */

.wizard-fullscreen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

.wizard-content {
  width: 90vw;
  max-width: 900px; /* Ancho para pantallas grandes */
  height: 90vh;
  background: #f7f7f7;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.wizard-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wizard-header h2 {
  font-size: 2.5rem;
  margin: 0;
  color: #333;
}

.wizard-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wizard-steps {
  justify-content: center;
  padding: 1rem;
}

.wizard-group-title {
  text-align: center;
  padding: 0 1rem 1rem 1rem;
}
.wizard-group-title h3 {
  font-size: 1.8rem;
  margin: 0 0 0.5rem 0;
}
.wizard-group-title p {
  font-size: 1.2rem;
  color: #666;
  margin: 0;
}

.wizard-grid {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.wizard-footer {
  display: flex;
  justify-content: space-between;
  padding: 1.5rem;
  border-top: 1px solid #eee;
  background-color: #fff;
}

.wizard-footer .btn-secondary,
.wizard-footer .btn-confirm {
  padding: 20px 40px;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 12px;
}

/* --- Estilos para la Nueva Pantalla de Configuración de Menús --- */

#menu-config-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f7f7f7;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#menu-config-screen.visible {
  transform: translateX(0);
}

.menu-config-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.menu-config-header .btn-back {
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #333;
  cursor: pointer;
  padding: 0 1rem 0 0;
}

.menu-config-header h2 {
  font-size: 2.2rem;
  margin: 0;
  color: #333;
}

.menu-config-steps-container {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  background-color: #fff;
}

.step-indicator {
  width: 50px;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.step-indicator.active {
  background-color: var(--primary-color);
}

.step-indicator.complete {
  background-color: #28a745;
}

.menu-config-step-title {
  text-align: center;
  padding: 1rem;
}

.menu-config-step-title h3 {
  font-size: 2rem;
  margin: 0 0 0.5rem 0;
}

.menu-config-step-title p {
  font-size: 1.2rem;
  color: #666;
  margin: 0;
}

.menu-config-grid {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  align-content: start; /* <-- ¡AÑADE ESTA LÍNEA! */
}

.menu-config-footer {
  padding: 1.5rem;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.menu-config-footer .btn-confirm {
  width: 100%;
  padding: 25px;
  font-size: 1.8rem;
  font-weight: bold;
}

.menu-config-footer {
  /* Activa Flexbox para alinear los botones horizontalmente */
  display: flex;
  
  /* Añade un espacio entre los dos botones */
  gap: 1rem;
  
  /* Añade algo de espacio interno al pie de página */
  padding: 1rem;
}

/* Estilos para los botones dentro de ese pie de página */
.menu-config-footer button {
  /* ¡La clave! Hace que cada botón ocupe la mitad del espacio disponible */
  flex: 1; 

  /* Estilos adicionales para que se vean mejor */
  padding: 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 12px;
}

/* --- Estilos para los Popups de Información (Alerts con Iconos) --- */

.info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.info-modal-box {
  background-color: #fff;
  border-radius: 16px;
  padding: 2rem 3rem;
  text-align: center;
  max-width: 450px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  animation: modal-pop-in 0.3s ease-out;
}

.info-modal-icon {
  font-size: 5rem;
  margin-bottom: 1rem;
}

/* Colores de los iconos */
.info-modal-icon.success { color: #28a745; }
.info-modal-icon.error   { color: #dc3545; }
.info-modal-icon.info    { color: #17a2b8; }

.info-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #333;
}

.info-modal-message {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2rem;
}

.info-modal-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

@keyframes modal-pop-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* * Y cuando el banner está oculto (el JS añade esta clase al body), 
 * eliminamos ese espacio superior para que el contenedor de productos
 * vuelva a su sitio original.
*/
body.loyalty-banner-hidden #menu-container {
  padding-top: 0;
}

/* Contenedor para la vista inicial (QR + botón) */
#loyalty-initial-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

#loyalty-initial-view img {
  width: 250px;
  height: 250px;
  margin-bottom: 2rem;
  object-fit: contain;
}

#loyalty-initial-view h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}

#loyalty-initial-view p {
  font-size: 1.2rem;
  color: #666;
  max-width: 400px;
  margin-bottom: 2.5rem;
}

#loyalty-manual-btn {
  width: 100%;
  max-width: 400px; /* Para que no sea excesivamente ancho en pantallas grandes */
  padding: 1.2rem;
  font-size: 1.2rem;
}

/* Flexbox para la vista de error para que se centre bien */
#loyalty-rewards-view.error-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

#loyalty-keypad-view {
  /* Centra todo el contenido del teclado (título, display, botones) */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
}

#keypad {
  /* ¡LA CLAVE! Convierte el contenedor en una parrilla de 3 columnas */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; /* Espacio entre los botones */
  width: 100%;
  max-width: 400px; /* Ancho máximo para el teclado */
  margin-top: 1.5rem;
}

.btn-keypad {
  /* Estilo de cada botón del teclado */
  background-color: #f0f2f5;
  border: none;
  border-radius: 12px;
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  width: 10rem !important;
  padding: 1.5rem 0; /* Lo hacemos alto */
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: 1px solid black;
}

.btn-keypad:hover {
  background-color: #e2e6ea;
}

/* Hace más ancha la caja donde aparecen los números */
.keypad-display-container {
  width: 100%;
  max-width: 400px; /* Aumenta el ancho máximo */
}

/* Contenedor de los botones de acción de abajo */
.keypad-actions {
  display: flex; /* Activa Flexbox para alinear los botones */
  gap: 1rem; /* Espacio entre los botones */
  width: 100%;
  max-width: 400px; /* Mismo ancho que el teclado */
  margin-top: 1.5rem;
}

/* Cada botón de acción individual */
.keypad-actions .btn-keypad-action {
  flex: 1; /* ¡La clave! Hace que cada botón ocupe la mitad del espacio */
  padding: 1.2rem; /* Aumenta la altura del botón */
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  width: 10rem;
}

.loyalty-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. La parrilla de opciones, sin cambios */
.detail-options-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  padding: 1rem;
}

/* 2. La tarjeta con altura fija y layout de Grid interno */
.detail-option-card {
  display: grid;
  grid-template-rows: 1fr auto; /* Fila flexible para imagen, fila automática para footer */
  height: 420px; /* ¡ALTURA FIJA Y UNIFORME! Ajusta este valor si quieres */
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
}

/* 4. El pie de página que contiene todo lo de abajo */
.detail-option-card .detail-option-card-footer {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra su contenido (texto y stepper) */
}

/* 5. ¡LA CLAVE ESTÁ AQUÍ! Le damos una altura mínima a la caja del texto. */
.detail-option-card .card-footer-info {
  text-align: center;
  /* Reserva espacio suficiente para 2 líneas de texto, garantizando uniformidad. */
  min-height: 60px; 
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el texto verticalmente dentro de su caja */
  margin-bottom: 0.75rem;
}

/* 6. El stepper de cantidad (+/-) compacto */
.detail-option-card .quantity-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail-option-card .quantity-stepper .count-display {
  margin: 0 0.75rem;
  min-width: 2ch;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
}

/* 7. Mantenemos el estilo circular de los botones */
.detail-option-card .quantity-stepper button {
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
}

.confirmation-box .finalize-action-container {
    width: 100%;
    margin-top: 2rem; /* Añade un espacio superior */
    padding-top: 1rem;
    border-top: 1px solid #eee; /* Línea divisoria opcional */
}

/* El botón en sí, más grande y ancho */
.btn-finalize {
    width: 120%; /* Ocupa todo el ancho de su contenedor */
    padding: 1.2rem; /* Lo hacemos más alto */
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background-color: #dc3545; /* Un color rojo para destacar la acción de "salir" */
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.email-keyboard {
  gap: 0.75rem; /* Antes no tenía, o era menor. Aumenta el espaciado. */
}

/* 2. Hacemos cada tecla individual más grande */
.email-keyboard button {
  padding: 1rem;      /* Aumenta la altura de las teclas */
  font-size: 1.5rem;  /* Aumenta el tamaño de la letra */
  font-weight: 600;
  border-radius: 12px; /* Bordes más redondeados y modernos */
}

/* 1. Aumentamos el espacio entre las teclas del teclado de nombre */
#name-keyboard {
  gap: 0.75rem; /* Aumenta el espaciado entre teclas */
  padding: 0.5rem; /* Añade un poco de espacio interior */
}

/* 2. Hacemos cada tecla individual más grande */
#name-keyboard button {
  padding: 1rem;      /* Aumenta la altura de las teclas */
  font-size: 1.5rem;  /* Aumenta el tamaño de la letra */
  font-weight: 600;
  border-radius: 12px;
}

.email-keyboard .key-special {
  background-color: #d1d5db; /* Un gris un poco más oscuro */
  font-weight: bold;
}

/* ¡LA CLAVE! Estilo para la tecla de mayúsculas cuando está activa */
.email-keyboard button.active {
  background-color: var(--primary-color, #007bff);
  color: white;
}

/* 1. Estilo base para cada opción de pago */
.payment-option {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  
  /* ¡LA CLAVE! Añadimos un borde por defecto. */
  border: 1px solid #dee2e6; 
}

/* 2. Efecto al pasar el ratón (hover) */
.payment-option:hover {
  /* ¡LA OTRA CLAVE! Cambiamos el color del borde y añadimos una sombra. */
  border-color: var(--primary-color, #007bff);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px); /* Efecto de "levantarse" */
}

/* Estilos para el icono */
.payment-option__icon {
  font-size: 2.5rem;
  color: var(--primary-color, #007bff);
  margin-right: 1.5rem;
}

/* Estilos para el texto */
.payment-option__text {
  flex-grow: 1; /* El texto ocupa el espacio sobrante */
}

.payment-option__title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
}

.payment-option__subtitle {
  display: block;
  font-size: 1rem;
  color: #666;
}

/* Estilo para la flecha a la derecha */
.payment-option__chevron {
  font-size: 1.5rem;
  color: #adb5bd;
}

.category-title{
  display: none;
}

/* --- Rediseño de la Sección QR y Botones de Confirmación --- */

/* 1. Placeholder del QR opaco con icono */
.qr-placeholder-hidden {
  width: 256px;
  height: 256px;
  background-color: #f0f2f5; /* Color de fondo opaco */
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.qr-placeholder-hidden .fa-eye-slash {
  font-size: 5rem;
  color: #adb5bd; /* Color del icono que contrasta */
}

/* 2. ¡LA CLAVE! Estilo uniforme para todos los botones de acción en esa pantalla */
.confirmation-actions, .invoice-qr-display-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Espacio entre botones */
    width: 100%;
}

.confirmation-action-button {
  width: 100%;
  padding: 1.2rem; /* Botones "gordos" (altos) */
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem; /* Espacio entre el icono y el texto del botón */
}

/* Aplicamos el estilo al resto de botones de la pantalla */
#confirmation-view .confirmation-actions .btn-secondary,
#confirmation-view .confirmation-actions .btn-confirm {
    /* Usamos !important para asegurarnos de que sobreescribe estilos anteriores si es necesario */
    padding: 1.2rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    width: 100% !important;
}

/* --- ESTILOS FINALES PARA PANTALLA DE CONFIRMACIÓN --- */

/* Contenedor principal de la vista de confirmación */
.confirmation-box {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo horizontalmente */
}

/* Placeholder del QR semi-transparente */
.qr-placeholder-hidden {
  width: 256px;
  height: 256px;
  background-color: rgba(240, 242, 245, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem auto;
  border: 1px solid rgba(0,0,0,0.05);
}

.qr-placeholder-hidden .fa-eye-slash {
  font-size: 5rem;
  color: #adb5bd;
}

/* Contenedor del QR revelado */
.qr-revealed {
    margin: 0 auto 1rem auto;
    width: 256px;
    height: 256px;
}

/* Contenedores de botones para que ocupen todo el ancho y se apilen */
.confirmation-actions, 
.invoice-qr-display-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    position: relative;
    /* --- LÍNEAS A AÑADIR --- */
    align-items: center; /* Centra los elementos horizontalmente */
    margin-top: 1.5rem;  /* Añade un espacio superior para separarlo */
}

/* Estilo uniforme para TODOS los botones de acción (QR, Email, Imprimir) */
.confirmation-action-button {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

/* Contenedor del botón "Finalizar" para centrarlo */
.finalize-action-container {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* Botón "Finalizar" centrado y con el color rojo */
.btn-finalize {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background-color: #dc3545; /* Color rojo */
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-finalize:hover {
    background-color: #c82333;
}

/* --- Animaciones y Ajustes Finales de Botones --- */

/* 1. Keyframes para las animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 2. Clases para aplicar las animaciones */
.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* 3. ¡LA CLAVE! Hacemos el botón "Finalizar" un poco más corto */
.btn-finalize {
    width: 100%; /* En lugar de 100%, para que sea un poco más estrecho */
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background-color: #a80022;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-finalize:hover {
    background-color: #c82333;
}

.confirmation-box {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. Aumentamos el tamaño de los textos y el número */
.confirmation-box h2 { font-size: 2.5rem; }
.confirmation-box p { font-size: 1.2rem; }
.order-number-display {
  font-size: 12rem;
  font-weight: 900;
  line-height: 1;
  margin: 1.5rem 0;
}
.pickup-instruction { margin-bottom: 2rem; }

/* 3. Aumentamos el tamaño del QR y su placeholder para que coincidan */
.qr-placeholder-hidden,
.qr-revealed {
    width: 350px;
    height: 350px;
    margin: 0 auto 1rem auto;
}
.qr-placeholder-hidden {
  background-color: rgba(240, 242, 245, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0,0,0,0.05);
}
.qr-placeholder-hidden .fa-eye-slash { font-size: 6rem; color: #adb5bd; }

/* 4. ¡LA CLAVE! Botones de acción en la misma línea y del mismo tamaño */
.confirmation-actions {
    display: flex; /* Alinea los botones en horizontal */
    gap: 1rem;     /* Espacio entre ellos */
    width: 100%;
    margin-top: 1.5rem;
}
.confirmation-actions .confirmation-action-button {
    flex: 1; /* Hace que cada botón ocupe el mismo espacio */
}

/* 5. Estilo uniforme para TODOS los botones */
.confirmation-action-button,
.btn-finalize {
    width: 100%;
    padding: 1.4rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Contenedor del botón Finalizar */
.finalize-action-container {
    width: 100%;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* Estilo del botón Finalizar */
.btn-finalize {
    background-color: #dc3545;
    color: white;
}
.btn-finalize:hover {
    background-color: #c82333;
}

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES Y CORREGIDOS PARA EL FOOTER --- */
/* =================================================================== */

/* 1. El contenedor principal del footer.
   Quitamos 'justify-content' para que los elementos se alineen a la izquierda por defecto. */
#footer-sticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-color: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100;
    box-sizing: border-box;

    display: flex;
    align-items: center; /* Centra todo verticalmente */
    padding: 0 2rem;

    /* Lógica para mostrar/ocultar */
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
}

#footer-sticker.visible {
    transform: translateY(0);
}

/* 2. El botón de salir (X) a la izquierda (sin cambios) */
#exit-kiosk-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 1.5rem;
    position: static;
    transform: none;
}

#exit-kiosk-btn i {
    font-size: 3.2rem;
    color: #dc3545;
    transition: color 0.2s ease;
    margin-left: 2px;
}

/* 3. El contenedor de la info del producto (sin cambios) */
.footer-product-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* 4. El botón de "Ver Pedido". ¡ESTA ES LA MAGIA! */
.footer-cart-button {
    /* ¡LA CLAVE! Este margen automático empuja el botón hasta el extremo derecho. */
    margin-left: auto;

    /* El resto de estilos se mantienen igual */
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--primary-color, #062829);
    color: white;
    border: none;
    cursor: pointer;
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 16px;
    white-space: nowrap;
}

/* --- FIN: ESTILOS CORREGIDOS --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES PARA BOTONES DE PANTALLA DE CONFIRMACIÓN --- */
/* =================================================================== */

/* 1. El contenedor de los botones de acción (Imprimir, Email, etc.) */
.confirmation-actions {
    /* ¡LA CLAVE! Usamos Grid para controlar el layout. */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creamos 2 columnas de igual tamaño. */
    gap: 1.5rem; /* Espacio generoso entre los botones. */

    width: 100%;
    margin-top: 2rem;
}

/* 2. Estilo uniforme y más grande para TODOS los botones de acción. */
.confirmation-action-button {
    width: 100%; /* Ocupa el 100% de la celda de la parrilla (grid). */
    padding: 1.5rem; /* Botones más altos y fáciles de pulsar. */
    font-size: 1.3rem; /* Letra más grande. */
    font-weight: 700; /* Texto en negrita. */
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.15s ease;
}

.confirmation-action-button:active {
    transform: scale(0.98);
}

/* 3. Lógica de distribución para el TERCER botón. */
/* Esta regla solo se aplica si hay exactamente 3 botones. */
.confirmation-actions > .confirmation-action-button:nth-child(3):last-child {
    /* El tercer botón ocupará las 2 columnas, forzándolo a la fila de abajo. */
    grid-column: 1 / -1;
}

/* (Opcional pero recomendado) Lógica para cuando solo hay UN botón. */
.confirmation-actions > .confirmation-action-button:first-child:last-child {
    grid-column: 1 / -1; /* Ocupa las 2 columnas para que se centre. */
}

/* --- FIN: ESTILOS CORREGIDOS --- */

.btn-finalize {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    background-color: #a80022; /* <-- ¡COLOR CORREGIDO! */
    color: white;
    cursor: pointer;
}

/* 1. Aumentamos el espacio de los alérgenos y su separación */
.product-allergens {
    margin-top: 1rem !important; /* ¡CLAVE! Añade un espacio generoso encima de los iconos */
    margin-bottom: 0.5rem; /* Espacio debajo, antes del texto */
    gap: 8px; /* Aumenta el espacio entre cada icono de alérgeno */
}


.product-info-area {
    margin-top: 0rem !important;
}

/* --- FIN: SOLUCIÓN HEADER --- */

/* =================================================================== */
/* --- INICIO: ESTILOS PARA VISIBILIDAD INICIAL DEL FOOTER --- */
/* =================================================================== */

/* Por defecto, la info del producto y el botón de carrito están ocultos y transparentes. */
#footer-sticker .footer-product-info,
#footer-sticker .footer-cart-button {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Cuando le añadimos la clase '.content-visible', se hacen visibles suavemente. */
#footer-sticker .footer-product-info.content-visible,
#footer-sticker .footer-cart-button.content-visible {
    opacity: 1;
    visibility: visible;
}

/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: SOLUCIÓN MÁRGENES BANNER FIDELIZACIÓN --- */
/* =================================================================== */

/* 1. Para el banner cuando el usuario está logueado (.loyalty-banner-logged-in) */
.loyalty-banner-logged-in {
    /* ¡CLAVE! Eliminamos los márgenes negativos que lo estiraban a los bordes. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =================================================================== */
/* --- INICIO: ESTILOS MEJORADOS PARA MODALES Y NOTIFICACIONES --- */
/* =================================================================== */

/* --- 1. MODALES DE CONFIRMACIÓN (MÁS GRANDES Y CLAROS) --- */
.confirmation-modal .modal-box {
    max-width: 650px; /* Hacemos el modal más ancho */
    padding: 3rem;    /* Más espacio interior */
    border-radius: 20px;
}

/* Icono (pregunta, aviso, etc.) mucho más grande */
.modal-box .sa-icon {
    font-size: 7rem !important; /* Aumentamos el tamaño del icono */
    margin-bottom: 2rem;
}

/* Mensaje principal más grande */
.modal-box .modal-message {
    font-size: 2.2rem !important; /* Texto del mensaje mucho más grande */
    font-weight: 600;
    line-height: 1.3;
    color: #555;
}

/* Botones con más presencia */
.modal-box .modal-actions button {
    padding: 18px 45px !important; /* Botones mucho más grandes */
    font-size: 1.4rem !important;  /* Texto del botón más grande */
    font-weight: 700;
    border-radius: 12px;
}


/* --- 2. MODALES DE INFORMACIÓN (ALERTAS SIMPLES) --- */
.info-modal-box {
    max-width: 600px; /* También más anchos */
    padding: 3rem;
    border-radius: 20px;
}

.info-modal-icon {
    font-size: 7rem !important; /* Icono enorme */
    margin-bottom: 1.5rem;
}

.info-modal-title {
    font-size: 2.2rem !important; /* Título más grande */
}

.info-modal-message {
    font-size: 1.3rem !important; /* Mensaje más grande */
    margin-bottom: 2.5rem;
}

.info-modal-button {
    padding: 1.2rem !important; /* Botón de Aceptar más grande */
    font-size: 1.4rem !important;
    font-weight: 700;
    border-radius: 12px;
}


/* --- 3. NOTIFICACIONES "TOAST" (MÁS GRANDES Y VISIBLES) --- */
.toast-notification {
    padding: 1.2rem 2rem !important; /* Hacemos la notificación más grande */
    border-radius: 12px;
    font-size: 1.5rem !important;  /* Texto más grande */
    min-width: 400px;
}

.toast-notification .fas {
    font-size: 2.2rem !important; /* Icono de la notificación más grande */
    margin-right: 1.2rem;
}

/* --- FIN: ESTILOS MEJORADOS --- */

.confirmation-modal .modal-box {
    max-width: 600px !important; /* Aumentado desde 650px */
}

/* 2. Aumentamos el ancho máximo para los modales de información */
.info-modal-box {
    max-width: 600px !important; /* Aumentado desde 600px */
}

/* 1. Hacemos que los botones dentro del contenedor de acciones sean flexibles */
.confirmation-actions button {
    flex: 1; /* ¡LA CLAVE! Hace que los botones se estiren para ocupar el espacio disponible. */
}

/* =================================================================== */
/* --- INICIO: SOLUCIÓN BOTONES CONFIRMACIÓN (OMITIR/CONFIRMAR) --- */
/* =================================================================== */

/* 1. Hacemos que el contenedor de los botones use Flexbox. */
.confirmation-actions {
    display: flex;          /* ¡CLAVE 1! Activa el layout flexible. */
    gap: 1.5rem;            /* Mantiene el espacio entre los botones si hay dos. */
    width: 100%;            /* Asegura que el contenedor ocupe todo el ancho. */
}

/* 2. Le decimos a CADA botón que sea flexible y crezca. */
.confirmation-actions button {
    flex: 1;                /* ¡CLAVE 2! El botón (o botones) se estirará para llenar el espacio. */
}

/* --- FIN: SOLUCIÓN BOTONES --- */

/* =================================================================== */
/* --- INICIO: SOLUCIÓN FORZADA PARA BOTONES (OMITIR/CONFIRMAR) --- */
/* =================================================================== */

/* 1. Apuntamos específicamente al contenedor de acciones DENTRO
      de la pantalla de nombre y la de email. */
#name-input-screen .confirmation-actions,
#email-view .confirmation-actions {
    display: flex !important;          /* Forzamos el layout flexible. */
    gap: 1.5rem !important;            /* Mantenemos el espacio. */
    width: 100% !important;            /* Forzamos el ancho completo. */
}

/* 2. Forzamos a CADA botón dentro de esos contenedores a ser flexible. */
#name-input-screen .confirmation-actions button,
#email-view .confirmation-actions button {
    flex: 1 !important;                /* Forzamos el crecimiento del botón. */
}

/* --- FIN: SOLUCIÓN BOTONES --- */
/* =================================================================== */
/* --- INICIO: ESTILOS PARA FOOTER TRANSPARENTE --- */
/* =================================================================== */

/* 1. Por defecto, el footer es transparente y no tiene sombra. */
#footer-sticker {
    background-color: transparent !important;
    box-shadow: none !important;
    /* La transición hará que el cambio de color sea suave. */
    transition: background-color 0.4s ease, transform 0.4s ease-in-out;
}

/* 2. Cuando JavaScript añade la clase 'has-content',
      el footer se vuelve blanco y recupera su sombra. */
#footer-sticker.has-content {
    background-color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: SOLUCIÓN TAMAÑO ESTÁNDAR PARA CARDS DEL WIZARD --- */
/* =================================================================== */

/* 1. Estilo para la tarjeta contenedora en los wizards de menú y añadidos. */
.detail-option-card {
    /* Forzamos una altura fija para que todas las tarjetas sean iguales. */
    height: 240px; 
    
    /* Mantenemos el resto de estilos para que el contenido se organice bien. */
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 0.75rem;
    overflow: hidden; /* Evita que el contenido se desborde. */
}

/* 3. Estilo para el nombre del producto. */
.detail-option-card-name {
    flex-grow: 1; /* Ocupa el espacio sobrante. */
    display: flex;
    align-items: center; /* Centra el texto verticalmente. */
    justify-content: center; /* Centra el texto horizontalmente. */
    font-weight: 600;
    line-height: 1.2;
}

/* --- FIN: SOLUCIÓN TAMAÑO ESTÁNDAR --- */

/* =================================================================== */
/* --- INICIO: SOLUCIÓN CABECERA FIJA (STICKY) PARA SUBMENÚS --- */
/* =================================================================== */

/* 1. Estilo para la cabecera del asistente de MENÚS (`openMenuPanel`) */
.menu-panel-header {
    position: sticky; /* ¡LA CLAVE! Hace que el elemento sea pegajoso. */
    top: 0;           /* Se pegará en la parte superior del contenedor de scroll. */
    z-index: 10;      /* Se asegura de que esté por encima del contenido que se desplaza. */
    
    /* Le damos un fondo blanco para que el contenido no se vea a través de él al pasar por debajo. */
    background-color: #ffffff; 
    
    /* Mantenemos tus estilos de borde y sombra para un look consistente. */
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. Estilo para la cabecera del asistente de AÑADIDOS (`openAddinsWizard`) */
#addin-modal .detail-modal-header-info {
    position: sticky !important; /* Usamos !important por si hay otras reglas conflictivas. */
    top: 0 !important;
    z-index: 10 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* --- FIN: SOLUCIÓN CABECERA FIJA --- */

/* =================================================================== */
/* --- INICIO: SOLUCIÓN FINAL SUBMENÚS (SELECTED Y ALTURA) --- */
/* =================================================================== */

/* 1. BOTÓN DE SALIR (X): SIN CAMBIOS, PERO SE MANTIENE POR CONTEXTO */
#menu-panel-modal .btn-close-large,
#addin-modal .btn-close-large,
.wizard-fullscreen .btn-close-wizard {
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    z-index: 10 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* 2. TARJETAS DE SELECCIÓN: TAMAÑO FORZADO A 430PX */
.detail-option-card,
.wizard-option-card {
    /* --- ¡CAMBIO CLAVE! Forzamos la nueva altura fija --- */
    height: 430px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0.75rem !important;
    text-align: center !important;
    border: 2px solid #eee !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: #fff !important;
    transition: border-color 0.2s, transform 0.2s; /* Transición suave para el estado 'selected' */
}

/* 4. TEXTO DENTRO DE LA TARJETA (SIN CAMBIOS) */
.detail-option-card-name,
.wizard-option-card p {
    flex-grow: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 0 1rem !important;
}

/* 5. ¡LA SOLUCIÓN! ESTILOS PARA EL ESTADO '.selected' CON !important */
.detail-option-card.selected,
.wizard-option-card.selected {
    border-color: 1px solid var(--primary-color, #062829) !important;
    transform: scale(1.03); /* Efecto sutil de "zoom" al seleccionar */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- FIN: ESTILO BOTÓN VOLVER (SPLASH) --- */

/* =================================================================== */
/* --- INICIO: ESTILOS PARA SLIDESHOW EN BANNER SUPERIOR --- */
/* =================================================================== */

/* Cada imagen del slide */
.slideshow-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre el espacio sin deformarse */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transición suave */
}

.slideshow-slide.active {
    opacity: 1; /* Muestra el slide activo */
}

/* --- FIN: ESTILOS SLIDESHOW --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES FOOTER (BOTONES IZQ + FONDO BLANCO) --- */
/* =================================================================== */

/* 1. Estilos base del footer (sin cambios importantes) */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0; /* Quitamos el padding global para controlar las zonas */
    background-color: transparent !important; /* Fondo transparente por defecto */
    transition: background-color 0.4s ease, transform 0.4s ease-in-out;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
#footer-sticker.has-content { background-color: #ffffff !important; }

/* 2. Contenedor para los botones de la izquierda (Volver Cat + Salir X) */
.footer-left-buttons {
    display: flex;
    align-items: center;
    /* --- ¡CLAVE! Fondo blanco SIEMPRE para esta zona --- */
    background-color: #ffffff; 
    height: 100%; /* Ocupa toda la altura del footer */
    padding: 0 1.5rem; /* Espacio interior */
    border-top-right-radius: 20px; /* Curva suave en la esquina */
    flex-shrink: 0; /* Evita que se encoja */
}

/* 3. Estilo común para los botones de acción de la izquierda */
.footer-action-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem; /* Área de pulsación generosa */
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-action-button i {
    font-size: 2.2rem; /* Iconos grandes */
    color: #555;
    transition: color 0.2s ease;
}
.footer-action-button:hover i { color: var(--primary-color); }
#exit-kiosk-btn:hover i { color: #dc3545; } /* Rojo para salir */

/* 4. Contenedor para la info del producto y botón de pagar (Derecha) */
/* Usamos un div implícito o puedes añadir uno si prefieres */
#footer-sticker .footer-product-info,
#footer-sticker .footer-cart-button {
    /* Estilos de visibilidad (sin cambios) */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#footer-sticker .footer-product-info.content-visible,
#footer-sticker .footer-cart-button.content-visible {
    opacity: 1; visibility: visible;
}

/* Ajustamos el padding derecho del contenedor general para que no se pegue */
#footer-sticker { padding-right: 1.5rem; }

/* Botón de pagar (sin cambios importantes de posición) */
.footer-cart-button {
    /* ... tus estilos existentes para tamaño, color, etc ... */
    flex-shrink: 0; /* Evita que se encoja */
}


/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: ESTILO BOTÓN "VOLVER A SPLASH" EN ÁREA PRINCIPAL --- */

/* Mensaje si una categoría está vacía */
.empty-category-message {
    text-align: center;
    font-size: 1.5rem;
    color: #888;
    margin-top: 4rem;
    padding: 2rem;
}


/* --- FIN: ESTILO BOTÓN VOLVER --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES FOOTER (ZONA IZQUIERDA BLANCA) --- */
/* =================================================================== */

/* 1. El contenedor principal del footer. Sigue siendo transparente por defecto. */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    box-shadow: none !important; /* Sin sombra por defecto */
    z-index: 100; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0; /* Quitamos padding global */
    background-color: transparent !important;
    transition: background-color 0.4s ease, transform 0.4s ease-in-out;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
/* Cuando tiene contenido, el fondo general (detrás del botón derecho) se vuelve blanco */
#footer-sticker.has-content {
    background-color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. ¡LA CLAVE! Creamos un contenedor específico para la zona izquierda. */
.footer-left-content {
    display: flex;
    align-items: center;
    /* --- FONDO BLANCO SIEMPRE --- */
    background-color: #ffffff; 
    height: 100%; /* Ocupa toda la altura del footer */
    padding: 0 1.5rem; /* Espacio interior para los elementos */
    /* Curva suave solo en la esquina superior derecha */
    border-top-right-radius: 20px; 
    /* Sombra solo cuando el footer tiene contenido (para que coincida) */
    box-shadow: none;
    transition: box-shadow 0.4s ease;
}
#footer-sticker.has-content .footer-left-content {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* 3. Estilos para los elementos DENTRO de la zona izquierda */
.footer-left-content #exit-kiosk-btn {
    /* Mantenemos el estilo del botón X redondo */
    background-color: #f0f2f5 !important;
    border: none !important;
    width: 70px !important; height: 70px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; margin-right: 1.5rem !important; flex-shrink: 0;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    position: static !important; /* Asegura que esté dentro del flujo */
    transform: none !important;
}
.footer-left-content #exit-kiosk-btn i { font-size: 3rem !important; color: #555 !important; }

.footer-left-content .footer-product-info {
    display: flex; align-items: center; gap: 1rem;
    /* Visibilidad controlada por JS */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.footer-left-content .footer-product-info.content-visible {
    opacity: 1; visibility: visible;
}
/* Imágenes y texto dentro de la zona izquierda (tus tamaños anteriores) */
#footer-product-img { width: 110px; height: 110px; border-radius: 20px; object-fit: cover; border: 1px solid #f0f0f0;}
#footer-product-text { font-size: 1.3rem; font-weight: 600; color: #333; }

/* 4. El botón de "Ver Pedido" a la derecha, con margen automático */
.footer-cart-button {
    margin-left: auto; /* Empuja el botón al extremo derecho */
    margin-right: 1.5rem; /* Espacio con el borde derecho */
    /* Visibilidad controlada por JS */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* Tus estilos de botón (tamaño, color, etc.) */
    display: flex; align-items: center; gap: 1rem;
    background-color: var(--primary-color, #062829); color: white; border: none;
    cursor: pointer; padding: 1.2rem 2.5rem; font-size: 1.5rem; font-weight: 700;
    border-radius: 16px; white-space: nowrap;
}
.footer-cart-button.content-visible {
    opacity: 1; visibility: visible;
}

/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: ESTILO BOTÓN "VOLVER A SPLASH" (CON TEXTO) --- */
/* =================================================================== */


/* --- FIN: ESTILO BOTÓN VOLVER --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FINALES FOOTER (LAYOUT CORREGIDO) --- */
/* =================================================================== */

/* 1. Footer principal: Layout Flex, transparente por defecto */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    z-index: 100; box-sizing: border-box;
    display: flex;
    align-items: center; /* Centra verticalmente */
    /* Quitamos justify-content para que todo se alinee a la izquierda por defecto */
    padding: 0 1.5rem; /* Padding solo en los extremos */
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.4s ease, transform 0.4s ease-in-out, box-shadow 0.4s ease;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
#footer-sticker.has-content {
    background-color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. Contenedor izquierdo: Siempre blanco, agrupa botones */
.footer-left-buttons {
    display: flex; align-items: center;
    background-color: #ffffff !important;
    height: 100%;
    /* Padding vertical 0, padding horizontal para espacio interior */
    padding: 0 1.5rem; 
    border-top-right-radius: 20px;
    flex-shrink: 0;
    box-shadow: none !important;
    /* Añadimos margen derecho para separarlo de la info del producto */
    margin-right: 1.5rem; 
}

/* 3. Estilos botones izquierdos (sin cambios) */
.footer-action-button {
    background: #f0f2f5; border: 1px solid #d1d5db; border-radius: 12px;
    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; padding: 0;
}
.footer-action-button i { font-size: 2rem; color: #4b5563; }
/* ... (hover styles) ... */

/* 4. Info del producto: Se posiciona normal, después de los botones izquierdos */
.footer-product-info {
    display: flex; align-items: center; gap: 1rem;
    /* --- ¡Quitamos el centrado absoluto y el margin-left: auto! --- */
    /* Visibilidad */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.footer-product-info.content-visible { opacity: 1; visibility: visible; }
/* Estilos internos (sin cambios) */
#footer-product-img { width: 110px; height: 110px; border-radius: 20px; object-fit: cover; border: 1px solid #f0f0f0;}
#footer-product-text { font-size: 1.3rem; font-weight: 600; color: #333; }

/* 5. Botón de "Ver Pedido": Se empuja él solo a la derecha */
.footer-cart-button {
    /* --- ¡LA CLAVE! Este margen empuja SOLO este botón al extremo derecho --- */
    margin-left: auto; 
    
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
    flex-shrink: 0;
    /* ... tus estilos de botón ... */
    display: flex; align-items: center; gap: 1rem;
    background-color: var(--primary-color, #062829); color: white; border: none;
    cursor: pointer; padding: 1.2rem 2.5rem; font-size: 1.5rem; font-weight: 700;
    border-radius: 16px; white-space: nowrap;
}
.footer-cart-button.content-visible { opacity: 1; visibility: visible; }

/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FOOTER (DIV IZQ BLANCO FIJO) --- */
/* =================================================================== */

/* 1. Footer principal: Transparente por defecto, sin padding izquierdo */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    z-index: 100; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem 0 0; /* Sin padding izquierdo */
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.4s ease, transform 0.4s ease-in-out, box-shadow 0.4s ease;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
#footer-sticker.has-content {
    background-color: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. El NUEVO DIV IZQUIERDO: Siempre blanco y contiene los 2 botones */
.footer-exit-area { /* <-- Nueva clase */
    display: flex; align-items: center; gap: 1rem;
    background-color: #ffffff !important; /* ¡FONDO BLANCO FIJO! */
    height: 100%;
    padding: 0 1.5rem;
    border-top-right-radius: 20px;
    flex-shrink: 0;
    box-shadow: none !important;
    /* Añadimos margen derecho para separarlo de la info del producto */
    margin-right: 1.5rem; 
    /* Sombra SÓLO cuando el footer principal tiene contenido */
    transition: box-shadow 0.4s ease;
}
#footer-sticker.has-content .footer-exit-area {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}


/* 3. Estilos botones izquierdos (sin cambios) */
.footer-action-button {
    background: #f0f2f5; border: 1px solid #d1d5db; border-radius: 12px;
    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; padding: 0;
}
.footer-action-button i { font-size: 2rem; color: #4b5563; }
/* ... (hover styles) ... */

/* 4. Info del producto: Se posiciona normal, después del div izquierdo */
.footer-product-info {
    display: flex; align-items: center; gap: 1rem;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.footer-product-info.content-visible { opacity: 1; visibility: visible; }
#footer-product-img { width: 110px; height: 110px; border-radius: 20px; object-fit: cover; border: 1px solid #f0f0f0;}
#footer-product-text { font-size: 1.3rem; font-weight: 600; color: #333; }

/* 5. Botón de "Ver Pedido": Se empuja él solo a la derecha */
.footer-cart-button {
    margin-left: auto;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
    flex-shrink: 0;
    /* ... tus estilos de botón ... */
    display: flex; align-items: center; gap: 1rem;
    background-color: var(--primary-color, #062829); color: white; border: none;
    cursor: pointer; padding: 1.2rem 2.5rem; font-size: 1.5rem; font-weight: 700;
    border-radius: 16px; white-space: nowrap;
}
.footer-cart-button.content-visible { opacity: 1; visibility: visible; }

/* --- FIN: ESTILOS FOOTER --- */

/* =================================================================== */
/* --- INICIO: ESTILO BOTÓN SALIR (X) COMO UN DIV --- */
/* =================================================================== */

/* 1. Contenedor izquierdo: Mantiene el fondo blanco y padding */
.footer-exit-area {
    display: flex; align-items: center; gap: 1rem;
    background-color: #ffffff !important;
    height: 100%;
    padding: 0 1.5rem;
    border-top-right-radius: 20px;
    flex-shrink: 0;
    box-shadow: none !important;
    margin-right: 1.5rem;
    transition: box-shadow 0.4s ease;
}
#footer-sticker.has-content .footer-exit-area {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. Estilo base para los botones DENTRO del div izquierdo */
.footer-exit-area .footer-action-button {
    background: #f0f2f5; border: 1px solid #d1d5db; border-radius: 12px;
    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; padding: 0;
}
.footer-exit-area .footer-action-button:active { transform: scale(0.95); }
.footer-exit-area .footer-action-button i { font-size: 2rem; color: #4b5563; }

/* 3. ¡LA CLAVE! Estilos específicos para el botón SALIR (X) */
#exit-kiosk-btn {
    /* --- ¡CAMBIO CLAVE! Fondo rojo secundario --- */
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    padding: 0 !important;
    margin: 2px !important;
}

/* --- FIN: ESTILO BOTÓN SALIR --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FOOTER (GRADIENTE 100px + BORDE 12px) --- */
/* =================================================================== */

/* 1. Footer principal: GRADIENTE ajustado a 100px */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    z-index: 100; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem 0 0;
    box-shadow: none !important;
    transition: background 0.4s ease, transform 0.4s ease-in-out, box-shadow 0.4s ease;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
#footer-sticker.has-content {
    background: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. El DIV IZQUIERDO: TRANSPARENTE, pero con BORDE REDONDEADO a 12px */
.footer-exit-area {
    display: flex; align-items: center; gap: 1rem;
    background-color: transparent !important;
    height: 100%;
    padding: 0 1.5rem;
    /* --- BORDE CORREGIDO A 12PX --- */
    border-top-right-radius: 12px !important; /* <-- Cambio aquí */
    flex-shrink: 0;
    box-shadow: none !important;
    margin-right: 1.5rem;
}
/* La sombra la controla el #footer-sticker */

/* 3. Aseguramos que #menu-container NO tenga padding-top extra */
#menu-container {
    padding-top: 0 !important;
    position: relative !important;
    padding-bottom: 10rem;
}

/* --- FIN: ESTILO DIV STICKY --- */

/* =================================================================== */
/* --- INICIO: ESTILOS FOOTER (AJUSTE BOTONES IZQUIERDA) --- */
/* =================================================================== */

/* 1. Footer principal (sin cambios) */
#footer-sticker {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 150px;
    z-index: 100; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem 0 0;
    box-shadow: none !important;
    transition: background 0.4s ease, transform 0.4s ease-in-out, box-shadow 0.4s ease;
    transform: translateY(100%);
}
#footer-sticker.visible { transform: translateY(0); }
#footer-sticker.has-content {
    background: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

/* 2. El DIV IZQUIERDO: Siempre blanco, ajustamos padding y gap */
.footer-exit-area {
    display: flex; align-items: center;
    /* --- CAMBIO: Aumentamos el espacio ENTRE los botones --- */
    gap: 1.5rem; /* Antes era 1rem */
    background-color: #ffffff !important;
    height: 100%;
    /* --- CAMBIO: Ajustamos padding para centrar mejor con más gap --- */
    padding: 0 1.25rem; /* Antes era 0 1.5rem */
    border-top-right-radius: 12px !important;
    flex-shrink: 0;
    box-shadow: none !important;
    margin-right: 1.5rem;
    transition: box-shadow 0.4s ease;
}
#footer-sticker.has-content .footer-exit-area {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}


/* 3. Estilo común botones izquierdos: Hacemos los botones un poco más grandes */
.footer-action-button {
    background: #f0f2f5; border: 1px solid #d1d5db; border-radius: 12px;
    /* --- CAMBIO: Aumentamos tamaño --- */
    width: 75px !important; /* Antes 70px */
    height: 75px !important; /* Antes 70px */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; padding: 0;
}
.footer-action-button:active { transform: scale(0.95); }

/* Iconos dentro de los botones: Un poco más grandes */
.footer-action-button i {
    /* --- CAMBIO: Aumentamos tamaño icono --- */
    font-size: 2.2rem !important; /* Antes 2rem */
    color: #4b5563 !important;
}

/* 5. Botón VOLVER CATEGORÍAS - Añadimos margen superior */
#footer-back-to-cat-btn {
     /* --- CAMBIO: Añadimos margen superior --- */
     margin-top: 5px !important; /* Puedes ajustar este valor */
}
#footer-back-to-cat-btn:hover { background-color: #e2e6ea !important; }
#footer-back-to-cat-btn:hover i { color: var(--primary-color) !important; }

/* --- FIN: ESTILOS FOOTER --- */

.footer-exit-area .footer-action-button {
    background: #f0f2f5; 
    border: 1px solid #d1d5db; 
    border-radius: 12px;
    width: 75px !important; /* Size */
    height: 75px !important; /* Size */
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: background-color 0.2s ease, transform 0.15s ease; 
    padding: 0;
}
.footer-exit-area .footer-action-button:active { 
    transform: scale(0.95); 
}
.footer-exit-area .footer-action-button i { 
    font-size: 2.2rem !important; /* Icon size */
    color: #4b5563 !important; 
}

/* Specific styles for the EXIT button */
#exit-kiosk-btn {
    background: #a80022 !important; /* Red background */
    border: none !important;        /* No border */
}
#exit-kiosk-btn i { 
    color: #ffffff !important;      /* White icon */
}
#exit-kiosk-btn:hover { 
    background-color: #8a001b !important; /* Darker red on hover */
}
#exit-kiosk-btn:hover i { 
    color: #ffffff !important;      /* Icon stays white on hover */
}

#exit-kiosk-btn {
    background: #FFF !important; /* Red background */
    border: none !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
    
    /* --- BORDER RADIUS AS REQUESTED --- */
    /* top-left | top-right | bottom-right | bottom-left */
    /* Note: Negative pixel values are unusual for border-radius. Browsers might treat them as 0px or ignore them for standard rounding. */
    border-radius: 0px 8px 8px 0px !important;
    
    /* --- PADDING ("algo de sobra") --- */
    padding: 10px !important; /* Adds 10px space inside the button */
    box-sizing: border-box !important; /* Ensures padding is included in the size */

    margin: 0px !important; /* Added the margin from your original snippet */
    box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.75);
}

/* Icon styles remain the same */
#exit-kiosk-btn i { 
    font-size: 3.5rem !important;
    color: #dc3545 !important;
}
#exit-kiosk-btn:active { 
    transform: scale(0.95) !important; 
}
#exit-kiosk-btn:hover { 
    background-color: #8a001b !important; 
}
#exit-kiosk-btn:hover i { 
    color: #ffffff !important;      
}

#exit-kiosk-btn {
    /* --- ESTADO INICIAL (Footer Transparente) --- */
    background: #ffffff !important; /* Fondo blanco */
    box-shadow: 0px 0px 26px 0px rgba(0,0,0,0.75) !important; /* Sombra */
    border: none !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    /* Transición suave para background y sombra */
    transition: background-color 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease !important;
    border-radius: 0px 8px 8px 0px !important; /* Tu border-radius */
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0px !important; /* Quitamos el margen de 2px anterior */
}

/* Icono (siempre visible) */
#exit-kiosk-btn i {
    font-size: 3.5rem !important;
    color: #dc3545 !important; /* Color oscuro por defecto */
    transition: color 0.2s ease !important; /* Transición para el hover */
}

/* Efecto hover sobre el icono (rojo) */
#exit-kiosk-btn:hover i {
    color: #dc3545 !important;
}

/* Efecto active (sin cambios) */
#exit-kiosk-btn:active {
    transform: scale(0.95) !important;
}

/* --- ¡LA CLAVE! ESTADO CUANDO EL FOOTER TIENE CONTENIDO --- */
/* Cuando el footer principal tiene la clase '.has-content'... */
#footer-sticker.has-content #exit-kiosk-btn {
    background: transparent !important; /* ...el botón se vuelve transparente */
    box-shadow: none !important; /* ...y pierde la sombra */
}

/* --- FIN: ESTILO BOTÓN SALIR --- */

/* =================================================================== */
/* --- INICIO: ESTILOS PARA TARJETAS DE CUPÓN CLICABLES EN BANNER --- */
/* =================================================================== */

/* Hacer la tarjeta clicable visualmente */
.reward-card-small.clickable {
    cursor: pointer;
}

/* Botón inferior Aplicar/Aplicado */
.applied-indicator {
    display: block;
    width: 100%;
    background-color: var(--primary-color, #062829);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 0.7rem 0;
    border-radius: 0 0 16px 16px;
    letter-spacing: 0.03em;
    transition: background-color 0.25s ease;
    margin-top: auto;
    flex-shrink: 0;
}

/* Badge ✓ cuando está aplicado */


/* Estilo cuando el cupón está aplicado */
.reward-card-small.applied {
    border-color: #22c55e !important;
    box-shadow: 0 4px 16px rgba(34,197,94,0.18), 0 1px 4px rgba(0,0,0,0.06);
}

.reward-card-small.applied .applied-indicator {
    background-color: #22c55e;
}

/* .detail-options-content .detail-option-card {
  height: 27vh !important;
} */

@media (max-width: 768px) {
    .detail-options-content .detail-option-card {
        height: 29vh !important; /* Aumentamos la altura relativa */
    }
}

/* --- FIN: ESTILOS TARJETAS CUPÓN --- */

#menu-panel-modal .btn-close-large, 
#addin-modal .btn-close-large, 
.wizard-fullscreen .btn-close-wizard {
  z-index: 1000 !important;
}

/* =================================================================== */
/* --- CSS: BARRAS STICKY CON ALTURA Y POSICIÓN FIJAS (377px) --- */
/* =================================================================== */

/* --- Estilos para el precio tachado en el carrito --- */

/* Contenedor para alinear los precios (original y final) */
.cart-item-price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 80px;
    padding: 0 5px;
    gap: 2px;
}

/* El precio original (tachado en rojo) */
.cart-item-price-original {
    font-size: 1em;
    font-weight: 600;
    color: #e53935;
    text-decoration: line-through;
    text-decoration-color: #e53935;
    text-decoration-thickness: 2px;
    opacity: 0.75;
    line-height: 1.1;
}

/* El precio final con descuento */
.cart-item-price-final {
    font-weight: 800;
    font-size: 1.4em;
    color: var(--cart-item-price-color) !important;
    line-height: 1.1;
}

/* Badge de promo en el producto */

* {
  box-sizing: border-box;
}

/* 1. Definimos las variables que el JS va a rellenar */
:root {
    /* El JS medirá y pondrá aquí la altura real del banner */
    --banner-actual-height: 100px;  /* (Valor por defecto) */

    /* El JS medirá y pondrá aquí la altura real del nav (los 22rem) */
    --nav-actual-height: 352px; /* (Valor por defecto 22rem * 16px) */
}

/* 2. El Banner (arriba del todo) */
#loyalty-banner-container {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    /* Su altura la da su contenido (JS mide 87px) */
}

/* 3. El Nav de Categorías (en medio) */
#category-nav {
    position: sticky;
    /* Se pega DEBAJO del banner, usando la altura medida (87px) */
    top: var(--banner-actual-height);
    z-index: 9;
    position: -webkit-sticky; /* Para Safari/iOS */
    /* Esta es la altura fija que tú definiste (22rem) */
    height: 22rem; /* El JS medirá esto */
    top: 0;
    /* (Tus estilos de scroll, etc.) */
    flex-shrink: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    z-index: 100; /* Para que pase por encima de los productos al hacer scroll */
}

/* 4. La Barra "Volver" (abajo) */
/* (Esta barra es la que se muestra u oculta con JS) */
#back-splash-bar {
    position: sticky;
    border-radius: 50px;
    width: auto;
    height: 50px;
    padding: 0.5rem 1.5rem;
    gap: 0.75rem;
    transition: background-color 0.2s ease, transform 0.15s  ease !important;
    /* Se pega DEBAJO de AMBOS, usando sus alturas medidas */
    top: calc(var(--banner-actual-height) + var(--nav-actual-height));
    z-index: 8; /* Debajo de los otros dos */
    flex-shrink: 0;
    background: transparent;
    display: none; /* JS lo muestra */
    box-sizing: border-box;
    border-radius: 0px;
}

/* 5. El botón "Volver" (DENTRO de #back-splash-bar) */
.btn-back-to-splash {
    /* ¡YA NO ES STICKY! Es un botón normal */
    position: static;
    top: auto;
    left: auto;
    
    /* Mantenemos tu estilo visual */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50px !important;
    width: auto !important;
    height: 60px !important;
    padding: 0 1.5rem 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem;
    cursor: pointer !important;
    white-space: nowrap;
}

.btn-back-to-splash span {
      display: inline !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #343a40 !important;
}

.btn-back-to-splash i.fas.fa-arrow-left {
    font-size: 1.5rem !important;
    color: #343a40 !important;
}

/* --- FIN DE LA SECCIÓN STICKY --- */

/* =================================================================== */
/* --- SOLUCIÓN AL HUECO (MARGIN vs PADDING) --- */
/* =================================================================== */

/* 1. El Banner (arriba del todo) */
#loyalty-banner-container {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    
    /* ¡AQUÍ ESTÁ LA SOLUCIÓN! */
    /* Mantenemos tu espacio de 0.5rem, pero POR DENTRO. */
    padding-top: 0.5rem;
    
    /* (Dejamos los otros paddings por si los necesitas) */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    
    /* Hacemos el fondo transparente para que solo se vea el banner rojo */
}

/* 2. La regla ÚNICA Y LIMPIA para tu banner de invitado */
.loyalty-invite-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    
    background-color: #d9534f; /* Tu estilo rojo */
    color: white;
    
    padding: 1rem 1.7rem;
    border-radius: 12px;
    
    /* ¡SIN MÁRGENES! El padding del padre se encarga. */
    margin: 0; 
}

/* 3. (OPCIONAL) Si quieres que el banner GRANDE (logueado) también
      tenga ese hueco, añade esto: */
#loyalty-banner-container:has(.loyalty-banner-logged-in) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
}

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

/* =================================================================== */
/* --- INICIO: ESTILOS ACTUALIZADOS PARA SLIDESHOW (SOPORTA VÍDEO) --- */
/* =================================================================== */

#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    cursor: pointer;
    overflow: hidden;
}

/* * Esta regla ahora se aplica a AMBOS:
 * <div class="screensaver-slide"> (para imágenes)
 * <video class="screensaver-slide"> (para vídeos)
*/
.screensaver-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    
    /* ¡LA CLAVE! Esto hace que el <video> llene la pantalla */
    object-fit: cover; 
    
    /* (Estas reglas se aplican a los <div> de imagen) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.screensaver-slide.active {
    opacity: 1;
}

/* (Tu animación @keyframes fadeSlides, si la tenías, puede quedarse igual) */

/* --- FIN: ESTILOS SLIDESHOW --- */

.slideshow-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    
    /* ¡LA CLAVE! Esto hace que el <video> llene la pantalla */
    object-fit: cover; 
    
    /* (Estas reglas se aplican a los <div> de imagen) */
    background-size: cover;
    background-position: center;
}

.slideshow-slide.active {
    opacity: 1; 
}

body.banner-mode-none #loyalty-banner-container {
    display: none !important;
}

.cart-actions-secondary {
    display: flex;
    gap: 1.5rem; /* Espacio entre los botones */
    margin-bottom: 1.5rem; /* Espacio antes del botón "Pagar" */
}

/* Estilos para los botones dentro de ese contenedor */
.cart-actions-secondary button {
    flex: 1; /* Hace que ocupen el 50% cada uno */
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
}

.cart-modal-footer {
    display: flex;
    flex-direction: column; /* ¡Esta es la línea clave! Apila todo verticalmente */
    gap: 0.75rem; /* Espacio entre el total, los botones y el botón de pagar */
    padding: 1rem;
    border-top: 1px solid #eee;
}

/* Opcional: para que los botones "Seguir Comprando" y "Pagar" 
   ocupen todo el ancho y se vean ordenados */
   
#cart-secondary-actions .btn-secondary,
#checkout-button {
    width: 100%;
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
    padding: 1.25rem;
    font-size: 1.8rem;
    font-weight: bold;
}

/* Contenedor de botones secundarios (Seguir Comprando, etc.) */
#cart-secondary-actions {
    display: flex;
    gap: 0.75rem;
}

#cart-secondary-actions .btn-secondary {
    flex-grow: 1; /* Ocupa el espacio disponible */
}


/* =================================================================== */
/* --- ARREGLO FOOTER CARRITO (VERSIÓN "BULLDOZER") --- */
/* =================================================================== */

/* 1. El Contenedor Padre: Forzamos el apilamiento vertical */
#cart-modal .cart-modal-footer {
    display: flex !important;
    flex-direction: column !important; /* Apilado vertical */
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-top: 1px solid #eee !important;
    
    /* AÑADIDO: Aseguramos que la altura sea automática y la posición 'relative' */
    height: auto !important; 
    position: relative !important;
}

/* 2. LOS HIJOS: Forzamos que vuelvan al flujo (ESTA ES LA CLAVE) */
#cart-modal .cart-total-container,
#cart-modal #cart-secondary-actions,
#cart-modal #checkout-button {
    position: relative !important; /* ¡¡Anula cualquier 'position: absolute'!! */
    width: 100% !important;         /* Ocupa todo el ancho */
    box-sizing: border-box !important;
    
    /* Reseteamos márgenes y posiciones por si acaso */
    margin: 0 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* 3. Estilos de los botones (como antes) */
#cart-modal #cart-secondary-actions {
    display: flex !important;
    gap: 0.75rem !important;
    order: 2; /* Orden: Segundo */
}

#cart-modal #cart-secondary-actions .btn-secondary {
    flex-grow: 1 !important;
    padding: 1.25rem;
    font-size: 1.5rem !important;
    font-weight: bold;
}

#cart-modal #checkout-button {
    padding: 1.25rem;
    font-size: 1.2rem;
    font-weight: bold;
    order: 3; /* Orden: Tercero */
}

#cart-modal .cart-total-container {
    order: 1; /* Orden: Primero */
}

/* =================================================================== */
/* --- CSS FOOTER CARRITO (Con lógica de botones 50/50) --- */
/* =================================================================== */

/* 1. El Contenedor Padre (Footer) */
#cart-modal .cart-modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;     /* Permite que los elementos salten de línea */
    flex-direction: row !important; /* Los hijos se colocan en fila */
    justify-content: space-between !important; /* Espacio entre elementos */
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-top: 1px solid #eee !important;
    
    /* Reseteamos por si había 'position' de hacks anteriores */
    position: relative !important;
    height: auto !important;
}

/* 2. El Contenedor del Total */
#cart-modal .cart-total-container {
    flex-basis: 100% !important; /* Ocupa 100% del ancho (siempre es la primera fila) */
    order: 1; /* 1. Total */
    position: relative !important;
    width: 100% !important;
    font-size: 1.2rem; /* Texto del total más grande */
}

/* 3. El Contenedor de Botones Secundarios (Seguir Comprando / Fidelización) */
#cart-modal #cart-secondary-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    position: relative !important;
    width: 100% !important; /* Ocupa 100% por defecto */
}

/* 4. El Botón de Pagar */
#cart-modal #checkout-button {
    position: relative !important;
    width: 100% !important; /* Ocupa 100% por defecto */
    
    /* Estilos del botón Pagar */
    padding: 1.25rem;
    font-size: 1.8rem; /* Texto más grande para Pagar */
    font-weight: bold;
    box-sizing: border-box;
}

/* 5. Estilos de los botones DENTRO de #cart-secondary-actions */
#cart-modal #cart-secondary-actions .btn-secondary {
    flex-grow: 1; /* Reparte el espacio (50/50 si hay 2, 100 si hay 1) */
    padding: 1.7rem !important;
    font-size: 1.8rem !important; /* Texto un poco más grande */
    font-weight: bold;
    box-sizing: border-box;
}


/* ================================================= */
/* --- LA MAGIA (Lógica condicional) --- */
/* ================================================= */

/* --- ESCENARIO A: SIN Fidelización --- */
/* (El div tiene la clase 'hidden-actions') */

/* El contenedor de "Seguir Comprando" ocupa 49% */
#cart-modal #cart-secondary-actions.hidden-actions {
    flex-basis: 49% !important;
    width: 49% !important;
    order: 2; /* 2. Botón Seguir Comprando */
}
/* El botón "Pagar" ocupa 49% */
#cart-modal #cart-secondary-actions.hidden-actions + #checkout-button {
    flex-basis: 49% !important;
    width: 49% !important;
    order: 3; /* 3. Botón Pagar */
    font-size: 1.7rem;
}

/* --- ESCENARIO B: CON Fidelización --- */
/* (El div tiene la clase 'cart-actions-secondary') */

/* El contenedor de "Seguir" y "Fidelización" ocupa 100% */
#cart-modal #cart-secondary-actions.cart-actions-secondary {
    flex-basis: 100% !important;
    width: 100% !important;
    order: 2; /* 2. Botones secundarios */
}
/* El botón "Pagar" ocupa 100% (y salta a la línea de abajo) */
#cart-modal #cart-secondary-actions.cart-actions-secondary + #checkout-button {
    flex-basis: 100% !important;
    width: 100% !important;
    order: 3; /* 3. Botón Pagar */
    padding: 1.7rem;
    font-size: 1.8rem;
    font-weight: bold;
}

/* Contenedor principal que se activa con openModal() */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

/* Fondo oscuro semitransparente */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/* El contenedor blanco del modal */
.modal-content {
  position: relative;
  background: #FFF;
  border-radius: 10px;
  max-width: 800px; /* Ancho máximo */
  max-height: 80vh; /* Altura máxima */
  width: 90%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Cabecera del modal */
.modal-header {
  background-color: #F8F9FA !important;
  padding: 1.3rem !important;
  border-bottom: none !important;
  display: flex;
  justify-content: space-between; /* <-- ¡Esta es la línea clave! */
  align-items: center;
}

.modal-header h2 {
  font-size: 2.7rem !important;
  font-weight: 800;
  margin: 0;
}

/* Botón de cerrar (X) */
.btn-close-large {
  background: none;
  border: none;
  font-size: 2.5rem;
  font-weight: 300;
  color: #888;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* Pie de página del modal */
.modal-footer {
  background-color: #F8F9FA !important;
  padding: 15px 20px;
  border-top: none !important;
  display: flex;
  justify-content: flex-end; /* Alinea el botón a la derecha */
}

/* Botón principal (Continuar, Añadir) */
.btn-confirm {
  background-color: var(--primary-color);
  color: #FFF;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
}

/* El elemento multimedia (sea video o div de imagen) */
    .screensaver-media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Para el video */
        background-size: cover; /* Para el div de imagen */
        background-position: center;
    }

    /* La capa transparente para bloquear clics en el video */
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Se pone encima del .screensaver-media */
        background-color: transparent; /* Es invisible */
    }

    /* Reglas anteriores (las mantenemos) */
    video::-webkit-media-controls { display: none !important; }
    video::-webkit-media-controls-enclosure { display: none !important; }
    video::-webkit-media-controls-panel { display: none !important; }
    video::-webkit-media-controls-play-button { display: none !important; }

    /* El contenedor de las tarjetas de esqueleto */
    .skeleton-card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    /* La 'imagen' gris */
    .skeleton-image {
      width: 100%;
      height: 150px;
      background-color: #e0e0e0;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    .skeleton-text {
      padding: 10px;
      flex-grow: 1;
    }
    
    /* El 'título' gris */
    .skeleton-title {
      height: 20px;
      width: 80%;
      background-color: #e0e0e0;
      border-radius: 4px;
      margin-bottom: 10px;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* El 'precio' gris */
    .skeleton-price {
      height: 18px;
      width: 40%;
      background-color: #e0e0e0;
      border-radius: 4px;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* La animación de pulso */
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }
    /* --- FIN: Skeleton Loader CSS --- */

    /* Animación de pulso (no cambia) */
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    /* Contenedor principal de la tarjeta (ya tienes .menu-item) */
    .menu-item.skeleton-card {
      background: #fff;
      /* (El resto de estilos de .menu-item ya aplican) */
    }

    /* Título de la categoría (ya lo tenías) */
    .skeleton-title {
      background-color: #e0e0e0;
      border-radius: 4px;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* La 'imagen' gris */
    .skeleton-image {
      width: 100%;
      height: 150px; /* Asegúrate que coincide con tu .product-image */
      background-color: #e0e0e0;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* El 'área de texto' (no cambia) */
    .skeleton-text {
      padding: 10px;
      flex-grow: 1;
    }
    
    /* El 'título' gris */
    .skeleton-text .skeleton-title {
      height: 20px;
      width: 80%;
      margin-bottom: 10px;
    }
    
    /* El 'precio' gris */
    .skeleton-text .skeleton-price {
      height: 18px;
      width: 40%;
      margin-top: auto;
    }

    /* ¡NUEVO! El 'botón' gris */
    .skeleton-button {
      background-color: #e0e0e0;
      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      /* Hereda automáticamente el tamaño de:
         .btn-add-to-cart.large-action-button 
         (padding: 10px, width: 100%, etc.)
      */
    }


    /* --- ESTILO PARA LA BARRA SUPERIOR (VOLVER Y FILTRO) --- */

/* 4. La Barra "Volver" (MODIFICADA) */
/* Esta barra AHORA ocupará todo el ancho para poder alinear los botones */
#back-splash-bar {
  /* --- Estilos de posicionamiento --- */
  position: sticky;
  top: calc(var(--banner-actual-height) + var(--nav-actual-height));
  z-index: 8;
  
  /* --- ¡CAMBIOS CLAVE DE LAYOUT! --- */
  width: 100%; /* Tiene que ocupar el 100% del ancho */
  display: flex;
  justify-content: space-between; /* <-- Esto empuja el filtro a la derecha */
  align-items: center;

  /* --- Estilos visuales --- */
  /* El padding ahora es horizontal, la altura la dan los botones */
  padding: 0.5rem 1.5rem; 
  height: auto; /* Dejamos que los botones de 60px + padding definan la altura */
  box-sizing: border-box; /* Importante para que el padding no desborde */
  display: none; /* JS lo muestra */
}

/* 5. El botón "Volver" (DENTRO de #back-splash-bar) */
/* (Tu CSS original para este botón está perfecto, no necesita cambios) */
.btn-back-to-splash {
  position: static;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50px !important;
  width: auto !important;
  height: 60px !important;
  padding: 0 1.5rem 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem;
  cursor: pointer !important;
  white-space: nowrap;
  flex-shrink: 0; /* Evita que se encoja */
}

.btn-back-to-splash span {
    display: inline !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #343a40 !important;
}

.btn-back-to-splash i.fas.fa-arrow-left {
  font-size: 1.5rem !important;
  color: #343a40 !important;
}


/* --- 6. ESTILOS PARA EL NUEVO BOTÓN-BOLA DEL FILTRO --- */
/* (Este también va DENTRO de #back-splash-bar) */
#allergen-filter-btn {
  /* Apariencia basada en tu .btn-back-to-splash */
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50% !important; /* Para que sea una bola perfecta */
  height: 60px !important;       /* Misma altura que tu botón "Volver" */
  width: 60px !important;        /* Misma anchura para que sea redondo */
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  
  /* Posicionamiento para el contador */
  position: relative; 
  flex-shrink: 0; /* Evita que se encoja */
  transition: all 0.2s ease;
}

/* Icono dentro del botón bola */
#allergen-filter-btn i.fas.fa-filter {
  font-size: 1.5rem !important;
  color: #343a40 !important;
}

/* El botón cuando el filtro está activo */


#allergen-filter-btn.active i.fas.fa-filter {
  color: #ffffff !important;
}

/* El contador numérico */
#allergen-filter-count {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px; 
  width: 24px;
  height: 24px;
  background-color: var(--secondary-color); 
  color: white;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: bold;
  border: 2px solid #fff;
  box-sizing: border-box;
}

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS (Sin cambios) --- */
/* (Aquí irían los estilos del modal que te pasé antes, si no los has copiado ya) */

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS --- */

/* Contenedor de la lista de alérgenos */
.allergen-toggle-list {
  display: grid;
  /* Esto crea un grid flexible que se ajusta al contenido */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  max-height: 50vh; /* Evita que el modal sea demasiado alto */
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 8px;
  padding-bottom: 8rem;
}

/* --- ESTILOS PARA LOS BOTONES DEL FOOTER DEL MODAL --- */
/*
 * Usamos flexbox en el footer para que los botones
 * se repartan el espacio.
*/
#allergen-filter-modal .modal-footer {
  display: flex; /* Activa Flexbox */
  justify-content: space-between; /* Mantiene la justificación que tenías */
  gap: 1rem; /* Añade un espacio entre los botones */
}

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS --- */

/* Hacemos este modal más grande */
#allergen-filter-modal .modal-content {
  max-width: 80vw; /* 80% del ancho de la pantalla */
  max-height: 80vh;
}

/* Contenedor de la lista de alérgenos */
.allergen-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  max-height: 55vh; /* Un poco más de altura para el modal grande */
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* --- ESTILOS PARA LOS BOTONES DEL FOOTER (MÁS GRANDES) --- */

#allergen-filter-modal .modal-footer {
  display: flex; 
  justify-content: space-between; 
  gap: 1rem; 
}

/*
 * Hacemos que ambos botones crezcan por igual 
 * y sean más grandes.
*/
#allergen-filter-modal #allergen-clear-btn,
#allergen-filter-modal #allergen-apply-btn {
  flex: 1; /* <-- Esto hace que ocupen el mismo tamaño */
  
  /* --- ¡CAMBIO! Hacemos los botones más grandes --- */
  padding: 10px 20px; /* Aumenta el padding (ajusta este valor si lo quieres más grande) */
  font-size: 1.5rem; /* Aumenta el tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  height: 4rem;
  border-radius: 12px !important;
}

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS --- */

/* Hacemos este modal más grande */
#allergen-filter-modal .modal-content {
  max-width: 80vw; /* 80% del ancho de la pantalla */
  max-height: 80vh;
}

/* Contenedor de la lista de alérgenos */
.allergen-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid #eee;
  border-radius: 8px;
  /* Esto asegura que todos los items de una fila tengan la misma altura */
  align-items: stretch;
}

/* Cada tarjeta de alérgeno */
.allergen-toggle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* --- ¡CAMBIO! Padding aumentado --- */
  padding: 40px;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f9f9f9;
  box-sizing: border-box; /* Importante para que el padding no desborde */
}

.allergen-toggle-item img {
  /* --- ¡CAMBIO! Imagen más grande --- */
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 8px;
}

.allergen-toggle-item span {
  /* --- ¡CAMBIO! Texto más grande --- */
  font-size: 1rem;
  text-align: center;
  font-weight: 600;
  color: #333;
}

/* Estado seleccionado */
.allergen-toggle-item.selected {
  border-color: var(--primary-color);
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.allergen-toggle-item.selected span {
  color: var(--primary-color);
}

/* --- ESTILOS PARA LOS BOTONES DEL FOOTER (MÁS GRANDES) --- */

#allergen-filter-modal .modal-footer {
  display: flex; 
  justify-content: space-between; 
  gap: 1rem; 
}

/*
 * Hacemos que ambos botones crezcan por igual 
 * y sean más grandes.
*/
#allergen-filter-modal #allergen-clear-btn,
#allergen-filter-modal #allergen-apply-btn {
  flex: 1; /* <-- Ocupan el mismo tamaño */
  
  /* Hacemos los botones más grandes */
  padding: 1rem;
  font-size: 1.8rem;
  font-weight: bold;
  border-radius:5px !important;
}

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS --- */

/* Hacemos este modal más grande */
#allergen-filter-modal .modal-content {
  max-width: 80vw; /* 80% del ancho de la pantalla */
  max-height: 80vh;
}

/* Contenedor de la lista de alérgenos */
.allergen-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  /* Esto es el valor por defecto, pero lo ponemos para asegurarnos */
  align-items: stretch; 
}

/* Cada tarjeta de alérgeno */
.allergen-toggle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px; /* Tu padding grande */
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f9f9f9;
  box-sizing: border-box; 
  
  /* --- ¡ESTA ES LA LÍNEA CLAVE! --- */
  /* Hace que la tarjeta ocupe el 100% de la celda del grid */
  height: 200px; 
}

.allergen-toggle-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 8px;
}

.allergen-toggle-item span {
  font-size: 1rem;
  text-align: center;
  font-weight: 600;
  color: #333;
}

/* Estado seleccionado */
.allergen-toggle-item.selected {
  border-color: var(--primary-color);
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.allergen-toggle-item.selected span {
  color: var(--primary-color);
}

/* --- ESTILOS PARA LOS BOTONES DEL FOOTER (MÁS GRANDES) --- */

#allergen-filter-modal .modal-footer {
  display: flex; 
  justify-content: space-between; 
  gap: 1rem; 
}

#allergen-filter-modal #allergen-clear-btn,
#allergen-filter-modal #allergen-apply-btn {
  flex: 1; /* Ocupan el mismo tamaño */
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* --- ESTILOS PARA EL MODAL DE ALÉRGENOS --- */

/* Hacemos este modal más grande */
#allergen-filter-modal .modal-content {
  max-width: 80vw; /* 80% del ancho de la pantalla */
  max-height: 80vh;
}

/* Contenedor de la lista de alérgenos */
.allergen-toggle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid transparent !important;
  border-radius: 8px;
  align-items: stretch; 
  margin-bottom: 8rem !important; /* Esto añade espacio al final del scroll */
}

/* Cada tarjeta de alérgeno */
.allergen-toggle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --- ¡CAMBIO! Alineamos el texto abajo --- */
  justify-content: flex-end; 
  /* --- ¡CAMBIO! Altura fija y padding ajustado --- */
  height: 200px;
  padding: 20px; /* Padding reducido para dar espacio */
  
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f9f9f9;
  box-sizing: border-box; 
  position: relative; /* Necesario para posicionar la imagen */
  overflow: hidden;
}

/* --- ¡CAMBIO! Imagen posicionada absolutamente --- */
.allergen-toggle-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: opacity 0.2s ease;
  
  /* Posicionamiento fijo */
  position: absolute;
  top: 60px; /* Distancia fija desde arriba */
  left: 50%;
  transform: translateX(-50%);
}

/* --- ¡CAMBIO! Icono de prohibido posicionado absolutamente --- */
.allergen-toggle-item::after {
  content: '\f05e'; 
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro'; 
  font-weight: 900; 
  
  position: absolute;
  /* Misma posición que la imagen */
  top: 60px; 
  left: 50%;
  transform: translateX(-50%);
  
  height: 50px; /* Misma altura que la imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem; 
  color: #e53935;
  
  opacity: 0; 
  transition: all 0.2s ease;
}

/* Cuando el item está seleccionado... */
.allergen-toggle-item.selected {
  border-color: #e53935; /* Borde rojo */
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ...ocultamos la imagen... */
.allergen-toggle-item.selected img {
  opacity: 0;
}

/* ...y mostramos el icono de prohibido */
.allergen-toggle-item.selected::after {
  opacity: 1;
}

/* ...y cambiamos el color del texto */
.allergen-toggle-item.selected span {
  color: #e53935; /* Texto en rojo */
}

.allergen-toggle-item span {
  font-size: 1rem; /* Tu tamaño de texto */
  text-align: center;
  font-weight: 600;
  color: #333;
  transition: color 0.2s ease;
  /* El justify-content: flex-end lo empuja abajo */
}

/* --- ESTILOS PARA LOS BOTONES DEL FOOTER (MÁS GRANDES) --- */

#allergen-filter-modal .modal-footer {
  justify-content: space-between; 
  gap: 1rem; 
}

#allergen-filter-modal #allergen-clear-btn,
#allergen-filter-modal #allergen-apply-btn {
  flex: 1; /* Ocupan el mismo tamaño */
  font-weight: bold;
    /* --- ¡CAMBIO! Hacemos los botones más grandes --- */
  padding: 10px 20px; /* Aumenta el padding (ajusta este valor si lo quieres más grande) */
  font-size: 1.5rem; /* Aumenta el tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  height: 4rem;
  border-radius: 12px ;
}

#addin-modal .detail-modal-body {
  /* ... (tus estilos existentes para el modal body) ... */
  
  /* ¡AÑADE ESTA LÍNEA! */
  /* (Esto añade 20px de espacio al final, dentro del scroll) */
  padding-bottom: 20px; 
}

/*
 * Y aquí está el CSS para las tarjetas de añadidos
 * (para que el flex-grow funcione si lo necesitas)
*/
#addin-options-content .detail-option-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ocupa el 100% de la celda del grid */
}

#addin-options-content .detail-option-card-footer {
  margin-top: auto; /* <-- Esto empuja el footer del card hacia abajo */
}

/* --- ESTILOS PARA MODAL DE UPSELLING (SUGERENCIAS) --- */

/* 1. La Tarjeta "Sexy" (Suggestion Card) */
.menu-item.suggestion-layout {
    display: flex;
    flex-direction: column;
    padding: 0 !important; /* Quitamos padding interno */
    border-radius: 20px;   /* Bordes redondeados generosos */
    overflow: hidden;      /* Para que la imagen respete el borde */
    border: 1px solid #eee;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    justify-content: space-between;
    /* Forzamos altura si es necesario, aunque el script de igualar altura lo maneja */
}

/* 2. Imagen "Full Bleed" (A sangre) */
.menu-item.suggestion-layout .product-visuals {
    width: 100%;
    height: 60%; /* Ocupa el 60% de la tarjeta */
    position: relative; /* Para posicionar alérgenos dentro */
    margin: 0;
    padding: 0;
}

.menu-item.suggestion-layout .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* Quitamos radio a la imagen, usa el del contenedor */
}

/* 3. Alérgenos dentro de la foto (Pastilla) */
.menu-item.suggestion-layout .product-allergens {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 4. Info del producto (Alineado izq) */
.menu-item.suggestion-layout .product-info-area {
    padding: 12px 16px;
    text-align: left; /* Lectura en F */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.menu-item.suggestion-layout .card-product-name {
    font-size: 1.1rem; /* Un poco más grande */
    font-weight: 800;  /* Más peso */
    margin: 0;
    line-height: 1.2;
    color: #333;
}

/* Ocultamos el precio antiguo porque lo vamos a meter en el botón */
.menu-item.suggestion-layout .card-product-price {
    display: none; 
}

/* 5. El Super Botón "Añadir + Precio" */
.menu-item.suggestion-layout .btn-add-to-cart {
    margin: 0 12px 16px 12px; /* Margen alrededor */
    width: calc(100% - 24px) !important; /* Full width menos margen */
    padding: 12px 16px;
    display: flex;
    justify-content: space-between; /* Texto a los lados */
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    /* Usamos tus vars de tema */
    background-color: var(--primary-color); 
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

/* 6. El Botón "Fantasma" (Ghost Button) para cerrar */
.btn-ghost {
    background: transparent;
    border: 2px solid #ddd; /* Borde sutil */
    color: #666;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px; /* Muy redondeado */
    cursor: pointer;
    transition: all 0.2s;
}
.btn-ghost:active {
    background: #f5f5f5;
    border-color: #ccc;
}

/* --- ALÉRGENOS FLOTANTES (UNIVERSAL) --- */

/* Estilo base para el contenedor de iconos */
.overlay-allergens {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    display: flex;
    gap: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 5;
    pointer-events: none; /* Para que no moleste al click */
}

.overlay-allergens img {
    display: block;
    object-fit: contain;
}

/* CASO A: En tarjetas pequeñas (Añadidos / Submenú) */
.detail-option-card {
    position: relative; /* Necesario para posicionar absolute dentro */
    overflow: hidden;   /* Para que no se salgan */
}

.detail-option-card .overlay-allergens {
    bottom: 6px;
    right: 6px;
    padding: 2px 4px;
}

.detail-option-card .overlay-allergens img {
    width: 20px !important; 
    height: 25px !important;
}

/* CASO B: En Modal de Detalle (Foto Grande) */
.detail-modal-visual {
    position: relative; /* El contenedor de la foto grande */
}

.detail-modal-visual .overlay-allergens {
    bottom: 15px;
    right: 15px;
    padding: 6px 10px;
    border-radius: 20px;
}

.detail-modal-visual .overlay-allergens img {
    width: 28px; /* Más grandes en el detalle */
    height: 28px;
}

/* 1. El contenedor de la imagen debe ser relativo */
.menu-item .product-visuals {
    position: relative !important;
}

/* 2. La cajita de los alérgenos */
.menu-item .product-allergens {
    position: absolute;
    bottom: 2px;  /* Separación del borde inferior de la foto */
    right: 1.5rem;   /* Separación del borde derecho de la foto */
    
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    padding: 7px 10px;
    border-radius: 12px;
    
    display: flex;
    gap: 10px;
    align-items: center;
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
    pointer-events: none; /* Para poder hacer clic en la foto a través de ellos */
}

/* 3. Tamaño de los iconos */
.menu-item .product-allergens img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
/* --- ARREGLO ALÉRGENOS AÑADIDOS (VERSIÓN SEGURA) --- */

.detail-option-visuals {
    position: relative;      /* Para que los alérgenos se peguen aquí */
    display: inline-block;   /* IMPORTANTE: El contenedor se ajusta al tamaño de la foto */
    margin: 0 auto 8px auto; /* Centrado horizontal y margen abajo */
    max-width: 100%;         /* Que nunca se salga de la tarjeta */
    vertical-align: top;
    height: 50%;
}

/* Aseguramos que la imagen se vea bien dentro */
.detail-option-visuals .detail-option-card-image {
    width: 100%;
    height: 99%;
    object-fit: cover; /* Recorta la imagen para llenar el hueco */
    display: block;
}

/* Los alérgenos flotantes (sin cambios aquí) */
.detail-option-visuals .overlay-allergens {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 6px;
    display: flex;
    gap: 2px;
    z-index: 5;
    pointer-events: none;
}

.detail-option-visuals .overlay-allergens img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
}

/* Ocultar contenedor si no hay imagen */
.detail-option-card.no-image .detail-option-visuals {
    display: none;
}

/* --- ESTILOS DIFERENCIADOS (MODERN VS CLASSIC) --- */

/* === 1. MODERNO (Full Bleed) === */
.menu-item.modern-layout {
    padding: 0 !important; /* CLAVE: Sin padding */
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    min-height: 380px;
    border: none !important;
}

/* La foto toca los bordes */
.menu-item.modern-layout .product-visuals {
    width: 100%;
    height: 170px; /* Foto grande */
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-item.modern-layout .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* Sin bordes redondeados */
}

/* Título y Precio a la izquierda */
.menu-item.modern-layout .product-info-area {
    padding: 12px 16px 0 16px;
    text-align: left;
}

.menu-item.modern-layout .card-product-name {
    font-size: 1.7rem !important;
    font-weight: 900;
    text-transform: uppercase; /* Mayúsculas */
    margin-bottom: 0px !important;
    height: auto !important;
}

.menu-item.modern-layout .btn-add-to-cart {
    margin: 16px; /* Botón separado del borde */
    width: auto !important;
    border-radius: 12px;
    /* margin-top: 0px; */
}


/* === 2. CLÁSICO (Con Marco) === */
.menu-item.classic-layout {
    padding: 12px !important; /* CLAVE: Con padding interno */
    border-radius: 16px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-height: auto; /* Altura flexible */
}

/* La foto tiene margen y borde propio */
.menu-item.classic-layout .product-visuals {
    width: 100%;
    aspect-ratio: 4/3; /* Foto rectangular estándar */
    position: relative;
    margin-bottom: 10px;
    border-radius: 12px; /* Foto redondeada */
    overflow: hidden;
    padding: 0;
}

.menu-item.classic-layout .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-item.classic-layout .product-info-area {
    text-align: left;
    padding: 0 4px;
}

.menu-item.classic-layout .card-product-name {
    font-size: 1.5em;
    font-weight: bold;
    text-transform: none; /* Normal */
}

.menu-item.classic-layout .btn-add-to-cart {
    width: 100%;
    margin-top: 12px;
    padding: 12px 0 !important; /* Padding vertical, 0 a los lados */
    border-radius: 8px;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: 1.4em;
    border: none;
    cursor: pointer;

    /* --- TRUCO PARA CENTRAR SÍ O SÍ --- */
    display: block !important; /* Quitamos flex */
    text-align: center !important; /* Centramos el texto */
    
    /* Reseteamos propiedades flex que puedan estar molestando */
    justify-content: unset !important;
    align-items: unset !important;

    margin-bottom: 0.7rem
  }

/* === ALÉRGENOS (Común, siempre sobre la foto) === */
.product-allergens {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 6px;
    border-radius: 8px;
    display: flex;
    gap: 4px;
    pointer-events: none;
    z-index: 5;
}
.product-allergens img { width: 18px; height: 18px; }

/* =================================================================== */
/* --- BLOQUE DEFINITIVO: CLASSIC VS MODERN (Sobrescribe todo lo anterior) --- */
/* =================================================================== */

/* === 1. MODERNO (Foto grande a sangre, sin bordes internos) === */
.menu-item.style-modern {
    padding: 0 !important; /* CLAVE: Sin padding interno */
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    min-height: 380px;
    border: 1px solid #f0f0f0;
}

/* La foto toca los bordes */
.menu-item.style-modern .product-visuals {
    width: 100%;
    height: 55%; /* Foto grande (ajusta % si quieres más o menos) */
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-item.style-modern .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* Sin bordes redondeados */
}

/* Título y Precio (Moderno) */
.menu-item.style-modern .product-info-area {
    padding: 16px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.menu-item.style-modern .card-product-name {
    font-size: 1.5rem !important;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 8px;
}

.menu-item.style-modern .btn-add-to-cart {
    margin: 16px; /* Separado de los bordes */
    width: auto !important; /* Respeta los márgenes */
    border-radius: 12px;
    padding: 14px;
    font-size: 1.2rem;
}


/* === 2. CLÁSICO (Con Marco y Padding) === */
.menu-item.style-classic {
    padding: 12px !important; /* CLAVE: Con padding interno */
    border-radius: 16px;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #ddd;
    min-height: auto; /* Altura flexible */
}

/* La foto tiene su propio espacio */
.menu-item.style-classic .product-visuals {
    width: 100%;
    aspect-ratio: 4/3; /* Proporción rectangular clásica */
    position: relative !important;
    margin-bottom: 10px;
    border-radius: 12px; /* Foto redondeada */
    overflow: hidden;
    padding: 0 !important;
    height: auto !important; /* Sobrescribe alturas fijas */
}

.menu-item.style-classic .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important; /* El radio lo da el contenedor .product-visuals */
}

/* Título y Precio (Clásico) */
.menu-item.style-classic .product-info-area {
    text-align: left;
    padding: 0 4px;
    flex-grow: 1;
}

.menu-item.style-classic .card-product-name {
    font-size: 1.3rem !important;
    font-weight: 700;
    text-transform: none; /* Normal */
    margin-bottom: 4px;
}

/* Botón Clásico (Centrado y ancho completo) */
.menu-item.style-classic .btn-add-to-cart {
    width: 100% !important;
    margin-top: 12px;
    padding: 12px 0 !important;
    border-radius: 8px;
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    display: block !important;
    text-align: center !important;
}

/* === 3. ALÉRGENOS (Común a ambos estilos) === */
/* Flotando siempre en la esquina de la FOTO */
.product-allergens {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    margin: 0 !important; /* Reseteamos márgenes antiguos */
}

.product-allergens img {
    width: 1.8rem !important;
    height: 1.5rem !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

/* =========================================================== */
/* --- ESTILOS EXCLUSIVOS PARA AÑADIDOS (CLASSIC VS MODERN) --- */
/* =========================================================== */

/* 1. BASE COMÚN (Solo para añadidos) */
.detail-option-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    background-color: #fff !important;
    /* Altura fija para que todas sean iguales */
    height: 340px !important; 
    min-height: 340px !important;
    box-sizing: border-box !important;
}

/* =========================================================== */
/* --- OPCIÓN A: ESTILO CLASSIC (Con marco y padding) --- */
/* =========================================================== */

/* El contenedor tiene padding */
.detail-options-content.style-classic .detail-option-card {
    border: 2px solid #eee !important;
    border-radius: 12px !important;
    padding: 0.75rem !important; /* <--- TIENE PADDING */
    box-shadow: none !important;
    text-align: center !important;
}

/* Imagen Clásica (Con radio propio) */
.detail-options-content.style-classic .detail-option-visuals {
    width: 100%;
    height: 50% !important;
    border-radius: 8px !important; /* Radio propio */
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.detail-options-content.style-classic .detail-option-card-name {
    justify-content: center !important; /* Texto centrado */
    font-weight: 600 !important;
}


/* =========================================================== */
/* --- OPCIÓN B: ESTILO MODERN (A sangre, sin padding) --- */
/* =========================================================== */

/* El contenedor NO tiene padding */
.detail-options-content.style-modern .detail-option-card {
    border-radius: 20px !important;
    padding: 0 !important; /* <--- SIN PADDING (A SANGRE) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    text-align: left !important;
}

/* Imagen Moderna (Recta, toca los bordes) */
.detail-options-content.style-modern .detail-option-visuals {
    width: 100%;
    height: 55% !important;
    border-radius: 0 !important; /* Sin radio */
    margin: 0 !important;
    position: relative;
}

.detail-options-content.style-modern .detail-option-card-name {
    font-weight: 800 !important;
    font-size: 1.4rem !important;
}

/* =================================================================== */
/* --- ARREGLO VISUAL: TODO CENTRADO (EL "LOOK" FINAL) --- */
/* =================================================================== */

/* 1. LA TARJETA (Reset de alineación al centro) */
.detail-option-card {
    text-align: center !important;       /* Texto al centro */
    align-items: center !important;      /* Items Flex al centro horizontal */
}

/* 2. EL NOMBRE (Centrado + Padding equilibrado) */
.detail-option-card-name {
    justify-content: center !important; /* Flex al centro */
    text-align: center !important;      /* Texto al centro */
    
    /* Padding igual a ambos lados */
    padding-left: 5px !important; 
    padding-right: 5px !important;
    
    /* Mantenemos la altura reservada para que no baile */
    min-height: 55px !important; 
    display: flex !important;
    align-items: flex-start !important; /* Pegado arriba de su caja */
}

/* 3. EL PRECIO (Centrado) */
.detail-option-card-price {
    text-align: center !important;
    width: 100%;
    
    padding-left: 0 !important; 
    
    margin-top: 5px !important;
    margin-bottom: auto !important; /* Empuja lo de abajo */
}

/* 4. EL FOOTER (Stepper +/-) */
.detail-option-card-footer {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* Centramos el contenido del footer */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    margin-top: 0 !important;
    padding-bottom: 10px !important;
}

/* Ajuste del Stepper (Centrado) */
.quantity-stepper {
    width: 100%;
    justify-content: center !important;
}

/* =========================================================== */
/* --- ESTILOS MODAL UPSELLING (Añadidos Recomendados) --- */
/* =========================================================== */

/* 1. La Rejilla (Grid) dentro del modal */
.suggestions-grid {
    display: grid;
    /* Dos columnas que ocupan el 50% cada una */
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; /* Espacio generoso entre tarjetas */
    width: 100%;
    box-sizing: border-box;
}

/* 2. Ajuste de las Tarjetas dentro del modal */
/* Heredan el estilo 'Modern' o 'Classic' que definimos antes, 
   pero nos aseguramos de que no tengan márgenes raros */
.suggestions-grid .menu-item {
    width: 100% !important; /* Ocupa toda su celda */
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave */
}

/* 3. El Botón "Ghost" (No gracias) */
.btn-ghost {
    background-color: transparent;
    border: 2px solid #ddd;
    color: #777;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 15px 40px;
    border-radius: 50px; /* Botón muy redondo */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    max-width: 400px; /* Que no sea eterno en pantallas grandes */
}

.btn-ghost:active {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #333;
    transform: scale(0.98);
}

/* Responsive: 1 columna en móviles muy estrechos */
@media (max-width: 600px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================================== */
/* --- ARREGLO FINAL: FORZAR CLASSIC EN MODAL DE SUGERENCIAS --- */
/* =================================================================== */

/* Esto ataca específicamente a las tarjetas que son Sugerencias (.suggestion-layout)
   PERO que tienen la configuración Clásica (.style-classic).
*/

.menu-item.suggestion-layout.style-classic {
    /* 1. Recuperamos el marco blanco (Padding) */
    padding: 15px !important; 
    
    /* 2. Borde visible */
    border: 2px solid #e0e0e0 !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    
    /* 3. Sombra más suave */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    
    /* 4. Layout vertical */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Ajustamos la imagen para que NO toque los bordes en el clásico */
.menu-item.suggestion-layout.style-classic .product-visuals {
    width: 100% !important;
    height: 50% !important; /* Un poco menos de altura */
    margin: 0 !important;
    
    /* Radio propio para la foto */
    border-radius: 12px !important; 
    overflow: hidden !important;
    
    /* Separación con el texto */
    margin-bottom: 10px !important; 
}

/* Ajustamos la imagen interna */
.menu-item.suggestion-layout.style-classic .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important; /* El radio lo da el contenedor .product-visuals */
}

/* Ajustamos el texto */
.menu-item.suggestion-layout.style-classic .product-info-area {
    padding: 0 !important; /* Quitamos el padding extra del moderno */
    text-align: center !important; /* Centrado clásico */
    justify-content: flex-start !important;
}

.menu-item.suggestion-layout.style-classic .card-product-name {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Texto normal (no mayúsculas) */
    margin-bottom: 5px !important;
}

/* Ajustamos el botón para el clásico (más contenido) */
.menu-item.suggestion-layout.style-classic .btn-add-to-cart {
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    padding: 12px !important;
    font-size: 1.1rem !important;
    border-radius: 8px !important;
}

#continue-to-cart-btn {
    /* 1. Tamaño y Posición */
    width: 100% !important;       /* Todo el ancho disponible */
    padding: 1.5rem !important;   /* Alto y fácil de pulsar */
    margin: 0 !important;
    
    /* 2. Colores (El Azul) */
    background-color: #062829 !important; /* Azul brillante */
    color: white !important;              /* Texto blanco */
    border: none !important;
    
    /* 3. Tipografía */
    font-size: 1.6rem !important;
    font-weight: 800 !important; /* Extra negrita */
    text-transform: uppercase;   /* Opcional: Mayúsculas para más fuerza */
    
    /* 4. Acabados */
    border-radius: 12px !important;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.2s;
}

/* =================================================================== */
/* --- ARREGLO FINAL: ALINEACIÓN MILIMÉTRICA EN FOOTER DE AÑADIDOS --- */
/* =================================================================== */

/* 1. El Footer de la Tarjeta (Contenedor Flexible Vertical) */
.detail-option-card-footer {
    flex-grow: 1 !important;          /* Ocupa todo el espacio sobrante */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Todo empieza arriba */
    padding: 10px 10px 15px 10px !important; /* Padding uniforme */
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 2. El Contenedor de Info (Nombre + Precio) */
.card-footer-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: auto !important; /* ¡TRUCO! Esto empuja el stepper al fondo */
}

/* 3. EL NOMBRE: CAJA FIJA DE 50px */
/* Da igual si el texto es corto o largo, la caja siempre mide lo mismo */
.detail-option-card-name {
    
    display: flex !important;
    align-items: flex-start !important; /* Texto empieza arriba */
    justify-content: center !important; /* Centrado horizontalmente */
    
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0rem !important;
    padding: 0 !important;
    overflow: hidden !important;      /* Si es muy largo, se corta */
    
    /* Para asegurar que incluso los de opción única se alineen */
    flex-grow: 0 !important; 
}

/* 4. EL PRECIO: CAJA FIJA DE 25px */
.detail-option-card-price {
    
    display: flex !important;
    align-items: center !important;   /* Centrado vertical */
    justify-content: center !important; /* Centrado horizontal */
    
    color: var(--primary-color) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. EL STEPPER (Botones +/-): SIEMPRE AL FONDO */
.quantity-stepper {
    margin-top: 10px !important;      /* Separación con lo de arriba */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.detail-option-card:not(:has(.quantity-stepper)) .detail-option-card-price {
    /* Si no hay botones abajo, dejamos que el precio ocupe su espacio fijo
       pero visualmente quede bien posicionado */
     margin-bottom: 2rem !important;
}

/* =================================================================== */
/* --- ARREGLO FINAL: MÁS ESPACIO PARA TEXTO (AÑADIDOS) --- */
/* =================================================================== */

/* 1. LA TARJETA (Más alta para que quepa todo) */
.detail-option-card {
    /* Aumentamos altura total */
    height: 420px !important; 
    min-height: 450px !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    overflow: hidden !important;
}

/* 2. LA IMAGEN (Se mantiene GRANDE: 220px) */
.detail-option-visuals {
    width: 100% !important;
    height: 220px !important; 
    flex: 0 0 220px !important; /* Fija, no encoge */
    
    margin: 0 !important;
    margin-bottom: 10px !important;
    position: relative !important;
    background-color: #f4f4f4 !important;
}

.detail-option-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 3. EL TEXTO (Más espacio y permite 3 líneas) */
.detail-option-card-name {    
    padding: 0 12px !important; /* Un poco más de aire a los lados */
    
    /* Alineación */
    display: -webkit-box !important; /* Necesario para cortar por líneas */
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important; /* PERMITE HASTA 3 LÍNEAS DE TEXTO */
    overflow: hidden !important;
    line-clamp: 3;

    text-align: center !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important; /* Un poco más de espacio entre líneas */
    color: #333 !important;
    
    /* Alineación vertical del bloque */
    justify-content: flex-start !important; 
}

/* 4. PRECIO Y BOTONES (Se quedan abajo) */
.detail-option-card-price {
    margin-top: 10px !important;
    margin-bottom: auto !important; /* Empuja el stepper al fondo */
    text-align: center !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    font-size: 1.2rem !important;
}

.quantity-stepper {
    margin-top: 1vh !important;
    padding-bottom: 1.5rem !important; /* Un poco más de espacio abajo del todo */
    justify-content: center !important;
}

/* 1. El Contenedor (La Máscara) */
.detail-option-visuals {
    /* Forzamos el recorte estricto */
    overflow: hidden !important;
    
    /* Truco para navegadores Webkit (Safari/Chrome) para que recorten bien las esquinas */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black); /* Estándar moderno */
    
    /* Aseguramos que tenga posición relativa */
    position: relative !important;
    z-index: 1; /* Crea un contexto de apilamiento nuevo */
    
    /* Tu borde redondeado */
}

/* 2. La Imagen (El Contenido) */
.detail-option-card-image {
    /* La imagen NO debe tener bordes redondeados propios, debe heredar el recorte del padre */
    border-radius: 0 !important; 
    
    /* Asegura que llene el hueco */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    
    /* Evita márgenes que la desplacen */
    margin: 0 !important;
    display: block !important;
}

/* =================================================================== */
/* --- ARREGLO FINAL: SEPARACIÓN DE TEXTO EN OPCIÓN ÚNICA --- */
/* =================================================================== */

/* 1. Seleccionamos el Nombre SOLO en las tarjetas de opción única
      (Cuando es hijo directo '>' y no está dentro de un footer) */
/* .detail-option-card > .detail-option-card-name {
    margin-top: 25px !important; 
    
    padding-top: 5px !important; 
} */

.detail-option-card-name{
  font-size: 1.4rem !important;
}

/* 2. Aseguramos que el precio también respire un poco si está ahí */
.detail-option-card > .detail-option-card-price {
    margin-top: 0.5rem !important;
    padding-bottom: 15px !important; /* Aire por abajo también */
}

*/
#menu-panel-modal .btn-close-large,
#addin-modal .btn-close-large,
.wizard-fullscreen .btn-close-wizard,
#addon-upsell-modal .btn-close-large,   /* <--- NUEVO */
#suggestions-modal .btn-close-large     /* <--- NUEVO */
{
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 65px !important;
    height: 65px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* Efecto Hover para todos */
#menu-panel-modal .btn-close-large:hover,
#addin-modal .btn-close-large:hover,
.wizard-fullscreen .btn-close-wizard:hover,
#addon-upsell-modal .btn-close-large:hover,
#suggestions-modal .btn-close-large:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.btn-close-large .close-modal-btn{
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 65px !important;
    height: 65px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#btn-close-suggestion-modal{
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 60px !important;
    height: 60px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#btn-sugesstion-modal{
    position: absolute !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 60px !important;
    height: 60px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#btn-close-cart{
    position: absolute !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 55px !important;
    height: 55px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#btn-close-upselling-products{
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.5rem !important;
    z-index: 5000 !important; /* Z-index muy alto para estar siempre encima */
    
    /* Estilo Visual (Bola oscura) */
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* Dimensiones */
    width: 60px !important;
    height: 60px !important;
    
    /* Centrado del icono */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Tipografía */
    font-size: 3rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#title-upselling-products{
    font-size: 2.7rem;
    font-weight: 700;
    margin: 0;
}

#continue-upsell-btn {
  width: 100% !important;
  max-width: none !important; /* <--- ¡ESTA ES LA LÍNEA QUE FALTABA! */
  padding: 1.5rem !important;
  margin: 0 !important;
  background-color: #062829 !important;
  color: white !important;
  border: none !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  border-radius: 12px !important;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s;
  box-sizing: border-box !important; /* Asegura que el padding no se salga */
}

/* ========================================================== */
/* --- ESTILOS DE LA BOLITA DE CANTIDAD EN EL CARRITO --- */
/* ========================================================== */

/* El contenedor relativo para que la bolita se posicione sobre la foto */
.cart-item-image-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 15px; /* Mantenemos el margen que antes tenía la imagen */
}

/* Quitamos el margen de la imagen porque ahora lo tiene el wrapper */
.cart-item-image-wrapper .cart-item-image {
    margin-right: 0 !important;
    display: block; /* Elimina espacios fantasma */
}

/* La bolita en sí */
.cart-item-quantity-badge {
    position: absolute;
    top: -8px;   /* Un poco por fuera arriba */
    right: -8px; /* Un poco por fuera a la derecha */
    
    background-color: var(--primary-color); /* Usa el color principal de tu marca */
    color: white;
    
    border-radius: 50%;
    width: 26px;
    height: 26px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    border: 1px solid white; /* Un borde blanco para separarla de la foto */
    z-index: 10;
}

/* ========================================================== */
/* --- BADGE DE CANTIDAD SOBRE LA FOTO DEL FOOTER --- */
/* ========================================================== */

/* Aseguramos que el contenedor permita posicionamiento absoluto */
.footer-product-info {
    position: relative !important; 
    /* overflow: visible !important; asegurado en reglas generales */
}

.footer-badge {
    position: absolute;
    /* Ajusta estos valores según el tamaño de tu imagen (FOOTER_IMG_WIDTH = 100px aprox) */
    top: -5px;        
    left: 85px;       /* Si la imagen mide 100px, esto la pone en la esquina derecha */
    
    background-color: #062829; /* Rojo llamativo (o usa var(--primary-color)) */
    color: white;
    
    border-radius: 50%;
    width: 28px;
    height: 28px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 1px solid white; /* Borde blanco para separar de la foto */
    z-index: 20;
    pointer-events: none; /* Para que no interfiera con clics */
}

/* Animación simple de "pop" cuando cambia el número */
.footer-badge.pop-in {
    animation: badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ========================================================== */
/* --- PANTALLA DE PAGO (LAYOUT SPLIT + LOGO) --- */
/* ========================================================== */

.payment-ux-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f8f9fa; /* Fondo gris muy suave */
    display: flex; justify-content: center; align-items: center;
    z-index: 2500; animation: fadeIn 0.3s ease-out;
}

.payment-ux-container {
    width: 100%; max-width: 80%; /* Más ancho para caber las 2 columnas */
    height: 70%;
    background-color: #fff;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    max-height: 90vh; overflow-y: auto;
}

/* 1. LOGO Header */
.payment-logo-header {
    margin-bottom: 1.5rem;
}
.payment-logo-header img {
    height: 15rem; /* Altura controlada del logo */
    width: auto;
    object-fit: contain;
}

/* 2. Textos */
.payment-text-header {
    text-align: center; margin-bottom: 2rem;
}
.payment-text-header h1 {
    font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem 0; color: #1a1a1a;
}
.payment-text-header p {
    font-size: 1.5rem; color: #666; margin: 0;
}

/* 3. Píldora del Total (Estilo Ticket) */
.payment-total-pill {
    padding: 1rem 3rem;
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 3rem;
}
.total-label {
    font-size: 1.5rem; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 1px;
}
.total-amount {
    font-size: 4rem; font-weight: 900; color: var(--secondary-color, #a80022); line-height: 1;
}

/* 4. Layout Dividido (Izquierda / Derecha) */
.payment-split-layout {
    display: flex;
    gap: 2rem;
    width: 100%;
    justify-content: center;
}

.payment-column {
    flex: 1; /* Ocupan el mismo espacio */
    display: flex; flex-direction: column; align-items: center;
}

.payment-column h3 {
    font-size: 1.3rem; margin-bottom: 1rem; color: #333; font-weight: 700;
}

/* 5. Tarjetas Grandes de Opción */
.payment-big-card {
    width: 100%;
    height: 220px; /* Altura fija generosa */
    border-radius: 20px;
    border: 2px solid #e0e0e0;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.payment-big-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.payment-big-card:active {
    transform: scale(0.98);
}

/* Estilo Preferido (Tarjeta) */
.payment-big-card.preferred {
    border-color: var(--primary-color);
    background-color: #f0fdfa; /* Tinte muy suave del color principal si es azul/verde, o blanco */
}
/* Estilo Secundario (Efectivo) */
.payment-big-card.secondary {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* Contenido de las tarjetas */
.card-content-wrapper {
    text-align: center;
}

.card-logos-row {
    display: flex; gap: 15px; justify-content: center; align-items: center; margin-bottom: 1.5rem;
    font-size: 3rem; color: #333;
}

.cash-icon-wrapper {
    font-size: 4rem; color: #28a745; margin-bottom: 1.5rem;
}

.payment-method-title {
    font-size: 1.5rem; font-weight: 700; color: #333; display: block;
}

/* Footer */
.payment-ux-footer {
    margin-top: 2rem;
    width: 100%; text-align: center;
}
.btn-text-cancel {
    background: none; border: none; color: #dc3545; font-size: 1.7rem; font-weight: 600; cursor: pointer;
    text-decoration: underline;
}

/* Responsive para móviles verticales */
@media (max-width: 600px) {
    .payment-split-layout {
        flex-direction: column;
    }
    .payment-big-card {
        height: 150px;
    }
}

/* Contenedor de la fila de logos */
.card-logos-row {
    display: flex;
    gap: 0px; /* Espacio entre logos */
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    height: 40px; /* Altura fija para la fila */
}

/* Estilo para las NUEVAS imágenes de logos */
.payment-logo-img {
    height: 120px;       /* Ocupan toda la altura de la fila (40px) */
    width: 120px;        /* El ancho se ajusta solo */
    object-fit: contain; /* Asegura que el logo se vea entero */
    
    /* Opcional: Sombra suave para que resalten sobre blanco */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); 
}

/* El icono de Contactless (Wifi) al lado */
.contactless-separator {
    border-left: 1px solid #ddd; /* Una línea separadora sutil */
    padding-left: 12px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    align-items: center;
}

.contactless-separator i {
    font-size: 2rem; /* Tamaño del icono Wifi */
    color: #333;
}

/* Ajuste específico para móviles si es necesario */
@media (max-width: 400px) {
    .card-logos-row {
        height: 30px; /* Logos más pequeños en pantallas muy chicas */
    }
    .contactless-separator i {
        font-size: 1.5rem;
    }
}
/* =================================================================== */
/* --- ESTILOS MAESTROS PARA BOTONES DE CERRAR (IDS ESPECÍFICOS) --- */
/* =================================================================== */

/* =================================================================== */
/* --- ESTILOS MAESTROS PARA BOTONES DE CERRAR (FIX FINAL ANDROID) --- */
/* =================================================================== */

#btn-close-suggestion-modal,
#btn-sugesstion-modal,
#btn-close-cart,
#btn-close-sale-format,
#btn-close-addin,
#btn-close-menu,
#btn-close-upselling-products, 
.btn-close-large,
.close-modal-btn 
{
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    z-index: 5000 !important;
    
    /* 1. LA BOLA (CONTENEDOR) */
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    border-radius: 50% !important;
    
    /* 2. DIMENSIONES FIJAS */
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    
    /* 3. ANIQUILACIÓN TOTAL DEL TEXTO ORIGINAL */
    color: transparent !important; /* Invisible */
    font-size: 0 !important;       /* Tamaño CERO: Desaparece del flujo */
    line-height: 0 !important;     /* Sin altura de línea */
    overflow: visible !important;  /* Permite que el icono (hijo) se vea */
    
    /* Centrado */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none;
    box-shadow: none !important;
}

/* 4. EL ICONO PERFECTO (RESTAURAMOS EL TAMAÑO AQUÍ) */
#btn-close-suggestion-modal::before,
#btn-sugesstion-modal::before,
#btn-close-cart::before,
#btn-close-sale-format::before,
#btn-close-addin::before,
#btn-close-menu::before,
#btn-close-upselling-products::before,
.btn-close-large::before,
.close-modal-btn::before 
{
    content: "\f00d"; /* Icono 'fa-times' */
    
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    
    /* --- AQUÍ ESTÁ LA MAGIA --- */
    /* El padre tiene font-size: 0, así que aquí le damos su tamaño real */
    font-size: 2.5rem !important; 
    
    color: white !important;
    line-height: 1 !important;
    
    /* Centrado absoluto perfecto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Asegura que el icono sea visible aunque el padre tenga texto transparente */
}

/* Efecto Hover */
#btn-close-suggestion-modal:hover,
#btn-sugesstion-modal:hover,
#btn-close-cart:hover,
#btn-close-upselling-products:hover,
.btn-close-large:hover,
.close-modal-btn:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#btn-close-cart {
  top: 0.7rem !important;
}

#addin-back-btn {
  font-size: 1.8rem !important;
}

#addin-next-btn {
  font-size: 1.8rem !important;
}

#view-order-text{
  font-size: 1.9rem;
}

/* ========================================================== */
/* --- PANTALLA DE PAGO FULL SCREEN (VERSIÓN FINAL) --- */
/* ========================================================== */

.payment-fullscreen-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #f4f6f8; /* Fondo suave */
    z-index: 2500; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-fullscreen-container {
    width: 100%;
    height: 100%;
    /* Quitamos el max-width para que se estire y centramos el contenido */
    display: flex; 
    flex-direction: column;
    align-items: center; 
    padding: 2rem 4rem; 
    box-sizing: border-box;
    background: #ffffff;
    position: relative;
}

/* --- 1. ENCABEZADO CENTRADO --- */
.payment-header-centered {
    text-align: center;
    margin-bottom: -6rem;
    padding-top: 2rem;
}

.payment-main-logo {
    height: 50%; /* Logo grande */
    width: 100%;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.payment-main-title {
    font-size: 3rem; /* Título gigante, bold */
    font-weight: 900;
    margin: 0 0 0.5rem 0;
    color: #1a1a1a;
    text-transform: uppercase;
}

.payment-main-subtitle {
    font-size: 1.6rem; /* Subtítulo grande */
    color: #666;
    margin: 0;
}

/* --- 2. TOTAL CENTRADO --- */
.payment-total-section {
    text-align: center;
    margin-bottom: 3rem;
}

.total-label-centered {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.total-amount-centered {
    display: block;
    font-size: 4rem; /* Precio enorme */
    font-weight: 900;
    color: var(--primary-color); /* Color de acento */
    line-height: 1;
}

/* --- 3. OPCIONES SPLIT (100% ANCHO DISPONIBLE) --- */
.payment-options-grid-split {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% y 50% */
    gap: 3rem; /* Separación generosa */
    width: 100%; /* Ocupa el 100% de la caja padre (que ya quitamos el max-width) */
    flex: 1; /* Ocupa el espacio vertical restante */
    max-width: 900px; /* Mantenemos un max-width para que no se estire demasiado */
    margin: 0 auto;
}

/* Estilo Base de la Tarjeta */
/* Estilo Base de la Tarjeta */
.payment-mega-card {
    flex: 1;
    border: 3px solid #e0e0e0;
    border-radius: 30px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    
    /* === CAMBIO CLAVE: DISTRIBUCIÓN VERTICAL === */
    justify-content: space-evenly; /* Distribuye el espacio uniformemente */
    
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 2rem;
    height: 40%; /* Mantienes tu altura de 40% */
}

.payment-mega-card:active { transform: scale(0.98); border-color: var(--primary-color); }
.option-label {
    font-size: 1.4rem; font-weight: 700; color: #555; margin-bottom: 1.5rem;
}
.mega-card-icon { width: 120px; height: 120px; font-size: 4rem; margin-bottom: 1.5rem; }
.mega-card-title { font-size: 2.2rem; font-weight: 800; color: #222; }
.mega-card-subtitle { font-size: 1.2rem; color: #888; }
.mega-card-logos { margin-top: 1.5rem; }
.mega-card-logos img { height: 110px; }

/* 4. FOOTER (Atrás) */
.payment-fullscreen-footer {
    padding-top: 1rem;
    width: 100%; 
    display: flex;
    justify-content: flex-start; /* Solo el botón de atrás a la izquierda */
    padding-left: 4rem;
}

.btn-mega-cancel.btn-back-arrow {
    background: #f0f0f0;
    border: none;
    color: #555;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ========================================================== */
/* --- PANTALLA DE PAGO MODERN UI (Clean & Refined) --- */
/* ========================================================== */

.payment-overlay-modern {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #F9FAFB; /* Gris muy claro, casi blanco */
    z-index: 2500;
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.payment-modern-container {
    width: 100%; max-width: 900px;
    height: 100%; max-height: 900px;
    padding: 2rem;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}

/* --- 1. HEADER & LOGO --- */
.payment-modern-header {
    text-align: center;
    margin-bottom: 2rem;
}

.payment-logo-clean {
    height: 60px; /* Controlamos la altura para que no sea gigante */
    width: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
    display: block;
    margin-left: auto; margin-right: auto;
}

.payment-modern-header h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #111827; /* Negro suave */
    margin: 0;
    letter-spacing: -0.5px;
}

/* --- 2. PRECIO HERO --- */
.payment-hero-price {
    text-align: center;
    margin-bottom: 3rem;
    background: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Sombra muy sutil */
}

.price-label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6B7280; /* Gris medio */
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.price-value {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}

/* --- 3. GRID DE TARJETAS --- */
.payment-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 2rem;
    width: 100%;
    flex: 1; /* Ocupa el espacio vertical disponible */
    max-height: 400px; /* Limitamos altura para que no sean eternos */
}

/* Estilo Base de la Tarjeta */
.payment-card-clean {
    background: #ffffff;
    border: 1px solid transparent; /* Sin borde visible por defecto */
    border-radius: 24px;
    padding: 2rem;
    cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* LA CLAVE: Sombra suave para elevación */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

.payment-card-clean:active {
    transform: scale(0.96);
    box-shadow: none;
    background-color: #f3f4f6;
}

/* Iconos Circulares */
.icon-circle {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Colores específicos */
.icon-circle.blue {
    background-color: #EFF6FF; /* Azul muy claro */
    color: #2563EB; /* Azul vibrante */
}
.icon-circle.green {
    background-color: #ECFDF5; /* Verde muy claro */
    color: #059669; /* Verde esmeralda */
}

/* Textos */
.card-text-group { text-align: center; margin-bottom: 1.5rem; }

.card-title {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.25rem;
}

.card-subtitle {
    display: block;
    font-size: 1rem;
    color: #9CA3AF;
    font-weight: 500;
}

/* Logos en la tarjeta */
.card-logos-mini {
    display: flex; gap: 10px; opacity: 0.8;
}
.card-logos-mini img {
    height: 24px; width: auto; object-fit: contain;
}

/* Hover States (Opcional para kiosko táctil, pero queda bien) */
.card-option:hover { border-color: #BFDBFE; } /* Borde azul suave */
.cash-option:hover { border-color: #A7F3D0; } /* Borde verde suave */


/* --- 4. BOTÓN ATRÁS FLOTANTE --- */
.btn-floating-back {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    
    width: 60px; height: 60px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s;
}

.btn-floating-back:active {
    transform: scale(0.9);
    background-color: #f3f4f6;
}

/* Responsive para móviles */
@media (max-width: 600px) {
    .payment-cards-grid { grid-template-columns: 1fr; }
    .payment-card-clean { flex-direction: row; padding: 1.5rem; justify-content: flex-start; height: auto; }
    .icon-circle { width: 50px; height: 50px; font-size: 1.5rem; margin-bottom: 0; margin-right: 1rem; }
    .card-text-group { text-align: left; margin-bottom: 0; }
    .card-logos-mini { margin-left: auto; }
}

/* ========================================================== */
/* --- PANTALLA DE PAGO REFINED (CENTRADO PERFECTO) --- */
/* ========================================================== */

.refined-payment-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #F4F6F8; /* Fondo gris premium muy claro */
    z-index: 2500; 
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.3s ease-out;
}

/* El Contenedor Central (La Columna Vertebral) */
.refined-container {
    width: 100%;
    max-width: 750px; /* Mantiene todo agrupado en el centro */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente hijos */
    justify-content: center; /* Centra verticalmente si sobra espacio */
    padding: 2rem;
    box-sizing: border-box;
}

/* --- 1. HEADER --- */
.refined-header {
    margin-top: 23rem;
    text-align: center;
    margin-bottom: 2.5rem;
    width: 100%;
}

.refined-logo {
    height: 23rem; /* Logo grande pero controlado */
    width: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.refined-text-group h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.refined-text-group p {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

/* --- 2. TOTAL --- */
.refined-total-section {
    text-align: center;
    margin-bottom: 3rem;
    background-color: #fff;
    padding: 1rem 3rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra flotante suave */
    border: 1px solid #eee;
}

.refined-total-label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #888;
    margin-bottom: 0.2rem;
    letter-spacing: 1px;
}

.refined-total-amount {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color, #062829); /* Tu color corporativo */
    line-height: 1;
}

/* --- 3. GRID DE OPCIONES (EL CORAZÓN) --- */
.refined-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas exactas */
    gap: 2rem; /* Espacio entre tarjetas */
    width: 100%;
    margin-bottom: 25rem;
}

/* ESTILO DE LAS TARJETAS */
.refined-card {
    background-color: #ffffff;
    border: 2px solid transparent; /* Borde invisible por defecto */
    border-radius: 24px;
    padding: 2.5rem 1rem;
    
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra elegante */
    
    height: 280px; /* Altura fija para simetría */
}

/* Efecto Hover/Active */
.refined-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.refined-card:active {
    transform: scale(0.98);
    border-color: var(--primary-color);
}

/* Estilos específicos por tipo */
.refined-card.card-theme .refined-icon-box { color: #2563EB; background: #EFF6FF; } /* Azul */
.refined-card.cash-theme .refined-icon-box { color: #059669; background: #ECFDF5; } /* Verde */

/* ICONO */
.refined-icon-box {
    width: 80px; height: 80px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* TÍTULO */
.refined-card-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 1rem;
}

/* LOGOS PEQUEÑOS / HINT */
.refined-mini-logos {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    opacity: 0.8;
    height: 30px;
}
.refined-mini-logos img { height: 75px; width: auto; }
.refined-hint { font-size: 0.9rem; color: #888; font-weight: 600; text-transform: uppercase; }


/* --- 4. FOOTER --- */
.refined-footer {
    width: 100%;
    display: flex;
    justify-content: center; /* Botón centrado */
}

.btn-refined-back {
    background: transparent;
    border: 2px solid #ddd;
    color: #555;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    transition: all 0.2s;
}

.btn-refined-back:hover { border-color: #bbb; color: #333; }
.btn-refined-back:active { background-color: #eee; }

/* Responsive */
@media (max-width: 600px) {
    .refined-options-grid { grid-template-columns: 1fr; }
    .refined-card { height: auto; padding: 1.5rem; flex-direction: row; gap: 1.5rem; justify-content: flex-start; }
    .refined-icon-box { margin-bottom: 0; width: 60px; height: 60px; font-size: 1.8rem; }
    .refined-card-title { margin-bottom: 0; }
    .refined-mini-logos { margin-left: auto; }
}

/* ========================================================== */
/* --- PANTALLA DE PAGO BRANDED (LOGO GRANDE + ESTILO NOPOR) --- */
/* ========================================================== */

.refined-payment-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #ffffff; /* Fondo Blanco Puro */
    z-index: 2500; 
    display: flex; justify-content: center; align-items: center;
    animation: fadeIn 0.3s ease-out;
}

/* El Contenedor Central */
.refined-container {
    width: 100%;
    max-width: 10000px; /* Ancho generoso */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 3rem;
    box-sizing: border-box;
}

/* --- 1. HEADER (LOGO XXL) --- */
.refined-header {
    text-align: center;
    margin-bottom: 2rem;
    width: 100%;
    flex-shrink: 0;
}

.refined-logo {
    /* CAMBIO: Logo mucho más grande */
    height: 23rem; 
    width: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
    /* Sutil sombra para que destaque si es blanco sobre blanco */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); 
}

.refined-text-group h1 {
    font-size: 2.5rem;
    font-weight: 900; /* Extra Bold */
    color: #111;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.refined-text-group p {
    font-size: 1.3rem;
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* --- 2. TOTAL --- */
.refined-total-section {
    text-align: center;
    margin-bottom: 2.5rem;
    background-color: #f8f9fa; /* Gris muy suave de fondo */
    padding: 1rem 4rem;
    border-radius: 50px;
    border: 2px solid #e9ecef;
}

.refined-total-label {
    display: block; font-size: 1rem; text-transform: uppercase; font-weight: 700; color: #888; margin-bottom: 0.2rem;
}

.refined-total-amount {
    display: block; font-size: 3.5rem; font-weight: 900; 
    color: var(--primary-color, #062829); /* Color Corporativo */
    line-height: 1;
}

/* --- 3. GRID DE OPCIONES --- */
.refined-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    width: 100%;
    margin-bottom: auto; /* Empuja el footer hacia abajo */
    flex: 1; /* Ocupa el espacio disponible */
    align-items: center; /* Centra verticalmente las tarjetas */
}

/* ESTILO DE LAS TARJETAS */
.refined-card {
    background-color: #ffffff;
    /* Borde sólido para marcar el área */
    border: 3px solid #e5e7eb; 
    border-radius: 24px;
    padding: 2rem;
    
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 5rem;
    /* Altura fija para cuadrar */
    height: 300px; 
    width: 100%;
    box-shadow: none; /* Sombra dura (estilo botón físico) */
}

/* Hover / Active */
.refined-card:active {
    transform: translateY(4px); /* Efecto de presionar */
    box-shadow: none;
    border-color: var(--primary-color, #062829);
}

/* ICONO */
.refined-icon-box {
    width: 90px; height: 90px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

/* Colores Específicos */
.refined-card.card-theme .refined-icon-box { 
    background-color: var(--primary-color, #062829); 
    color: white; 
}

.refined-card.cash-theme .refined-icon-box { 
    background-color: #f0f2f5; 
    color: #333; 
    border: 2px solid #ddd;
}

/* TÍTULO TARJETA */
.refined-card-title {
    font-size: 1.8rem;
     font-weight: 800; 
     color: #222; 
     margin-bottom: 1rem; 
     text-transform: uppercase;
     box-shadow: none !important;
}

/* LOGOS / HINT */
.refined-mini-logos {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    height: 35px;
}
.refined-mini-logos img { height: 75px; width: auto; object-fit: contain; }
.refined-hint { font-size: 1.1rem; color: #666; font-weight: 600; }


/* --- 4. FOOTER (BOTÓN ROJO SÓLIDO) --- */
.refined-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.btn-refined-back {
    /* ESTILO DE MARCA: ROJO SÓLIDO */
    background-color: var(--secondary-color, #a80022); 
    color: white;
    border: none;
    
    padding: 1.2rem 4rem; /* Ancho generoso */
    border-radius: 50px; /* Píldora */
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    
    display: flex; align-items: center; gap: 12px;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(168, 0, 34, 0.3); /* Sombra roja */
}

.btn-refined-back:active {
    transform: scale(0.98);
    background-color: #8a001b; /* Rojo más oscuro */
}

/* --- 4. FOOTER ESTÁNDAR --- */
.refined-footer {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el botón en la pantalla */
    align-items: center;
    
    /* Espaciado generoso para separarlo de las tarjetas */
    padding-top: 2rem;
    padding-bottom: 1rem;
    
    /* Opcional: Línea sutil si quieres separarlo como en los modales */
    /* border-top: 1px solid #f0f0f0; */
    margin-top: auto; /* Empuja al fondo si sobra espacio */
}

.btn-refined-back {
    /* ESTILO DE MARCA: ROJO SÓLIDO */
    background-color: var(--secondary-color, #a80022); 
    color: white;
    border: none;
    
    /* Tamaño y Forma */
    padding: 1.2rem 3rem; /* Ancho y alto cómodos */
    border-radius: 50px;  /* Forma de píldora */
    min-width: 200px;     /* Ancho mínimo para que no sea ridículo */
    
    /* Tipografía */
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    
    /* Alineación INTERNA perfecta (Icono + Texto) */
    display: flex; 
    align-items: center; 
    justify-content: center; /* CENTRA el contenido dentro del botón */
    gap: 12px; /* Espacio entre flecha y texto */
    
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(168, 0, 34, 0.25); /* Sombra roja suave */
}

/* Efecto al pulsar */
.btn-refined-back:active {
    transform: scale(0.96);
    background-color: #8a001b; /* Rojo más oscuro */
    box-shadow: none;
}

/* Ajuste del icono */
.btn-refined-back i {
    font-size: 1.4rem;
}

/* --- SCREENSAVER & ATTRACT MODE (AJUSTADO) --- */
#screensaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000; /* Lo más alto de todo */
    background-color: #000;
    overflow: hidden;
    /* Transición de entrada/salida del screensaver en sí */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.screensaver-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1; /* Nivel bajo: Fondo */
    /* ¡CAMBIO AQUÍ! De 1s a 0.3s para que sea rápido */
    transition: opacity 0.3s ease-in-out;
}

.screensaver-slide.active {
    opacity: 1;
    z-index: 2; /* El activo sube un poco */
}

.screensaver-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

/* Capa oscura y TEXTO */
.screensaver-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50; /* ¡IMPORTANTE! Mucho más alto que los slides (1 y 2) */
    background: rgba(0, 0, 0, 0.3);
    
    /* Centrado perfecto */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Esto lo centra verticalmente */
    align-items: center;     /* Esto lo centra horizontalmente */
    
    color: white;
    text-align: center;
    pointer-events: none; 
}

/* El contenido flotante */
.cta-content {
    /* Quitamos animaciones complejas si molestan, dejamos solo el float suave */
    animation: float 6s ease-in-out infinite;
    
    /* Aseguramos que no se vaya arriba */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-logo {
    max-width: 200px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.pulsing-text {
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.7);
    animation: pulseScale 2s infinite;
}

.screensaver-cta-overlay p {
    font-size: 2rem;
    margin-top: 10px;
    font-weight: 300;
    opacity: 0.9;
    letter-spacing: 5px;
}

/* Botón del Screensaver */
.screensaver-btn {
    margin-top: 40px;
    background-color: transparent; 
    color: white;
    border: 3px solid white;
    padding: 15px 50px;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    transition: transform 0.2s, background-color 0.2s;
    pointer-events: auto; /* El botón sí debe recibir clics */
}

.screensaver-btn:hover {
    background-color: white;
    color: #000; /* Negro por defecto al hover */
    transform: scale(1.05);
}

/* Animaciones */
@keyframes pulseScale {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Animación del botón */
.pulsing-button {
    animation: btnPulse 2s infinite;
}

@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 1. LA TORRE DE BOTONES (Izquierda) */
.left-buttons-stack {
    display: flex;
    flex-direction: column-reverse; /* De abajo hacia arriba */
    gap: 15px; /* Más aire entre los dos botones */
    margin-right: 15px;
    align-items: center;
    
    /* SOLUCIÓN: Esto lo levanta del suelo */
    margin-bottom: 2.5rem; 
}

/* 2. ESTILO DEL BOTÓN (Igual que el de salir) */
.btn-accessibility-stack {
    width: 50px; 
    height: 50px;
    border-radius: 50%; 
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #0056b3; 
    color: white;
    border: 2px solid white; /* Borde para que destaque */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-accessibility-stack.active {
    background-color: #ffd700;
    color: #000;
    border-color: #000;
    transform: scale(1.15); /* Un pelín más grande al activar */
    box-shadow: 0 0 15px #ffd700;
}

/* --- 3. LA MAGIA: BAJAR TODO (INCLUIDO FIDELIZACIÓN) --- */

/* A. Bajar el Banner de Fidelización (NUEVO) */
body.accessibility-active #loyalty-banner-container {
    position: fixed; /* Lo forzamos a flotar */
    top: 27.5vh !important; /* Lo ponemos a un tercio de altura */
    width: 90%;
    left: 5%;
    z-index: 1000;
    transition: top 0.3s ease;
    /* Aseguramos que se vea bien sobre el fondo */
    background-color: var(--back-color); 
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* B. Bajar la Barra de Herramientas (Volver/Filtrar) */
body.accessibility-active #back-splash-bar {
    top: 48vh !important; /* Justo debajo del banner */
    position: fixed;
    width: 90%;
    left: 5%;
    z-index: 1001;
    transition: top 0.3s ease;
}

/* C. Bajar las Categorías */
body.accessibility-active #category-nav {
    top: 56vh !important; /* Un poco más abajo para dejar sitio al banner */
    transform: scale(1.1); 
    transform-origin: left center;
    z-index: 999;
}

/* D. Bajar los Productos */
body.accessibility-active #menu-container {
    padding-top: 70vh !important; /* Empujamos todo el contenido */
    padding-bottom: 220px; /* Mucho espacio abajo para scrollear cómodamente */
}

/* E. Bajar los Modales */
body.accessibility-active .modal {
    align-items: flex-end !important; 
    padding-bottom: 150px; /* Separación del footer */
}
body.accessibility-active .modal-content {
    max-height: 40vh !important; /* Un poco más bajitos para llegar bien */
    border-radius: 20px 20px 0 0;
    border-top: 6px solid #ffd700; 
}

/* F. Pantallas completas */
body.accessibility-active .welcome-fullscreen,
body.accessibility-active .confirmation-fullscreen {
    padding-top: 45vh !important;
    align-items: flex-start;
}

/* --- MODO ACCESIBILIDAD (V3 - Ajustado) --- */

/* 1. LA TORRE DE BOTONES (Izquierda) */
.left-buttons-stack {
    display: flex;
    flex-direction: column-reverse; /* De abajo hacia arriba */
    gap: 15px; /* Más aire entre los dos botones */
    margin-right: 15px;
    align-items: center;
    
    /* SOLUCIÓN: Esto lo levanta del suelo */
    margin-bottom: 2.5rem;  
}

/* 2. ESTILO DEL BOTÓN (Igual que el de salir) */
.btn-accessibility-stack {
    width: 50px; 
    height: 50px;
    border-radius: 50%; 
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #0056b3; 
    color: white;
    border: 2px solid white; /* Borde para que destaque */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-accessibility-stack.active {
    background-color: #ffd700;
    color: #000;
    border-color: #000;
    transform: scale(1.15); /* Un pelín más grande al activar */
    box-shadow: 0 0 15px #ffd700;
}

/* --- 3. LA MAGIA: BAJAR TODO (INCLUIDO FIDELIZACIÓN) --- */

/* A. Bajar el Banner de Fidelización (NUEVO) */
body.accessibility-active #loyalty-banner-container {
    position: fixed; /* Lo forzamos a flotar */
    top: 35vh !important; /* Lo ponemos a un tercio de altura */
    width: 90%;
    left: 5%;
    z-index: 1000;
    transition: top 0.3s ease;
    /* Aseguramos que se vea bien sobre el fondo */
    background-color: var(--back-color); 
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* B. Bajar la Barra de Herramientas (Volver/Filtrar) */
body.accessibility-active #back-splash-bar {
    top: 48vh !important; /* Justo debajo del banner */
    position: fixed;
    width: 90%;
    left: 5%;
    z-index: 1001;
    transition: top 0.3s ease;
}

/* C. Bajar las Categorías */
body.accessibility-active #category-nav {
    top: 56vh !important; /* Un poco más abajo para dejar sitio al banner */
    transform: scale(1.1); 
    transform-origin: left center;
    z-index: 999;
}

/* D. Bajar los Productos */
body.accessibility-active #menu-container {
    padding-top: 70vh !important; /* Empujamos todo el contenido */
    padding-bottom: 220px; /* Mucho espacio abajo para scrollear cómodamente */
}

/* E. Bajar los Modales */
body.accessibility-active .modal {
    align-items: flex-end !important; 
    padding-bottom: 150px; /* Separación del footer */
}
body.accessibility-active .modal-content {
    max-height: 40vh !important; /* Un poco más bajitos para llegar bien */
    border-radius: 20px 20px 0 0;
    border-top: 6px solid #ffd700; 
}

/* F. Pantallas completas */
body.accessibility-active .welcome-fullscreen,
body.accessibility-active .confirmation-fullscreen {
    padding-top: 45vh !important;
    align-items: flex-start;
}

#btn-accessibility {
    background: #ffffff !important;
    box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.75) !important;
    border: none !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.4s 
    ease, box-shadow 0.4s 
    ease, transform 0.15s 
    ease !important;
    border-radius: 0px 8px 8px 0px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0px !important;
    margin-bottom: 5rem !important;
}

/* --- MODO ACCESIBILIDAD (V4 - Ajustado) --- */

/* 1. LA TORRE DE BOTONES (Izquierda) */
.left-buttons-stack {
    display: flex;
    flex-direction: column-reverse; /* De abajo hacia arriba: Salir abajo, Accesibilidad arriba */
    gap: 3rem !important; /* Espacio entre botones */
    margin-right: 15px;
    align-items: center;
    
    /* SOLUCIÓN: Esto lo levanta del suelo exactamente 5.5rem */
    margin-bottom: 4.5rem !important;  
}

/* 2. ESTILO DEL BOTÓN DE ACCESIBILIDAD (Tus estilos personalizados + ajustes para stack) */
#btn-accessibility {
     background: #ffffff !important;
    box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.75) !important;
    border: none !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.4s 
    ease, box-shadow 0.4s 
    ease, transform 0.15s 
    ease !important;
    border-radius: 0px 8px 8px 0px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0px !important;

}

#btn-accessibility.active {
    background-color: #008CE3 !important; /* Amarillo al activar */
    color: #000 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 15px #008CE3 !important;
}

#btn-accessibility.active #accessibility{
    color: white !important;

}

/* --- 3. LA MAGIA: BAJAR TODO (INCLUIDO FIDELIZACIÓN) --- */

/* A. Bajar el Banner de Fidelización */
body.accessibility-active #loyalty-banner-container {
    position: fixed;
    top: 29.5vh !important;
    width: 90%;
    left: 5%;
    z-index: 1000;
    transition: top 0.3s ease;
    background-color: var(--back-color, #fff); 
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* B. Bajar la Barra de Herramientas (Volver/Filtrar) */
body.accessibility-active #back-splash-bar {
    top: 55.2vh !important;
    position: fixed;
    width: 90%;
    left: 5%;
    z-index: 1001;
    transition: top 0.3s ease;
}

/* C. Bajar las Categorías */
body.accessibility-active #category-nav {
    top: 34.3vh !important;
    transform: scale(1.1); 
    transform-origin: left center;
    z-index: 999;
}

/* D. Bajar los Productos */
body.accessibility-active #menu-container {
    padding-top: 39vh !important;
    padding-bottom: 220px; 
}

/* E. Bajar los Modales */
body.accessibility-active .modal {
    align-items: flex-end !important; 
    padding-bottom: 150px; 
}
body.accessibility-active .modal-content {
    max-height: 40vh !important; 
    border-radius: 20px 20px 0 0;
    border-top: 6px solid #ffd700; 
}

/* F. Pantallas completas */
body.accessibility-active .welcome-fullscreen,
body.accessibility-active .confirmation-fullscreen {
    padding-top: 45vh !important;
    align-items: flex-start;
}

#accessibility {
  font-size: 3rem !important;
  color: #008CE3;
}

#accessibility-btn i.fa-wheelchair {
    /* El valor estándar suele ser 1rem o 16px.
       Prueba con 1.8rem, 2rem, o incluso 2.5rem hasta que te guste. */
    font-size: 2rem; 
}

#btn-view-qr {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    padding: 1.5rem;
    border-radius: 12px;
}

.btn-secondary {
    background-color: #a80022;
    color: #FFF;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

#name-input-screen .confirmation-actions, #email-view .confirmation-actions {
  width: 100% !important;
}

/* =========================================
   PANTALLA FINAL (ESTILO TICKET ÚNICO)
   ¡Clases renombradas para no romper el NameInput!
   ========================================= */

/* Fondo específico para la pantalla final */
.ticket-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F4F4F4; 
    z-index: 3000; /* Z-Index muy alto para estar encima de todo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* La Caja Central del Ticket */
.ticket-box {
    background: white;
    width: 90%;
    max-width: 650px;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 3001;
}

/* Textos del Ticket */
.ticket-title {
    font-size: 2rem;
    color: #222;
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.ticket-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-top: 5px;
}

/* EL NÚMERO GIGANTE (Estilo aislado) */
.ticket-number-display {
    font-size: 8rem;
    font-weight: 900;
    color: var(--primary-color, #000);
    line-height: 1;
    margin: 15px 0;
    background: #fff;
    border: 4px solid var(--primary-color, #000);
    border-radius: 15px;
    padding: 10px 40px;
    min-width: 200px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
}

/* Instrucción */
.ticket-instruction {
    font-size: 1.2rem;
    color: #444;
    background-color: #f0f2f5;
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Botones de Acción del Ticket */
.ticket-actions-row {
    display: flex;
    width: 100%;
    gap: 12px;
    margin-top: 10px;
}

.ticket-action-btn {
    flex: 1;
    height: 90px;
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 12px;
    color: #333;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ticket-action-btn i {
    font-size: 1.8rem;
    color: var(--primary-color, #555);
}

.ticket-action-btn:active {
    background-color: #f9f9f9;
    border-color: var(--primary-color, #000);
    transform: scale(0.98);
}

/* Botón Finalizar del Ticket */
.ticket-finalize-container {
    width: 100%;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 2px dashed #eee;
}

.ticket-finalize-btn {
    width: 100%;
    background-color: var(--secondary-color, #d32f2f);
    color: white;
    border: none;
    padding: 20px;
    font-size: 1.3rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* --- RESTAURACIÓN DE ESTILOS ANTIGUOS (POR SI ACASO) --- */
/* Esto asegura que la pantalla de NOMBRE se vea bien como antes */
.confirmation-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8); /* Fondo oscuro para modales normales */
    z-index: 2500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmation-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    position: relative;
    z-index: 2501;
}

/* --- CORRECCIÓN Z-INDEX PANTALLA NOMBRE --- */

.confirmation-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white; /* Fondo un poco más oscuro para tapar bien el carrito */
    
    /* ¡AQUÍ ESTÁ EL CAMBIO! */
    z-index: 10000 !important; /* Tiene que ser mayor que 3000 (que es lo que tiene el carrito) */
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Aseguramos que la caja también esté por encima */
.confirmation-box {
    position: relative;
    z-index: 10001 !important;
}

/* =============================================================
   PANTALLA FINAL: ESTILO TICKET FULLSCREEN (Layout Ajustado)
   ============================================================= */

/* 1. Fondo de pantalla completa */
.ft-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F4F6F8;
    z-index: 10000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 2. La Tarjeta Central (AHORA SIN LÍMITE DE ANCHO) */
.ft-card {
    background: white;
    
    /* --- CAMBIOS SOLICITADOS --- */
    width: 100%;          /* Ocupa el 90% del ancho de la pantalla */
    max-width: none;     /* ¡ELIMINADO EL LÍMITE DE 600PX! */
    height: 100%;        /* Ocupa toda la altura disponible dentro del padding */
    /* --------------------------- */

    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    
    /* Layout Flex para distribuir contenido */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Separa Info (arriba/centro) de Botones (abajo) */
    align-items: center;
    
    animation: ft-slideUp 0.4s ease-out;
}

/* WRAPPER PARA LA INFORMACIÓN (CENTRADO EN EL MEDIO) */
.ft-info-wrapper {
    flex-grow: 1; /* Ocupa todo el espacio sobrante */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center;     /* Centra horizontalmente */
    width: 100%;
}

/* WRAPPER PARA LOS BOTONES (ABAJO DEL TODO) */
.ft-bottom-wrapper {
    width: 100%;
    flex-shrink: 0; /* No se encoge */
    margin-top: 20px;
}

/* --- Estilos de Texto y Elementos --- */

.ft-title {
    font-size: 3rem; /* Más grande al tener más espacio */
    font-weight: 900;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

.ft-subtitle {
    font-size: 1.5rem;
    color: #666;
    margin: 0;
}

/* EL NÚMERO GIGANTE */
.ft-number-box {
    background: #fff;
    border: 4px solid #000;
    border-radius: 20px;
    padding: 20px 80px;
    margin: 30px 0;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
}

.ft-number {
    font-size: 10rem; /* AÚN MÁS GIGANTE */
    font-weight: 900;
    color: #000;
    line-height: 1;
}

.ft-instruction {
    background-color: #e8f0fe;
    color: #1967d2;
    font-weight: 600;
    font-size: 1.3rem;
    padding: 20px 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- BOTONES --- */

.ft-actions-row {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.ft-btn-secondary {
    flex: 1;
    height: 100px; /* Más altos */
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #444;
}

.ft-btn-secondary i {
    font-size: 2rem;
    color: var(--primary-color, #333);
}

.ft-btn-finish {
    width: 100%;
    padding: 30px; /* Más gordo */
    background-color: var(--secondary-color, #d32f2f);
    color: white;
    font-size: 1.8rem; /* Texto enorme */
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* Modales internos y QR (Igual que antes) */
.ft-inner-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3);
    z-index: 10002;
    text-align: center;
}

@keyframes ft-slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   PANTALLA FINAL: ESTILO TICKET FULLSCREEN (Limpiado)
   ============================================================= */

/* 1. Fondo de pantalla completa */
.ft-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #F4F6F8;
    z-index: 10000 !important; /* Encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* 2. La Tarjeta Central */
.ft-card {
    background: white;
    width: 100%;         /* Ocupa todo el ancho */
    max-width: none;     /* Sin límite de ancho */
    height: 100%;        /* Ocupa toda la altura */
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    
    /* Flex para distribuir contenido */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    animation: ft-slideUp 0.4s ease-out;
    box-sizing: border-box;
}

/* WRAPPER PARA LA INFORMACIÓN (CENTRADO) */
.ft-info-wrapper {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;    
    width: 100%;
}

/* WRAPPER PARA LOS BOTONES (ABAJO) */
.ft-bottom-wrapper {
    width: 100%;
    flex-shrink: 0;
    margin-top: 20px;
}

/* --- Textos --- */

.ft-title {
    font-size: 3rem;
    font-weight: 900;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    text-align: center;
}

.ft-subtitle {
    font-size: 1.5rem;
    color: #666;
    margin: 0;
    text-align: center;
}

/* EL NÚMERO GIGANTE */
.ft-number-box {
    background: #fff;
    border: 4px solid #000;
    border-radius: 20px;
    padding: 20px 80px;
    margin: 30px 0;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
}

.ft-number {
    font-size: 10rem;
    font-weight: 900;
    color: #000;
    line-height: 1;
}

.ft-instruction {
    background-color: #e8f0fe;
    color: #1967d2;
    font-weight: 600;
    font-size: 1.3rem;
    padding: 20px 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* --- BOTONES --- */

.ft-actions-row {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.ft-btn-secondary {
    flex: 1;
    height: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #444;
    transition: all 0.2s;
}
.ft-btn-secondary:active {
    background: #f5f5f5;
    transform: scale(0.98);
}

.ft-btn-secondary i {
    font-size: 2rem;
    color: #333;
}

.ft-btn-finish {
    width: 100%;
    padding: 30px;
    background-color: #d32f2f; /* Cambia esto si tu color secundario es otro */
    color: white;
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: uppercase;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.ft-btn-finish:active {
    transform: scale(0.98);
}

/* Modales internos */
.ft-inner-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3);
    z-index: 10002;
    text-align: center;
}

@keyframes ft-slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Estilos para el teclado de email */
.email-keyboard {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    margin-top: 20px;
    width: 100%;
}
.email-keyboard button {
    padding: 25px;
    font-size: 1.2rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.email-keyboard button:active {
    background: #eee;
}

/* Ocultar controles nativos de video y botón play fantasma en Android */
video.screensaver-media::-webkit-media-controls {
    display: none !important;
}

video.screensaver-media::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

video.screensaver-media::-webkit-media-controls-enclosure {
    display: none !important;
}

video.screensaver-media {
    pointer-events: none; /* Evita que el usuario pueda pausar tocando el video */
}

/* =========================================
   ESTILOS DE FACTURA (TICKET) CENTRADO
   ========================================= */

/* 1. El contenedor oscuro que tapa la pantalla */
.invoice-container-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo oscuro elegante */
    z-index: 3000; /* Por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Efecto borroso bonito */
}

/* 2. La "caja" modal que contiene el ticket */
.modal-content-simulated {
    background-color: #f5f5f5; /* Gris muy suave */
    width: 90%;
    max-width: 500px; /* Ancho máximo para no estirar el ticket */
    height: 85vh; /* Alto del 85% de la pantalla */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Para que no se salga nada */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Cabecera del modal (Título "Ticket") */
.invoice-header {
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
    font-weight: 800;
    text-transform: uppercase;
}

/* 3. El área donde va el texto del ticket */
.invoice-content-wrapper {
    flex: 1; /* Ocupa todo el espacio disponible */
    overflow-y: auto; /* Scroll si el ticket es largo */
    padding: 30px;
    display: flex;
    justify-content: center; /* Centra el papel horizontalmente */
    align-items: flex-start; /* Alinea el papel arriba */
    background-color: #555; /* Fondo gris oscuro detrás del papel */
}

/* 4. EL "PAPEL" DEL TICKET (Lo más importante) */
.ticket-pre {
    background-color: #fff; /* Papel blanco */
    color: #000; /* Tinta negra */
    font-family: 'Courier New', Courier, monospace; /* ¡VITAL! Alinea las columnas */
    font-size: 14px; /* Tamaño legible */
    line-height: 1.2; /* Interlineado de ticket */
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra del papel */
    white-space: pre; /* Respeta los espacios exactos del TPV */
    margin: 0 auto; /* Centrado */
    min-width: 300px; /* Ancho mínimo */
    text-align: left; /* El texto interno a la izquierda para que los precios cuadren */
    border-bottom: 2px dashed #ccc; /* Efecto de corte abajo */
}

/* Botón de cerrar en esquina */
.btn-close-invoice {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

/* Pie del modal */
.invoice-footer-actions {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    text-align: center;
}

#loyalty-keypad-view, #keypad, .btn-keypad {
  width: 100% !important;
}

/* El contenedor del teclado al 50% y centrado */
.numeric-mode-active #keyboard-container,
.numeric-mode-active .numeric-keypad-grid {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Aseguramos centrado si es flex */
    align-self: center; 
}

/* Los botones de acción al 50% y centrados */
.numeric-mode-active .confirmation-actions {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center;
    
    /* Aseguramos que los botones de dentro se distribuyan bien */
    display: flex;
    justify-content: center;
    gap: 10px;
}

#name-input-screen.numeric-mode-active #keyboard-container, 
#name-input-screen.numeric-mode-active .numeric-keypad-grid {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Los botones de acción al 50% y centrados */
#name-input-screen.numeric-mode-active .confirmation-actions {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Flexbox para centrar los botones dentro del contenedor */
    display: flex !important;
    justify-content: center !important;
    gap: 10px;
    border: none !important;
}

/* =========================================
   FIX DEFINITIVO: GRID DE 2 COLUMNAS
   ========================================= */

/* 1. GRID DE 2 COLUMNAS ESTRICTO */
#addon-upsell-modal .suggestions-grid,
#suggestions-modal .suggestions-grid {
    display: grid !important;
    
    /* AQUÍ ESTÁ EL CAMBIO: 2 columnas de igual tamaño siempre */
    grid-template-columns: repeat(2, 1fr) !important; 
    
    gap: 20px !important;
    align-items: stretch !important;
}

/* 2. Estructura de la tarjeta */
#addon-upsell-modal .menu-item,
#suggestions-modal .menu-item {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-bottom: 15px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* 3. Imagen Cuadrada y Sagrada */
#addon-upsell-modal .menu-item .product-visuals,
#suggestions-modal .menu-item .product-visuals {
    width: 100% !important;
    height: 60% !important;
    aspect-ratio: 1 / 1 !important; /* Cuadrado perfecto */
    flex-shrink: 0 !important;      /* Prohibido encoger */
    position: relative !important;
    overflow: hidden !important;
}

#addon-upsell-modal .menu-item .product-image,
#suggestions-modal .menu-item .product-image {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* 4. Texto limitado a 2 líneas */
#addon-upsell-modal .menu-item .card-product-name,
#suggestions-modal .menu-item .card-product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    min-height: 2.4em !important;
    line-height: 1.2em !important;
    flex-grow: 0 !important;
}

/* 5. Botón protegido */
#addon-upsell-modal .menu-item .btn-add-to-cart,
#suggestions-modal .menu-item .btn-add-to-cart {
    margin-top: 0.8rem !important;
    flex-shrink: 0 !important;
    min-height: 45px !important;
}

.toast-notification.info {
    background-color: #212529; /* Negro casi puro (Gris muy oscuro) */
    color: #ffffff;            /* Texto blanco */
}

#category-nav {
    /* ... tus otros estilos de flex/grid ... */
    gap: 15px; /* O el espacio que quieras */
    padding: 10px;
}

/* EL CAMBIO IMPORTANTE: */
.category-button {
    /* En lugar de width: 140px; ponemos la variable */
    width: var(--cat-width);
    height: var(--cat-height);
    
    /* Para que la transición de tamaño sea suave */
    transition: all 0.3s ease;
    
    /* Resto de estilos estéticos... */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.category-button img {
    /* La imagen se adapta al contenedor */
    width: 80%; 
    height: 60%;
    object-fit: contain;
}

.category-button span {
    font-size: var(--cat-text-size);
    margin-top: 5px;
    text-align: center;
}

/* ESTADO SELECCIONADO (Crece usando la variable calculada en JS) */
.category-button.active, 
.category-button.selected {
    width: var(--cat-sel-width);
    height: var(--cat-sel-height);
    color: var(--button-text-color);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
    transform: translateY(-2px); /* Un pequeño salto visual */
}

#category-nav {
    position: sticky !important;
    position: -webkit-sticky !important; /* Safari */
    z-index: 100 !important; /* Para que quede por encima de los productos */
    
    /* Deja esto en 0 o elimínalo, el JS le pondrá el valor correcto inline */
    top: 0 !important; 
    
    /* Resto de estilos estéticos... */
    background-color: var(--category-nav-bg);
    padding: 10px 0;
}

.detail-option-card.no-image {
    /* Quitamos alturas forzadas */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    
    /* Ajustamos el layout para que sea una pastilla compacta */
    display: flex !important;
    flex-direction: row !important; /* Texto y precio en línea (opcional) o column */
    align-items: center !important;
    justify-content: center !important;
    
    padding: 15px 20px !important; /* Relleno cómodo pero no enorme */
    gap: 10px !important;
}

/* Ajustes de texto para las compactas */
.detail-option-card.no-image .detail-option-card-name {
    margin: 0 !important;
    font-weight: 600 !important;
    text-align: center;
    font-size: 1.5rem !important;
}

.detail-option-card.no-image .detail-option-card-price {
    margin: 0 !important;
    font-size: 1rem !important;
    color: var(--primary-color) !important;
}

/* --- MODO LISTADO (ADDINS) - COLORES EXACTOS A LAS CARDS --- */

.modifiers-container-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 10px 5px;
    overflow-y: auto;
    max-height: 65vh; 
}

.modifier-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* [CLAVE] Usamos las mismas variables que tus cards cuadradas */
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333);
    border: 1px solid var(--border-color, #dddddd);
    
    border-radius: 12px;
    padding: 12px 15px;
    width: 100%;
    min-height: 70px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra suave igual que las cards */
    transition: all 0.2s ease;
    cursor: pointer;
}

/* ESTADO SELECCIONADO */
.modifier-list-item.selected {
    /* [CLAVE] El mismo color de borde que usas en las cards seleccionadas */
    border-color: var(--addin-selected-border, var(--primary-color));
    
    /* Grosor del borde para que se note igual */
    border-width: 2px; 
    
    /* Opcional: Si tus cards cambian de fondo al seleccionarse, descomenta esto: */
    /* background-color: var(--addin-card-bg-selected, #fff); */
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Un poco más de sombra al seleccionar */
}

/* --- BLOQUE IZQUIERDO (FOTO + NOMBRE) --- */
.mod-list-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.mod-list-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    /* Borde sutil para la foto */
    border: 1px solid rgba(0,0,0,0.05); 
}

/* Si NO hay foto, ajustamos márgenes */
.modifier-list-item.no-image .mod-list-left {
    gap: 0;
}

.mod-list-name {
    font-weight: 600;
    font-size: 1.1rem;
    /* Hereda el color definido en el padre (.modifier-list-item) */
    color: inherit; 
    line-height: 1.2;
}

/* --- BLOQUE DERECHO (STEPPER + PRECIO) --- */
.mod-list-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ajuste para Single Mode (Solo precio/check) */
.mod-list-right.single-mode {
    justify-content: flex-end;
    min-width: 40px;
}

/* STEPPER (Botones - +) */
.list-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Fondo del stepper: Un poco más oscuro que el fondo de la tarjeta */
    background-color: rgba(0, 0, 0, 0.05); 
    padding: 4px;
    border-radius: 30px;
}

.list-stepper button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    
    /* Los botones usan el fondo de la tarjeta para resaltar sobre el gris del stepper */
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333);
    
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
}

.list-stepper .count-display {
    font-weight: bold;
    font-size: 1.1rem;
    min-width: 20px;
    text-align: center;
    color: inherit;
}

/* PRECIO */
.mod-list-price {
    font-weight: 700;
    font-size: 1.1rem;
    text-align: right;
    white-space: nowrap;
    /* [CLAVE] Usamos el color primario o el específico de precio de carta */
    color: var(--card-price-color, var(--primary-color));
}

/* Check icon para selección única (opcional) */
.fa-check-circle {
    color: var(--addin-selected-border, var(--primary-color));
    margin-right: 8px;
    font-size: 1.3rem;
}

.list-stepper {
    display: flex;
    align-items: center;
    /* [CAMBIO] Más espacio entre botones y número */
    gap: 15px; 
    
    /* [CAMBIO] Quitamos el fondo gris para que quede limpio */
    background-color: transparent !important; 
    padding: 0;
    border-radius: 0;
}

.list-stepper button {
    /* [CAMBIO] Tamaño GRANDE estilo Carrito (antes 30px) */
    width: 48px; 
    height: 48px;
    
    border-radius: 50%; /* Redondos */
    /* Borde visible para que parezcan botones pulsables */
    border: 1px solid var(--border-color, #ddd);
    
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333);
    
    /* [CAMBIO] Icono más grande */
    font-size: 1.2rem; 
    font-weight: bold;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Sombra más marcada para dar volumen */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

/* Efecto al pulsar */
.list-stepper button:active {
    transform: scale(0.92);
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.list-stepper .count-display {
    /* [CAMBIO] Número mucho más grande y visible */
    font-weight: 800;
    font-size: 1.5rem; 
    
    min-width: 30px;
    text-align: center;
    color: inherit;
}



/* --- MODO LISTADO (ADDINS) - VERSIÓN XL KIOSKO --- */

.modifiers-container-list {
    display: flex;
    flex-direction: column;
    /* Más separación entre filas */
    gap: 16px; 
    width: 100%;
    padding: 10px 5px;
    overflow-y: auto;
    max-height: 65vh; 
}

.modifier-list-item {
    display: flex;
    align-items: center; /* Centrado vertical perfecto */
    justify-content: space-between;
    
    /* COLORES Y BORDES ORIGINALES */
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333);
    border: 1px solid var(--border-color, #dddddd);
    
    border-radius: 16px; 
    /* Padding aumentado considerablemente */
    padding: 12px; 
    width: 100%;
    
    /* Altura mínima para asegurar que cabe el botón gigante */
    min-height: 140px; 
    
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

.modifier-list-item.selected {
    border-color: var(--addin-selected-border, var(--primary-color));
    /* Borde más grueso para que se vea bien al ser grande */
    border-width: 3px; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* --- BLOQUE IZQUIERDO (FOTO + NOMBRE) --- */
.mod-list-left {
    display: flex;
    align-items: center;
    gap: 25px; /* Más aire entre foto y texto */
    flex: 1;
}

.mod-list-img {
    /* FOTO XL */
    width: 120px; 
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05); 
}

/* Si NO hay foto, ajustamos márgenes */
.modifier-list-item.no-image .mod-list-left {
    gap: 0;
}

.mod-list-name {
    font-weight: 700;
    /* TEXTO XL */
    font-size: 1.5rem; 
    color: inherit;
    line-height: 1.2;
}

/* --- BLOQUE DERECHO (STEPPER + PRECIO) --- */
.mod-list-right {
    display: flex;
    align-items: center;
    gap: 25px; /* Separación amplia */
}

/* Ajuste para Single Mode (Check + Precio) */
.mod-list-right.single-mode {
    justify-content: flex-end;
    min-width: 60px;
}

/* --- STEPPER XL (Botones - +) --- */
.list-stepper {
    display: flex;
    align-items: center;
    gap: 20px; /* Separación entre botones */
    
    /* Fondo transparente como pediste */
    background-color: transparent !important; 
    padding: 0;
    border-radius: 0;
}

.list-stepper button {
    /* TAMAÑO BOTÓN GIGANTE (Muy fácil de pulsar) */
    width: 65px; 
    height: 65px;
    
    border-radius: 50%;
    border: 2px solid var(--border-color, #ddd); /* Borde un poco más notable */
    
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333);
    
    /* Icono + / - grande */
    font-size: 1.8rem; 
    font-weight: 900;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    cursor: pointer;
    transition: transform 0.1s;
}

.list-stepper button:active {
    transform: scale(0.95);
    background-color: #f0f0f0;
}

.list-stepper .count-display {
    /* NÚMERO XL */
    font-weight: 800;
    font-size: 2rem; 
    
    min-width: 45px;
    text-align: center;
    color: inherit;
    line-height: 1;
}

/* --- PRECIO XL --- */
.mod-list-price {
    font-weight: 800;
    font-size: 1.5rem; /* Precio grande */
    text-align: right;
    white-space: nowrap;
    color: var(--card-price-color, var(--primary-color));
    min-width: 80px; /* Para que alineen bien */
}

/* ICONO CHECK (Selección única) */
.fa-check-circle {
    color: var(--addin-selected-border, var(--primary-color));
    margin-right: 15px;
font-size: 2.2rem; /* Icono gigante */
}

/* --- BLOQUE DERECHO (STEPPER + PRECIO) --- */
.mod-list-right {
    display: flex;
    /* Esto es lo CRÍTICO: Alinea los centros geométricos */
    align-items: center; 
    justify-content: flex-end;
    gap: 30px; /* Un poco más de aire para que no se peguen */
    
    /* Aseguramos que ocupe la altura necesaria para centrarse bien */
    height: 100%; 
}

/* Ajuste Single Mode */
.mod-list-right.single-mode {
    justify-content: flex-end;
    min-width: 60px;
}

/* --- STEPPER XL (Botones - +) --- */
.list-stepper {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: transparent !important;
    padding: 0;
    margin: 0;
    
    /* Reseteo de altura de línea para evitar huecos fantasma */
    line-height: 1; 
}

.list-stepper button {
    width: 65px; 
    height: 65px;
    
    border-radius: 50%;
    border: 2px solid var(--border-color, #ddd);
    
    background-color: var(--addin-card-bg, #ffffff);
    color: var(--addin-card-text, #333333) !important;
    
    font-size: 1.8rem; 
    font-weight: 900;
    
    /* Flex para centrar el icono + o - DENTRO del botón */
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    cursor: pointer;
    padding: 0; /* Importante para el centrado */
    margin: 0;  /* Importante */
}

.list-stepper button i {
    /* Ajuste fino del icono FontAwesome si se ve descentrado */
    margin-top: 2px; 
}

.list-stepper .count-display {
    font-weight: 800;
    font-size: 2rem; 
    min-width: 45px;
    text-align: center;
    color: inherit;
    
    /* Quitamos el espacio extra de la fuente */
    line-height: 1; 
    margin: 0;
    
    /* Pequeño ajuste óptico si el número se ve muy arriba */
    position: relative;
    top: 2px; 
}

/* --- PRECIO XL --- */
.mod-list-price {
    font-weight: 800;
    font-size: 1.6rem; /* Un pelín más grande */
    text-align: right;
    white-space: nowrap;
    color: var(--card-price-color, var(--primary-color));
    min-width: 100px;
    
    /* TRUCO DE ALINEACIÓN */
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    margin: 0;
    
    /* A veces el texto numérico engaña al ojo, esto lo corrige */
    position: relative;
    top: 2px; /* Bájalo 1 o 2 píxeles si sientes que flota */
}

/* ICONO CHECK */
.fa-check-circle {
    color: var(--addin-selected-border, var(--primary-color));
    margin-right: 15px;
    font-size: 2.2rem;
    
    /* Alineación del icono */
    display: flex;
    align-items: center;
}

/* =========================================
   COLORES CONFIGURABLES (DISEÑO INTACTO)
   ========================================= */

/* --- 1. BOTÓN SALIR (La X) --- */
#exit-kiosk-btn {
    background-color: var(--exit-btn-bg, #e74c3c) !important;
    color: var(--exit-btn-text, #ffffff) !important;
    border: none !important;
}

#exit-kiosk-btn i {
  color: var(--exit-btn-text, #ffffff) !important;
}

/* --- 2. BARRA INFERIOR (Volver a Categorías + Filtro) --- */
/* El contenedor de la barra */
#back-splash-bar {
    background-color: var(--back-splash-bg, #ffffff) !important;
}

/* Los botones dentro de la barra */


/* --- 3. MODAL ALÉRGENOS (Solo Colores) --- */

/* Tarjeta Alérgeno - Estado NORMAL */
.allergen-toggle-item {
    background-color: var(--allergen-item-bg, #ffffff) !important;
    border: 2px solid var(--allergen-item-border, #e0e0e0) !important;
    color: var(--allergen-item-text, #333333) !important;
}

/* Tarjeta Alérgeno - Estado SELECCIONADO (Filtro Activo) */
.allergen-toggle-item.selected {
    background-color: var(--allergen-selected-bg, #ffebee) !important;
    border-color: var(--allergen-selected-border, #d32f2f) !important;
    
    /* Añadimos un borde interior del mismo color para que resalte más */
    box-shadow: 0 0 0 1px var(--allergen-selected-border, #d32f2f) inset !important;
}

/* --- 4. BOTONES DEL FOOTER DEL MODAL ALÉRGENOS --- */

/* Botón Limpiar (Izquierda) */
#allergen-clear-btn {
    background-color: var(--allergen-clear-bg, #95a5a6) !important;
    color: #ffffff !important; /* Texto blanco por defecto */
    border: none !important;
}

/* Botón Aplicar (Derecha) */
#allergen-apply-btn {
    background-color: var(--allergen-apply-bg, #2ecc71) !important;
    color: #ffffff !important; /* Texto blanco por defecto */
    border: none !important;
}

/* ==================================================
   ESTILOS DE ÍTEMS DEL CARRITO (PERSONALIZABLES)
   ================================================== */

/* 1. LA FILA DEL PRODUCTO (Fondo y Borde) */
/* Usamos #cart-modal .cart-modal-item para darle máxima prioridad */
#cart-modal .cart-modal-item,
.cart-modal-item {
    background-color: var(--cart-item-bg) !important;
    border-bottom: 1px solid var(--cart-item-border) !important;
    
    /* Aseguramos que el texto base herede el color */
    color: var(--cart-item-text) !important;
  
}

/* 2. NOMBRE DEL PRODUCTO */
.cart-modal-item .cart-item-details .cart-item-name,
.cart-item-name {
    color: var(--cart-item-text) !important;

}

/* 3. PRECIO */
.cart-modal-item .cart-item-actions .cart-item-price,
.cart-item-price {
    color: var(--cart-item-price-color) !important;

}

/* 4. CONTROLES DE CANTIDAD (+ y -) */
.quantity-stepper-cart .btn-quantity-cart {
    background-color: var(--cart-stepper-bg) !important;
    color: var(--cart-stepper-text) !important;
  
}

/* El número de cantidad en medio */
.quantity-stepper-cart .count-display {
    color: var(--cart-item-text) !important; /* Usa el color de texto general */
    font-weight: bold;
    font-size: 1.1rem;
    min-width: 20px;
    text-align: center;
}

/* 5. ICONO DE PAPELERA (BORRAR) */
.cart-item-remove {
    background: transparent !important;
    border: none !important;
}

.cart-item-remove i,
.cart-item-remove svg {
    color: var(--cart-remove-icon-color) !important;
}

/* --- COLORES MODAL ALÉRGENOS (SOLO PINTURA) --- */

/* 1. Tarjetas de Alérgenos (Estado Normal) */
.allergen-toggle-item {
    background-color: var(--allergen-item-bg, #ffffff) !important;
    border-color: var(--allergen-item-border, #e0e0e0) !important;
    color: var(--allergen-item-text, #333333) !important;
}

/* 2. Tarjetas de Alérgenos (Estado Seleccionado) */
.allergen-toggle-item.selected {
    background-color: var(--allergen-selected-bg, #ffebee) !important;
    border-color: var(--allergen-selected-border, #d32f2f) !important;
    /* Borde interior del mismo color para resaltar */
    box-shadow: 0 0 0 1px var(--allergen-selected-border, #d32f2f) inset !important;
}

/* 3. Botón "Limpiar Filtros" (Gris por defecto) */
#allergen-clear-btn {
    background-color: var(--allergen-clear-bg, #95a5a6) !important;
    color: #ffffff !important;
}

/* 4. Botón "Aplicar Filtros" (Verde por defecto) */
#allergen-apply-btn {
    background-color: var(--allergen-apply-bg, #2ecc71) !important;
    color: #ffffff !important;
}

/* --- ESTILOS EXCLUSIVOS DEL MODAL DE ALÉRGENOS --- */

/* Fondo de la ventana (Solo si está dentro de #allergen-filter-modal) */
#allergen-filter-modal .modal-content {
    background-color: var(--allergen-modal-bg, #ffffff) !important;
}

/* Título H2 (Solo en este modal) */
#allergen-filter-modal .modal-header h2 {
    color: var(--allergen-modal-title, #000000) !important;
}

/* Texto de instrucciones (Párrafos) */
#allergen-filter-modal .modal-body p {
    color: var(--allergen-modal-text, #333333) !important;
}

/* ============================================================
       CORRECCIÓN FINAL: HEADER Y FOOTER DEL MODAL ALÉRGENOS
       ============================================================ */
    
    /* Header usa su propia variable */
    #allergen-filter-modal .modal-header {
        background-color: var(--allergen-modal-header-bg) !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important; /* Separador sutil */
    }

    #allergen-filter-modal .modal-body{
      background-color: var(--allergen-modal-header-bg) !important;
    }

    /* Footer usa su propia variable */
    #allergen-filter-modal .modal-footer {
        background-color: var(--allergen-modal-footer-bg) !important;
        border-top: 1px solid rgba(0,0,0,0.1) !important; /* Separador sutil */
    }

    /* Títulos y textos */
    #allergen-filter-modal .modal-header h2 {
        color: var(--allergen-modal-title) !important;
    }

    /* 1. Ocultar controles nativos y el botón de Play gigante de Android */
    .splash-banner-wrapper video::-webkit-media-controls {
        display: none !important;
    }
    .splash-banner-wrapper video::-webkit-media-controls-start-playback-button {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        -webkit-appearance: none !important;
    }
    .splash-banner-wrapper video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. Color de fondo mientras carga para evitar pantallazos blancos */
    .splash-banner-wrapper {
        background-color: #000000 !important; /* O el color de tu app */
        position: relative;
        overflow: hidden;
    }
    
    /* 3. Asegurar que el vídeo cubre todo */
    .splash-banner-wrapper video {
        width: 100% !important;
        object-fit: cover !important;
        /* Truco para evitar bordes o espacios extraños */
        display: block; 
    }

    /* ============================================================
       CORRECCIÓN VÍDEO BANNER (ANDROID PLAY BUTTON & CARGA)
       ============================================================ */
    
    .splash-banner-wrapper {
        /* 1. Evita el pantallazo blanco/negro mientras carga. 
           Usa el color de fondo de tu app */
        background-color: var(--kiosk-bg) !important; 
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .splash-banner-wrapper video {
        width: 100% !important;
        object-fit: cover !important;
        display: block;
        
        /* [LA CLAVE MAESTRA] */
        /* Esto le dice a Android: "Nadie puede hacer click aquí".
           Al no ser interactivo, Android suele ocultar el botón de Play gigante
           porque entiende que es un fondo. */
        pointer-events: none !important; 
    }

    /* 2. Red de seguridad: Ocultar controles internos de WebKit/Chrome */
    .splash-banner-wrapper video::-webkit-media-controls {
        display: none !important;
    }
    .splash-banner-wrapper video::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .splash-banner-wrapper video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .list-stepper button i {
      color: white !important;
    }

    .mod-list-name {
      color: white !important;
    }


.card-product-desc {
    /* 1. Estilo de texto (según tu código) */
    font-size: 1.3rem !important; 
    color: var(--card-name-color) !important;
    line-height: 1.4; /* Importante definirlo numéricamente para el cálculo */
    margin: 5px 0;

    /* 2. OBLIGAR a ocupar siempre 3 líneas de alto */
    /* Fórmula: font-size * line-height * número_de_líneas */
    height: calc(1.3rem * 1.4 * 2); 
    
    /* 3. Cortar el texto si se pasa de 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón de NOTA en el carrito */
.btn-note-item {
    background-color: var(--cart-edit-btn-bg) !important;
    color: var(--cart-edit-btn-text) !important;    
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* Cuando TIENE nota escrita (Amarillo) */
.btn-note-item.has-note {
    background-color: var(--cart-edit-btn-bg) !important;
    color: var(--cart-edit-btn-text) !important;        
    border-color: #fcd34d;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
}

/* Previsualización pequeña de la nota bajo el nombre */
.cart-item-note-preview {
    font-size: 0.8rem;
    color: var(--cart-edit-btn-text) !important;        
    margin-top: 4px;
    font-style: italic;
    background: #fffbeb;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

/* Botones rápidos (Chips) en el modal */
.chip-btn {
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.chip-btn:active {
    background: #4f46e5;
    color: white;
}

/* Alineación horizontal de Editar y Nota */
.cart-item-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;       /* Espacio entre botones */
    margin-top: 8px; /* Separación con las opciones del producto */
    margin-bottom: 5px;
}

/* Estilo para que el botón Nota se vea bien */
.btn-note-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    background-color: #f9fafb;
    color: #333;
}

/* Cuando hay nota escrita (color amarillo) */
.btn-note-item.has-note {
    background-color: #fffbeb;
    color: #d97706;
    border-color: #fcd34d;
}

/* Estilos para el modal de notas y teclado */
#virtual-keyboard-container button {
    touch-action: manipulation; /* Mejora respuesta táctil */
    transition: background-color 0.1s;
    box-shadow: 0 2px 0 #bbb; /* Efecto 3D simple */
}

#virtual-keyboard-container button:active {
    transform: translateY(2px);
    box-shadow: none;
}

#note-textarea:focus {
    outline: 2px solid #007bff; /* Color de tu marca */
}

/* --- ESTILOS TECLADO VIRTUAL KIOSKO (MEJORADO) --- */

/* El contenedor del teclado */
#virtual-keyboard-container {
    margin-top: auto; /* Empuja el teclado al fondo */
    padding: 10px;    /* Un poco de aire alrededor */
    display: flex;
    flex-direction: column;
    gap: 8px;         /* Separación vertical entre filas */
    width: 100%;      /* Ocupa todo el ancho */
    background-color: #f3f4f6; /* Fondo gris suave para contrastar con las teclas blancas */
    border-top: 1px solid #e5e7eb;
}

/* Filas de teclas */
.vk-row {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio */
    gap: 6px;         /* Separación horizontal entre teclas */
    width: 100%;
    height: 65px;     /* Altura fija para botones grandes y cómodos */
}

/* Botones (Teclas) */
.vk-btn {
    flex: 1; /* Todas las teclas crecen para llenar el hueco */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Letra más grande y legible */
    font-weight: 600;
    color: #1f2937;
    background-color: #ffffff;
    border: none;
    border-radius: 8px; /* Bordes redondeados modernos */
    cursor: pointer;
    touch-action: manipulation;
    
    /* Efecto 3D de botón físico */
    box-shadow: 0 4px 0 #cbd5e1; 
    transition: all 0.1s ease;
}

/* Efecto al pulsar (Click activo) */
.vk-btn:active {
    background-color: #f8fafc;
    transform: translateY(4px); /* El botón se hunde físicamente */
    box-shadow: none; /* La sombra desaparece al hundirse */
}

/* Tecla Espacio */
.vk-btn.vk-space {
    flex: 4; /* Ocupa mucho más espacio */
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #4b5563;
    background-color: #e2e8f0; /* Un gris un poco diferente para diferenciarla */
    box-shadow: 0 4px 0 #94a3b8;
}
.vk-btn.vk-space:active {
    box-shadow: none;
    background-color: #cbd5e1;
}

/* Tecla Borrar */
.vk-btn.vk-backspace {
    flex: 1.5;
    background-color: #fee2e2; /* Fondo rojo muy suave */
    color: #dc2626;            /* Texto rojo fuerte */
    box-shadow: 0 4px 0 #fca5a5;
}
.vk-btn.vk-backspace:active {
    background-color: #fecaca;
    box-shadow: none;
}

/* Ajuste para el textarea en modo "solo lectura" */
#note-textarea[readonly] {
    width: 100%;
    background-color: #ffffff;
    color: #111827;
    cursor: default;
    
    /* Estética de "Pantalla" */
    border: 2px solid #3b82f6; /* Azul brillante enfocado */
    border-radius: 12px;
    padding: 15px;
    font-size: 1.6rem; /* Texto grande de lo que escribes */
    font-family: inherit;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* Sombra interna sutil */
}

/* =========================================
   ESTILOS CONFIGURADOR DE MENÚ (WIZARD)
   ========================================= */

/* 1. Pantalla completa */
#menu-config-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #f8f9fa; /* Fondo gris muy suave para resaltar las cartas blancas */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#menu-config-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 2. Header: X a la derecha */
.menu-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 15px 25px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.menu-config-header h2 {
    font-size: 1.6rem;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    color: #333;
    font-weight: 800;
}

/* Botón X grande y limpio */
#menu-config-close {
    background: #fff;
    border: 2px solid #eee;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
#menu-config-close:active { transform: scale(0.9); background: #eee; }


/* 3. GRID GRANDE (Estilo Productos) */
.menu-config-grid {
    display: grid;
    /* CAMBIO CLAVE: minmax(260px, 1fr) hace que sean grandes como productos */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    padding: 30px;
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 120px;
}

/* 4. Tarjeta Individual */
.wizard-option-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px; /* Bordes más redondeados */
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%; /* Para igualar alturas */
}

/* Estado Seleccionado */
.wizard-option-card.selected {
    border: 3px solid var(--primary-color, #000);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px); /* Efecto "levitar" */
}

/* 5. FOTOS GRANDES (Ratio 4:3) */
.wizard-option-card img {
    width: 100%;
    aspect-ratio: 4/3; /* Proporción rectangular perfecta */
    object-fit: cover; /* Recorta si sobra, no deforma */
    background-color: #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

/* Texto del producto */
.wizard-option-card p {
    padding: 15px;
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem; /* Texto más grande */
    text-align: center;
    color: #333;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

/* 6. ETIQUETA DE SUPLEMENTO */
.supplement-badge {
    background-color: var(--primary-color, #000);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 8px;
    text-align: center;
    width: 100%;
    display: block;
    margin-top: auto; /* Empuja hacia abajo del todo */
}

/* Checkmark */
.wizard-option-card .checkmark {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color, #28a745);
    color: white;
    width: 35px; height: 35px; /* Más grande */
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
}

.wizard-option-card.selected .checkmark { display: flex; }

/* =========================================
   ESTILOS CONFIGURADOR DE MENÚ (MODO TITÁN 2 COLS)
   ========================================= */

#menu-config-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #f8f9fa;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

#menu-config-screen.visible {
    opacity: 1;
    pointer-events: auto;
}

/* HEADER */
.menu-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 30px;
    background: #fff;
    border-bottom: 2px solid #eee;
}
.menu-config-header h2 {
    font-size: 2.7rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    color: #000;
}
#menu-config-close {
    width: 60px; height: 60px;
    border-radius: 12px;
    border: 2px solid #000;
    background: #fff;
    font-size: 2rem;
    color: #000;
    display: flex; align-items: center; justify-content: center;
}

/* GRID PRINCIPAL (Basado en tu .items-container pero forzando 2 columnas)
*/
.menu-config-grid {
    display: grid !important;
    /* Forzamos 2 columnas GIGANTES */
    grid-template-columns: repeat(2, 1fr) !important; 
    column-gap: 25px !important;
    row-gap: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 30px !important;
    padding-bottom: 120px !important; /* Espacio para el footer */
    overflow-y: auto !important;
    align-content: start !important;
}

/* TARJETA (CARD) */
.wizard-option-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: all 0.1s;
    box-shadow: 0 8px 15px rgba(0,0,0,0.05);
}

/* Estado Seleccionado */
.wizard-option-card.selected {
    border: 5px solid #000;
    transform: scale(0.99);
}

/* IMAGEN (Grande y panorámica) */
.wizard-option-card img {
    width: 100%;
    aspect-ratio: 16/9; /* Formato panorámico para que no sea tan alta */
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

/* CONTENIDO DE TEXTO */
.wizard-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    justify-content: center;
}

/* NOMBRE DEL PRODUCTO (Tus estilos exactos + alineación izquierda) */
.wizard-card-name {
    font-size: 1.7rem !important; /* Tu tamaño */
    font-weight: 900 !important;   /* Tu grosor */
    text-transform: uppercase !important;
    margin-bottom: 0px !important;
    line-height: 1.1 !important;
    color: #000 !important;
    text-align: left !important;   /* A la izquierda */
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* PRECIO (+ X €) Debajo */
.wizard-card-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color, #000);
    margin-top: 5px;
    text-align: left;
}

/* CHECKMARK */
.wizard-option-card .checkmark {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #000;
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.wizard-option-card.selected .checkmark { display: flex; }

/* FOOTER */
.menu-config-footer {
    background-color: var(--addin-footer) !important;    
    padding: 25px;
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Fijo abajo si prefieres, o fluyendo */
    position: absolute; 
    bottom: 0; left: 0; width: 100%;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}



#menu-running-total {
    font-size: 2.2rem;
    font-weight: 900;
    color: #000;
}

/* =========================================
   ESTILOS CONFIGURADOR DE MENÚ (MODO TITO 60/40)
   ========================================= */
/* ... (Header y Grid igual que antes) ... */

/* GRID 2 COLUMNAS */
/* .menu-config-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    column-gap: 20px !important;
    row-gap: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 30px 40px !important;
    padding-bottom: 140px !important;
    overflow-y: auto !important;
    align-content: start !important;
} */

.menu-config-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr) !important;
    column-gap: 20px !important;
    row-gap: var(--grid-row-gap, 40px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 50px !important;
    transition: opacity 0.3s ease-out;
}

/* TARJETA */
.wizard-option-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: all 0.1s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    height: auto; /* IMPORTANTE: Dejar que JS calcule */
}

.wizard-option-card.selected {
    border: 6px solid #000;
    transform: scale(0.99);
}

/* IMAGEN */
.wizard-option-card img {
    width: 100%;
    /* height: ... (SE PONE POR JS AL 60%) */
    object-fit: cover;
    border-bottom: 2px solid #eee;
    flex-shrink: 0; /* Evita que la imagen se aplaste si falta sitio */
}

/* CONTENIDO (EL 40%) */
.wizard-card-content {
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1; /* Ocupa el espacio restante */
    gap: 15px;
}

/* NOMBRE */
.wizard-card-name {
    font-size: 1.9rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    color: #000 !important;
    margin: 0 !important;
    text-align: left !important;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* PRECIO */
.wizard-card-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color, #000);
    margin-top: auto; 
    text-align: left !important;
    display: block;
}

#menu-config-next{
    padding: 20px 40px;
    font-size: 1.7rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: var(--addin-footer-button) !important;
    color: var(--addin-footer-button-text) !important;
}

#menu-config-prev{
    padding: 20px 40px;
    font-size: 1.7rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: var(--addin-back-btn-bg) !important;
    color: var(--addin-back-btn-text) !important;
}

.menu-config-grid {
    display: grid;
    /* AQUÍ ESTÁ LA CLAVE: 
       Si tus cards son gigantes, sube este número.
       Prueba con 300px o 350px. 
       Esto le dice al grid: "No hagas la columna más pequeña de 320px".
       Si no caben, saltarán a la siguiente línea, manteniendo su tamaño gigante.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 20px;
    padding: 15px;
    
    /* Centrar el grid si sobran huecos a los lados */
    justify-content: center; 
}

/* Asegurar que la imagen no se rompa */
.menu-config-grid .menu-item {
    width: 100%; /* Ocupa todo el hueco del grid */
    height: auto; /* Deja que la altura sea la natural del diseño original */
    margin: 0;
    
    /* Esto es para que se vea el borde de selección sobre tu diseño original */
    position: relative; 
    border: 3px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    cursor: pointer;
}

/* El estado seleccionado (solo borde y check) */
.menu-config-grid .menu-item.selected {
    border-color: var(--primary-color);
    transform: scale(0.98); /* Un pelín más pequeño al seleccionar */
}

/* Si tus cards tienen sombra por defecto, quizás quieras quitarla o ajustarla aquí */
.menu-config-grid .menu-item.large-product-card {
    /* Opcional: Si son DEMASIADO gigantes para el modal, puedes forzar un max-width aquí */
    /* max-width: 400px; */ 
}

.wizard-price-tag {
    color: var(--card-price-color) !important;
}

/* --- GRID PRINCIPAL --- */
.menu-config-grid {
    display: grid;
    /* Ajusta 280px a lo que prefieras, pero minmax ayuda a la respuesta móvil */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px;
    padding: 20px;
    align-items: stretch; /* Estira todas las cards a la misma altura total */
}

/* --- LA TARJETA --- */
.menu-config-grid .menu-item {
    cursor: pointer;
    border: 3px solid transparent; 
    transition: all 0.2s ease;
    width: 100%;
    margin: 0 !important;
    background: white; /* Asegurar fondo blanco */
    display: flex;       /* IMPORTANTE: Flex para organizar verticalmente */
    flex-direction: column; 
    height: 100%;        /* Ocupar toda la altura de la celda del grid */
}

/* --- LA IMAGEN --- */
.menu-config-grid .product-visuals {
    /* IMPORTANTE: Altura fija para la zona de la foto */
    height: 200px; /* Pon la altura que quieras para las fotos */
    width: 100%;
    overflow: hidden;
    flex-shrink: 0; /* Que no se encoja nunca */
}

.menu-config-grid .product-visuals img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la foto para llenar el hueco sin deformar */
}

/* --- LA ZONA DE TEXTO --- */
.menu-config-grid .product-info-area {
    padding: 15px; /* Un poco de aire alrededor del texto */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa el espacio restante */
    justify-content: flex-start; /* Alinea todo arriba */
    text-align: left !important;
}
/* --- ESTADO SELECCIONADO --- */
.menu-config-grid .menu-item.selected {
    border-color: 2px solid var(--primary-color) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-width: 3px !important;
}

/* =========================================
   GRID Y ESTRUCTURA (WIZARD)
   ========================================= */

.menu-config-grid {
    display: grid;
    /* Cards de ancho flexible, mínimo 260px (ajústalo si quieres) */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 20px;
    padding: 20px;
    /* Alinea la altura de todas las celdas de la fila */
    align-items: stretch; 
}

/* =========================================
   LA TARJETA (CONTENEDOR)
   ========================================= */
.menu-config-grid .menu-item {
    /* Forzamos estructura vertical */
    display: flex;
    flex-direction: column; 
    
    /* Ocupar el 100% de la altura que le da el grid */
    height: 100%; 
    width: 100%;
    margin: 0 !important;
    
    background: white;
    border: 3px solid transparent; 
    border-radius: 12px; /* Redondeo opcional, queda bien */
    overflow: hidden; /* Para que la imagen no se salga en las esquinas */
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Estado seleccionado */
.menu-config-grid .menu-item.selected {
    border-color: var(--primary-color);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* =========================================
   1. LA IMAGEN (SOLUCIÓN AL PROBLEMA)
   ========================================= */
.menu-config-grid .product-visuals {
    /* ALTURA FIJA: Decide cuánto quieres que mida la foto siempre */
    height: 2200px; 
    width: 100%;
    
    /* LA MAGIA: Esto impide que el texto empuje o aplaste la imagen */
    flex-shrink: 0; 
    
    position: relative;
}

.menu-config-grid .product-visuals img {
    width: 170px;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformar */
    display: block;
}

/* Ocultamos alérgenos y tags en el wizard si molestan, o los dejamos */
/* .menu-config-grid .product-tag-overlay { display: none; } */

/* =========================================
   2. EL CONTENIDO (TEXTO)
   ========================================= */
.menu-config-grid .product-info-area {
    /* Ocupa todo el espacio sobrante debajo de la foto */
    flex-grow: 1; 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea contenido arriba */
    
    padding: 15px;
    text-align: left !important;
}

/* =========================================
   3. EL TÍTULO (ALTURA FIJA SIEMPRE)
   ========================================= */
.menu-config-grid .card-product-name {
    /* Definimos la altura de línea */
    line-height: 1.3;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    
    /* FORZAMOS ALTURA EXACTA PARA 2 LÍNEAS */
    /* 1.3 (line-height) * 2 (líneas) = 2.6em */
    height: 2.6em; 
    
    /* Si el texto es más largo, ponemos puntos suspensivos (...) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    /* Evita que el título se encoja */
    flex-shrink: 0; 
}

/* =========================================
   4. EL PRECIO (SIEMPRE ABAJO IGUAL)
   ========================================= */
.wizard-price-tag {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1;
    
    /* Aseguramos altura aunque esté vacío */
    min-height: 1em; 
}

/* 1. ESTADO BASE (Sin seleccionar) 
   IMPORTANTE: Ponemos un borde transparente del mismo grosor 
   para que al seleccionar NO de saltos la tarjeta. 
*/
.menu-config-grid .menu-item {
    /* ... tus otros estilos ... */
    
    /* Preparamos el terreno: Borde solido transparente de 3px */
    border: 3px solid transparent; 
    box-sizing: border-box; /* Para que el borde no aumente el tamaño total */
}

/* 2. ESTADO SELECCIONADO (El borde se pinta de color) */
.menu-config-grid .menu-item.selected {
    /* CORRECCIÓN: Usamos 'border-color' porque ya definimos el estilo y ancho arriba */
    border: 3px solid;
    /* O si prefieres asegurarte al 100%, usa la propiedad 'border' completa: */
    border: 3px solid var(--addin-selected-border) !important; 
    
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

#menu-title{
  color: var(--addin-header-text) !important;
}

#addin-header-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--addin-header-text-title) !important;
  margin: 0;
  line-height: 1;
}
#menu-subtitle{
  color: var(--addin-header-text) !important;
}

.menu-config-grid .card-product-desc {
    /* Tu estilo solicitado */
    font-size: 1.3rem !important;
    color: var(--card-name-color, #333) !important; /* Fallback a gris oscuro si la variable falla */
    line-height: 1.4;
    margin: 5px 0 10px 0; /* Un poco más de margen abajo para separar del final */
    
    /* CÁLCULO DE ALTURA FIJA PARA 2 LÍNEAS */
    /* Esto es vital para que todas las cards midan lo mismo tengan texto o no */
    height: calc(1.3rem * 1.4 * 2); 
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Aseguramos que se vea y ocupe espacio */
    visibility: visible; 
    flex-shrink: 0; 
}

/* --- TÍTULO --- */
.menu-config-grid .card-product-name {
    /* Mantenemos la altura fija de 2 líneas para alinear */
    line-height: 1.2;
    font-size: 1.4rem; 
    font-weight: 700;
    margin-bottom: 5px;
    height: 2.5em; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0; 
}

/* --- DESCRIPCIÓN (Tu estilo aplicado) --- */
.menu-config-grid .card-product-desc {
    font-size: 1.3rem !important;
    color: var(--card-name-color, #555) !important;
    line-height: 1.4;
    
    /* Margen arriba y abajo para separar de título y precio */
    margin: 5px 0 10px 0;
    
    /* Altura fija de 2 líneas calculada */
    height: calc(1.3rem * 1.4 * 2);
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Aseguramos que sea visible */
    visibility: visible;
    flex-shrink: 0;
}

/* --- PRECIO (Ahora va al final) --- */
.wizard-price-tag {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.4rem; 
    line-height: 1;
    min-height: 1em;
}

.detail-modal-header-info {
  background-color: var(--addin-header-bg) !important;
  border-bottom: transparent !important;
}

#menu-config-screen{
    background-color: var(--addin-body-bg) !important;
}

.menu-config-steps-container {
  background-color: transparent !important;
}


/* El fondo desenfocado */
#payment-waiting-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* El color de fondo vendrá del JSON, aquí dejamos un fallback */
    background-color: rgba(0, 0, 0, 0.95); 
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.payment-waiting-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* El color de texto principal vendrá del JSON */
}

/* CAMBIO CLAVE: De "img" a ".payment-icon" 
   Añadimos height para que el div exista y se pueda pintar.
*/
.payment-waiting-content .payment-icon {
    width: 800px;
    height: 800px; /* NECESARIO: Igual que el width para que sea cuadrado */
    margin-bottom: 2rem;
    animation: pulse 2s infinite ease-in-out;
    
    /* Esto asegura que la máscara cubra todo el espacio */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.payment-waiting-content h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0;
    /* Color eliminado aquí para que herede del padre (que controla el JSON) */
}

.payment-waiting-content p {
    font-size: 1.8rem;
    margin: 0;
    max-width: 600px;
    opacity: 0.8; /* En lugar de color fijo, usamos opacidad para que se adapte al color del tema */
}

/* Solo añade esto si quieres la animación, si no, déjalo como te dije arriba */
.menu-item {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.menu-item.animate {
    animation: fadeInUp 0.5s forwards; /* 'forwards' es vital, mantiene el estado final */
}

.items-container {
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item {
    display: flex;
    flex-direction: column; /* Organiza elementos en columna vertical */
    height: 100%; /* Ocupa toda la altura que el grid le da */
    justify-content: space-between; /* Distribuye el espacio */
    overflow: hidden; /* Evita que nada se salga */
}

/* 2. LA IMAGEN (EL CUELLO DE BOTELLA) */
.product-visuals {
    height: 370px; /* <--- IMPORTANTE: Define la altura fija que quieras */
    width: 100%;
    flex-shrink: 0; /* <--- OBLIGATORIO: Prohibido encogerse, pase lo que pase */
    position: relative;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el hueco sin deformar */
}

/* 3. EL ÁREA DE TEXTO (Título, Descripción, Precio) */
.product-info-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa todo el espacio sobrante entre la foto y el botón */
    padding: 12px; /* Un poco de aire */
}

/* 4. EL TÍTULO */
.card-product-name {
    margin-bottom: 8px;
    /* Opcional: Si quieres limitar líneas con CSS puro */
    /* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; */
}

/* 5. EL PRECIO (EL ARREGLO DEL "PEQUEÑO" Y "NO SE MUEVE") */
.card-product-price {
    margin-top: auto; /* <--- TRUCO DE MAGIA: Empuja el precio al fondo del área de info */
    font-size: 1.2rem; /* <--- Aumenta esto si lo ves pequeño (ej. 18px o 1.2rem) */
    font-weight: bold;
    color: #333; /* Asegura que se vea oscuro */
    padding-top: 10px;
}

/* 6. EL BOTÓN */
.btn-add-to-cart {
    margin-top: auto; /* Asegura que si hay hueco extra, el botón baje */
    width: 100%;
}

.compact-grid .product-visuals {
    height: 200px !important; /* <--- Esto anula los 370px de product.js */
}

/* 3. Ajuste de estructura para que el flex funcione bien */
.menu-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-item {
    display: flex;
    flex-direction: column; /* Orden: Arriba a abajo */
    height: 100%;           /* Ocupar toda la altura disponible */
    background: #fff;       /* Fondo blanco */
    overflow: hidden;       /* Que no se salga nada */
}

.product-visuals {
    /* La altura viene del JS (370px), pero esto asegura que se respete */
    flex: 0 0 auto !important; /* <--- CANDADO: "Ni crezcas ni encojas. Quédate quieto." */
    width: 100%;
    position: relative;
    /* Si por lo que sea el JS falla, esto es un respaldo de seguridad: */
    min-height: 200px; 
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Rellena el hueco */
    display: block;     /* Elimina bordes blancos abajo */
}

.product-info-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;     /* <--- Llenar espacio: "Crece todo lo que puedas" */
    /* El padding ya viene del JS, pero esto asegura el comportamiento */
    justify-content: flex-start; 
}

/* Forzar que el precio se pegue al fondo, independiente del JS */
.card-product-price {
    margin-top: auto !important; 
    display: block;
}

/* Asegurar botones visibles y abajo */
.btn-add-to-cart {
    margin-top: 10px;
    width: 100%;
    flex-shrink: 0; /* Que el botón no se aplaste tampoco */
}

.compact-grid .product-visuals {
    height: 370px !important;      /* Home Grande */
    min-height: 370px !important;
}

/* 1. REGLA GENERAL (HOME / SITIO NORMAL) */
/* Usamos !important para machacar cualquier regla antigua de .modern-layout */
.menu-item .product-visuals {
    height: 315px !important;      /* Home Grande */
    min-height: 315px !important;
    flex: 0 315px !important;    /* Candado: no encojas */
}

/* 2. REGLA ESPECÍFICA (SOLO MENÚ / CATEGORÍAS) */
/* Al poner .compact-grid delante, esta regla es "más fuerte" que la anterior */
.items-container.compact-grid .menu-item .product-visuals {
    height: 370px !important;      /* Home Grande */
    min-height: 370px !important;
    flex: 0 0 370px !important;    /* Candado: no crezcas */
}

/* Ajuste opcional para que la letra no quede gigante en la tarjeta pequeña */
.items-container.compact-grid .card-product-name {
    font-size: 1rem;
}

/* ————————————————————————————————————————————————
   AJUSTE DE TEXTOS Y BOTÓN (FINAL)
   ———————————————————————————————————————————————— */

/* 1. DESCRIPCIÓN (1rem Mínimo) */
/* DESCRIPCIÓN (3 LÍNEAS) */
.card-product-description {
    font-size: 1rem !important;
    line-height: 1;              /* Un poco más compacto para que quepan las 3 líneas */
    color: #666;
    
    /* El corte a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* <--- AQUÍ ESTÁ EL CAMBIO */
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    margin-bottom: auto;            /* Esto es vital: si hay poco texto, empuja el precio abajo */
}

/* 2. PRECIO (1.7rem Grande) */
.card-product-price {
    font-size: 1.7rem !important;   /* <--- TU PETICIÓN */
    font-weight: 800;               /* Bien gordito */
    color: #000;
    
    /* TRUCO DE ALINEACIÓN: */
    margin-top: auto !important;    /* Empuja hacia abajo todo lo posible */
    margin-bottom: 10px;            /* Un poco de aire antes del botón */
    line-height: 1;                 /* Para que no ocupe altura extra inútil */
}

/* 3. BOTÓN DE AÑADIR (BLINDADO) */
.btn-add-to-cart {
    width: 100%;
    flex-shrink: 0 !important;      /* <--- CLAVE: Prohibido aplastarse o desaparecer */
    margin-top: 0;                  /* El precio ya le da el espacio */
    position: relative;             /* Asegura que se pinte encima */
    z-index: 2;
}

/* 4. CONTENEDOR DE TEXTO (SOLUCIÓN DE DESBORDAMIENTO) */
.product-info-area {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;               /* Si algo sobra, que se corte, no que rompa la tarjeta */
    padding-bottom: 0 !important;   /* Quitamos padding extra abajo para que quepa el botón */
padding: 8px 12px 0 12px; /* Reducimos el padding de arriba (8px) */
}

/* --- ESTILO BASE (Móviles y Tablets normales) --- */
.menu-item .product-visuals {
    width: 100%;
    /* Por defecto mantenemos el formato rectangular estándar */
    aspect-ratio: 4/3; 
    height: auto;
}

/* --- ESTILO ESCRITORIO (3 Columnas o más) --- */
/* Aplicar cuando la pantalla es mayor a 1024px */
@media (min-width: 1024px) {
    .menu-item .product-visuals {
        /* Aquí forzamos los 250px fijos que pediste */
        aspect-ratio: auto; /* Anulamos el ratio para usar altura fija */
        height: 250px !important; 
    }
    
    .menu-item .product-visuals img {
        height: 100%;
        width: 100%;
        object-fit: cover; /* IMPORTANTE: Para que la foto no se deforme */
    }
}

/* ================================================================= */
/* 🛠️ SOLUCIÓN FINAL POR TRAMOS (A MEDIDA) */
/* ================================================================= */

/* 1. ALÉRGENOS (SIEMPRE 20px) */
body .product-allergens img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    object-fit: contain !important;
    margin: 0 2px !important;
}
body .product-allergens {
    display: flex !important;
    gap: 2px !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    z-index: 20 !important;
}

/* ----------------------------------------------------------------- */
/* TRAMO 1: MÓVIL (Menos de 600px) */
/* Ocultamos descripción y altura automática */
/* ----------------------------------------------------------------- */
@media (max-width: 599px) {
    body .menu-item .product-visuals {
        height: auto !important;
        aspect-ratio: 4/3 !important;
        width: 100% !important;
    }
    body .card-product-description {
        display: none !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 2: TU PANTALLA DE 754px (De 600px a 900px) */
/* Aquí forzamos los 250px que pediste para esta */
/* ----------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 250px !important;   /* ✅ Fijo a 250px */
        min-height: 250px !important;
        flex: 0 0 250px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 3: TU PANTALLA DE 1040px (De 901px a 1300px) */
/* Aquí forzamos los 370px para que se vea GRANDE en el Kiosco */
/* ----------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1300px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 370px !important;   /* ✅ Fijo a 370px (Grande) */
        min-height: 370px !important;
        flex: 0 0 370px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 4: ESCRITORIO ANCHO / 3 COLUMNAS (Más de 1301px) */
/* Volvemos a 250px para que no queden enormes si hay 3 columnas */
/* ----------------------------------------------------------------- */
@media (min-width: 1301px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 250px !important;   /* ✅ Vuelta a 250px */
        min-height: 250px !important;
        flex: 0 0 250px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ================================================================= */
/* 🛡️ SOLUCIÓN MAESTRA FINAL (TRAMOS + DETECCIÓN 3 COLUMNAS) */
/* ================================================================= */

/* 1. ALÉRGENOS (SIEMPRE 20px - INTOCABLE) */
body .product-allergens img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    object-fit: contain !important;
    margin: 0 2px !important;
}
body .product-allergens {
    display: flex !important;
    gap: 2px !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    z-index: 20 !important;
}

/* ----------------------------------------------------------------- */
/* TRAMO 1: MÓVIL (Menos de 600px) */
/* ----------------------------------------------------------------- */
@media (max-width: 599px) {
    body .menu-item .product-visuals {
        height: auto !important;
        aspect-ratio: 4/3 !important;
        width: 100% !important;
    }
    body .card-product-description {
        display: none !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 2: KIOSCO PEQUEÑO (De 600px a 900px) -> FOTO 250px */
/* ----------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 250px !important;
        min-height: 250px !important;
        flex: 0 0 250px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 3: KIOSCO GRANDE (De 901px a 1300px) -> FOTO 370px */
/* ----------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1300px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 370px !important;
        min-height: 370px !important;
        flex: 0 0 370px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (min-width: 901px) and (max-width: 1300px) {
    body .menu-item .product-visuals {
        height: 250px !important;
        min-height: 250px !important;
        flex: 0 0 250px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ----------------------------------------------------------------- */
/* TRAMO 4: PANTALLAS GIGANTES (+1301px) -> FOTO 250px */
/* ----------------------------------------------------------------- */
@media (min-width: 1301px) {
    body .items-container.compact-grid .menu-item .product-visuals,
    body .menu-item .product-visuals {
        height: 250px !important;
        min-height: 250px !important;
        flex: 0 0 250px !important;
        width: 100% !important;
    }
    body .menu-item .product-visuals img {
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* ================================================================= */
/* 🚨 REGLA DE ORO: DETECCIÓN DE 3 COLUMNAS (3fr) */
/* Esto se activa cuando el HTML tiene style="...repeat(3, 1fr)..." */
/* GANA A TODO LO ANTERIOR */
/* ================================================================= */

/* 1. Forzar imagen a 250px si hay 3 columnas */
body .items-container[style*="repeat(3"] .menu-item .product-visuals {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    flex: 0 0 250px !important;
    width: 100% !important;
    aspect-ratio: auto !important;
}

body .items-container[style*="repeat(3"] .menu-item .product-visuals img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* 2. Ocultar descripción SIEMPRE si hay 3 columnas */
body .items-container[style*="repeat(3"] .menu-item.modern-layout .btn-add-to-cart {
    margin-top: 0px !important;
} 

/* 3. Ajustar padding para que quede compacto */
body .items-container[style*="repeat(3"] .product-info-area {
    padding: 10px !important;
}

/* Fuerza la visibilidad del stepper siempre */
.detail-option-card .quantity-stepper {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ESTRUCTURA FLEXBOX PARA PANTALLA COMPLETA */

/* 1. Contenedor Principal */
.wizard-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    
    /* MAGIA FLEXBOX */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evita que el body entero haga scroll */
}

/* 2. Cabecera (NO SE MUEVE) */
.wizard-header-wrapper {
    flex: 0 0 auto; /* Se ajusta al tamaño de su contenido (título + pasos) */
    background: #fff;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra para separar del contenido */
    z-index: 10;
}

.wizard-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* 3. Área de Scroll (LO ÚNICO QUE SE MUEVE) */
.wizard-scroll-area {
    flex: 1; /* Ocupa TODO el espacio que sobre */
    overflow-y: auto; /* Scroll aquí dentro */
    padding: 20px;
    background-color: #f9f9f9;
    
    /* Scroll suave en iOS */
    -webkit-overflow-scrolling: touch; 
}

/* 4. Footer (NO SE MUEVE) */
.wizard-footer {
    flex: 0 0 auto; /* Altura fija según botones */
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    gap: 15px;
    z-index: 10;
}

/* Ajuste para que el grid o la lista no se corten */
#addin-options-content {
    padding-bottom: 40px; /* Espacio extra al final del scroll */
}

/* Animación de error (vibración horizontal) */
@keyframes shake-horizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-error {
  animation: shake-horizontal 0.4s ease-in-out;
  border: 1px solid #ff4d4d !important; /* Borde rojo temporal */
}

/* El mensaje que flota encima del botón */
.validation-tooltip {
    position: absolute;
    bottom: 110%; /* Justo encima del footer */
    right: 20px;  /* Alineado al botón de siguiente */
    background-color: #ff3333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none; /* Para que no moleste al click */
    z-index: 200;
}

.validation-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flechita del tooltip apuntando abajo */
.validation-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #ff3333 transparent transparent transparent;
}

/* EL FONDO OSCURO */
.validation-overlay {
    position: absolute; /* Se posiciona respecto al modal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Negro semitransparente */
    backdrop-filter: blur(3px); /* Difuminado chulo */
    z-index: 10000; /* POR ENCIMA DE TODO */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* CLASE PARA MOSTRARLO */
.validation-overlay.visible {
    display: flex !important; /* Fuerza que se vea */
}

/* LA CAJA BLANCA */
.validation-box {
    background: white;
    width: 85%;
    max-width: 320px;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.validation-icon { font-size: 40px; margin-bottom: 10px; display: block; }
.validation-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; color: #333; }
.validation-text { font-size: 16px; color: #555; margin-bottom: 20px; line-height: 1.4; }

.btn-close-alert {
    background: #000; color: #fff; border: none;
    padding: 12px 0; width: 100%; border-radius: 8px;
    font-weight: bold; cursor: pointer; font-size: 16px;
}

/* Overlay que tapa TODA la pantalla (incluso el wizard) */
.kiosk-full-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo muy oscuro */
    backdrop-filter: blur(4px); /* Desenfoque elegante */
    z-index: 99999; /* POR ENCIMA DE TODO */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInAlert 0.2s forwards;
}

@keyframes fadeInAlert { to { opacity: 1; } }

/* La tarjeta blanca */
.kiosk-alert-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    width: 80%;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    animation: popInAlert 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popInAlert { to { transform: scale(1); } }

.kiosk-alert-icon { font-size: 4rem; display: block; margin-bottom: 20px; }
.kiosk-alert-title { font-size: 1.8rem; font-weight: 800; color: #111; margin-bottom: 10px; }
.kiosk-alert-text { font-size: 1.2rem; color: #555; margin-bottom: 30px; line-height: 1.5; }

/* Botón grande estilo Kiosko */
.kiosk-alert-btn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 18px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    transition: transform 0.1s;
}
.kiosk-alert-btn:active { transform: scale(0.98); }

/* --- ESTILOS TICKET FINAL (CLEAN & ADAPTIVE) --- */

.cart-total-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 15px;
}

/* Fila base: Sin color forzado, hereda de tu app */
.ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 400;
}

/* Contenedor para la línea mixta (Subtotal ... Descuento) */
.ticket-mixed-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* Clase semántica para el rojo */
.text-red {
    color: var(--danger-color, red);
}

/* Total final: Solo negrita */
.ticket-total-row {
    font-weight: 700;
}

.modal-footer{
    background-color: var(--addin-footer) !important;    
    padding: 25px  !important;
    border-top: none !important;
    display: flex !important; 
    justify-content: space-between !important;
    align-items: center !important;
    /* Fijo abajo si prefieres, o fluyendo */
    position: absolute !important; 
    bottom: 0; left: 0; width: 100% !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1) !important;
}

#confirm-format-btn {
    padding: 20px 40px !important;
    font-size: 1.7rem !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    background-color: var(--addin-footer-button) !important;
    color: var(--addin-footer-button-text) !important;
}

.suggestions-grid {
    padding-bottom: 10rem !important;
}

#allergen-filter-btn {
  position: static;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 50px !important;
  width: auto !important;
  height: 60px !important;
  padding: 0 1.5rem 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem;
  cursor: pointer !important;
  white-space: nowrap;
  flex-shrink: 0; /* Evita que se encoja */
}

.btn-filter-allergens span {
  display: inline !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.btn-back-to-splash, 
#allergen-filter-btn {
    background-color: var(--back-splash-btn-bg, #f8f9fa) !important;
    color: var(--back-splash-btn-text, #333333) !important;
    
    /* Borde sutil para que se distinga el botón del fondo si son del mismo color */
    border: 1px solid rgba(0,0,0,0.1) !important; 
}

.btn-back-to-splash span{
    color: var(--back-splash-btn-text, #333333) !important;
}

.btn-back-to-splash i.fas.fa-arrow-left{
      color: var(--back-splash-btn-text, #333333) !important;
}

#allergen-filter-btn i.fas.fa-filter {
      color: var(--back-splash-btn-text, #333333) !important;
}

/* --- FIX: alineación nombre+precio en tarjetas de añadidos (opción única) --- */
.detail-option-card .detail-option-card-info {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 14px;
    overflow: hidden;
}
/* nombre: altura natural, sin crecer */
.detail-option-card .detail-option-card-info .detail-option-card-name {
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
}
/* precio: siempre pegado al fondo del área info, separación mínima del nombre */
.detail-option-card .detail-option-card-info .detail-option-card-price {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}