/**
 * DALPES - Mobile Responsive Fix
 * Corrige todos los problemas de responsive en móvil/tablet
 */

/* ============================================
   1. OVERFLOW GLOBAL
   ============================================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================
   2. HEADER MÓVIL - Layout en 2 filas
   ============================================ */
@media (max-width: 768px) {
    .header-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
    }

    /* Fila 1: logo | (spacer) | carrito | toggle */
    .site-logo {
        flex: 0 0 auto;
        order: 1;
    }

    .cart-btn {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto;
        padding: 0.55rem 0.9rem;
        font-size: 0.85rem;
        border-radius: 20px;
    }

    .menu-toggle {
        flex: 0 0 auto;
        order: 3;
    }

    /* Fila 2: buscador ancho completo */
    .header-search {
        order: 10;
        flex: 0 0 100%;
        max-width: 100% !important;
        padding-bottom: 0.25rem;
    }

    .header-search input {
        width: 100% !important;
        font-size: 0.95rem;
        padding: 0.75rem 3rem 0.75rem 1rem;
    }

    .site-logo img,
    .site-logo .logo-img,
    .site-logo .custom-logo {
        max-height: 48px;
    }
}

/* ============================================
   3. WOOCOMMERCE CONTAINER - FIX CRÍTICO
   Sin este fix, en 375px los productos tienen ~150px de ancho
   ============================================ */
@media (max-width: 992px) {
    /* El padding de 2rem en cada lado (64px total) aplastaba los productos */
    .woocommerce .site-main,
    .woocommerce-page .site-main,
    .archive.woocommerce .site-main,
    .tax-product_cat .site-main,
    .single-product .site-main,
    .woocommerce-shop .site-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }

    /* El category-container tenía width:80% → encogía productos a ~150px */
    .category-container,
    .shop-container,
    .wc-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Single product container */
    .single-product-page .container {
        max-width: 100%;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .woocommerce .site-main,
    .woocommerce-page .site-main,
    .archive.woocommerce .site-main,
    .tax-product_cat .site-main,
    .single-product .site-main,
    .woocommerce-shop .site-main {
        padding: 0.75rem !important;
    }
}

/* ============================================
   4. GRID DE PRODUCTOS MÓVIL
   ============================================ */
@media (max-width: 768px) {
    /* 2 columnas razonables con el nuevo ancho disponible */
    .woocommerce ul.products,
    ul.products,
    .products,
    .shop-layout .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Título de producto más compacto en 2 cols */
    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem 0.25rem !important;
        min-height: 2.2rem;
    }

    ul.products li.product .price,
    .woocommerce ul.products li.product .price {
        font-size: 1rem !important;
        padding: 0.25rem 0.6rem 0.5rem !important;
    }

    ul.products li.product .button,
    ul.products li.product a.add_to_cart_button,
    .woocommerce ul.products li.product .button {
        width: calc(100% - 1.2rem) !important;
        margin: 0 0.6rem 0.6rem !important;
        font-size: 0.75rem;
        padding: 0.5rem 0.4rem !important;
        border-radius: 16px;
    }

    ul.products li.product > a:first-child,
    ul.products li.product a.woocommerce-LoopProduct-link {
        padding: 0.5rem !important;
    }

    /* Shop controls: apilados en vertical */
    .shop-controls,
    .shop-content .shop-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }

    .woocommerce-result-count {
        float: none !important;
        display: block;
        margin: 0 !important;
        font-size: 0.85rem;
    }

    .woocommerce-ordering {
        float: none !important;
        display: block;
        width: 100%;
        margin: 0 !important;
    }

    .woocommerce-ordering select {
        width: 100% !important;
        min-width: auto;
    }
}

