/* ========================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ======================================== */
:root {
    --acento: #ffc107;
    --negro: #000000;
    --blanco: #FFFFFF;
    --hueso: #F5F5DC;
    --dorado: #D4AF37;
    --gris-oscuro: #333333;
    --gris-claro: #f8f9fa;
    --borde-suave: rgba(0, 0, 0, 0.08);
    
    /* Transiciones y Sombras */
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --sombra: 0 4px 6px rgba(0,0,0,0.05);
    --sombra-hover: 0 10px 20px rgba(0,0,0,0.12);
    
    /* Medidas Base */
    --header-height: 80px; /* Ajustar según tu header real */
    --sidebar-width: 280px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }



/* ========================================
   2. LAYOUT PRINCIPAL (Escritorio / Default)
   ======================================== */

.maquinas-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 1920px; /* Límite para monitores ultrawide */
    margin: 0 auto;
    min-height: calc(100vh - var(--header-height));
    background: var(--gris-claro);
    position: relative;
}

/* Área de Contenido Central */
.catalog-content {
    flex: 1; /* Ocupa el espacio restante */
    width: 100%; /* Asegura ancho total en contextos flex */
    min-width: 0; /* Previene desbordes en flexbox */
    padding: 0;
}

/* Padding interno de las vistas */
#vista-catalogo, .marcas-main-area {
    padding: 30px;
    width: 100%;
}

/* ========================================
   3. SIDEBARS (Filtros y Menú de Marcas)
   ======================================== */

.filters-sidebar, 
.marcas-sidebar-nav {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--negro);
    color: var(--hueso);
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px 20px;
    z-index: 90;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--dorado) rgba(255,255,255,0.05);
}

/* Estilo Scrollbar Webkit */
.filters-sidebar::-webkit-scrollbar, .marcas-sidebar-nav::-webkit-scrollbar { width: 6px; }
.filters-sidebar::-webkit-scrollbar-track, .marcas-sidebar-nav::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.filters-sidebar::-webkit-scrollbar-thumb, .marcas-sidebar-nav::-webkit-scrollbar-thumb { background: var(--dorado); border-radius: 10px; }

/* Headers de Sidebars */
.filters-header, .marcas-sidebar-nav h3 {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; padding-bottom: 15px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.5);
    font-size: 1.2rem; color: var(--dorado); letter-spacing: 0.5px;
}

/* Botones dentro del sidebar */
.clear-filters-btn, .close-sidebar-btn {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    color: white; padding: 6px 12px; border-radius: 4px; cursor: pointer;
    font-size: 0.8rem; transition: var(--transition);
}
.clear-filters-btn:hover, .close-sidebar-btn:hover {
    border-color: var(--dorado); background: rgba(212, 175, 55, 0.1);
}
.close-sidebar-btn { display: none; } /* Oculto en escritorio */

/* Links del Menú de Marcas */
.nav-rubro-link {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px;
    background: transparent; border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8); text-decoration: none; cursor: pointer;
    transition: var(--transition); font-size: 0.95rem; border-radius: 4px;
}
.nav-rubro-link:hover, .nav-rubro-link.active {
    background: rgba(212, 175, 55, 0.15); color: #fff; padding-left: 20px;
    border-left: 3px solid var(--dorado);
}
.nav-rubro-link i { color: var(--dorado); width: 20px; text-align: center; }

/* ========================================
   4. COMPONENTES UI (Inputs, Filtros)
   ======================================== */

.filter-section { margin-bottom: 25px; }
.filter-label {
    display: flex; align-items: center; gap: 8px; font-weight: 600;
    margin-bottom: 12px; color: var(--dorado); font-size: 0.9rem; text-transform: uppercase;
}
.search-input, .price-input, .sort-select {
    width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;
    color: white; font-size: 0.95rem; transition: var(--transition);
}
.search-input:focus, .price-input:focus, .sort-select:focus {
    outline: none; border-color: var(--dorado); background: rgba(0,0,0,0.3);
}
.sort-select option { background: var(--negro); color: white; }

