/* Variables para centralizar colores y facilitar mantenimiento */
:root {
    --primary-color: #dd3333; /* Color principal para botón de play, progreso, etc. */
    --text-color: #fff; /* Color de texto e íconos */
    --progress-bg: rgba(221, 51, 51, 0.5); /* Fondo de buffering */
    --progress-buffer: rgba(221, 51, 51, 0.7); /* Buffer de carga */
}

/* 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 y sus íconos */
.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: 1;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transición suave */
}

.video-js .vjs-icon-play:before,
.video-js .vjs-big-play-button:before {
    font-size: 50px;
    color: var(--text-color);
}

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

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

/* Barras de control y progreso */
.video-js .vjs-control-bar,
.video-js .vjs-control-bar2 {
    background-color: transparent;
    color: var(--text-color);
    font-size: 13px;
}

.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,
.video-js .vjs-slider,
.video-js .vjs-volume-level {
    border-radius: 10px;
}

.video-js .vjs-progress-holder {
    font-size: 1.7em;
}

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

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

.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;
}