@keyframes shine-effect {
   0% {
      left: -100%;
      opacity: 0
   }

   10% {
      opacity: 1
   }

   30% {
      left: 100%;
      opacity: 0
   }

   100% {
      left: 100%;
      opacity: 0
   }
}

.ht-selling-menu__lang-btn,
.ht-gloss-back-btn {
   position: relative !important;
   display: flex !important;
   gap: 6px !important;
   align-items: center !important;
   justify-content: center !important;
   height: 44px !important;
   padding: 0 10px !important;
   margin: 10px;
   overflow: hidden !important;
   color: var(--color-text-inverse) !important;
   text-decoration: none !important;
   cursor: pointer;
   background: rgba(255, 255, 255, 0.15) !important;
   border: 1px solid rgba(255, 255, 255, 0.3) !important;
   border-radius: var(--radius-pill);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   transition: var(--transition-fast)
}
.ht-gloss-back-btn {
    width: 44px !important;
}
.ht-selling-menu__lang-btn:hover,
.ht-gloss-back-btn:hover,
.ht-gloss-back-btn:active {
   background-color: rgba(0, 0, 0, 0.5) !important;
   transform: scale(1.05)
}

.ht-gloss-back-btn i {
   font-size: 24px
}

#selling_item_buttons .btn-rounded {
   display: flex !important;
   align-items: center;
   justify-content: center;
   height: 52px !important;
   margin-bottom: 12px !important;
   font-weight: var(--font-weight-bold) !important;
   color: var(--color-primary) !important;
   text-transform: uppercase;
   background: rgba(255, 255, 255, 0.85) !important;
   border: 1px solid rgba(255, 255, 255, 0.4) !important;
   -webkit-backdrop-filter: blur(15px) !important;
   backdrop-filter: blur(15px) !important
}

.btn-poll {
   position: relative !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 52px !important;
   padding: 0 !important;
   overflow: hidden !important;
   color: white !important;
   background: rgba(255, 255, 255, 0.15) !important;
   border: 1px solid rgba(255, 255, 255, 0.3) !important;
   border-radius: var(--radius-pill);
   backdrop-filter: blur(10px)
}

.btn-poll::after {
   position: absolute;
   top: 0;
   left: -100%;
   z-index: 1;
   width: 60px;
   height: 100%;
   content: "";
   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
   transform: skewX(-25deg);
   animation: shine-effect 4s infinite cubic-bezier(0.4, 0, 0.2, 1)
}

.btn-poll span {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   line-height: 1 !important
}

.btn-poll .material-icons-outlined {
   padding-right: 0 !important;
   margin-right: 8px !important;
   font-size: 22px !important;
   line-height: 1 !important
}

.splash-image {
   max-height: 25vh !important;
   margin-bottom: 20px;
   object-fit: contain
}

.restaurant_title {
   font-family: var(--font-family-heading);
   font-weight: 300 !important;
   letter-spacing: 2px
}

.card.filterMenu {
   margin-bottom: 1.5rem !important;
   overflow: hidden;
   border: none;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   transition: var(--transition-base)
}

.card.filterMenu:hover {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   transform: translateY(-2px)
}

.card[id^="MC"] {
   scroll-margin-top: 70px
}

.header-menucat {
   position: relative;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 100%;
   height: 160px !important;
   margin-bottom: 5px !important;
   overflow: hidden;
   background-position: center center !important;
   background-size: cover !important;
   border: none !important;
   border-radius: var(--radius-lg) !important
}

.header-menucat::before {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   content: '';
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7))
}

.header-menucat .text-shadow {
   position: relative;
   z-index: 2;
   width: 100%;
   padding: 0 20px
}

.header-menucat h5 {
   margin: 0;
   font-family: var(--font-family-heading) !important;
   font-size: 1.6rem !important;
   font-weight: 300 !important;
   color: var(--color-text-inverse) !important;
   text-transform: uppercase;
   letter-spacing: 4px !important;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important
}

.header-menucat .small.text-light {
   margin-top: 5px;
   font-size: 0.9rem !important;
   font-weight: var(--font-weight-medium);
   letter-spacing: 1px;
   opacity: 0.9 !important
}