/* 1 columna en móvil pequeño */
@media (max-width: 480px) {
    .woocommerce ul.products,
    ul.products,
    .products,
    .shop-layout .products {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2 {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.9rem 0.25rem !important;
        min-height: auto;
    }

    ul.products li.product .price {
        font-size: 1.15rem !important;
        padding: 0.25rem 0.9rem 0.75rem !important;
    }

    ul.products li.product .button,
    ul.products li.product a.add_to_cart_button {
        width: calc(100% - 1.8rem) !important;
        margin: 0 0.9rem 0.9rem !important;
        font-size: 0.85rem;
        padding: 0.6rem !important;
    }
}

/* ============================================
   5. SIDEBAR DE CATEGORÍAS - MÓVIL
   Botón cerrar funcional + overlay
   ============================================ */
@media (max-width: 992px) {
    /* Ocultar el ::before que no tiene eventos de clic */
    .sidebar-content::before {
        display: none !important;
    }

    /* Botón filtros más grande */
    .sidebar-toggle {
        display: flex !important;
        font-size: 1rem;
        padding: 0.85rem 1.25rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    /* Fondo semi-opaco cuando el sidebar está abierto */
    body.sidebar-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    /* El sidebar ocupa la derecha de la pantalla (drawer) */
    .sidebar-content {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        border-radius: 0 16px 16px 0 !important;
        padding: 1rem !important;
        padding-top: 3.5rem !important;
        transition: left 0.3s ease !important;
        display: block !important;
    }

    .sidebar-content.active {
        left: 0 !important;
    }

    /* Botón X de cerrar - inyectado via JS */
    .sidebar-close-btn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: #333;
        color: #fff;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        z-index: 1001;
    }

    .sidebar-close-btn:hover {
        background: #c00;
    }

    /* 2 columnas en tienda con sidebar colapsado */
    .shop-layout .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   6. PRODUCTO INDIVIDUAL - MÓVIL
   ============================================ */
@media (max-width: 768px) {
    .product-main {
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .product-info .product-title {
        font-size: 1.35rem;
    }

    .product-info .product-price {
        font-size: 1.75rem;
    }

    .product-add-to-cart .cart {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .product-add-to-cart .single_add_to_cart_button {
        width: 100% !important;
        text-align: center;
    }

    /* Tabs del producto */
    .woocommerce-tabs ul.tabs {
        flex-wrap: wrap !important;
        overflow-x: auto;
    }

    .woocommerce-tabs ul.tabs li a {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        white-space: nowrap;
    }

    /* Productos relacionados: 2 cols */
    .single-product .related.products ul.products,
    .single-product .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .single-product .related.products,
    .single-product .upsells.products {
        padding: 1rem !important;
    }
}

@media (max-width: 480px) {
    .single-product .related.products ul.products,
    .single-product .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   7. HOME PAGE - LANDING MÓVIL
   ============================================ */
@media (max-width: 992px) {
    /* Benefits bar: 2 columnas en tablet */
    .benefits-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Categories: 3 columnas en tablet */
    .categories-grid-modern {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Benefits bar: 2 columnas en móvil (no 1 col) */
    .benefits-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    .benefit-bar-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    /* Categories: 2 columnas en móvil */
    .categories-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Hero container */
    .hero-content {
        padding: 2rem 1rem;
    }

    /* Categorías del home (antiguas - íconos circulares) */
    .categories-icons {
        gap: 1rem;
    }

    .category-icon-circle {
        width: 80px;
        height: 80px;
    }

    .category-icon-name {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    /* Benefits bar: 1 columna en móvil pequeño */
    .benefits-bar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .benefit-bar-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .benefit-bar-text strong {
        font-size: 0.85rem;
    }

    .benefit-bar-text span {
        font-size: 0.75rem;
    }

    /* Categories: 2x2 en móvil pequeño */
    .categories-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero */
    .hero-title {
        font-size: 1.75rem !important;
    }
}

/* ============================================
   8. TOP BAR - MÓVIL
   ============================================ */
@media (max-width: 768px) {
    .top-bar {
        padding: 0.35rem 0 !important;
        font-size: 0.75rem !important;
    }

    .top-bar-inner {
        justify-content: center !important;
    }

    .top-bar-left {
        display: none !important;
    }

    .top-bar-right {
        width: 100%;
        justify-content: center !important;
    }
}

/* ============================================
   9. PÁGINAS DE CATEGORÍA - HEADER
   ============================================ */
@media (max-width: 768px) {
    .category-title,
    .shop-title,
    .woocommerce-products-header__title {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }

    .category-header,
    .shop-header {
        margin-bottom: 1rem !important;
    }

    /* Subcategorías en páginas padre */
    .subcategories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.6rem !important;
    }

    .subcategory-image {
        width: 60px !important;
        height: 60px !important;
    }

    .subcategory-info h3 {
        font-size: 0.78rem !important;
    }
}

@media (max-width: 480px) {
    .subcategories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   10. CARRITO Y CHECKOUT - MÓVIL
   ============================================ */
@media (max-width: 768px) {
    .woocommerce-cart-form {
        overflow-x: auto;
    }

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
    }

    .woocommerce-checkout .col2-set {
        gap: 1rem;
    }

    #place_order {
        font-size: 1rem;
    }
}

/* ============================================
   11. GENERAL - BOTONES Y ELEMENTOS DESBORDADOS
   ============================================ */
.btn,
.button,
input[type="submit"],
button {
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
}

/* Evitar overflow en container genérico */
.container {
    box-sizing: border-box;
}

/* Precios WC que no deben desbordar */
.price,
.woocommerce-Price-amount {
    word-break: normal;
    white-space: nowrap;
}

/* Tablas responsive */
@media (max-width: 768px) {
    table {
        max-width: 100%;
    }
}

/* ============================================
   12. FIX CATEGORÍAS HOME (categories-fix.css override)
   ============================================ */
@media (max-width: 992px) {
    .categories-grid-modern {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
}

@media (max-width: 600px) {
    .categories-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }
}

/* Category cards: texto siempre legible */
.category-card-content h3 {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ============================================
   13. FOOTER MÓVIL
   ============================================ */
@media (max-width: 768px) {
    .site-footer-modern,
    .site-footer {
        padding: 2rem 0 1.5rem !important;
    }

    .pre-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}