/**
 * @file nuestro-menu.css
 * @description Archivo de estilos para el componente web personalizado NuestroMenu.
 *              Proporciona efectos claymorphism avanzados con sombras suaves,
 *              animaciones de entrada progresiva, sistema de filtrado por categorías,
 *              diseño responsive adaptativo, navegación táctil optimizada,
 *              estados visuales interactivos, integración con carrito de compras
 *              y soporte completo para temas claro y oscuro.
 * @author Enri Rego
 * @version 1.0.0
 * @date 01 de Junio 2025
 * @since 1.0.0
 * @requires scripts/components/nuestro-menu.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE NUESTRO MENU
   ========================================================================== */

/**
 * Contenedor principal del menú con efecto claymorphism
 * Establece la estructura base con efectos claymorphism avanzados,
 * sombras suaves adaptativas según tema, bordes redondeados responsivos
 * y espaciado optimizado para diferentes dispositivos
 */
.menu-vista {
  /* Posicionamiento y estructura base */
  position: relative;
  overflow: visible;
  width: 100%;

  /* Espaciado responsivo */
  margin: 10px 0 var(--espacio-grande, 2rem);
  padding: 20px 15px;

  /* Efectos visuales claymorphism */
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
  border: var(--arcilla-borde);
}

/**
 * Asegurar jerarquía visual del contenido
 * Mantiene el contenido por encima de efectos de fondo
 */
