/* Estilos para el frontend */
.video-responsive-block {
    margin: 0 0 1rem;
}

.video-responsive-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-responsive {
    width: 100%;
    height: auto;
    display: block;
}

.video-responsive:focus {
    outline: 3px solid rgba(8, 112, 33, 0.5);
    outline-offset: 2px;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Estilos para diferentes tamaños */
.video-responsive-block.alignwide {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.video-responsive-block.alignfull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.video-responsive-block.alignfull .video-responsive {
    border-radius: 0;
}

/* Estilos de accesibilidad */
.video-responsive:focus-visible {
    outline: 3px solid #087021;
    outline-offset: 3px;
}

/* Mejoras para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .video-responsive {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .video-responsive:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
}

/* Optimizaciones de rendimiento */
.video-responsive {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fallback para navegadores que no soporten el elemento video */
.video-responsive-container .no-video-support {
    display: none;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    padding: 40px 20px;
    text-align: center;
    color: #666;
}

.no-video .video-responsive-container .no-video-support {
    display: block;
}

.no-video .video-responsive-container .video-responsive {
    display: none;
}

/* Transición suave entre cambios de video */
.video-responsive-container .video-responsive {
    transition: opacity 0.3s ease-in-out;
}

.video-responsive-container.switching .video-responsive {
    opacity: 0.7;
}

/* Mejoras para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .video-responsive {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
    .video-responsive {
        box-shadow: 0 2px 12px rgba(255,255,255,0.1);
    }
    
    .video-responsive:hover {
        box-shadow: 0 4px 20px rgba(255,255,255,0.15);
    }
    
    .video-responsive:focus {
        outline-color: rgba(8, 112, 33, 0.8);
    }
}