/**
 * Canal Live Player — player.css
 *
 * Estrategia responsive:
 *   - El wrapper NO tiene height fijo → usa aspect-ratio: 16/9
 *   - El width y max-width vienen del PHP (inline style)
 *   - En desktop el player nunca supera el tamaño configurado
 *   - En móvil se achica proporcionalmente (siempre 16:9)
 */

/* ── Wrapper ─────────────────────────────────────────────────────── */
.clp-player-wrapper {
    position:      relative;
    /* aspect-ratio mantiene 16:9 sin importar el ancho */
    aspect-ratio:  16 / 9;
    background:    #000;
    border-radius: 6px;
    overflow:      hidden;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.4);
    margin:        1rem 0;
    /* width y max-width vienen del style inline generado por PHP */
}

/* ── Video.js ocupa el 100% del wrapper ──────────────────────────── */
/*
 * Con fill:true en el JS, Video.js ya aplica position:absolute
 * internamente. Lo reforzamos con !important para anular cualquier
 * estilo inline que Video.js pueda inyectar (ej: padding-top de fluid).
 */
.clp-player-wrapper .video-js {
    position:    absolute !important;
    inset:       0 !important;        /* top/right/bottom/left: 0 */
    width:       100% !important;
    height:      100% !important;
    padding-top: 0 !important;
}

.clp-player-wrapper .vjs-tech {
    position: absolute !important;
    inset:    0 !important;
    width:    100% !important;
    height:   100% !important;
}

/* ── Botón Play ──────────────────────────────────────────────────── */
.clp-player-wrapper .video-js .vjs-big-play-button {
    border-radius: 50%;
    width:         64px;
    height:        64px;
    line-height:   64px;
    background:    rgba(220, 38, 38, 0.85);
    border:        3px solid rgba(255, 255, 255, 0.8);
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    margin:        0;
    transition:    background 0.2s, transform 0.2s;
}

.clp-player-wrapper .video-js:hover .vjs-big-play-button {
    background: rgba(220, 38, 38, 1);
    transform:  translate(-50%, -50%) scale(1.08);
}

/* ── Barra de controles ──────────────────────────────────────────── */
.clp-player-wrapper .video-js .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

/* ── Contenedor anuncios IMA ─────────────────────────────────────── */
.clp-player-wrapper .ima-ad-container {
    position: absolute;
    inset:    0;
    z-index:  10;
}

/* ── Responsive: botón más pequeño en móvil ──────────────────────── */
@media (max-width: 480px) {
    .clp-player-wrapper .video-js .vjs-big-play-button {
        width:       48px;
        height:      48px;
        line-height: 48px;
    }
}