.list-group-flush .list-group-item.menu {
   padding: 1.25rem 0.5rem !important;
   margin-bottom: 0;
   cursor: pointer;
   border: none;
   border-bottom: 1px solid var(--color-bg-subtle) !important;
   transition: background-color 0.2s ease
}

.list-group-flush .list-group-item.menu:hover {
   background-color: var(--color-bg-body)
}

.list-group-item.menu> :last-child {
   margin-bottom: 0 !important
}

.ht-menu-product__name {
   padding:0px;
   margin-bottom: 6px !important;
   font-family: var(--font-family-heading) !important;
   font-size: 1.1rem !important;
   font-weight: var(--font-weight-bold) !important;
   line-height: 1.2 !important;
   color: var(--color-text-heading) !important;
   letter-spacing: -0.2px !important;
}

.ht-menu-product__price {
   font-family: var(--font-family-heading) !important;
   font-size: 0.9rem !important;
   font-weight: var(--font-weight-semibold) !important;
   color: var(--color-text-heading) !important
}

.ht-menu-product__description {
   margin-bottom: 8px !important;
   font-family: var(--font-family-heading) !important;
   font-size: 0.9rem !important;
   line-height: 1.45 !important;
   color: var(--color-text-subtle) !important
}

.ht-menu-product__allergens {
   display: flex;
   flex-wrap: wrap !important;
   gap: 8px !important;
   align-items: center !important;
   margin-top: 10px !important
}

.ht-menu-product__allergen,
.ht-menu-product__photo-icon {
   display: inline-block !important;
   padding: 0 !important;
   margin-right: 0rem;
   cursor: pointer !important;
   background: none !important;
   border: none !important;
   transition: transform 0.2s ease, opacity 0.2s ease !important
}

.ht-menu-product__allergen:hover,
.ht-menu-product__photo-icon:hover {
   opacity: 0.8 !important;
   transform: scale(1.15) !important
}

.ht-menu-product__allergen:active,
.ht-menu-product__photo-icon:active {
   transform: scale(0.95) !important
}

.ht-menu-product__allergen-icon,
.ht-menu-product__icon-image {
   width: 32px !important;
   height: 32px !important;
   padding: 0.35rem !important;
   object-fit: contain !important;
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
   border: 1px solid rgba(0, 0, 0, 0.08) !important;
   border-radius: 50% !important;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
   transition: var(--transition-fast) !important
}

.ht-menu-product__allergen:hover .ht-menu-product__allergen-icon,
.ht-menu-product__photo-icon:hover .ht-menu-product__icon-image {
   border-color: rgba(0, 0, 0, 0.12) !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important
}

