/*!
 * MOBILE PERFORMANCE CRITICAL CSS - XZONAS VALENCIA
 * Archivo consolidado para mejorar el timing de carga móvil
 * Incluye solo los estilos críticos para el primer renderizado
 * Versión optimizada para producción
 */

/* ========================================
   CRITICAL MOBILE STYLES - PRIMERA CARGA
   ======================================== */

@media (max-width: 992px) {
    /* Navbar móvil básico - CRÍTICO */
    .navbar-default {
        background: #000000 !important;
        border: none !important;
        min-height: 60px !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    /* Menú móvil overlay - CRÍTICO */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.8) !important;
        z-index: 99998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Menú móvil container - CRÍTICO */
    .mobile-menu-container {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 320px !important;
        height: 100vh !important;
        background: #1a1a1a !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        transition: right 0.3s ease !important;
    }

    .mobile-menu-container.active {
        right: 0 !important;
    }

    /* Control del body cuando menú abierto - CRÍTICO */
    body.menu-mobile-open {
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
    }

    /* Elementos internos del menú - CRÍTICO */
    .mobile-menu-container .menu-item {
        display: block !important;
        padding: 15px 20px !important;
        color: #ffffff !important;
        border-bottom: 1px solid #333 !important;
        text-decoration: none !important;
    }

    .mobile-menu-container .menu-item:hover {
        background: #333 !important;
    }

    /* Toggle button - CRÍTICO */
    .mobile-menu-toggle {
        display: block !important;
        position: relative !important;
        z-index: 100000 !important;
        background: none !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 18px !important;
        padding: 10px !important;
        cursor: pointer !important;
    }

        /* =========================
             GRID UNIFICADO ADAPTADO
             ========================= */
        #og-grid, .og-grid, .pinterest-grid {
                grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
                gap:14px !important;
                padding:10px 10px 60px !important;
        }
        /* Teléfonos muy pequeños */
        @media (max-width: 380px){
            #og-grid, .og-grid, .pinterest-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;gap:12px !important;}
        }
        /* Tarjetas más compactas en móvil */
        .pinterest-card {min-height:340px !important;box-shadow:0 2px 10px rgba(0,0,0,.25) !important;transition:box-shadow .25s ease,transform .25s ease !important;}
        .pinterest-card:hover {transform:none !important;box-shadow:0 2px 10px rgba(0,0,0,.25) !important;}
        .imagen-container {aspect-ratio:3/4 !important;}
        .menu-dots {width:40px !important;height:40px !important;font-size:17px !important;}
        /* Ajustes de tipografía dentro de la tarjeta */
        .nombre-anuncio {font-size:15px !important;}
        .ubicacion-info {font-size:11px !important;}
        .edad-anuncio {font-size:9px !important;}
        /* Desactivar transformaciones intensas para rendimiento */
        .pinterest-card:hover .imagen-anuncio {transform:none !important;}
        .pinterest-card:hover .imagen-container::before {opacity:0 !important;}
        /* Modal anuncio overlay adaptaciones ligeras cuando se abre en móvil */
        .modal-anuncio-overlay .modal-anuncio-surface {width:96% !important;max-width:540px !important;margin:10px auto !important;border-radius:22px !important;}
        .modal-anuncio-overlay .carrusel-controles button {padding:8px 14px !important;font-size:14px !important;}
        .modal-anuncio-overlay .carrusel-indicadores button {width:12px !important;height:12px !important;}
        /* Safe area iOS */
        body {padding-bottom: env(safe-area-inset-bottom);}
}

/* ========================================
   OPTIMIZACIONES DE RENDIMIENTO
   ======================================== */

/* Optimización de fuentes para carga rápida */
* {
    font-display: swap;
}