/* ========================================
   ESTILOS MÓVIL - ESTILO APP v3
   Categorías scroll horizontal, cards grandes
   ======================================== */

/* ===== CATEGORÍAS GRID - DESKTOP ===== */
.categories-grid-desktop {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

/* Ocultar scroll en desktop */
.categories-scroll {
    display: none;
}

/* ===== ESTILOS DESKTOP - ASEGURAR CENTRADO ===== */
@media screen and (min-width: 769px) {
    /* Contenedor principal centrado */
    .min-h-screen {
        width: auto;
        max-width: none;
        margin: 0 auto;
    }
    
    .max-w-7xl {
        max-width: 80rem; /* 1280px */
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* ===== FOOTER - ASEGURAR VISIBILIDAD EN DESKTOP ===== */
@media screen and (min-width: 769px) {
    /* Footer desktop visible */
    .app-footer {
        display: block !important;
    }
    
    /* Grid del footer desktop */
    .app-footer > div > div.hidden {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Footer desktop: listas horizontales normales */
    .app-footer ul {
        display: block !important;
    }
    .app-footer ul li {
        display: list-item !important;
    }
    .app-footer ul li a {
        display: inline !important;
    }
    
    /* Mobile footer oculto en desktop */
    .app-footer > div > div.md\:hidden {
        display: none !important;
    }
}

/* ===== PREVENIR OVERFLOW Y ZOOM ACCIDENTAL ===== */
@media screen and (max-width: 768px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        width: 100% !important;
    }
    
    * {
        box-sizing: border-box !important;
    }
    
    /* Contenedor principal sin overflow - MÚLTIPLES SELECTORES */
    .main-content,
    main,
    #app,
    .min-h-screen,
    [class*="min-h-screen"],
    .bg-gray-100,
    .max-w-7xl {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Forzar ancho máximo en divs directos del body */
    body > div,
    body > main,
    body > section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Ocultar grid desktop en móvil */
    .categories-grid-desktop {
        display: none !important;
    }
}

/* ===== CATEGORÍAS SCROLL - SOLO MÓVIL ===== */
@media screen and (max-width: 767px) {
    .categories-scroll {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        padding: 12px 0 24px 0;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .categories-scroll::-webkit-scrollbar { height: 6px; }
    .categories-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .categories-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

    .category-card-mobile {
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: start;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
        text-decoration: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }
    .category-card-mobile:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    }

    .category-image-mobile {
        width: 100%;
        height: 220px;
        overflow: hidden;
        background: #f3f4f6;
    }
    .category-image-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .category-icon-mobile {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f97316, #fb923c);
    }
    .category-icon-mobile i {
        font-size: 80px;
        color: white;
    }

    .category-name-mobile {
        padding: 20px;
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        text-align: center;
        line-height: 1.3;
    }
}

@media screen and (max-width: 768px) {
    /* ===== RESET FORZADO DE TAILWIND ===== */
    /* Sobrescribir h-40 de Tailwind */
    [class*="h-40"],
    .h-40,
    a.block.h-40,
    .product-card a.block.h-40,
    .product-card > a.block {
        height: auto !important;
        min-height: 220px !important;
    }
    
    /* Sobrescribir text-sm de Tailwind */
    .product-card [class*="text-sm"],
    .product-card .text-sm,
    .product-card h3.text-sm,
    .product-card h3[class*="text-sm"],
    .product-card h3.font-semibold {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    
    /* Sobrescribir line-clamp-2 */
    .product-card [class*="line-clamp"],
    .product-card .line-clamp-2 {
        -webkit-line-clamp: 3 !important;
    }
    
    /* ===== NO FORZAR 1 COLUMNA (quitado para permitir scroll) ===== */
    
    /* ===== BASE ===== */
    body { 
        padding-bottom: 90px !important; 
    }
    
    /* ===== BOTTOM NAV ESTILO APP ===== */
    .mobile-bottom-nav { 
        display: flex !important; 
        height: 80px !important;
        padding: 14px 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #e5e7eb !important;
    }
    .mobile-bottom-nav i { 
        font-size: 30px !important; 
    }
    .mobile-bottom-nav a { 
        font-size: 14px !important; 
        font-weight: 600 !important; 
    }
    .mobile-bottom-nav span {
        font-size: 12px !important;
    }
    
    /* ===== HERO BANNER ===== */
    .hero-slider,
    .hero-slide,
    .hero-slide img { 
        height: 240px !important; 
        min-height: 240px !important;
    }
    .hero-content { 
        left: 16px !important; 
        right: 16px !important; 
    }
    .hero-content h2 { 
        font-size: 26px !important; 
        line-height: 1.3 !important; 
    }
    .hero-content p { 
        font-size: 16px !important; 
    }
    
    /* ===== STATS BAR ===== */
    .stats-bar { 
        padding: 20px 0 !important; 
    }
    .stat-number { 
        font-size: 34px !important; 
        font-weight: 800 !important;
    }
    .stat-label { 
        font-size: 15px !important; 
    }
    
    /* ===== SECTION HEADERS ===== */
    .section-header { 
        margin-bottom: 24px !important; 
        padding-bottom: 16px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .section-title { 
        font-size: 26px !important; 
        line-height: 1.3 !important;
    }
    .section-title i { 
        font-size: 22px !important; 
    }
    .see-all-link { 
        font-size: 16px !important; 
        padding: 10px 18px !important;
        background: #fff7ed !important;
        border-radius: 25px !important;
    }
    
    /* ===== BUSCADOR ESTILO APP ===== */
    .search-bar,
    .search-container { 
        border-radius: 20px !important; 
        padding: 6px !important;
    }
    .search-input { 
        font-size: 18px !important; 
        padding: 18px 22px !important;
    }
    .search-btn { 
        padding: 18px 32px !important; 
        font-size: 16px !important;
        border-radius: 16px !important;
    }
    
    /* ===== FILTER PILLS ===== */
    .filter-pills { 
        gap: 12px !important; 
        margin-top: 24px !important;
        padding: 0 8px !important;
    }
    .filter-pill { 
        padding: 14px 24px !important; 
        font-size: 15px !important;
        border-radius: 30px !important;
    }
    
    /* ===== PRODUCT CARDS EN SCROLL - ESTILO APP FULL ===== */
    .products-scroll { 
        gap: 16px !important; 
        padding: 12px 0 24px 0 !important;
        margin: 0 -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .products-scroll .product-card { 
        min-width: 92vw !important; 
        max-width: 92vw !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }
    .products-scroll .product-card a.block,
    .products-scroll .product-card > a {
        height: 280px !important;
        min-height: 280px !important;
    }
    .products-scroll .product-card img {
        height: 280px !important;
        min-height: 280px !important;
        object-fit: cover !important;
    }
    
    /* ===== PRODUCT CARDS EN GRID - 1 COLUMNA FULL WIDTH ===== */
    .grid.grid-cols-2,
    .grid[class*="grid-cols-2"],
    [class*="grid-cols-2"]:not(.stats-bar *):not(.grid-cols-3) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .grid.grid-cols-2 .product-card,
    [class*="grid-cols-2"] .product-card {
        border-radius: 24px !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    .grid.grid-cols-2 .product-card a.block,
    .grid.grid-cols-2 .product-card > a,
    [class*="grid-cols-2"] .product-card a.block,
    [class*="grid-cols-2"] .product-card > a {
        height: 260px !important;
        min-height: 260px !important;
    }
    .grid.grid-cols-2 .product-card img,
    [class*="grid-cols-2"] .product-card img {
        height: 260px !important;
        min-height: 260px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    /* ===== TEXTOS EN PRODUCT CARDS ===== */
    .product-card h3,
    .product-card h3.font-semibold,
    .product-card [class*="font-semibold"] { 
        font-size: 20px !important; 
        line-height: 1.4 !important;
        margin-bottom: 14px !important;
    }
    .product-card .p-3,
    .product-card > div.p-3,
    .product-card div[class*="p-3"] {
        padding: 20px !important;
    }
    .price-current,
    .product-card .price-current { 
        font-size: 28px !important; 
        font-weight: 800 !important;
    }
    .price-original,
    .product-card .price-original { 
        font-size: 18px !important; 
    }
    .rating-stars { 
        font-size: 16px !important; 
    }
    
    /* ===== BADGES ===== */
    .discount-badge,
    .new-badge { 
        font-size: 15px !important; 
        padding: 10px 16px !important;
        border-radius: 12px !important;
    }
    .free-shipping-badge { 
        font-size: 15px !important; 
        padding: 10px 16px !important;
        margin-top: 14px !important;
    }
    .sold-badge { 
        font-size: 15px !important; 
        margin-top: 12px !important;
    }
    
    /* ===== FLASH TIMER ===== */
    .flash-timer { 
        font-size: 20px !important; 
        padding: 12px 24px !important;
    }
    .flash-timer span { 
        padding: 8px 14px !important; 
    }
    
    /* ===== PRODUCTOS GRID - Cards grandes en móvil ===== */
    /* Solo afecta a grids que contengan .product-card */
    .grid.grid-cols-2 .product-card,
    [class*="grid-cols-2"] .product-card,
    .grid[class*="grid-cols-2"] .product-card {
        border-radius: 24px !important;
        overflow: hidden !important;
    }
    
    /* ===== CTA REGISTRO ===== */
    section.bg-gradient-to-r,
    section[class*="bg-gradient-to-r"] {
        padding: 36px 24px !important;
        border-radius: 24px !important;
        margin: 0 -8px !important;
    }
    section.bg-gradient-to-r h2,
    section[class*="bg-gradient-to-r"] h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    section.bg-gradient-to-r p,
    section[class*="bg-gradient-to-r"] p {
        font-size: 17px !important;
    }
    section.bg-gradient-to-r a,
    section[class*="bg-gradient-to-r"] a {
        padding: 18px 32px !important;
        font-size: 17px !important;
        border-radius: 16px !important;
    }
    
    /* ===== ESPACIADO GENERAL ===== */
    .max-w-7xl { 
        padding-left: 16px !important; 
        padding-right: 16px !important; 
    }
    section.mb-10,
    section[class*="mb-10"] { 
        margin-bottom: 36px !important; 
    }
    .py-6,
    [class*="py-6"] { 
        padding-top: 24px !important; 
        padding-bottom: 24px !important; 
    }
    .gap-4,
    [class*="gap-4"] { 
        gap: 16px !important; 
    }
    
    /* ===== FOOTER ESTILO APP ===== */
    .app-footer {
        margin-bottom: 80px !important;
    }
    .footer-app-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 14px 8px !important;
        background: rgba(255,255,255,0.05) !important;
        border-radius: 12px !important;
        color: #9ca3af !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }
    .footer-app-link:hover {
        background: rgba(255,255,255,0.1) !important;
        color: white !important;
    }
    .footer-app-link i {
        font-size: 20px !important;
        color: #f97316 !important;
    }
    .footer-app-link span {
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    
    /* ===== MANTENER STATS BAR EN 3 COLUMNAS ===== */
    .stats-bar .grid.grid-cols-3,
    .stats-bar [class*="grid-cols-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===== PANTALLAS MUY PEQUEÑAS ===== */
@media screen and (max-width: 375px) {
    .products-scroll .product-card { 
        min-width: 95vw !important; 
        max-width: 95vw !important;
    }
    .section-title { 
        font-size: 24px !important; 
    }
    .price-current,
    .product-card .price-current { 
        font-size: 26px !important; 
    }
    .product-card h3 { 
        font-size: 18px !important; 
    }
    .stat-number {
        font-size: 30px !important;
    }
    
    /* Stats bar siempre 3 columnas */
    .stats-bar .grid.grid-cols-3,
    .stats-bar [class*="grid-cols-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}