.ht-menu-product__allergen:focus,
.ht-menu-product__photo-icon:focus {
   outline: 2px solid var(--template-color, #007bff) !important;
   outline-offset: 2px;
   border-radius: 50%
}

button.ht-menu-product__allergen,
button.ht-menu-product__photo-icon {
   outline: none !important
}

.text-template .material-icons {
   vertical-align: middle
}

.menu-category.active {
   color: var(--color-text-inverse) !important;
   background: var(--template-color, var(--color-bg-dark));
   border-color: transparent;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   transform: translateY(-1px)
}

.ht-menu-product__variant {
   display: flex !important;
   flex: 0 0 100% !important;
   flex-wrap: wrap !important;
   align-items: center;
   justify-content: space-between;
   width: 100% !important;
   max-width: 100% !important;
   padding: 0 0 0 0.3rem;
   margin: 0;
   background: transparent !important;
   border: none !important;
   border-radius: 0;
   transition: var(--transition-fast)
}

.ht-menu-product__variant:last-child {
   border-bottom: none !important
}

.ht-menu-product__variant:hover {
   background: transparent !important;
   box-shadow: none;
   transform: none
}

.ht-menu-product__option-name {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
   padding-right: 0.5rem;
   font-size: 0.9rem;
   font-weight: var(--font-weight-medium);
   line-height: 1.3;
   color: var(--color-text-body)
}

.ht-menu-product__option-name::before {
   display: inline-block;
   flex-shrink: 0;
   width: 6px;
   height: 6px;
   margin-right: 0.75rem;
   content: '';
   background-color: var(--color-text-muted);
   border-radius: 50%;
   transition: var(--transition-fast)
}

.ht-menu-product__variant:hover .ht-menu-product__option-name::before {
   background-color: var(--template-color, var(--color-bg-dark));
   transform: scale(1.2)
}

.ht-menu-product__option-price {
   flex: 0 0 auto;
   font-size: 0.95rem;
   font-weight: var(--font-weight-bold);
   color: var(--color-bg-dark);
   text-align: right;
   letter-spacing: -0.3px
}

.ht-menu-product__variant-info {
   flex-basis: 100%;
   width: 100%;
   padding-left: 0;
   margin-top: 0;
   font-size: 0.85rem;
   color: var(--color-text-subtle);
   text-align: left
}

.ht-menu-product__variant .ht-menu-product__regime-item {
   font-size: 0.85rem;
   font-weight: var(--font-weight-normal);
   color: var(--color-text-subtle)
}

.ht-menu-product__allergens:last-child {
   padding-bottom: 0 !important
}

.product-name-menu {
   line-height: 1.15
}

.selling-menu-img {
   max-width: 63px;
   height: 61px;
   padding: 0px 1px;
   margin-top: 5px;
   margin-right: 5px;
   object-fit: cover;
   border-radius: 50%
}

.selling_prod_title {
   display: block;
   padding: 0px;
   font-size: 1em;
   font-weight: var(--font-weight-medium);
   line-height: 1.3 !important
}

.selling_prod_description {
   margin-bottom: 0px;
   font-size: 0.8em;
   line-height: 1.2;
   color: var(--color-text-body);
   opacity: 0.9
}

.selling_prod_header_descripcion {
   width: 97%;
   margin-bottom: 7px;
   font-size: 0.8em;
   line-height: 1.2;
   opacity: 0.9
}

.selling_prod_header_title {
   position: relative
}

.selling_subtitulo {
   background-color: var(--color-bg-subtle) !important;
   border-bottom: 1px solid #00000061
}

.ht-menu-product__name--subtitle {
   font-size: 1.1em;
   font-weight: var(--font-weight-normal)
}

.product-options {
   margin-top: 5px;
   line-height: 26px;
   background: #0000000a;
   border-radius: var(--radius-xs)
}

div#dropdown-allergens-menu {
   top: 54px !important
}

.filter-allergens.selected {
   background-color: var(--color-bg-subtle);
   border-bottom: 2px solid #03b80f
}

.menu-category {
   display: inline-table;
   min-width: 100px;
   text-align: center
}

.menu-background {
   position: fixed;
   top: 0;
   left: 0;
   display: block;
   width: 100vw;
   height: 100dvh
}

#menu-background-img {
   position: absolute;
   top: auto;
   bottom: auto;
   left: 50% !important;
   z-index: 0;
   min-width: 100dvw;
   min-height: 100dvh;
   opacity: 1;
   transform: translatex(-50%)
}

.menucat {
   background-color: rgb(255 255 255 / 80%)
}

div#menu_toast.show {
   top: auto;
   bottom: 0px !important;
   height: 100%;
   background-color: #0000006b;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px)
}

div#menu_toast.show .notification-dialog.android-style {
   position: absolute;
   bottom: 0px
}

div#menu_toast {
   border-top: 1px solid var(--color-border)
}

div#menu_toast .notification-dialog.android-style .notification-header .in .imaged {
   top: -25px
}

@media (max-width: 768px) {
   .header-menucat {
      min-height: 140px
   }

   .header-menucat h5 {
      font-size: 1.3rem !important
   }
}
/* ==========================================================================
   BLOCK: MODAL DE PRODUCTO (Efecto Inmersivo)
   ========================================================================== */

/* 3. El Contenedor de la Imagen (Donde ocurre la magia del degradado) */
#modal_image {
    position: relative !important;
    width: 100% !important;
    background-color: var(--color-bg-subtle) !important; /* Fondo por si la imagen tarda en cargar */
}

/* El Degradado oscuro sobre la foto para que el título resalte siempre */
#modal_image::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 60% !important; /* Cubre la mitad inferior de la foto */
    pointer-events: none !important;
    content: "" !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0) 100%) !important;
}

