/* SitioDev LearnPress YouTube Player v1.6 */
.sd-lpyt-player{
    --sd-lpyt-accent:#2F6FED;
    --sd-lpyt-bg:#090b10;
    position:relative;
    width:100%;
    max-width:100%;
    background:var(--sd-lpyt-bg);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(0,0,0,.16);
    isolation:isolate;
    line-height:1;
}

.sd-lpyt-stage{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9;
    background:#000;
    overflow:hidden;
}

/* Fallback para navegadores/temas que interfieren con aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
    .sd-lpyt-stage{height:0 !important;padding-top:56.25% !important;}
}

.sd-lpyt-stage > iframe.sd-lpyt-iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-width:none !important;
    border:0 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:1 !important;
    pointer-events:none !important;
}

.sd-lpyt-poster{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:linear-gradient(135deg,#172033,#0b0d12) !important;
    cursor:pointer;
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:3;
    color:#fff;
    appearance:none;
}

.sd-lpyt-poster-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    z-index:0;
}

.sd-lpyt-poster-overlay,
.sd-lpyt-poster::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 42%,rgba(0,0,0,.52));
    pointer-events:none;
}

.sd-lpyt-poster.is-fallback::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 50% 46%,rgba(47,111,237,.28),transparent 33%),
        linear-gradient(135deg,#172033,#0b0d12 72%);
}
.sd-lpyt-poster.is-fallback .sd-lpyt-poster-image{display:none;}

.sd-lpyt-bigplay{
    position:relative;
    z-index:2;
    width:70px;
    height:70px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--sd-lpyt-accent);
    box-shadow:0 14px 34px rgba(0,0,0,.34);
    transition:transform .18s ease, box-shadow .18s ease;
}
.sd-lpyt-poster:hover .sd-lpyt-bigplay{transform:scale(1.05);box-shadow:0 16px 38px rgba(0,0,0,.42);}
.sd-lpyt-bigplay svg{width:29px;height:29px;fill:#fff;margin-left:3px;}

.sd-lpyt-center-action{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.9);
    width:68px;
    height:68px;
    border-radius:50%;
    background:rgba(10,12,16,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:grid;
    place-items:center;
    opacity:0;
    pointer-events:none;
    z-index:4;
}
.sd-lpyt-center-action svg{width:27px;height:27px;fill:#fff;}
.sd-lpyt-center-action.is-visible{animation:sdLpytFlash .36s ease;}
@keyframes sdLpytFlash{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.84)}
    25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}
}

.sd-lpyt-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:6;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:9px;
    min-height:62px;
    padding:12px 13px 10px;
    background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.68) 62%,rgba(0,0,0,0));
    color:#fff;
    user-select:none;
    transition:opacity .22s ease, transform .22s ease;
}

.sd-lpyt-btn{
    appearance:none !important;
    border:1px solid rgba(255,255,255,.08) !important;
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:11px !important;
    display:grid !important;
    place-items:center !important;
    cursor:pointer;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
    transition:background .16s ease, transform .16s ease;
    flex:0 0 auto;
}
.sd-lpyt-btn:hover,.sd-lpyt-btn:focus-visible{background:rgba(255,255,255,.18) !important;outline:none;transform:translateY(-1px);}
.sd-lpyt-btn svg{width:18px;height:18px;fill:currentColor;}

.sd-lpyt-progress,
.sd-lpyt-volume{
    appearance:auto;
    accent-color:var(--sd-lpyt-accent);
    cursor:pointer;
    margin:0 !important;
}
.sd-lpyt-progress{flex:1 1 auto;width:auto;min-width:80px;}
.sd-lpyt-volume{flex:0 0 88px;width:88px;}

.sd-lpyt-time{
    flex:0 0 auto;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
    opacity:.92;
    font-variant-numeric:tabular-nums;
    text-align:center;
}

.sd-lpyt-speed{
    flex:0 0 auto;
    appearance:auto !important;
    width:auto !important;
    min-width:58px !important;
    height:38px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:10px !important;
    background:#171a20 !important;
    color:#fff !important;
    padding:0 7px !important;
    margin:0 !important;
    font-size:12px !important;
    line-height:38px !important;
    cursor:pointer;
    box-shadow:none !important;
}
.sd-lpyt-speed option{background:#171a20;color:#fff;}

.sd-lpyt-loading{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:5;
    pointer-events:none;
}
.sd-lpyt-player.is-loading .sd-lpyt-loading{display:flex;}
.sd-lpyt-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.24);border-top-color:#fff;border-radius:50%;animation:sdLpytSpin .8s linear infinite;}
@keyframes sdLpytSpin{to{transform:rotate(360deg)}}

.sd-lpyt-player.is-ready .sd-lpyt-poster{display:none !important;}
.sd-lpyt-player.sd-lpyt-controls-hidden .sd-lpyt-controls{opacity:0;transform:translateY(8px);pointer-events:none;}

.sd-lpyt-player:fullscreen{
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    border-radius:0 !important;
    background:#000;
}
.sd-lpyt-player:fullscreen .sd-lpyt-stage{width:100% !important;height:100% !important;aspect-ratio:auto !important;padding:0 !important;}
.sd-lpyt-player:fullscreen .sd-lpyt-controls{padding:15px 18px 14px;gap:11px;}

/* Tablet y móvil */
@media (max-width: 768px){
    .sd-lpyt-player{border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.14);}
    .sd-lpyt-stage{display:block !important;width:100% !important;aspect-ratio:16 / 9 !important;}
    .sd-lpyt-controls{
        gap:6px;
        min-height:52px;
        padding:8px 8px 7px;
    }
    .sd-lpyt-btn{width:34px !important;height:34px !important;min-width:34px !important;min-height:34px !important;border-radius:9px !important;}
    .sd-lpyt-btn svg{width:16px;height:16px;}
    .sd-lpyt-time{font-size:10px;}
    .sd-lpyt-progress{min-width:44px;}
    .sd-lpyt-volume{display:none !important;}
    .sd-lpyt-speed{display:block !important;min-width:48px !important;width:48px !important;height:34px !important;padding:0 3px !important;font-size:11px !important;line-height:34px !important;}
    .sd-lpyt-bigplay{width:58px;height:58px;}
    .sd-lpyt-bigplay svg{width:24px;height:24px;}
    .sd-lpyt-center-action{width:56px;height:56px;}
    .sd-lpyt-center-action svg{width:22px;height:22px;}
}

@media (max-width: 430px){
    .sd-lpyt-controls{
        gap:5px;
        padding:7px 6px 6px;
    }
    .sd-lpyt-btn{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;}
    .sd-lpyt-time{font-size:9px;}
    .sd-lpyt-speed{width:44px !important;min-width:44px !important;font-size:10px !important;}
}