/* Acordeón de Filtros */
.filter-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
    color: white; cursor: pointer; transition: var(--transition);
}
.filter-toggle.active { background: rgba(212, 175, 55, 0.15); border-color: var(--dorado); }
.filter-options { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.filter-options.active { max-height: 300px; overflow-y: auto; margin-top: 5px; }

.filter-checkbox {
    padding: 8px 5px; display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.filter-checkbox input { accent-color: var(--dorado); transform: scale(1.1); }
.filter-checkbox label { font-size: 0.9rem; color: #ddd; cursor: pointer; }

/* Botón Flotante (Móvil) */
.mobile-filters-toggle {
    display: none; /* Oculto en desktop */
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: var(--dorado); color: var(--negro); border: none;
    padding: 12px 25px; border-radius: 50px; font-weight: 700;
    cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.4); z-index: 1000;
    align-items: center; gap: 8px; transition: transform 0.2s;
}
.mobile-filters-toggle:active { transform: translateX(-50%) scale(0.95); }

/* ========================================
   5. GRILLAS Y TARJETAS (Responsive Core)
   ======================================== */

/* Grid Inteligente */
.products-grid, .marcas-grid {
    display: grid;
    /* Mínimo 240px en Desktop. Se ajusta solo. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 25px;
    width: 100%;
}
/* 1. Cambiamos la grilla a una sola columna */
.products-grid.list-view {
    grid-template-columns: 1fr; /* Una sola columna ancha */
    gap: 15px; /* Menos espacio entre filas */
}

/* 2. Tarjeta horizontal */
.products-grid.list-view .product-card {
    flex-direction: row; /* Imagen a la izq, info a la derecha */
    height: 180px; /* Altura fija contenida */
    align-items: center; /* Centrar verticalmente */
}

/* 3. Área clickeable horizontal */
.products-grid.list-view .product-clickable-area {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding-bottom: 0; /* Quitamos el padding inferior de la tarjeta vertical */
}

/* 4. Imagen a la izquierda */
.products-grid.list-view .product-image {
    width: 180px; /* Ancho fijo */
    height: 100%; /* Altura total de la tarjeta */
    object-fit: contain;
    border-bottom: none; /* Quitamos borde inferior */
    border-right: 1px solid #f0f0f0; /* Agregamos borde derecho */
    padding: 10px;
}

/* 5. Información a la derecha */
.products-grid.list-view .product-info {
    padding: 20px;
    flex: 1; /* Ocupa el resto del espacio */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrar contenido verticalmente */
    text-align: left;
}

/* Ajustes de texto para la lista */
.products-grid.list-view .product-name {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.products-grid.list-view .product-sku {
    margin-bottom: 10px;
    font-size: 0.85rem;
}

/* 6. Footer (Precio y Botón) alineado a la derecha o en línea */
.products-grid.list-view .product-footer {
    margin-top: auto; /* Empujar al fondo si sobra espacio */
    padding: 0;
    justify-content: flex-start; /* Alinear a la izquierda junto al texto */
    gap: 20px; /* Separar precio de botón */
}

.products-grid.list-view .product-price {
    font-size: 1.4rem;
    margin-bottom: 0;
}

.products-grid.list-view .add-to-cart-btn {
    padding: 8px 20px; /* Botón más compacto */
}

/* RESPONSIVE: En móvil, la lista vuelve a ser vertical para que entre bien */
@media (max-width: 600px) {
    .products-grid.list-view .product-card {
        height: auto; /* Altura automática */
        flex-direction: row; /* Mantenemos horizontal pero ajustado */
    }
    
    .products-grid.list-view .product-image {
        width: 120px; /* Imagen más chica */
        height: 120px;
    }
    
    .products-grid.list-view .product-info {
        padding: 10px;
    }
    
    .products-grid.list-view .product-name {
        font-size: 0.95rem;
    }
}

/* Tarjeta Producto */
.product-card {
    background: white; border-radius: 10px; overflow: hidden;
    box-shadow: var(--sombra); transition: var(--transition);
    display: flex; flex-direction: column; height: 100%; border: 1px solid transparent;
}
.product-card:hover {
    transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: rgba(212, 175, 55, 0.3);
}

.product-image {
    width: 100%; aspect-ratio: 1/1; /* Cuadrada perfecta */
    object-fit: contain; padding: 20px; background: #fff; border-bottom: 1px solid #f0f0f0;
}

.product-info {
    padding: 15px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.product-marca { font-size: 0.85rem; color: var(--dorado); font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }
.product-name { font-size: 1rem; font-weight: 600; color: var(--gris-oscuro); margin-bottom: 10px; line-height: 1.4; }
.product-price { font-size: 1.4rem; font-weight: 700; color: var(--negro); margin-top: auto; }

/* Tarjeta Marca */
.marca-card {
    background: white; border-radius: 8px; overflow: hidden;
    box-shadow: var(--sombra); transition: var(--transition);
    display: flex; flex-direction: column; cursor: pointer;
    height: 200px; border: 1px solid transparent;
}
.marca-card:hover {
    transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: var(--dorado);
}
.marca-logo {
    width: 100%; height: 140px; display: flex; align-items: center; justify-content: center;
    background: #fff; padding: 20px;
}
.marca-logo img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    /* Sin filtro gris */
}
.marca-card:hover .marca-logo img { transform: scale(1.08); }
.marca-nombre {
    padding: 10px; text-align: center; font-size: 0.9rem; font-weight: 700;
    color: var(--gris-oscuro); background: #f9f9f9; border-top: 1px solid #eee;
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
}

/* ========================================
   6. PESTAÑAS, HERO Y EXTRAS
   ======================================== */

.nav-tabs-container {
    display: flex; justify-content: center; gap: 20px;
    border-bottom: 1px solid #e0e0e0; margin-bottom: 30px;
}
.nav-tab {
    background: none; border: none; padding: 15px 30px;
    font-size: 1.1rem; font-weight: 600; color: #888;
    cursor: pointer; border-bottom: 3px solid transparent;
    transition: var(--transition); display: flex; align-items: center; gap: 8px;
}
.nav-tab.active { color: var(--negro); border-bottom-color: var(--dorado); }

/* Hero */
.hero-maquinas {
    position: relative; height: 180px; border-radius: 12px; overflow: hidden;
    margin-bottom: 30px; background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    box-shadow: var(--sombra); display: flex; align-items: center; padding: 0 40px; color: white;
}
.hero-icon { font-size: 3rem; color: var(--dorado); margin-right: 30px; }
.hero-title { font-size: 2rem; margin-bottom: 5px; }

/* Títulos de secciones en Marcas */
.rubro-title-bar {
    font-size: 1.8rem; font-weight: 700; color: var(--negro);
    margin-bottom: 25px; padding-bottom: 10px; border-bottom: 3px solid var(--dorado);
    display: flex; align-items: center; gap: 15px; scroll-margin-top: 100px;
}
.rubro-title-bar i { color: var(--dorado); }
.categoria-sub-title {
    font-size: 1.3rem; color: #555; margin-bottom: 20px; padding-left: 10px; margin-top: 20px;
    border-left: 4px solid var(--dorado); font-weight: 600;
}

/* =======================================================
   7. RESPONSIVE OPTIMIZADO (TABLET Y MÓVIL)
   ======================================================= */

@media (max-width: 1024px) {
    /* Layout: Columna Única */
    .maquinas-container, #vista-marcas {
        flex-direction: column;
        display: block; /* Rompe el flexbox desktop */
    }

    /* Sidebars (Cajón Oculto) */
    .filters-sidebar, 
    .marcas-sidebar-nav {
        position: fixed !important;
        top: 0; left: -100%; /* Oculto */
        width: 280px; height: 100vh;
        z-index: 9999; /* Máxima prioridad */
        background: var(--negro);
        padding-top: 80px; /* Espacio seguro superior */
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 20px rgba(0,0,0,0.5);
    }
    
    .filters-sidebar.active, 
    .marcas-sidebar-nav.active {
        left: 0 !important; /* Mostrar */
    }

    /* Botón cerrar visible */
    .close-sidebar-btn { display: block; margin-left: auto; margin-bottom: 20px; }

    /* Overlay Oscuro */
    .filter-overlay {
        display: none; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%; background: rgba(0,0,0,0.7);
        z-index: 9000; backdrop-filter: blur(3px);
    }
    .filter-overlay.active { display: block; }

    /* Botón Flotante */
    .mobile-filters-toggle { display: flex; }

    /* Contenido */
    #vista-catalogo, .marcas-main-area {
        padding: 15px; /* Menos padding lateral */
    }
    
    /* Pestañas */
    .nav-tab { padding: 10px 15px; font-size: 0.95rem; }

    /* Grilla Responsive (Compacta) */
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Productos medianos */
        gap: 15px;
    }
    
    /* Grilla de Marcas (Más chica y densa) */
    .marcas-grid {
        /* Fuerza mínimo 100px por columna. Entran 3 en la mayoría de cels */
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 10px;
    }

    /* Tarjetas de Marcas Compactas */
    .marca-card { height: 130px; }
    .marca-logo { height: 80px; padding: 10px; }
    .marca-nombre { font-size: 0.75rem; padding: 5px; height: 40px; }

    /* Hero Responsive */
    .hero-maquinas {
        height: auto; padding: 20px; flex-direction: column; text-align: center;
    }
    .hero-icon { margin: 0 0 10px 0; font-size: 2rem; }
    .hero-content { flex-direction: column; padding: 0; }
    .hero-title { font-size: 1.5rem; padding: 0; }
    .hero-description { padding: 0; }
}

/* Ajustes para móviles muy pequeños (iPhone SE / Fold) */
@media (max-width: 380px) {
    .marcas-grid, .products-grid {
        grid-template-columns: repeat(2, 1fr); /* Forzar 2 columnas */
    }
    .nav-tab span { display: none; } /* Ocultar texto pestañas si no entra */
}

/* =======================================================
   ESTILOS FALTANTES (AYUDA, CARRITO, MODALES)
   ======================================================= */

/* --- 1. SECCIÓN DE AYUDA / WHATSAPP --- */
.ayuda-no-encontrado-section {
    padding: 20px 0;
    margin-bottom: 30px;
}

.ayuda-no-encontrado-container {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid var(--dorado);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--sombra);
}

