/* ============================================================
   Torotube Lazy Video Loader — CSS v2.0
   Confirmado para la estructura real de Torotube:
     .bx-video > .vdop (botones) + .frm > #player-torotube
   ============================================================ */

/* ── 1. POSICIONAMIENTO DE #player-torotube ─────────────────
   PROBLEMA 1 corregido:
   El .frm usa padding-top:56.55% para crear el ratio 16:9 y
   pone sus hijos directos (iframe, video) en position:absolute.
   Pero #player-torotube es un div intermedio con position:static,
   lo que hace que el cover no se posicione dentro del .frm.
   Solución: forzar #player-torotube a posición absoluta.
──────────────────────────────────────────────────────────── */
#player-torotube {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ── 2. COVER OVERLAY ───────────────────────────────────────
   Se posiciona como último hijo de .frm, cubriendo todo
   el área del reproductor con z-index alto.
──────────────────────────────────────────────────────────── */
.tllv-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000;
    cursor: pointer;
    overflow: hidden;
    z-index: 20; /* Por encima del reproductor (zi1 del .frm, zi3 del .vdop) */
}

.tllv-cover.tllv-mode-black {
    background-color: #000;
}

/* ── 3. ESTADO: CARGANDO ─────────────────────────────────── */
.tllv-cover.tllv-loading {
    background-image: none !important;
    background-color: #000 !important;
}

.tllv-cover.tllv-loading > *:not(.tllv-spinner) {
    opacity: 0 !important;
    visibility: hidden !important;
}

.tllv-cover.tllv-loading .tllv-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #000 !important;
}

/* ── 4. OVERLAY OSCURO ────────────────────────────────────── */
.tllv-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--tllv-overlay, rgba(0, 0, 0, 0.4));
    z-index: 1;
    transition: opacity 0.2s ease;
}

/* ── 5. SPINNER / MENSAJE DE CARGA ──────────────────────── */
@keyframes tllv-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.tllv-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--tllv-btn-color, #fff);
    white-space: nowrap;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* ── 6. BOTÓN DE PLAY ─────────────────────────────────────── */
.tllv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: transform 0.15s ease;
    opacity: 1;
}

.tllv-cover:hover .tllv-play {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Triángulo clásico */
.tllv-design-triangle {
    width: 80px;
    height: 54px;
    border: 3px solid var(--tllv-btn-color, #fff);
    border-radius: 10px;
    background: transparent;
}

.tllv-design-triangle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-left:   22px solid var(--tllv-btn-color, #fff);
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
}

.tllv-cover:hover .tllv-design-triangle {
    background: rgba(0, 0, 0, 0.3);
}

/* Círculo estilo YouTube */
.tllv-design-round {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tllv-btn-color, #fff);
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.tllv-design-round::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left:   22px solid #000;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
}

.tllv-cover:hover .tllv-design-round {
    box-shadow: 0 2px 22px rgba(255,255,255,0.8);
}

/* Moderno sólido */
.tllv-design-modern {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: var(--tllv-btn-color, #fff);
}

.tllv-design-modern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-left:   24px solid #111;
    border-top:    13px solid transparent;
    border-bottom: 13px solid transparent;
}

.tllv-cover:hover .tllv-design-modern {
    filter: brightness(1.12);
}

/* ── 7. BLOQUEO DE BOTONES DE OPCIÓN (.pl-tk) ───────────────
   PROBLEMA 2 corregido:
   Bloquear TODOS los botones de opción mientras el lazy load
   no ha sido activado. El usuario debe hacer clic en el play
   primero. Una vez activado (body.tllv-unlocked), se liberan.
──────────────────────────────────────────────────────────── */
body:not(.tllv-unlocked) .vdop .pl-tk {
    pointer-events: none !important;
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

body.tllv-unlocked .vdop .pl-tk {
    pointer-events: all !important;
    opacity: 1 !important;
    cursor: pointer !important;
    transition: opacity 0.25s ease;
}

/* ── 8. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .tllv-design-triangle { width: 62px; height: 44px; }
    .tllv-design-round    { width: 58px; height: 58px; }
    .tllv-design-modern   { width: 54px; height: 54px; }
    .tllv-spinner         { font-size: 0.9em; }
}