/* mobile-responsive.css - Estilos unificados para móvil */

/* Solo aplicar en dispositivos móviles */
@media (max-width: 768px), (pointer: coarse) {
    /* Ajustes generales */
    body {
        overflow-x: hidden;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Asegurar que la app esté visible inmediatamente */
    pc-app {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ocultar contenedores originales cuando se usa la versión móvil */
    #buttonContainer:not(.mobile-optimized), 
    .auto-tour-container:not(.mobile-optimized), 
    .poi-menu-container:not(.mobile-optimized),
    .locations-menu:not(.mobile-optimized),
    .hdri-selector-btn:not(.mobile-optimized),
    #popup-control-button:not(.mobile-optimized),
    #manual-tutorial-start:not(.mobile-optimized),
    #ec-control-button:not(.mobile-optimized) {
        display: none !important;
    }
    
    /* Estilo general para todos los botones móviles */
    .mobile-button {
        min-width: 46px !important;
        min-height: 46px !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background-color: rgba(0, 0, 0, 0.75) !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
        margin: 5px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.2s ease, background-color 0.2s ease !important;
        position: relative !important;
        color: white !important;
        -webkit-appearance: none;
        cursor: pointer;
    }
    
    /* SVG e iconos dentro de botones */
    .mobile-button svg,
    .mobile-menu-button svg {
        width: 26px !important;
        height: 26px !important;
        fill: currentColor !important;
    }
    
    /* Estado activo para feedback táctil */
    .mobile-button:active,
    .mobile-menu-button:active,
    .touch-active {
        transform: scale(0.95) !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
        border-color: rgba(255, 255, 255, 1) !important;
    }
    
    /* Menú flotante para móvil - siempre visible */
    .mobile-floating-menu {
        position: fixed !important;
        bottom: 85px !important;
        right: 20px !important;
        z-index: 9980 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        pointer-events: none !important;
        opacity: 1 !important; /* Siempre visible */
        visibility: visible !important; /* Siempre visible */
    }
    
    /* Categorías desplegables */
    .mobile-menu-category {
        background-color: rgba(0,0,0,0.85) !important; /* Más oscuro para mejor contraste */
        padding: 10px !important;
        border-radius: 18px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        margin-bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        opacity: 0 !important;
        transform: translateY(10px) scale(0.95) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
        pointer-events: none !important;
        max-width: 300px !important;
    }
    
    /* Categoría visible */
    .mobile-menu-category.open {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
        display: flex !important; /* Asegurar que sea visible */
    }
    
    /* Título de categoría */
    .mobile-menu-category-title {
        color: white !important;
        font-size: 12px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        opacity: 0.85 !important; /* Más visible */
        font-family: Arial, sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }
    
    /* Fila de botones */
    .mobile-buttons-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Botón principal del menú desplegable - más grande y visible */
    .mobile-menu-button {
        width: 60px !important;
        height: 60px !important;
        background-color: #2196F3 !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; /* Sombra más visible */
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: auto !important;
        z-index: 9981 !important;
        transition: transform 0.3s ease, background-color 0.3s ease !important;
        border: 3px solid rgba(255, 255, 255, 0.9) !important; /* Borde más visible */
        color: white !important;
        opacity: 1 !important; /* Siempre visible */
        visibility: visible !important; /* Siempre visible */
    }
    
    /* Estado abierto del botón principal */
    .mobile-menu-button.open {
        transform: rotate(45deg) !important;
        background-color: #f44336 !important;
    }
    
    /* Botones por tipo - colores más vibrantes */
    .mobile-button.navigation {
        background-color: #3F51B5 !important;
    }
    
    .mobile-button.poi {
        background-color: #FF5722 !important;
    }
    
    .mobile-button.tour {
        background-color: #4CAF50 !important;
    }
    
    .mobile-button.control {
        background-color: #FF9800 !important;
    }
    
    .mobile-button.misc {
        background-color: #9C27B0 !important;
    }
    
    /* Botón de inicio */
    .mobile-button.home {
        background-color: #F44336 !important;
    }
    
    /* Botón de chat */
    #chatbot-toggle {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        bottom: 20px !important;
        right: 20px !important;
        background-color: #2563eb !important;
        border: none !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Chatbot contenido */
    .chatbot-container {
        width: 90% !important;
        height: 70% !important;
        max-height: 500px !important;
        bottom: 90px !important;
        right: 15px !important;
        z-index: 9998 !important;
    }
    
    /* Badge con texto para botones */
    .mobile-button-badge {
        position: absolute !important;
        bottom: -5px !important;
        font-size: 10px !important;
        background-color: rgba(0,0,0,0.7) !important; /* Más visible */
        padding: 2px 6px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        font-family: Arial, sans-serif !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    }
    
    /* Ajustes para menús desplegables */
    #tourSelectMenu, 
    #poiMenu, 
    .locations-menu-content, 
    .hdri-menu, 
    .ec-controls,
    #enhanced-control-panel,
    #dampingPanel,
    .poi-menu,
    .damping-panel {
        position: fixed !important;
        bottom: 180px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 350px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 9990 !important;
        border-radius: 15px !important;
        box-shadow: 0 5px 25px rgba(0,0,0,0.4) !important;
        background-color: rgba(0,0,0,0.85) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Optimizaciones para carga */
    #loadingWrap {
        width: 85% !important;
        max-width: 320px !important;
        z-index: 10000 !important;
    }
    
    #loadingText {
        font-size: 16px !important;
        color: white !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    }
    
    #loadingBar {
        height: 8px !important;
        border-radius: 4px !important;
    }
    
    /* Soporte para orientación horizontal */
    @media (orientation: landscape) {
        .mobile-floating-menu {
            right: 25px !important;
            bottom: 25px !important;
        }
        
        .mobile-menu-category {
            max-width: 400px !important;
        }
        
        .mobile-buttons-row {
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            padding-bottom: 5px !important;
            justify-content: flex-start !important;
        }
        
        #tourSelectMenu, 
        #poiMenu, 
        .locations-menu-content, 
        .hdri-menu, 
        .ec-controls,
        #enhanced-control-panel,
        #dampingPanel,
        .poi-menu,
        .damping-panel {
            bottom: 150px !important;
            left: auto !important;
            right: 20px !important;
            transform: none !important;
        }
    }
    
    /* Soporte para notch y áreas seguras */
    @supports (padding: env(safe-area-inset-bottom)) {
        .mobile-floating-menu {
            padding-bottom: env(safe-area-inset-bottom) !important;
            bottom: calc(85px + env(safe-area-inset-bottom)) !important;
        }
        
        #chatbot-toggle {
            padding-bottom: env(safe-area-inset-bottom) !important;
            bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
        
        #tourSelectMenu, 
        #poiMenu, 
        .locations-menu-content, 
        .hdri-menu, 
        .ec-controls,
        #enhanced-control-panel,
        #dampingPanel,
        .poi-menu,
        .damping-panel {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
    
    /* Efectos visuales para mejor feedback */
    .mobile-button:active::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
        pointer-events: none;
        animation: pulse-out 0.3s ease-out;
    }
    
    @keyframes pulse-out {
        0% { transform: scale(0.5); opacity: 0.7; }
        100% { transform: scale(1.2); opacity: 0; }
    }
    
    /* Eliminar scroll y bounce en iOS */
    html, body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

/* Optimizaciones específicas para dispositivos muy pequeños */
@media (max-width: 375px) {
    .mobile-button {
        width: 42px !important;
        height: 42px !important;
    }
    
    .mobile-menu-button {
        width: 55px !important;
        height: 55px !important;
    }
    
    .mobile-button svg, 
    .mobile-menu-button svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    #chatbot-toggle {
        width: 55px !important;
        height: 55px !important;
    }
}

/* Complemento para compatibilidad con iPhone X+ */
@media (max-width: 768px) and (min-height: 800px) {
    .mobile-floating-menu {
        bottom: 100px !important;
    }

    @supports (padding: env(safe-area-inset-bottom)) {
        .mobile-floating-menu {
            bottom: calc(100px + env(safe-area-inset-bottom)) !important;
        }
    }
}