/* Estilos para sistema de videos universal */

/* Clase para bloquear scroll cuando se reproduce video */
body.video-playing {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    /* Prevenir salto de scroll durante transición */
    scroll-behavior: auto !important;
}

/* Prevenir scroll suave durante cierre de video */
html.video-closing,
body.video-closing {
    scroll-behavior: auto !important;
    transition: none !important;
}

/* Clase temporal para prevenir transiciones durante cierre */
.video-transition-lock {
    transition: none !important;
    animation: none !important;
}

/* Mejoras para interacción táctil en móvil */
@media (max-width: 768px), (pointer: coarse) {
    [data-video-src] {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        pointer-events: auto !important; /* ASEGURAR que sea clickeable */
        position: relative !important;
        z-index: 10 !important;
    }
    
    [data-video-src]:active {
        opacity: 0.8 !important;
        transform: scale(0.98) !important;
        transition: all 0.1s ease !important;
    }
    
    .video-thumbnail-rect {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        pointer-events: auto !important; /* ASEGURAR que sea clickeable */
        z-index: 10 !important;
    }
    
    .video-play-btn-rect {
        pointer-events: none !important; /* El click lo maneja el contenedor */
    }
    
    .video-overlay-rect {
        pointer-events: none !important; /* El click pasa al contenedor */
    }
    
    .video-rect-image {
        pointer-events: none !important; /* El click pasa al contenedor */
    }
}

/* Estilos específicos para debug móvil */
.simple-mobile-player {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.simple-mobile-player video {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}



/* Overlay base para reproductores */
.universal-video-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Overlay móvil */
.universal-video-overlay.mobile {
    background: #000 !important;
    padding: 10px !important;
}

/* Overlay desktop */
.universal-video-overlay.desktop {
    background: rgba(0,0,0,0.9) !important;
    padding: 40px !important;
}

/* Videos dentro de overlays */
.universal-video-overlay video {
    /* Aceleración GPU */
    transform: translate3d(0,0,0) !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
    
    /* Configuración básica */
    background: #000 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Video móvil */
.universal-video-overlay.mobile video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Video desktop */
.universal-video-overlay.desktop video {
    width: 100% !important;
    height: 100% !important;
}

/* Botones de cierre */
.universal-video-close-btn {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #fff !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
    touch-action: manipulation !important;
}

.universal-video-close-btn:hover,
.universal-video-close-btn:focus {
    transform: scale(1.1) !important;
    background: rgba(255,255,255,1) !important;
}

.universal-video-close-btn:active {
    transform: scale(0.95) !important;
}

/* Optimizaciones para thumbnails de video */
.video-thumbnail-rect,
[data-video-src] {
    cursor: pointer !important;
    transform: translate3d(0,0,0) !important;
    will-change: auto !important;
    transition: transform 0.3s ease !important;
}

/* Hover effects para desktop */
@media (min-width: 769px) {
    .video-thumbnail-rect:hover,
    [data-video-src]:hover {
        transform: translate3d(0,0,0) scale(1.05) !important;
    }
}

/* Optimizaciones específicas para móviles */
@media (max-width: 768px) {
    /* Video de fondo optimizado para móviles */
    #video_background {
        transform: translate(-50%, -50%) !important;
        backface-visibility: hidden !important;
        will-change: auto !important;
        
        /* Configuraciones anti-reinicio */
        object-fit: cover !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100vw !important;
        height: 177.78vw !important;
        min-height: 100vh !important;
        min-width: 56.25vh !important;
    }
    
    /* Contenedor del video de fondo */
    #home {
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Thumbnails optimizados para móvil */
    .video-thumbnail-rect,
    [data-video-src] {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    .video-thumbnail-rect img {
        pointer-events: none !important;
        -webkit-user-drag: none !important;
    }
    
    /* Overlay móvil ajustado */
    .universal-video-overlay.mobile {
        padding: 0 !important;
    }
    
    .universal-video-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 28px !important;
    }
    
    /* Controles de video nativos optimizados */
    .universal-video-overlay video::-webkit-media-controls {
        display: flex !important;
        opacity: 1 !important;
    }
    
    .universal-video-overlay video::-webkit-media-controls-panel {
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Prevenir zoom en inputs (para evitar conflictos) */
    input, textarea, select {
        font-size: 16px !important;
    }
}

/* Optimizaciones específicas para desktop */
@media (min-width: 769px) {
    /* Contenedor de video desktop */
    .universal-video-overlay.desktop > div {
        position: relative !important;
        width: 90% !important;
        max-width: 1200px !important;
        height: 90% !important;
        max-height: 800px !important;
        background: #000 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }
    
    .universal-video-close-btn {
        top: 10px !important;
        right: 10px !important;
    }
}

/* Optimizaciones específicas para iOS */
@supports (-webkit-touch-callout: none) {
    .universal-video-overlay video {
        -webkit-playsinline: true !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    #video_background {
        -webkit-playsinline: true !important;
        -webkit-touch-callout: none !important;
    }
}

/* Optimizaciones para dispositivos con poca memoria */
@media (max-width: 480px) {
    .universal-video-overlay.mobile {
        padding: 5px !important;
    }
    
    .universal-video-close-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        top: 5px !important;
        right: 5px !important;
    }
}

/* Animaciones de entrada para reproductores */
.universal-video-overlay {
    animation: fadeIn 0.3s ease-out !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Optimizaciones de rendimiento globales */
/*
.video-thumbnail-rect *,
[data-video-src] * {
    pointer-events: none !important;
}

.video-thumbnail-rect,
[data-video-src] {
    pointer-events: auto !important;
}
*/

/* Deshabilitar fancybox en elementos con videos */
.fancybox-effects-d:has([data-video-src]),
.fancybox-effects-d[data-video-src] {
    pointer-events: none !important;
}

/* Re-habilitar solo los thumbnails de video */
[data-video-src] {
    pointer-events: auto !important;
}