:root {
            --primary-yellow: #FFDE00;
            --bg-light: #FBFBFB;
            --text-dark: #121212;
            --gray-light: #f0f0f0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
        }

        /* BARRA AMARILLA CON REDES SOCIALES */
        .top-bar {
            background: var(--primary-yellow);
            border-bottom: 2px solid var(--text-dark);
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .social-icons a {
            color: var(--text-dark);
            font-size: 1.2rem;
            margin-left: 15px;
            transition: opacity 0.2s;
        }
        .social-icons a:hover { opacity: 0.7; }

        .main-wrapper { display: flex; min-height: 100vh; }

        .menu-side { width: 70%; padding: 40px; background: white; }
        .cart-side { width: 30%; padding: 40px; background: var(--bg-light); border-left: 1px solid #eee; }

        .search-input {
            border: none; background: var(--gray-light);
            border-radius: 16px; padding: 28px 20px; font-size: 1.1rem;
            font-weight: 500; transition: all 0.3s;
        }
        .search-input:focus { background: white; box-shadow: 0 0 0 3px var(--primary-yellow); outline: none; }

        .category-carousel {
            display: flex; overflow-x: auto; scroll-behavior: smooth;
            white-space: nowrap; padding: 10px 0; scrollbar-width: none;
        }
        .category-carousel::-webkit-scrollbar { display: none; }
        .cat-item {
            display: inline-block; padding: 12px 24px; margin-right: 12px;
            background: var(--gray-light); border-radius: 50px; font-weight: 700;
            font-size: 0.85rem; cursor: pointer; text-transform: uppercase;
        }
        .cat-item.active { background: var(--text-dark); color: var(--primary-yellow); }

        .view-controls-row {
            display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px;
        }
        .view-controls .btn {
            border-radius: 12px; background: var(--gray-light); border: none; color: #888;
            padding: 8px 16px; transition: all 0.2s; margin-left: 5px;
        }
        .view-controls .btn.active { background: var(--text-dark); color: var(--primary-yellow); }

        #menuList.grid-view { display: flex; flex-wrap: wrap; margin: 0 -10px; }
        
        .grid-view .product-card {
            width: calc(33.33% - 20px); margin: 10px; flex-direction: column !important;
            border: 1px solid #eee; border-radius: 20px; padding: 20px; text-align: center;
        }
        .grid-view .product-img { width: 100%; height: 160px; margin-bottom: 15px; margin-right: 0 !important; }

        .list-view .product-card {
            width: 100%; display: flex; align-items: center; 
            padding: 20px 0; border-bottom: 1px solid #f2f2f2;
        }
        .list-view .product-img { width: 100px; height: 100px; margin-right: 25px; }

        .product-img { object-fit: cover; border-radius: 18px; background: #eee; }

        .btn-add-minimal {
            background: var(--primary-yellow); border: 2px solid var(--text-dark);
            border-radius: 12px; font-weight: 800; padding: 10px 20px; font-size: 0.8rem;
            cursor: pointer;
        }

        /* CARRITO ESTILOS */
        .cart-fixed { position: sticky; top: 100px; }
        .total-badge { font-size: 3.5rem; font-weight: 800; letter-spacing: -2px; line-height: 1; display: block; }
        .cart-item-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 15px 0; border-bottom: 1px solid #eee;
        }
        .cart-item-info h6 { margin: 0; font-weight: 700; font-size: 0.9rem; }
        .btn-remove { color: #ff4444; cursor: pointer; border: none; background: none; padding: 5px; }
        
        .btn-pay {
            background: var(--text-dark); color: white; width: 100%; padding: 22px;
            border-radius: 20px; font-weight: 700; border: none; font-size: 1.1rem;
            margin-top: 20px;
        }

        /* BOTÓN FLOTANTE MÓVIL */
        #mobileCartBtn {
            display: none;
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 70px;
            height: 70px;
            background: var(--text-dark);
            color: var(--primary-yellow);
            border-radius: 50%;
            border: none;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 2000;
            font-size: 1.5rem;
            align-items: center;
            justify-content: center;
        }

        .cart-count {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #ff4444;
            color: white;
            font-size: 0.7rem;
            padding: 4px 8px;
            border-radius: 50px;
            font-weight: 800;
        }

        .hidden { display: none !important; }

        /* RESPONSIVE MÓVIL OPTIMIZADO */
        @media (max-width: 992px) {
            html { font-size: 14px; }
            .menu-side { width: 100%; padding: 15px; }
            .cart-side { 
                position: fixed; top: 0; right: -100%; width: 100%; height: 100%; 
                z-index: 3000; background: white; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                padding: 20px;
            }
            .cart-side.active { right: 0; }
            #mobileCartBtn { display: flex; }

            #menuList.grid-view { margin: 0 -5px; }
            .grid-view .product-card { 
                width: calc(50% - 10px); 
                margin: 5px; 
                padding: 12px; 
                border-radius: 15px;
            }
            .grid-view .product-img { height: 120px; margin-bottom: 8px; }
            
            .h5, h5 { font-size: 1rem; }
            .h4, h4 { font-size: 1.1rem; }
            .btn-add-minimal { padding: 8px 12px; font-size: 0.75rem; }
            
            .close-cart { display: block !important; position: absolute; top: 20px; right: 20px; font-size: 1.5rem; }
        }