/* Variables para facilitar cambios de tema */
:root {
    --primary-color: #cc0000; /* Tono más oscuro para mejor contraste */
    --text-color: #fff;
    --progress-bg: rgba(204, 0, 0, 0.5);
    --progress-buffer: rgba(204, 0, 0, 0.7);
}

/* Menú y controles generales */
.video-js .vjs-menu-button-inline.vjs-slider-active,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline:hover,
.video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 10em;
}

.video-js .vjs-control {
    width: 3em;
}

.video-js .vjs-menu-button-inline:before {
    width: 1.5em;
}

.vjs-menu-button-inline .vjs-menu {
    left: 3em;
}

/* Ocultar elementos en estados específicos */
.video-js .vjs-controls-disabled .vjs-big-play-button,
.video-js.vjs-ended .vjs-loading-spinner,
.vjs-seeking .vjs-big-play-button {
    display: none;
}

/* Estados de reproducción y carga */
.video-js.vjs-paused .vjs-big-play-button,
.video-js.vjs-ended .vjs-big-play-button,
.vjs-waiting .vjs-big-play-button {
    display: block;
}

/* Botón de play centrado */
.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1em;
    margin-top: -1em;
    background-color: var(--primary-color);
    color: var(--text-color);
    font-size: 3.5em;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: 3px solid var(--primary-color);
    z-index: 10; /* Mayor z-index para evitar solapamiento */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efectos de interacción para el botón de play */
.video-js .vjs-big-play-button:hover,
.video-js .vjs-big-play-button:focus,
.video-js .vjs-big-play-button:active {
    background-color: #ff4444; /* Color más claro para hover */
    transform: scale(1.1);
}

/* Spinner de carga */
.video-js .vjs-loading-spinner {
    border-color: var(--primary-color);
}

/* Barras de control */
.video-js .vjs-control-bar,
.video-js .vjs-control-bar2 {
    background-color: transparent;
    color: var(--text-color);
    font-size: 0.8125em; /* Equivalente a 13px con base 16px */
}

/* Iconos para el botón de play */
.video-js .vjs-icon-play:before,
.video-js .vjs-big-play-button:before {
    font-size: 3em; /* Estandarizado a em para escalabilidad */
    color: var(--text-color);
}

/* Barra de progreso del video */
.video-js .vjs-progress-holder,
.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div {
    font-size: 1.7em;
    border-radius: 10px;
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background: var(--primary-color);
    transition: width 0.3s ease; /* Transición suave para cambios */
}

.video-js .vjs-load-progress {
    background: var(--progress-bg);
}

.video-js .vjs-load-progress div {
    background: var(--progress-buffer);
}

/* Información de progreso y tooltips */
.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after {
    padding: 0 0.4em 0.3em;
}

/* Media queries para responsividad */
@media (max-width: 600px) {
    .video-js .vjs-icon-play:before,
    .video-js .vjs-big-play-button:before {
        font-size: 2em; /* Tamaño reducido para móviles */
    }

    .video-js .vjs-big-play-button {
        height: 1.5em;
        width: 1.5em;
        line-height: 1.5em;
        margin-left: -0.75em;
        margin-top: -0.75em;
    }

    .video-js .vjs-progress-holder {
        font-size: 1.2em; /* Tamaño más pequeño para móviles */
    }
}