/* menu-digital.css - Responsivo y Limpio */

body {
    background-color: #f5f8fa;
    /* ESTO ES VITAL: Evita que aparezca la barra de scroll horizontal fantasma */
    overflow-x: hidden;
    width: 100%;
}

/* --- CONTENEDOR PRINCIPAL (APP SHELL) --- */
.app-container {
    background-color: #ffffff;
    min-height: 100vh;
    position: relative;
    padding-bottom: 120px; /* Espacio extra para el footer flotante */
    /* Por defecto (Móvil) ocupa todo el ancho */
    width: 100%;
    margin: 0;
    border: none;
}

/* Solo en pantallas grandes (Tablets y PC) simulamos el "Modo App" centrado */
@media (min-width: 768px) {
    .app-container {
        /* ANTES: max-width: 600px; -> Esto lo limitaba a tamaño móvil */
        /* AHORA: Permitimos que se expanda en PC */
        max-width: 1200px;
        margin: 0 auto; /* Centrar */
        box-shadow: 0 0 40px rgba(0,0,0,0.05);
        border-left: 1px solid #eff2f5;
        border-right: 1px solid #eff2f5;
    }
}

/* --- SCROLL DE CATEGORÍAS --- */
.scroll-x {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
    padding-bottom: 5px; /* Espacio para que no se corte la sombra */
}

    .scroll-x::-webkit-scrollbar {
        display: none; /* Ocultar barra fea */
    }

/* --- TARJETAS DE PRODUCTO --- */
.product-img-cover {
    height: 140px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    background-color: #f1f1f4;
}

/* --- FOOTER FLOTANTE (CARRITO) --- */
.cart-floating-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    /* Ancho inteligente */
    width: 92%;
    max-width: 550px;
}

    .cart-floating-footer.hidden {
        bottom: -120px;
    }

/* --- MODALES Y OPCIONES --- */
.option-label {
    cursor: pointer;
    transition: all 0.2s;
}

/* Iluminar opción seleccionada */
.option-input:checked + div {
    /* No necesitamos CSS complejo aquí si usamos las clases de Metronic en el HTML */
}