.menu-vista>* {
  /* Jerarquía visual */
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   ADAPTACIONES POR TEMA - CONTENEDOR PRINCIPAL
   ========================================================================== */

/**
 * Tema claro - sombras sutiles y efectos suaves
 * Optimizado para alta legibilidad en fondos claros
 */
:root[data-tema="claro"] .menu-vista {
  /* Sombras claymorphism suaves */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

:root[data-tema="claro"] .menu-vista:hover {
  /* Elevación interactiva sutil */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/**
 * Tema oscuro - sombras intensas y contraste elevado
 * Optimizado para mejor visibilidad en fondos oscuros
 */
:root[data-tema="oscuro"] .menu-vista {
  /* Fondo y sombras intensificadas */
  background-color: var(--arcilla-fondo);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   TÍTULO PRINCIPAL DEL MENÚ
   ========================================================================== */

/**
 * Título principal con animación de entrada
 * Incluye tipografía responsiva, efectos de sombra adaptativos
 * y transformación inicial para animaciones de scroll
 */
.menu-vista h2 {
  /* Tipografía responsiva */
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 600;

  /* Espaciado y alineación */
  margin-bottom: 1.5rem;
  text-align: center;

  /* Estados de animación inicial */
  transform: translateY(-10px);
  opacity: 0;

  /* Efectos visuales */
  color: var(--naranja);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Transiciones suaves */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/**
 * Adaptación de sombra para tema oscuro
 * Intensifica el contraste visual en fondos oscuros
 */
:root[data-tema="oscuro"] .menu-vista h2 {
  /* Sombra intensificada para tema oscuro */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   SISTEMA DE CATEGORÍAS DE MENÚ
   ========================================================================== */

/**
 * Contenedor para botones de categorías
 * Utiliza flexbox para distribución adaptativa y efectos claymorphism
 * secundarios con fondo diferenciado del contenedor principal
 */
.menu-categorias {
  /* Posicionamiento y estructura */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Espaciado y distribución */
  margin-bottom: 1.5rem;
  padding: 0.8rem;
  gap: 0.8rem;

  /* Estados de animación inicial */
  transform: translateY(-10px);
  opacity: 0;

  /* Efectos visuales claymorphism secundario */
  border-radius: calc(var(--arcilla-radio) - 6px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-elevado-tarjeta);
  border: 1px solid var(--arcilla-borde-color);

  /* Transiciones suaves */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/**
 * Adaptación de tema oscuro para contenedor de categorías
 * Mantiene coherencia visual con el sistema de diseño oscuro
 */
:root[data-tema="oscuro"] .menu-categorias {
  /* Fondo y sombra adaptados */
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-elevado-tarjeta);
}

/* ==========================================================================
   BOTONES DE CATEGORÍA
   ========================================================================== */

/**
 * Botones de categoría con estilo claymorphism
 * Incluyen estados interactivos completos con transiciones suaves
 * y efectos de elevación progresiva
 */
.menu-categoria-boton {
  /* Tipografía y estructura */
  font-size: var(--texto-base);
  font-weight: 600;
  position: relative;

  /* Espaciado interno */
  padding: 8px 16px;

  /* Interactividad */
  cursor: pointer;

  /* Efectos visuales base */
  color: var(--naranja);
  border: 2px solid var(--naranja);
  border-radius: 20px;
  background-color: transparent;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Transiciones suaves para todos los estados */
  transition: all 0.3s ease;
}

/**
 * Estado hover para botones de categoría
 * Efecto de elevación y cambio de fondo sutil
 */
.menu-categoria-boton:hover {
  /* Elevación visual */
  transform: translateY(-2px);

  /* Fondo interactivo sutil */
  background-color: rgba(255, 107, 53, 0.1);

  /* Sombra elevada */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/**
 * Estado activo para botones de categoría
 * Representa la categoría actualmente seleccionada con efecto claymorphism completo
 */
.menu-categoria-boton.activo {
  /* Colores de estado activo */
  color: white;
  background-color: var(--naranja);
  border-color: var(--naranja);

  /* Sombra claymorphism multicapa */
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   ADAPTACIONES POR TEMA - BOTONES DE CATEGORÍA
   ========================================================================== */

/**
 * Tema oscuro - botones normales
 * Mantiene consistencia visual con el tema oscuro
 */
:root[data-tema="oscuro"] .menu-categoria-boton {
  /* Colores base adaptados */
  color: var(--naranja);
  border-color: var(--naranja);
  background-color: transparent;
}

/**
 * Tema oscuro - estado hover
 * Intensifica el fondo interactivo para mejor visibilidad
 */
:root[data-tema="oscuro"] .menu-categoria-boton:hover {
  /* Fondo más intenso para tema oscuro */
  background-color: rgba(255, 107, 53, 0.2);

  /* Sombra adaptada */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/**
 * Tema oscuro - estado activo
 * Preserva el contraste visual en fondos oscuros
 */
:root[data-tema="oscuro"] .menu-categoria-boton.activo {
  /* Colores de alto contraste */
  color: var(--blanco);
  background-color: var(--naranja);
}

/* ==========================================================================
   ELEMENTOS INDIVIDUALES DEL MENÚ
   ========================================================================== */

/**
 * Tarjetas de elementos del menú con efecto claymorphism
 * Cada elemento es una tarjeta expandible con animación de entrada progresiva
 * y efectos de elevación interactivos adaptativos según tema
 */
.menu-elemento {
  /* Estructura y comportamiento */
  display: block;
  overflow: hidden;

  /* Espaciado */
  margin-bottom: 1rem;

  /* Estados de animación inicial */
  transform: translateY(20px);
  opacity: 0;

  /* Efectos visuales claymorphism */
  border-radius: calc(var(--arcilla-radio) - 4px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-sombra-externa);
  border: 2px solid var(--arcilla-borde-color);

  /* Transiciones suaves */
  transition: all 0.5s ease;
}

/**
 * Estado hover para elementos del menú
 * Efecto de elevación visual con sombra adaptativa
 */
.menu-elemento:hover {
  /* Elevación visual */
  transform: translateY(-4px);

  /* Sombra elevada */
  box-shadow: 0 12px 20px -5px var(--arcilla-sombra-color);
}

/* ==========================================================================
   ADAPTACIONES POR TEMA - ELEMENTOS DEL MENÚ
   ========================================================================== */

/**
 * Tema oscuro - elementos del menú
 * Fondo y sombras adaptados para mejor visibilidad
 */
:root[data-tema="oscuro"] .menu-elemento {
  /* Efectos visuales adaptados */
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-sombra-externa);
}

/**
 * Tema oscuro - estado hover
 * Sombra intensificada para tema oscuro
 */
:root[data-tema="oscuro"] .menu-elemento:hover {
  /* Sombra más intensa para fondos oscuros */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   CABECERA DE ELEMENTOS DEL MENÚ
   ========================================================================== */

/**
 * Cabecera de cada elemento del menú
 * Contiene título, precio, etiquetas de popularidad y botón de expansión
 * con área interactiva optimizada y efectos de hover suaves
 */
.elemento-menu-cabecera {
  /* Estructura y posicionamiento */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  /* Espaciado interno */
  padding: 0.8rem 1rem;

  /* Interactividad */
  cursor: pointer;

  /* Bordes redondeados adaptativos */
  border-radius: calc(var(--arcilla-radio) - 4px) calc(var(--arcilla-radio) - 4px) 0 0;

  /* Transiciones suaves */
  transition: background-color 0.3s ease;
}

/**
 * Estado hover para cabecera
 * Fondo interactivo sutil con color temático
 */
.elemento-menu-cabecera:hover {
  /* Fondo interactivo naranja sutil */
  background-color: rgba(255, 107, 53, 0.05);
}

/**
 * Estado activo para cabecera (elemento expandido)
 * Mantiene el fondo interactivo cuando el elemento está abierto
 */
.menu-elemento.activo .elemento-menu-cabecera {
  /* Fondo persistente para estado expandido */
  background-color: rgba(255, 107, 53, 0.05);
}

/**
 * Adaptaciones de tema oscuro para cabecera
 * Intensifica los fondos interactivos para mejor visibilidad
 */
:root[data-tema="oscuro"] .elemento-menu-cabecera:hover {
  /* Fondo más intenso para tema oscuro */
  background-color: rgba(255, 107, 53, 0.1);
}

:root[data-tema="oscuro"] .menu-elemento.activo .elemento-menu-cabecera {
  /* Fondo persistente intensificado */
  background-color: rgba(255, 107, 53, 0.1);
}

/* ==========================================================================
   CONTENEDOR DE TÍTULO Y METADATOS
   ========================================================================== */

/**
 * Contenedor de título y etiquetas de popularidad
 * Estructura vertical para organizar título principal y metadatos
 */
.elemento-titulo-container {
  /* Estructura flexible */
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  /* Espaciado entre elementos */
  gap: 0.3rem;
}

/**
 * Título del elemento de menú
 * Tipografía principal con colores adaptativos según tema
 */
.elemento-titulo-container h3 {
  /* Tipografía */
  font-size: var(--texto-grande);
  font-weight: 600;

  /* Espaciado */
  margin: 0;

  /* Color base */
  color: var(--gris-obscuro);

  /* Transiciones suaves */
  transition: color 0.3s ease;
}

/**
 * Adaptación de color para tema oscuro
 * Mejora el contraste en fondos oscuros
 */
:root[data-tema="oscuro"] .elemento-titulo-container h3 {
  /* Color de alto contraste para tema oscuro */
  color: var(--crema);
}

/* ==========================================================================
   PRECIO DEL ELEMENTO
   ========================================================================== */

/**
 * Precio del elemento de menú
 * Muestra el precio con énfasis visual mediante tipografía y efectos de sombra
 */
.elemento-precio {
  /* Tipografía enfatizada */
  font-size: var(--texto-grande);
  font-weight: 600;

  /* Espaciado y comportamiento */
  margin: 0 1rem;
  white-space: nowrap;

  /* Color temático */
  color: var(--naranja);

  /* Sombra de texto sutil */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/**
 * Adaptación de sombra para tema oscuro
 * Intensifica el contraste visual
 */
:root[data-tema="oscuro"] .elemento-precio {
  /* Sombra más intensa para tema oscuro */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   BOTÓN DE EXPANSIÓN
   ========================================================================== */

/**
 * Botón de expansión circular
 * Control interactivo con efectos claymorphism y animación de escala
 */
.boton-toggle {
  /* Estructura y posicionamiento */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Dimensiones fijas circulares */
  width: 32px;
  min-width: 32px;
  height: 32px;

  /* Interactividad */
  cursor: pointer;

  /* Efectos visuales */
  color: white;
  border: none;
  border-radius: 50%;
  background-color: var(--naranja);

  /* Sombra claymorphism multicapa */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 3px rgba(255, 255, 255, 0.2);

  /* Transiciones suaves */
  transition: all 0.3s ease;
}

/**
 * Estado hover para botón de expansión
 * Efecto de escala y cambio de color de fondo
 */
.boton-toggle:hover {
  /* Escala visual */
  transform: scale(1.1);

  /* Color de fondo más claro */
  background-color: #FF8C35;

  /* Sombra elevada */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/**
 * Icono del botón de expansión
 * Incluye rotación para indicar estado expandido/contraído
 */
.menu-toggle-icono {
  /* Dimensiones del icono */
  width: 16px;
  height: 16px;

  /* Color y efectos */
  fill: currentColor;

  /* Transición de rotación */
  transition: transform 0.3s ease;
}

/**
 * Rotación del icono cuando el elemento está expandido
 * Indica visualmente el cambio de estado
 */
.menu-elemento.activo .menu-toggle-icono {
  /* Rotación de 180 grados */
  transform: rotate(180deg);
}

/* ==========================================================================
   CONTENIDO EXPANDIBLE DEL MENÚ
   ========================================================================== */

/**
 * Contenido expandible del elemento
 * Área que se muestra/oculta al hacer clic en la cabecera con transiciones
 * suaves y estructura de grid para organización óptima del contenido
 */
.elemento-menu-contenido {
  /* Estructura de grid */
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;

  /* Estado inicial contraído */
  max-height: 0;
  padding: 0 1rem;

  /* Efectos visuales */
  background-color: var(--arcilla-fondo-secundario);
  border-top: 1px solid var(--arcilla-borde-color);

  /* Transiciones suaves para expansión */
  transition: max-height 0.5s ease, padding 0.3s ease;
}

/**
 * Estado expandido del contenido
 * Revela todo el contenido interno con espaciado apropiado
 */
.menu-elemento.activo .elemento-menu-contenido {
  /* Altura máxima generosa para contenido variable */
  max-height: 2000px;

  /* Espaciado interno para estado expandido */
  padding: 1rem 1rem 1.5rem;
}

/* ==========================================================================
   IMAGEN DEL PRODUCTO
   ========================================================================== */

/**
 * Contenedor de la imagen del producto
 * Centra y estructura la imagen con efectos de border radius coherentes
 */
.elemento-menu-img-contenedor {
  /* Estructura y posicionamiento */
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;

  /* Espaciado y alineación */
  margin: 0 auto;
  text-align: center;

  /* Bordes redondeados */
  border-radius: calc(var(--arcilla-radio) - 8px);
}

/**
 * Imagen del elemento con efectos interactivos
 * Incluye transiciones suaves y efectos de hover optimizados
 */
.elemento-menu-img {
  /* Dimensiones responsivas */
  width: var(--tamano-imagen-menu);
  height: calc(var(--tamano-imagen-menu) * 1.4);

  /* Comportamiento de imagen */
  object-fit: cover;

  /* Interactividad */
  cursor: pointer;

  /* Efectos visuales */
  border-radius: calc(var(--arcilla-radio) - 8px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  /* Transiciones suaves */
  transition: transform 0.3s ease;
}

/**
 * Estado hover para imagen
 * Efecto de zoom sutil con sombra intensificada
 */
.elemento-menu-img:hover {
  /* Zoom sutil */
  transform: scale(1.05);

  /* Sombra elevada */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   OPTIMIZACIONES PARA DISPOSITIVOS TÁCTILES
   ========================================================================== */

/**
 * Animaciones y optimizaciones para dispositivos móviles y táctiles
 * Mejora la experiencia de usuario en pantallas táctiles con indicadores
 * visuales, áreas táctiles optimizadas y feedback visual mejorado
 */
@media (hover: none) and (pointer: coarse) {
  .elemento-menu-img-contenedor {
    /* Interactividad táctil optimizada */
    cursor: pointer;
    min-height: 44px;
    /* Área táctil mínima recomendada */

    /* Optimización de gestos táctiles */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /**
   * Prevención de zoom accidental en iOS
   * Optimiza el comportamiento táctil en dispositivos Apple
   */
  .elemento-menu-img-contenedor img {
    /* Prevenir zoom accidental */
    touch-action: manipulation;
  }

  /**
   * Indicador visual permanente para dispositivos táctiles
   * Círculo naranja con animación de pulso para guiar al usuario
   */
  .elemento-menu-img-contenedor::after {
    /* Contenido y posicionamiento */
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;

    /* Dimensiones del indicador */
    width: 24px;
    height: 24px;

    /* Efectos visuales */
    border-radius: 50%;
    background-color: rgba(255, 107, 53, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    /* Estados y comportamiento */
    opacity: 0.7;
    pointer-events: none;

    /* Animación y transiciones */
    animation: pulsoMenu 2s infinite ease-in-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /**
   * Icono blanco superpuesto en el círculo indicador
   * Icono de toque para claridad visual adicional
   */
  .elemento-menu-img-contenedor::before {
    /* Contenido y posicionamiento */
    content: "";
    position: absolute;
    top: 15px;
    /* Centrado en el círculo */
    right: 15px;
    /* Centrado en el círculo */
    z-index: 4;
    /* Por encima del círculo naranja */

    /* Dimensiones del icono */
    width: 14px;
    height: 14px;

    /* Imagen y efectos */
    background-image: url("../../images/icons/toque.svg");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    /* Icono blanco */

    /* Estados y comportamiento */
    opacity: 0.7;
    pointer-events: none;

    /* Animación sincronizada */
    animation: pulsoMenu 2s infinite ease-in-out;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /**
   * Feedback visual durante interacción táctil
   * Mejora la respuesta visual al tocar el elemento
   */
  .elemento-menu-img-contenedor:active::after,
  .elemento-menu-img-contenedor:active::before {
    /* Escala de feedback */
    transform: scale(1.2);
    opacity: 1;
  }

  /**
   * Estado durante overlay activo
   * Reduce la visibilidad del indicador cuando el overlay está abierto
   */
  .elemento-menu-img-contenedor.overlay-activo::after,
  .elemento-menu-img-contenedor.overlay-activo::before {
    /* Reducción visual */
    opacity: 0.3;
    transform: scale(0.8);
  }
}

/**
 * Animación de pulso para indicador táctil
 * Proporciona feedback visual constante para usuarios táctiles
 */
@keyframes pulsoMenu {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/**
 * Ajustes de indicador para pantallas pequeñas
 * Optimiza el tamaño del indicador en dispositivos móviles
 */
@media (max-width: 480px) {
  .elemento-menu-img-contenedor::after {
    /* Dimensiones reducidas */
    width: 20px;
    height: 20px;
    top: 8px;
    right: 8px;
  }

  .elemento-menu-img-contenedor::before {
    /* Dimensiones y posicionamiento ajustados */
    width: 12px;
    height: 12px;
    top: 12px;
    /* Centrado en círculo más pequeño */
    right: 12px;
    /* Centrado en círculo más pequeño */
    background-size: 12px 12px;
  }
}

/* ==========================================================================
   DESCRIPCIÓN Y CONTENIDO DE ELEMENTOS
   ========================================================================== */

/**
 * Descripción del elemento
 * Texto informativo sobre el producto con tipografía optimizada
 */
.elemento-menu-descripcion {
  /* Tipografía y espaciado */
  font-size: var(--texto-base);
  line-height: 1.4;
  margin-bottom: 0.8rem;

  /* Alineación y color */
  text-align: center;
  color: var(--texto);
}

:root[data-tema="oscuro"] .elemento-menu-descripcion {
  color: var(--crema);
}

/* ==========================================================================
   SISTEMA COMPLETO DE ETIQUETAS
   ========================================================================== */

/**
 * Contenedor para etiquetas de características
 * Organiza las etiquetas de forma flexible y centrada con espaciado optimizado
 */
.elemento-menu-etiquetas {
  /* Layout flexible */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  /* Espaciado y separación */
  margin-bottom: 0.8rem;
  gap: 0.5rem;
}

/**
 * Etiquetas base para todas las características
 * Estilo visual común con efectos claymorphism y personalización por categoría
 */
.etiqueta {
  /* Tipografía */
  font-size: var(--texto-chico);
  color: var(--crema);

  /* Layout y espaciado */
  display: inline-block;
  padding: 0.2rem 0.6rem;

  /* Efectos visuales claymorphism */
  border-radius: 12px;
  background-color: rgba(60, 60, 60, 0.8);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

:root[data-tema="oscuro"] .etiqueta {
  color: var(--crema);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   VARIANTES DE ETIQUETAS POR CATEGORÍAS PRINCIPALES
   -------------------------------------------------------------------------- */

/**
 * Etiquetas de características gastronómicas básicas
 * Colores distintivos para identificación rápida de propiedades alimentarias
 */

/* Características de picor y temperatura */
.etiqueta.picante {
  background-color: rgba(211, 47, 47, 0.9);
}

.etiqueta.picante-suave {
  background-color: rgba(255, 140, 85, 0.9);
}

.etiqueta.picante-dulce {
  background-color: rgba(255, 138, 101, 0.9);
}

.etiqueta.refrescante {
  background-color: rgba(0, 188, 212, 0.9);
}

/* Características dietéticas y alimentarias */
.etiqueta.vegetariano {
  background-color: rgba(46, 125, 50, 0.9);
}

.etiqueta.vegano {
  background-color: rgba(0, 121, 107, 0.9);
}

.etiqueta.sin-carne {
  background-color: rgba(67, 160, 71, 0.9);
}

.etiqueta.gluten {
  background-color: rgba(255, 160, 0, 0.9);
}

.etiqueta.lactosa {
  background-color: rgba(123, 31, 162, 0.9);
}

.etiqueta.zero-sodio {
  background-color: rgba(0, 150, 136, 0.9);
}

.etiqueta.ligera {
  background-color: rgba(3, 169, 244, 0.9);
}

.etiqueta.natural {
  background-color: rgba(76, 175, 80, 0.9);
}

/* Características de sabor */
.etiqueta.dulce {
  background-color: rgba(233, 30, 99, 0.9);
}

.etiqueta.dulce-salado {
  background-color: rgba(255, 167, 38, 0.9);
}

.etiqueta.citrica {
  background-color: rgba(155, 176, 39, 0.9);
}

.etiqueta.sabor-unico {
  background-color: rgba(142, 36, 170, 0.9);
}

/* Características de textura */
.etiqueta.crujiente {
  background-color: rgb(238, 151, 0);
}

.etiqueta.extra-crujiente {
  background-color: rgba(191, 54, 12, 0.9);
}

.etiqueta.cremosa {
  background-color: rgba(141, 110, 99, 0.9);
}

.etiqueta.cremoso-adentro {
  background-color: rgba(141, 110, 99, 0.9);
}

.etiqueta.derretido {
  background-color: rgba(255, 152, 0, 0.9);
}

.etiqueta.multitextura {
  background-color: rgba(63, 81, 181, 0.9);
}

.etiqueta.textura-unica {
  background-color: rgba(103, 58, 183, 0.9);
}

/* --------------------------------------------------------------------------
   ETIQUETAS DE ESTATUS Y RECOMENDACIONES
   -------------------------------------------------------------------------- */

/**
 * Etiquetas de novedad y recomendación
 * Identifican productos destacados o nuevos en el menú
 */
.etiqueta.nuevo {
  background-color: rgba(25, 118, 210, 0.9);
}

.etiqueta.recomendado {
  background-color: rgba(255, 153, 0, 0.9);
}

.etiqueta.especialidad {
  background-color: rgba(255, 193, 7, 0.9);
}

.etiqueta.premium {
  background-color: rgba(183, 28, 28, 0.9);
}

.etiqueta.gourmet {
  background-color: rgba(69, 39, 160, 0.9);
}

.etiqueta.artesanal {
  background-color: rgba(139, 69, 19, 0.9);
}

/* --------------------------------------------------------------------------
   ETIQUETAS DE ORIGEN Y ESTILO GASTRONÓMICO
   -------------------------------------------------------------------------- */

/**
 * Etiquetas de cocina internacional y estilo
 * Identifican el origen geográfico o estilo culinario
 */
.etiqueta.coreana {
  background-color: rgba(63, 81, 181, 0.9);
}

.etiqueta.japonesa {
  background-color: rgba(233, 30, 99, 0.9);
}

.etiqueta.tradicional {
  background-color: rgba(121, 85, 72, 0.9);
}

.etiqueta.casero {
  background-color: rgba(121, 85, 72, 0.9);
}

.etiqueta.fusion-sabores {
  background-color: rgba(156, 39, 176, 0.9);
}

.etiqueta.exotica {
  background-color: rgba(156, 39, 176, 0.9);
}

/* --------------------------------------------------------------------------
   ETIQUETAS DE CATEGORÍAS ESPECÍFICAS
   -------------------------------------------------------------------------- */

/**
 * Etiquetas especializadas por tipo de producto
 * Clasificación específica para bebidas, postres y snacks
 */

/* Etiquetas para postres */
.etiqueta.postre {
  background-color: rgba(255, 71, 209, 0.9);
}

.etiqueta.indulgente {
  background-color: rgba(233, 30, 99, 0.9);
}

/* Etiquetas para bebidas */
.etiqueta.bebida-frutal {
  background-color: rgba(255, 87, 34, 0.9);
}

.etiqueta.hidratante {
  background-color: rgba(33, 150, 243, 0.9);
}

.etiqueta.energizante {
  background-color: rgba(255, 152, 0, 0.9);
}

.etiqueta.gaseosa {
  background-color: rgba(96, 125, 139, 0.9);
}

.etiqueta.burbujeante {
  background-color: rgba(0, 172, 193, 0.9);
}

.etiqueta.tropical {
  background-color: rgba(72, 187, 120, 0.9);
}

/* Etiquetas para snacks */
.etiqueta.dorado {
  background-color: rgba(255, 193, 7, 0.9);
}

.etiqueta.sazonado {
  background-color: rgba(139, 195, 74, 0.9);
}

.etiqueta.masa-especial {
  background-color: rgba(255, 87, 34, 0.9);
}

.etiqueta.papa-premium {
  background-color: rgba(158, 158, 158, 0.9);
}

/* --------------------------------------------------------------------------
   ETIQUETAS DE EXPERIENCIA Y PROPÓSITO
   -------------------------------------------------------------------------- */

/**
 * Etiquetas de experiencia social y propósito
 * Destacan el contexto de consumo o experiencia esperada
 */
.etiqueta.compartir {
  background-color: rgba(63, 81, 181, 0.9);
}

.etiqueta.satisfaciente {
  background-color: rgba(76, 175, 80, 0.9);
}

.etiqueta.irresistible {
  background-color: rgba(244, 67, 54, 0.9);
}

.etiqueta.experiencia-completa {
  background-color: rgba(0, 188, 212, 0.9);
}

.etiqueta.clasico-mejorado {
  background-color: rgba(96, 125, 139, 0.9);
}

/* ==========================================================================
   SISTEMA DE ETIQUETAS DE POPULARIDAD
   ========================================================================== */

/**
 * Etiquetas de popularidad
 * Muestran información sobre la demanda o exclusividad del producto
 * con efectos visuales mejorados y backdrop filter
 */
.etiqueta-popularidad {
  /* Tipografía */
  font-size: var(--texto-chico);
  font-weight: 600;
  color: white;

  /* Layout y alineación */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Espaciado */
  padding: 0.2rem 0.6rem;
  margin-right: 0.8rem;

  /* Efectos visuales */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* --------------------------------------------------------------------------
   VARIANTES DE ETIQUETAS DE POPULARIDAD
   -------------------------------------------------------------------------- */

/**
 * Categorías de popularidad con colores distintivos
 * Cada tipo representa un nivel diferente de demanda o estatus
 */

/* Popularidad general */
.etiqueta-popularidad.popular {
  background-color: rgba(123, 31, 162, 0.9);
}

.etiqueta-popularidad.masvendido {
  background-color: rgba(230, 81, 0, 0.9);
}

.etiqueta-popularidad.favorito {
  background-color: rgba(211, 47, 47, 0.9);
}

.etiqueta-popularidad.recomendado {
  /* Color naranja-amarillo llamativo */
  background-color: rgba(255, 153, 0, 0.9);
}

/* Novedad y temporalidad */
.etiqueta-popularidad.nuevo {
  background-color: rgba(25, 118, 210, 0.9);
}

.etiqueta-popularidad.temporada {
  background-color: rgba(46, 125, 50, 0.9);
}

.etiqueta-popularidad.aniversario {
  background-color: rgba(255, 193, 7, 0.9);
}

/* Exclusividad y disponibilidad */
.etiqueta-popularidad.limitado {
  background-color: rgba(255, 64, 129, 0.9);
}

.etiqueta-popularidad.sujeto-disponibilidad {
  background-color: rgb(255, 69, 175);
}

/* ==========================================================================
   SECCIÓN DE INGREDIENTES Y INFORMACIÓN ADICIONAL
   ========================================================================== */

/**
 * Sección de ingredientes
 * Muestra los ingredientes del producto con separador visual y tipografía optimizada
 */
.elemento-menu-ingredientes {
  /* Espaciado y separación visual */
  margin-top: 0.5rem;
  padding-top: 0.5rem;

  /* Alineación */
  text-align: center;

  /* Separador visual dashed */
  border-top: 1px dashed rgba(112, 112, 112, 0.3);
}

.elemento-menu-ingredientes h4 {
  /* Tipografía del título */
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--naranja);

  /* Espaciado */
  margin-bottom: 0.3rem;
}

.elemento-menu-ingredientes p {
  /* Tipografía del contenido */
  font-size: var(--texto-chico);
  line-height: 1.4;
  color: var(--texto);
}

:root[data-tema="oscuro"] .elemento-menu-ingredientes p {
  color: var(--crema);
}

/* ==========================================================================
   SECCIÓN DE ACCIONES Y BOTONES
   ========================================================================== */

/**
 * Sección de acciones
 * Contiene botones para interactuar con el producto centrados
 */
.elemento-menu-acciones {
  /* Layout centrado */
  display: flex;
  justify-content: center;

  /* Espaciado */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/**
 * Botón para ordenar/agregar al carrito
 * Incluye efectos claymorphism de elevación y hover con transiciones suaves
 */
.boton-ordenar {
  /* Tipografía */
  font-weight: 600;
  color: white;
  text-decoration: none;

  /* Posicionamiento y layout */
  position: relative;
  z-index: 1;
  display: inline-block;
  overflow: hidden;

  /* Espaciado */
  padding: 0.5rem 1.5rem;
  margin-bottom: 0.5rem;

  /* Efectos visuales claymorphism */
  border-radius: 20px;
  background-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);

  /* Transiciones suaves */
  transition: all 0.3s ease;
}

.boton-ordenar:hover {
  /* Efecto de elevación al hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
}

/* ==========================================================================
   ANIMACIONES DE SCROLL Y ENTRADA PROGRESIVA
   ========================================================================== */

/**
 * Animaciones para elementos al hacer scroll
 * Sistema de entrada gradual con delays escalonados y transiciones optimizadas
 */

/**
 * Animación del título principal
 * Entrada suave con transform y opacity
 */
.menu-vista h2.animar {
  transform: translateY(0);
  opacity: 1;
}

/**
 * Animación del contenedor de categorías
 * Sincronizada con el título para fluidez visual
 */
.menu-categorias.animar {
  transform: translateY(0);
  opacity: 1;
}

/**
 * Animación de elementos individuales del menú
 * Delay escalonado basado en variable CSS para efecto cascada
 */
.menu-elemento.animar {
  /* Delay escalonado usando variable CSS */
  transition-delay: calc(0.1s * var(--animacion-orden, 0));

  /* Estado final de la animación */
  transform: translateY(0);
  opacity: 1;
}

/**
 * Animación inmediata para elementos ya visibles
 * Para elementos que ya están en viewport al cargar la página
 */
.menu-elemento.animar-inmediata {
  /* Transiciones más rápidas para elementos inmediatos */
  transition: opacity 0.3s ease, transform 0.3s ease;

  /* Estado final sin delay */
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================================
   MEDIA QUERIES RESPONSIVAS
   ========================================================================== */

/**
 * Adaptaciones para dispositivos móviles
 * Optimizaciones para pantallas de hasta 480px de ancho
 */
@media (max-width: 480px) {
  /* --------------------------------------------------------------------------
     AJUSTES DEL CONTENEDOR PRINCIPAL
     -------------------------------------------------------------------------- */

  /**
   * Contenedor principal del menú
   * Reducción de padding y radio de bordes para pantallas pequeñas
   */
  .menu-vista {
    padding: 15px 10px;
    border-radius: calc(var(--arcilla-radio) * 0.7);
  }

  /**
   * Contenedor de categorías
   * Espaciado optimizado y radio reducido
   */
  .menu-categorias {
    padding: 0.3rem;
    gap: 0.5rem;
    border-radius: calc(var(--arcilla-radio) * 0.5);
  }

  /* --------------------------------------------------------------------------
     AJUSTES DE ELEMENTOS INDIVIDUALES
     -------------------------------------------------------------------------- */

  /**
   * Elementos del menú
   * Radio de bordes reducido para coherencia visual
   */
  .menu-elemento {
    border-radius: calc(var(--arcilla-radio) * 0.5);
  }

  /**
   * Cabecera de elementos
   * Radio reducido manteniendo coherencia con el contenedor
   */
  .elemento-menu-cabecera {
    border-radius: calc(var(--arcilla-radio) * 0.5) calc(var(--arcilla-radio) * 0.5) 0 0;
  }

  /* --------------------------------------------------------------------------
     AJUSTES TIPOGRÁFICOS
     -------------------------------------------------------------------------- */

  /**
   * Botones de categoría
   * Reducción de tamaño de fuente y padding
   */
  .menu-categoria-boton {
    font-size: var(--texto-chico);
    padding: 6px 12px;
  }

  /**
   * Título de elementos
   * Reducción de tamaño para mejor legibilidad en móviles
   */
  .elemento-titulo-container h3 {
    font-size: var(--texto-base);
  }

  /**
   * Precio de elementos
   * Tamaño base para mantener legibilidad
   */
  .elemento-precio {
    font-size: var(--texto-base);
  }

  /**
   * Descripción de elementos
   * Reducción de tamaño para optimizar espacio
   */
  .elemento-menu-descripcion {
    font-size: var(--texto-chico);
  }

  /* --------------------------------------------------------------------------
     AJUSTES DE IMÁGENES
     -------------------------------------------------------------------------- */

  /**
   * Imágenes de elementos
   * Tamaño reducido y radio de bordes ajustado
   */
  .elemento-menu-img {
    width: 80px;
    height: 115px;
    border-radius: calc(var(--arcilla-radio) * 0.5 - 4px);
  }

  /* --------------------------------------------------------------------------
     AJUSTES DE ETIQUETAS Y VARIANTES
     -------------------------------------------------------------------------- */

  /**
   * Etiquetas de popularidad
   * Reducción de margen lateral
   */
  .etiqueta-popularidad {
    margin-right: 0.5rem;
  }

  /**
   * Variantes individuales
   * Ajuste de padding y dimensiones mínimas
   */
  .elemento-variante {
    padding: 4px 8px;
    min-width: 90px;
  }

  .variante-nombre {
    font-size: calc(var(--texto-chico) - 1px);
  }

  .variante-precio {
    font-size: var(--texto-chico);
  }

  /**
   * Contenedor de opciones de variantes
   * Reducción de espaciado entre elementos
   */
  .elemento-variantes-opciones {
    gap: 8px;
  }

  .elemento-variantes-opciones .elemento-variante {
    padding: 6px 10px;
    min-width: 100px;
    font-size: calc(var(--texto-chico) - 1px);
  }

  /* --------------------------------------------------------------------------
     AJUSTES DE CONTENIDO EXPANDIBLE
     -------------------------------------------------------------------------- */

  /**
   * Contenido expandible activo
   * Aumento de altura máxima y transiciones optimizadas para móviles
   */
  .menu-elemento.activo .elemento-menu-contenido {
    max-height: 3000px;
    transition: max-height 0.7s ease, padding 0.3s ease;
    padding: 1rem 1rem 2rem;
  }
}

/* ==========================================================================
   SISTEMA COMPLETO DE VARIANTES DE PRODUCTOS
   ========================================================================== */

/**
 * Contenedor de variantes dentro del contenido expandible
 * Organiza visualmente las opciones disponibles con separador y título
 */
.elemento-variantes-container-interno {
  /* Layout completo */
  width: 100%;
  text-align: center;

  /* Espaciado */
  margin: 1rem 0;
  padding-top: 0.5rem;

  /* Separador visual superior */
  border-top: 1px dashed rgba(112, 112, 112, 0.3);
}

.elemento-variantes-container-interno h4 {
  /* Tipografía del título */
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--naranja);

  /* Espaciado */
  margin-bottom: 0.8rem;
}

:root[data-tema="oscuro"] .elemento-variantes-container-interno h4 {
  color: var(--naranja);
}

/**
 * Contenedor flexible para las opciones de variantes
 * Distribuye las variantes horizontalmente con wrap y espaciado optimizado
 */
.elemento-variantes-opciones {
  /* Layout flexible centrado */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  /* Espaciado entre elementos */
  gap: 12px;
}

/* --------------------------------------------------------------------------
   ELEMENTOS INDIVIDUALES DE VARIANTE
   -------------------------------------------------------------------------- */

/**
 * Contenedor de variantes lateral (fuera del contenido expandible)
 * Para variantes mostradas junto al precio principal
 */
.elemento-variantes-container {
  /* Layout vertical */
  display: flex;
  flex-direction: column;
  gap: 5px;

  /* Espaciado lateral */
  margin-right: 1rem;
}

/**
 * Elemento individual de variante
 * Representa una opción seleccionable del producto con efectos claymorphism
 */
.elemento-variante {
  /* Layout y alineación */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Espaciado y dimensiones */
  padding: 6px 10px;
  min-width: 100px;

  /* Efectos visuales base */
  border-radius: 12px;
  background-color: #F0E4DC;
  border: 1px solid var(--arcilla-borde-color);

  /* Interactividad */
  cursor: pointer;
  transition: all 0.3s ease;
}

.elemento-variante:hover {
  /* Efecto hover con elevación */
  background-color: rgba(255, 107, 53, 0.1);
  transform: translateY(-2px);
}

.elemento-variante.seleccionada {
  /* Estado seleccionado */
  background-color: rgba(255, 107, 53, 0.1);
  border-color: var(--naranja);
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.15);
}

/**
 * Elementos de texto dentro de cada variante
 * Nombre y precio con tipografía optimizada
 */
.variante-nombre {
  /* Tipografía del nombre */
  font-size: var(--texto-chico);
  font-weight: 600;
  color: var(--gris-obscuro);
  text-align: center;

  /* Espaciado */
  margin-bottom: 2px;
}

.variante-precio {
  /* Tipografía del precio */
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--naranja);
}

/* --------------------------------------------------------------------------
   VARIANTES EN LAYOUT HORIZONTAL
   -------------------------------------------------------------------------- */

/**
 * Estilos específicos para variantes en layout horizontal
 * Modificación del diseño base para mejor visualización en contenido expandible
 */
.elemento-variantes-opciones .elemento-variante {
  /* Layout horizontal */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  /* Espaciado y dimensiones ajustadas */
  padding: 8px 12px;
  gap: 8px;
  min-width: 120px;
  max-width: 200px;
}

.elemento-variantes-opciones .variante-nombre {
  /* Sin margen inferior en layout horizontal */
  margin-bottom: 0;
  font-size: var(--texto-chico);
}

.elemento-variantes-opciones .variante-precio {
  font-weight: 600;
  color: var(--naranja);
}

/* --------------------------------------------------------------------------
   CENTRADO DE VARIANTE-PRECIO PARA PRODUCTOS SIN VARIANTE-NOMBRE
   -------------------------------------------------------------------------- */

/**
 * Centrado automático del precio cuando no hay nombre de variante
 * Para productos que solo muestran precio sin nombre específico de variante
 */
.elemento-variante:not(:has(.variante-nombre)) {
  /* Centrar contenido cuando solo hay precio */
  justify-content: center;
}

.elemento-variante:not(:has(.variante-nombre)) .variante-precio {
  /* Asegurar centrado perfecto del precio */
  text-align: center;
  margin: auto;
}

/* Soporte para navegadores que no soportan :has() */
.elemento-variante.solo-precio {
  /* Clase alternativa para JavaScript */
  justify-content: center;
}

.elemento-variante.solo-precio .variante-precio {
  text-align: center;
  margin: auto;
}

/* --------------------------------------------------------------------------
   ADAPTACIONES POR TEMA
   -------------------------------------------------------------------------- */

/**
 * Ajustes de tema oscuro para variantes
 * Colores y efectos adaptados para modo oscuro
 */
:root[data-tema="oscuro"] .elemento-variante {
  background-color: var(--arcilla-fondo-secundario);
}

:root[data-tema="oscuro"] .elemento-variante:hover {
  background-color: rgba(255, 107, 53, 0.1);
}

:root[data-tema="oscuro"] .elemento-variante.seleccionada {
  background-color: rgba(255, 107, 53, 0.2);
}

:root[data-tema="oscuro"] .variante-nombre {
  color: var(--crema);
}

/**
 * ============================================
 * BANNER DE PROMOCIÓN EN MENU-ITEM
 * Estilos para mostrar promociones especiales directamente en los elementos del menú
 * ============================================
 */

/* Banner de promoción que aparece en los menu-items */
.elemento-promocion-banner {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8A65 100%);
  color: white;
  margin: var(--espaciado-sm) var(--espaciado-md);
  border-radius: var(--borde-radio-estandar);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sombra-elevacion-media);
  animation: promocionEntrada 0.6s ease-out;
}

.elemento-promocion-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.8) 100%);
  animation: brilloPromocion 2s ease-in-out infinite;
}

.promocion-contenido-menu {
  display: flex;
  align-items: center;
  padding: var(--espaciado-sm) var(--espaciado-md);
  gap: var(--espaciado-sm);
}

.promocion-icono-menu {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.promocion-texto-menu {
  flex: 1;
  min-width: 0;
}

.promocion-texto-menu strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}

.promocion-texto-menu small {
  display: block;
  font-size: 0.8rem;
  opacity: 0.9;
  font-weight: 500;
}

.promocion-etiqueta {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Animaciones para el banner de promoción */
@keyframes promocionEntrada {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brilloPromocion {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Adaptaciones para móvil del banner de promoción */
@media (max-width: 768px) {
  .elemento-promocion-banner {
    margin: var(--espaciado-xs) var(--espaciado-sm);
  }

  .promocion-contenido-menu {
    padding: var(--espaciado-xs) var(--espaciado-sm);
    gap: var(--espaciado-xs);
  }

  .promocion-icono-menu {
    font-size: 1rem;
  }

  .promocion-texto-menu strong {
    font-size: 0.9rem;
  }

  .promocion-texto-menu small {
    font-size: 0.75rem;
  }

  .promocion-etiqueta {
    font-size: 0.65rem;
    padding: 1px 6px;
  }
}

/* Tema oscuro para banner de promoción */
:root[data-tema="oscuro"] .elemento-promocion-banner {
  background: linear-gradient(135deg, #E55A28 0%, #FF8A65 100%);
  box-shadow: var(--sombra-elevacion-media), 0 0 20px rgba(229, 90, 40, 0.3);
}

:root[data-tema="oscuro"] .promocion-etiqueta {
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA PROMOCIÓN DE BANDERILLAS MARTES
   ========================================================================== */

/**
 * Banner especializado para la promoción de banderillas de martes
 * Incluye estilos diferenciados y mensaje de restricción adicional
 */
.elemento-promocion-banner.banderillas-martes {
  /* Gradiente específico para banderillas */
  background: linear-gradient(135deg, #FF6B35 0%, #FFA726 50%, #FF8A65 100%);

  /* Sombra especial con tono dorado */
  box-shadow: var(--sombra-elevacion-media), 0 0 15px rgba(255, 171, 38, 0.4);
}

/**
 * Mensaje de restricción para la promoción de banderillas
 * Información adicional sobre las condiciones de la promoción
 */
.promocion-restriccion {
  /* Espaciado y posicionamiento */
  padding: var(--espaciado-xxs) var(--espaciado-md);

  /* Fondo sutil diferenciado */
  background: rgba(0, 0, 0, 0.1);

  /* Borde superior sutil */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.promocion-restriccion small {
  /* Tipografía del mensaje de restricción */
  font-size: 0.7rem;
  opacity: 0.85;
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;

  /* Color específico para claridad */
  color: rgba(255, 255, 255, 0.9);
}

/* Efectos específicos para el banner de banderillas */
.elemento-promocion-banner.banderillas-martes::before {
  /* Brillo dorado para diferenciarlo del banner de sodas */
  background: linear-gradient(90deg,
      rgba(255, 193, 7, 0.8) 0%,
      rgba(255, 171, 38, 0.4) 50%,
      rgba(255, 193, 7, 0.8) 100%);
}

/* Adaptaciones móviles para promoción de banderillas */
@media (max-width: 768px) {
  .promocion-restriccion {
    padding: var(--espaciado-xxs) var(--espaciado-sm);
  }

  .promocion-restriccion small {
    font-size: 0.65rem;
  }
}

/* Tema oscuro para promoción de banderillas */
:root[data-tema="oscuro"] .elemento-promocion-banner.banderillas-martes {
  /* Gradiente ajustado para tema oscuro */
  background: linear-gradient(135deg, #E55A28 0%, #FF9800 50%, #FF8A65 100%);

  /* Sombra intensificada para tema oscuro */
  box-shadow: var(--sombra-elevacion-media), 0 0 20px rgba(229, 90, 40, 0.5);
}

:root[data-tema="oscuro"] .promocion-restriccion {
  /* Fondo más visible en tema oscuro */
  background: rgba(0, 0, 0, 0.2);

  /* Borde más contrastante */
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}