/* 4. La Fotografía (Control estricto de proporciones) */
.ht-menu-product__modal-image {
    display: block !important;
    width: 100% !important;
    min-height: 250px !important; /* Pero tampoco será enana */
    max-height: 40vh !important; /* NUNCA superará el 40% del alto de la pantalla */
    object-fit: cover !important; /* Recorta la imagen para que quede perfecta sin deformarse */
}

/* 5. El Título (Flotando sobre la imagen) */
.ht-menu-product__modal-title {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important; /* Por encima del degradado */
    width: 100% !important;
    padding: 20px 24px !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--color-text-inverse) !important;
    text-align: left !important; /* Alineado a la izquierda da sensación de revista */
    letter-spacing: -0.5px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* 6. La Descripción */
#modal_description.modal-body {
    max-height: 30vh !important; /* Si el texto es larguísimo, permite hacer scroll solo aquí */
    padding: 24px !important;
    overflow-y: auto !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--color-text-body) !important; /* Gris pizarra legible */
}

/* ==========================================================================
   DESKTOP: SPLASH/MODAL DE SELECCIÓN DE MENÚ (Solo pantallas > 992px)
   ========================================================================== */

@media (min-width: 992px) {

    /* 1. Resetear el comportamiento del modal para que cubra todo limpiamente */
    #selling_items_modal .modal-dialog {
        max-width: 100% !important;
        margin: 0 !important;
    }
    #selling_items_modal .modal-content {
        background: transparent !important;
        border: none !important;
    }

    /* 2. LA IMAGEN DE FONDO (Comportamiento de Poster Cinematográfico) */
    #selling_items_modal .splash-image {
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        z-index: 1 !important;
        width: 100vw !important; /* Ocupa todo el ancho */
        height: 100vh !important; /* Ocupa todo el alto */
        object-fit: cover !important; /* Evita que la foto se deforme, hace un recorte perfecto */
    }



    /* 4. LA TARJETA CENTRAL DE CRISTAL (El contenedor de los botones) */
    #selling_items_modal .col.align-self-center {
        position: relative !important;
        z-index: 10 !important;
        max-width: 480px !important; /* LÍMITE DE ANCHO: Adiós botones infinitos */
        padding: 48px 40px !important;
        margin: 0 auto !important;
        background: rgba(15, 23, 42, 0.65) !important; /* Slate oscuro semi-transparente */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: var(--radius-lg) !important; /* Bordes redondeados modernos */
        box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4) !important; /* Sombra profunda */
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
    }

    /* 5. TEXTOS (Jerarquía y elegancia) */
    #selling_items_modal .restaurant_title {
        margin-bottom: 8px !important;
        font-size: 2.2rem !important;
        font-weight: 800 !important;
        letter-spacing: 4px !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    }
    
  


    
    #selling_items_modal .float-top-left { left: 40px !important; }
    #selling_items_modal .float-top-right { right: 40px !important; }

    #selling_items_modal .ht-gloss-back-btn,
    #selling_items_modal .ht-selling-menu__lang-btn {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px 24px !important;
        color: var(--color-text-inverse) !important;
        cursor: pointer !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: var(--radius-pill) !important;
        backdrop-filter: blur(8px) !important;
        transition: var(--transition-fast) !important;
    }

    #selling_items_modal .ht-gloss-back-btn:hover,
    #selling_items_modal .ht-selling-menu__lang-btn:hover {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    /* ==========================================================================
   DESKTOP: LAYOUT SIDEBAR (Botón Solicitar + Filtros) & Platos
   ========================================================================== */
    
    /* El Grid Principal */
    .ht-desktop-menu-grid {
        display: grid !important;
        grid-template-columns: 290px 1fr !important; /* Sidebar de 280px */
        gap: 80px !important;
        align-items: start !important; /* Permite el sticky del sidebar */
        width: 100%;
        max-width: 1200px !important;
        height: 100%;
        padding: 0 40px !important;
        margin: 20px auto 92px auto !important;
    }

    /* EL SIDEBAR PEGAJOSO */
    .ht-menu-sidebar {
        position: sticky;
        top: 50px !important; /* Distancia del techo al hacer scroll */
        z-index: 10 !important;
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 104px) !important;
        padding: 10px 14px 14px 14px !important;
        overflow-y: auto !important;
        border-right: 1px solid var(--color-border) !important;
    }
    
    .ht-menu-sidebar::-webkit-scrollbar { width: 0px !important; }

    /* EL BOTÓN DE "SOLICITAR" EN EL SIDEBAR */
    .ht-sidebar-action {
        width: 100% !important;
        padding-bottom: 32px !important;
        margin-bottom: 32px !important; /* Gran espacio antes de los filtros */
        border-bottom: 1px solid var(--color-border) !important; /* Línea que separa comprar de filtrar */
    }
 
    /* ENLACES CATEGORÍAS (Filtros) */
    #footer_filters.ht-menu-filter-footer__wrapper {flex-direction: column !important;gap: 5px;padding: 0 !important;margin: 0 !important;overflow: visible !important;}
    
    .menu-category { display: block !important; width: 100% !important;
        padding: 10px 16px !important; margin-bottom: 4px !important; font-size: 0.85rem !important; font-weight: var(--font-weight-semibold) !important; color: var(--color-text-subtle) !important;
        text-align: left !important;
        text-transform: uppercase !important; letter-spacing: 1px !important;
        background: transparent !important; border: none !important;
        border-left: 2px solid transparent !important; border-radius: 0 !important;
    }
    .menu-category:hover { color: var(--color-text-heading) !important; background: rgba(15, 23, 42, 0.03) !important; }
    .menu-category.active, .menu-category.is-checked { padding-left: 20px !important; font-weight: 800 !important; color: var(--color-text-heading) !important; border-left: 2px solid var(--color-success) !important; }

    /* Columna de Platos */
    .ht-menu-main-col { width: 100% !important; max-width: 800px !important; }
    #accordion-menu { margin: 0 !important; }

    /* BOTÓN ALERGIAS FLOTANTE (Esquina inferior derecha) */
    .btn-floating-allergens {
        position: absolute;
        right: 0px !important;
        bottom: 20px !important;
        z-index: 9999 !important;
        /* padding: 12px 24px !important; */
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        margin-left: 0;
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: var(--color-text-heading) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background-color: var(--color-text-inverse) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-pill) !important; /* Forma de pastilla */
        box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
        transition: transform 0.2s ease !important;
    }
    /* ==========================================================================
   DESKTOP: MODAL DE ALERGIAS (De Pantalla Completa a Ventana Flotante)
   ========================================================================== */

    /* 1. ANULAMOS EL COMPORTAMIENTO "FULL SCREEN" DE BOOTSTRAP */
    #allergens_modal.ht-modal-full {
        padding: 40px !important; /* Damos aire por fuera de la caja */
        background-color: rgba(15, 23, 42, 0.6) !important; /* Fondo oscuro (Overlay) más elegante */
        backdrop-filter: blur(8px) !important; /* Desenfocamos el restaurante detrás */
        -webkit-backdrop-filter: blur(8px) !important;
    }

    #allergens_modal .modal-dialog {
        display: flex !important;
        align-items: center !important;
        max-width: 700px !important; /* Limitamos el ancho para que no se estire */
        height: auto !important;
        min-height: calc(100% - 80px) !important; /* Permite centrado vertical flex */
        margin: 0 auto !important; /* Centrado absoluto */
    }

    /* 2. LA TARJETA DEL MODAL (La Ventana en sí) */
    #allergens_modal .modal-content {
        width: 100% !important;
        height: max-content !important;
        overflow: hidden !important; /* Asegura que nada se salga de los bordes curvos */
        background-color: var(--color-text-inverse) !important;
        border: none !important;
        border-radius: var(--radius-lg) !important; /* Curvas amplias tipo Apple */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; /* Sombra de ventana activa */
    }

    /* 3. CABECERA Y BOTÓN DE CERRAR */
    #allergens_modal .ht-modal-header {
        padding: 24px 32px !important;
        text-align: left !important;
        background-color: var(--color-bg-body) !important; /* Gris súper suave para diferenciar la cabecera */
        border-bottom: 1px solid var(--color-border) !important;
    }

    #allergens_modal .ht-modal-header-title {
        margin: 0 !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        color: var(--color-text-heading) !important;
    }

    #allergens_modal .ht-modal-close-btn {
        position: absolute !important;
        top: 20px !important;
        right: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        color: var(--color-text-subtle) !important;
        background: var(--color-bg-card) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        transition: var(--transition-fast) !important;
    }

    #allergens_modal .ht-modal-close-btn:hover {
        color: var(--color-text-heading) !important;
        background: var(--color-bg-subtle) !important;
        transform: scale(1.05) !important;
    }

    /* 4. CUERPO Y MENSAJE DE INFORMACIÓN */
    #allergens_modal .modal-body {
        max-height: 60vh !important; /* Limitamos la altura si hay muchas alergias */
        padding: 32px !important;
        overflow-y: auto !important; /* Scroll interno solo si es necesario */
    }

    /* La caja gris de "Selecciona las alergias..." */
    #allergens_modal .bg-light.rounded {
        padding: 16px !important;
        margin-bottom: 32px !important; /* Más aire antes de los botones */
        background-color: var(--color-bg-subtle) !important; /* Gris más premium */
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* 5. EL GRID DE ALERGIAS (3 Columnas para que se vea ordenado) */
    /* Anulamos la estructura que tuviera para imponer un Grid perfecto */
    .allergen-grid-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 Columnas iguales */
        gap: 8px !important;
    }

    /* Los botones de cada alergia */
    .allergen-item {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 12px 16px !important;
        text-align: left !important;
        background-color: var(--color-text-inverse) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
        transition: var(--transition-fast) !important;
    }

    .allergen-item:hover {
        background-color: var(--color-bg-body) !important;
        border-color: var(--color-border-strong) !important;
        transform: translateY(-2px) !important;
    }

    .allergen-item.active { /* Asumo que tienes una clase .active o similar cuando se pulsa */
        background-color: rgba(16, 185, 129, 0.05) !important; /* Fondo Esmeralda súper suave */
        border-color: var(--color-success) !important; /* Borde Esmeralda */
    }

    .allergen-item span {
        flex: 1 !important; /* Empuja el icono al principio y el check al final */
        font-size: 0.9rem !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-body) !important;
    }

    .allergen-item .icon-wrapper img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        filter: grayscale(100%) opacity(70%) !important; /* Modernizamos los iconos dándoles un toque sobrio */
        transition: filter 0.2s ease !important;
    }

    .allergen-item.active .icon-wrapper img {
        filter: none !important; /* Recuperan su color original al activarse */
    }

    /* 6. FOOTER Y BOTONES DE ACCIÓN */
    #allergens_modal .ht-modal-footer {
        display: flex !important;
        gap: 16px !important;
        justify-content: flex-end !important; /* Botones a la derecha */
        padding: 24px 32px !important;
        background-color: var(--color-bg-body) !important;
        border-top: 1px solid var(--color-border) !important;
    }

    /* Reseteamos el "btn-block" que los hacía ocupar todo el ancho */
    #allergens_modal .ht-modal-footer .btn {
        width: auto !important;
        padding: 12px 32px !important;
        margin: 0 !important;
        font-weight: var(--font-weight-bold) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-radius: var(--radius-pill) !important; /* Píldoras elegantes */
    }

    #allergens_modal .ht-modal-footer .btn-success-action {
        background-color: var(--color-success) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    }

}

/* ==========================================================================
   MOBILE (Teléfonos): CARTA CON FOOTER INFERIOR
   ========================================================================== */
@media (max-width: 991px) {
    
    .ht-desktop-menu-grid { display: block !important; padding: 0 !important; }

    /* Forzamos el sidebar a convertirse en Footer */
    .ht-menu-sidebar {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 90 !important;
        /* border-top: 1px solid var(--color-border) !important; */
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        /* box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important; */
        padding: 0px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%) !important;
        /* gap: 12px !important; */
    }

    /* Píldoras Móviles */
    .menu-category {
        flex: 0 0 auto !important;
        padding: 8px 16px !important; margin: 0 !important; font-size: 0.8rem !important; font-weight: var(--font-weight-bold) !important; color: var(--color-text-subtle) !important;
        background: var(--color-bg-body) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-pill) !important;
    }
    .menu-category.active, .menu-category.is-checked { color: var(--color-text-inverse) !important; background: var(--color-dark) !important; border-color: var(--color-text-heading) !important; }


    /* Espacio para los platos al final */
    .ht-menu-content { padding-bottom: 160px !important; }
    
}