/* Rediseño "inteligente" del reproductor Video.js */
.player-wrapper {
    width: 100%;
    max-width: 1000px;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    margin-bottom: 2.5rem;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.video-js {
    width: 100%;
    height: 560px; 
    font-family: 'Outfit', sans-serif;
}

@media (max-width: 1000px) {
    .video-js {
        height: 56.25vw;
    }
}

/* Modificar colores del tema por defecto de Video.js */
.video-js .vjs-big-play-button {
    background-color: rgba(247, 146, 40, 0.8) !important; /* Rojo principal */
    border: 2px solid white !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    line-height: 76px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease !important;
}

.video-js:hover .vjs-big-play-button {
    background-color: #f79228 !important;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Barra de controles */
.video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px); /* Efecto cristalino solo en los controles */
    height: 3em !important;
    display: flex;
    visibility: visible;
    opacity: 0;
    transition: visibility 0.1s, opacity 0.3s ease;
}

.video-js.vjs-has-started.vjs-user-active .vjs-control-bar {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* Colores de la barra de progreso */
.video-js .vjs-play-progress {
    background-color: #f79228 !important;
}

.video-js .vjs-slider {
    background-color: rgba(255,255,255,0.2) !important;
}

.video-js .vjs-load-progress {
    background: rgba(255,255,255,0.4) !important;
}

.video-js .vjs-load-progress div {
    background: rgba(255,255,255,0.2) !important;
}

/* Iconos de control más definidos */
.video-js .vjs-icon-placeholder:before {
    color: white;
}