/*
 * Ajustes generales para los reproductores de las páginas de materiales.
 * El selector #main-content evita modificar videos del Home,
 * landings independientes u otras secciones.
 */

#main-content {
    --video-accent: #2e5b93;
    --video-controls-bg: rgba(20, 31, 48, 0.90);
    --video-controls-text: #ffffff;
}

/*
 * Sustituye los colores internos de los temas cargados por Video.js.
 */
#main-content .vjs-theme-forest {
    --vjs-theme-forest--primary: var(--video-accent);
    --vjs-theme-forest--secondary: var(--video-controls-text);
}

#main-content .vjs-theme-city {
    --vjs-theme-city--primary: var(--video-accent);
    --vjs-theme-city--secondary: var(--video-controls-text);
}

#main-content .vjs-theme-fantasy {
    --vjs-theme-fantasy--primary: var(--video-accent);
    --vjs-theme-fantasy--secondary: var(--video-controls-text);
}

#main-content .vjs-theme-sea {
    --vjs-theme-sea--primary: var(--video-accent);
    --vjs-theme-sea--secondary: var(--video-controls-text);
}

/*
 * Fondo visible para la barra.
 * Es la corrección principal para videos de fondo blanco.
 */
#main-content .video-js .vjs-control-bar {
    background: var(--video-controls-bg) !important;
    color: var(--video-controls-text) !important;
    margin-bottom: 0 !important;
    padding-right: 0.75em;
    padding-left: 0.75em;
}

/*
 * Botones, tiempos e iconos.
 */
#main-content .video-js .vjs-control,
#main-content .video-js .vjs-button,
#main-content .video-js .vjs-time-control {
    color: var(--video-controls-text) !important;
}

#main-content .video-js .vjs-control:not(.vjs-disabled):hover {
    color: var(--video-controls-text) !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.70);
}

/*
 * Fondo de la barra de progreso.
 */
#main-content .video-js .vjs-slider,
#main-content .video-js .vjs-progress-holder {
    background-color: rgba(255, 255, 255, 0.34) !important;
}

/*
 * Parte del video ya cargada.
 */
#main-content .video-js .vjs-load-progress,
#main-content .video-js .vjs-load-progress div {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

/*
 * Parte del video reproducida y nivel del volumen.
 */
#main-content .video-js .vjs-play-progress,
#main-content .video-js .vjs-volume-level {
    background-color: var(--video-accent) !important;
}

#main-content .video-js .vjs-play-progress::before,
#main-content .video-js .vjs-volume-level::before {
    color: var(--video-accent) !important;
}

/*
 * Botón grande inicial.
 * También puede perderse sobre videos blancos.
 */
#main-content .video-js .vjs-big-play-button {
    background-color: rgba(20, 31, 48, 0.84) !important;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40);
}

/*
 * Accesibilidad al navegar con teclado.
 */
#main-content .video-js .vjs-control:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
}