.texto-ayuda {
    flex: 1;
    min-width: 300px;
}

.texto-ayuda h2 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--negro);
}

.texto-ayuda p {
    color: #666;
    margin: 0;
}

.consulta-whatsapp-input {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 300px;
}

.consulta-whatsapp-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.btn-whatsapp-consulta {
    background-color: #25D366; /* Verde WhatsApp */
    color: white;
    border: none;
    padding: 0 25px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-whatsapp-consulta:hover {
    background-color: #1ebc57;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
}

/* --- 2. BOTÓN AGREGAR EN MODAL --- */
#modalAddToCartBtn {
    width: 100%;
    background: var(--dorado);
    color: var(--negro);
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

#modalAddToCartBtn:hover {
    background: #e6c458;
    transform: translateY(-2px);
    box-shadow: var(--sombra-hover);
}

/* ========================================
   CARRITO FLOTANTE Y PANEL
   ======================================== */

.cart-float {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 1100; /* Encima de todo */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--dorado); /* Botón dorado */
    color: var(--negro);
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    font-size: 1.6rem;
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-toggle:hover {
    transform: scale(1.1) translateY(-5px);
    background: #e6c458;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff4444;
    color: white;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    border: 3px solid var(--gris-claro); /* Borde para separar visualmente */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Panel del Carrito (Estilo Desktop por defecto) */
.cart-panel {
    position: absolute;
    right: 0;
    bottom: 85px; /* Aparece encima del botón */
    width: 400px;
    max-height: 0; /* Oculto por altura para animar */
    opacity: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animación suave */
    transform-origin: bottom right;
    transform: scale(0.9);
    visibility: hidden;
}

.cart-panel.active {
    max-height: 600px;
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

.cart-header {
    padding: 20px 25px;
    background: var(--negro);
    color: var(--dorado);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.cart-header h3 {
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.close-cart {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.close-cart:hover {
    background: rgba(255,255,255,0.2);
    color: var(--dorado);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    max-height: 400px;
}

/* Item del Carrito */
.cart-item {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: 0.2s;
}

.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cart-item-image {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
    padding: 5px;
}

.cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-marca {
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
}

.cart-item-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--negro);
    margin-bottom: 5px;
    line-height: 1.2;
}

.cart-item-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dorado);
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    color: #555;
    transition: 0.2s;
}

.qty-btn:hover {
    border-color: var(--dorado);
    color: var(--dorado);
}

.cart-item-qty {
    font-weight: 700;
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

.remove-item-btn {
    margin-left: auto;
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: 0.2s;
}

.remove-item-btn:hover {
    background: #ff4444;
    color: white;
}

/* Footer del Carrito */
.cart-footer {
    padding: 25px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 8px;
}

.summary-row.total {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--negro);
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #eee;
    align-items: flex-end;
}

.checkout-btn {
    width: 100%;
    padding: 16px;
    background: var(--negro);
    color: var(--dorado);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-btn:hover {
    background: var(--dorado);
    color: var(--negro);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}


/* --- 4. MODALES Y CHECKOUT --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.modal-overlay.active { display: flex; }

.modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.modal-header {
    background: var(--negro);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-header h3 { margin: 0; font-size: 1.2rem; display: flex; gap: 10px; align-items: center; color: var(--dorado); }

.checkout-form { padding: 25px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: var(--transition);
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--dorado);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Mapa en checkout */
#mapa-sucursales {
    width: 100%;
    height: 300px; /* IMPORTANTE: Altura obligatoria */
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 10px;
}

.order-summary-modal {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #eee;
}

.submit-order-btn {
    width: 100%;
    padding: 15px;
    background: var(--dorado);
    color: var(--negro);
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.submit-order-btn:hover {
    background: #e6c458;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* ========================================
   RESPONSIVE CARRITO (AJUSTE MÓVIL)
   ======================================== */

@media (max-width: 480px) {
    /* 1. Subimos el botón para que no tape WhatsApp */
    .cart-float {
        bottom: 90px !important; /* Altura suficiente para esquivar el botón verde */
        right: 20px;
    }

    .cart-toggle {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }

    /* 2. Panel estilo "Hoja inferior" (Bottom Sheet) */
    .cart-panel {
        position: fixed; /* Fijo a la pantalla */
        bottom: 0;
        right: 0;
        left: 0; /* Ancho completo */
        width: 100%;
        max-height: 85vh; /* Que no tape toda la pantalla arriba */
        border-radius: 25px 25px 0 0; /* Bordes redondos solo arriba */
        
        /* Animación desde abajo */
        transform: translateY(100%); 
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 2100; /* Arriba de todo */
        border: none;
        box-shadow: 0 -5px 40px rgba(0,0,0,0.3);
    }

    .cart-panel.active {
        transform: translateY(0); /* Sube a la vista */
    }
    
    /* Ajustes internos para móvil */
    .cart-header {
        padding: 15px 20px;
        border-radius: 25px 25px 0 0;
    }
    
    .cart-items {
        padding: 15px;
        max-height: calc(85vh - 200px); /* Calcular espacio para que no se corte */
    }
    
    .cart-footer {
        padding: 20px;
        background: white; /* Fondo blanco en el pie */
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05); /* Sombra sutil arriba del footer */
    }
    
    /* Ajustes del modal de ayuda (No encontrado) */
    .ayuda-no-encontrado-container {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }
    
    .consulta-whatsapp-input {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-whatsapp-consulta, .consulta-whatsapp-input input {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   ESTILO BOTÓN MINI "AGREGAR AL CARRITO"
   (El que está bajo el precio en la tarjeta)
   ======================================== */

.btn-add-cart-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; /* Tamaño cuadrado y cómodo para el dedo */
    height: 42px;
    background-color: var(--dorado); /* Color de marca */
    color: var(--negro); /* Icono negro */
    border: none;
    border-radius: 8px; /* Bordes redondeados suaves */
    font-size: 1.1rem; /* Tamaño del icono */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-top: 10px; /* Separación del precio */
}

/* Efecto Hover (Escritorio) */
.btn-add-cart-mini:hover {
    background-color: #e6c458; /* Un poco más claro */
    transform: translateY(-2px) scale(1.05); /* Se eleva y crece un poco */
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.3); /* Sombra dorada */
}

/* Efecto Click/Touch */
.btn-add-cart-mini:active {
    transform: scale(0.95); /* Se achica al hacer click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Asegurar que el icono esté centrado */
.btn-add-cart-mini i {
    pointer-events: none; /* Evita problemas de click en el icono */
}

/* ========================================
   HEADER DEL CATÁLOGO Y BOTONES DE VISTA
   ======================================== */

.catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Sombra suave y moderna */
    border: 1px solid rgba(0,0,0,0.03);
}

.results-info {
    font-size: 1rem;
    color: var(--gris-oscuro);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Contenedor de los botones (Fondo gris estilo "switch") */
.view-toggle {
    display: flex;
    gap: 5px;
    background: #f0f0f0;
    padding: 4px;
    border-radius: 8px;
}

/* Botón individual base */
.view-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #999; /* Gris desactivado */
    font-size: 1.1rem;
}

/* Hover en botón inactivo */
.view-btn:hover {
    color: var(--negro);
    background: rgba(0,0,0,0.05);
}

/* Estado ACTIVO (Dorado y con sombra) */
.view-btn.active {
    background: var(--dorado);
    color: var(--negro);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    transform: scale(1.05); /* Pequeño zoom para indicar selección */
}

/* Responsive: En móviles muy chicos, apilar si es necesario */
@media (max-width: 480px) {
    .catalog-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch; /* Estirar a lo ancho */
        text-align: center;
    }
    
    .view-toggle {
        justify-content: center;
    }
    
    .results-info {
        justify-content: center;
        font-size: 0.9rem;
    }
}

/* ============================================================
   CORRECCIONES VISUALES (16/Dic)
============================================================ */

/* --- PUNTO 1: Stock Disponible en Verde --- */
/* Buscamos la pastilla que tenga la clase 'available' */
.stock-badge.available,
.stock-mini-badge.available {
    color: #155724 !important; /* Verde oscuro para el texto */
    background-color: #d4edda !important; /* Fondo verde claro */
    border: 1px solid #c3e6cb !important; /* Borde verde sutil */
    font-weight: bold;
    /* Aseguramos que el icono también sea verde */
}
.stock-badge.available i,
.stock-mini-badge.available i {
    color: #28a745 !important; /* Icono un poco más vibrante */
}


/* --- PUNTO 2: Marca en un renglón y Precio Grande --- */

/* 2a. Marca en una sola línea con puntos suspensivos (...) */
.product-marca, .detail-info-col h4 {
    white-space: nowrap;      /* No permitir salto de línea */
    overflow: hidden;         /* Ocultar lo que sobra */
    text-overflow: ellipsis;  /* Agregar "..." al final */
    display: block;           /* Asegurar que tome el ancho */
    max-width: 100%;
    margin-bottom: 5px;       /* Un poco de aire debajo */
}

/* 2b. Precio más grande (en la grilla) */
.product-price {
    font-size: 1.5rem; /* Aumentamos el tamaño considerablemente */
    font-weight: 800;  /* Más grueso */
    color: #111;       /* Negro intenso para destacar */
    /* Si quieres que se alinee con el botón a la derecha: */
    /* flex: 1; */
}

/* 2c. Ajuste del contenedor del footer de la tarjeta para alinear precio y botón */
.product-footer {
    display: flex;
    justify-content: space-between; /* Precio a la izq, botón a la der */
    align-items: center; /* Centrados verticalmente */
    margin-top: 15px;
}

/* --- PUNTO 4: Vista de Lista más espaciada --- */

/* Cuando la grilla tiene la clase .list-view */
.product-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espacio vertical entre tarjeta y tarjeta */
}

/* La tarjeta individual dentro de la vista de lista */
.product-grid.list-view .product-card {
    display: flex; /* Convertimos la tarjeta en fila flexible */
    flex-direction: row;
    align-items: center; /* Centrar verticalmente el contenido */
    padding: 25px; /* Más espacio interno */
    gap: 30px; /* Espacio horizontal grande entre Imagen - Info - Precio */
    max-width: 100%; /* Que ocupe todo el ancho */
    height: auto; /* Resetear altura fija si la tenía */
}

/* Ajustar la imagen en la vista de lista */
.product-grid.list-view .product-image {
    width: 150px; /* Tamaño fijo más grande para lista */
    height: 150px;
    object-fit: contain;
    margin-bottom: 0; /* Quitar margen inferior de la grilla */
    flex-shrink: 0;   /* Evitar que se aplaste */
}

/* Ajustar el bloque de información para que crezca */
.product-grid.list-view .product-info {
    flex: 1; /* Toma todo el espacio central disponible */
    text-align: left;
    padding: 0;
}

/* Ajustar el footer (precio y botón) a la derecha */
.product-grid.list-view .product-footer {
    flex-direction: column; /* Apilar precio y botón verticalmente */
    align-items: flex-end;  /* Alinear a la derecha */
    justify-content: center;
    gap: 15px;
    margin-top: 0;
    min-width: 120px; /* Asegurar espacio para el precio */
}

/* Precio más grande específicamente en lista */
.product-grid.list-view .product-price {
    font-size: 1.8rem;
    margin-bottom: 0;
}