/*
 * FVB SHOWCASE · PANEL MÓVIL AJUSTADO A LA TARJETA · V2.1.8
 */

.video-card .thumb{
    cursor:pointer;
}

.video-card .thumb:focus-visible{
    outline:3px solid #00d9e8!important;
    outline-offset:-3px!important;
}

@media(max-width:760px){
    .video-card{
        position:relative!important;
        overflow:visible!important;
    }

    .video-card .mobile-thumb-actions{
        z-index:32!important;
        display:grid!important;
        place-items:center!important;
    }

    .video-card .mobile-thumb-actions span{
        display:block!important;
        transform:translateY(-1px)!important;
        font-family:"Poppins",Arial,sans-serif!important;
        font-size:34px!important;
        font-weight:300!important;
        line-height:1!important;
    }

    .video-card .mobile-card-actions:not([open]){
        position:absolute!important;
        width:1px!important;
        height:1px!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        opacity:0!important;
        pointer-events:none!important;
        clip-path:inset(50%)!important;
    }

    /* Ajustado exactamente al área de la imagen/thumbnail. */
    .video-card .mobile-card-actions[open]{
        position:absolute!important;
        z-index:70!important;
        top:var(--mobile-panel-top,0)!important;
        left:0!important;
        right:0!important;
        bottom:auto!important;
        width:100%!important;
        height:var(--mobile-panel-height,100%)!important;
        min-height:0!important;
        display:grid!important;
        grid-template-rows:auto auto auto!important;
        align-content:center!important;
        justify-content:stretch!important;
        gap:4px!important;
        margin:0!important;
        padding:8px 8px 8px!important;
        overflow:hidden!important;
        border:0!important;
        background:rgba(3,7,9,.56)!important;
        -webkit-backdrop-filter:blur(10px) saturate(.88)!important;
        backdrop-filter:blur(10px) saturate(.88)!important;
        box-shadow:none!important;
        color:#fff!important;
    }

    /* Botón cerrar: icono X real, grande y fácil de pulsar. */
    .video-card .mobile-card-actions[open] > summary.mobile-actions-close{
        position:absolute!important;
        z-index:20!important;
        top:5px!important;
        right:5px!important;
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
        min-height:34px!important;
        display:grid!important;
        place-items:center!important;
        margin:0!important;
        padding:0!important;
        overflow:visible!important;
        border:0!important;
        outline:0!important;
        background:transparent!important;
        color:#fff!important;
        cursor:pointer!important;
        list-style:none!important;
        -webkit-tap-highlight-color:transparent!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close::-webkit-details-marker{
        display:none!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close b{
        position:relative!important;
        width:24px!important;
        height:24px!important;
        display:block!important;
        margin:0!important;
        padding:0!important;
        font-size:0!important;
        line-height:0!important;
        color:transparent!important;
        background:transparent!important;
        border:0!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close b::before,
    .video-card .mobile-card-actions[open] > summary.mobile-actions-close b::after{
        content:""!important;
        position:absolute!important;
        top:11px!important;
        left:2px!important;
        width:20px!important;
        height:2.5px!important;
        border-radius:2px!important;
        background:#fff!important;
        display:block!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close b::before{
        transform:rotate(45deg)!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close b::after{
        transform:rotate(-45deg)!important;
    }

    /* Acciones superiores, grandes, sin borde, usando casi todo el ancho útil. */
    .video-card .mobile-card-actions[open] .mobile-action-grid{
        display:grid!important;
        grid-template-columns:repeat(3,1fr)!important;
        gap:2px!important;
        width:100%!important;
        margin:0!important;
        padding:0 28px 0 0!important; /* reserva solo la esquina de cierre */
        align-items:center!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid > button,
    .video-card .mobile-card-actions[open] .mobile-action-grid > a,
    .video-card .mobile-card-actions[open] .mobile-action-grid > .mobile-action-disabled{
        min-width:0!important;
        min-height:66px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:6px!important;
        margin:0!important;
        padding:2px 1px!important;
        border:0!important;
        outline:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#fff!important;
        text-align:center!important;
        text-decoration:none!important;
        font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif!important;
        font-size:14px!important;
        font-weight:800!important;
        line-height:1!important;
        letter-spacing:.02em!important;
        text-transform:uppercase!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid > button:hover,
    .video-card .mobile-card-actions[open] .mobile-action-grid > a:hover,
    .video-card .mobile-card-actions[open] .mobile-action-grid > button:focus-visible,
    .video-card .mobile-card-actions[open] .mobile-action-grid > a:focus-visible{
        border:0!important;
        outline:0!important;
        background:rgba(0,217,232,.08)!important;
        box-shadow:none!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid span{
        font-family:"Poppins",Arial,sans-serif!important;
        font-size:30px!important;
        line-height:1!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid .artist-person-icon{
        position:relative!important;
        width:28px!important;
        height:28px!important;
        display:block!important;
        flex:0 0 28px!important;
        font-size:0!important;
        line-height:0!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid .artist-person-icon::before{
        content:""!important;
        position:absolute!important;
        top:1px!important;
        left:9px!important;
        width:10px!important;
        height:10px!important;
        border-radius:50%!important;
        background:#00d9e8!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid .artist-person-icon::after{
        content:""!important;
        position:absolute!important;
        left:4px!important;
        bottom:1px!important;
        width:20px!important;
        height:13px!important;
        border-radius:12px 12px 4px 4px!important;
        background:#00d9e8!important;
    }

    /* Calificar: centrado real y sin huecos innecesarios. */
    .video-card .mobile-card-actions[open] .mobile-certifications{
        display:grid!important;
        grid-template-rows:auto auto!important;
        width:100%!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        gap:2px!important;
        align-content:start!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications-title{
        display:block!important;
        width:100%!important;
        margin:0!important;
        padding:0!important;
        color:#00d9e8!important;
        font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif!important;
        font-size:17px!important;
        font-weight:800!important;
        line-height:1!important;
        letter-spacing:.06em!important;
        text-align:center!important;
        text-transform:uppercase!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications > div{
        display:grid!important;
        grid-template-columns:repeat(3,1fr)!important;
        gap:2px!important;
        margin:0!important;
        padding:0!important;
        width:100%!important;
        align-items:center!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications button{
        min-width:0!important;
        min-height:60px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:4px!important;
        margin:0!important;
        padding:0 1px!important;
        border:0!important;
        outline:0!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#fff!important;
        font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif!important;
        font-size:13px!important;
        font-weight:800!important;
        line-height:1!important;
        letter-spacing:.02em!important;
        text-align:center!important;
        text-transform:uppercase!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications button:hover,
    .video-card .mobile-card-actions[open] .mobile-certifications button:focus-visible{
        border:0!important;
        outline:0!important;
        background:rgba(0,217,232,.08)!important;
        box-shadow:none!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications button span{
        font-size:24px!important;
        line-height:1!important;
    }

    .video-card .mobile-card-actions[open] .cert-awarded{
        min-height:60px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        background:rgba(0,217,232,.08)!important;
        box-shadow:none!important;
        color:#fff!important;
        font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif!important;
        font-size:14px!important;
        font-weight:800!important;
        line-height:1!important;
        letter-spacing:.03em!important;
        text-align:center!important;
        text-transform:uppercase!important;
    }
}

@media(max-width:390px){
    .video-card .mobile-card-actions[open]{
        padding:7px 7px 7px!important;
        gap:3px!important;
    }

    .video-card .mobile-card-actions[open] > summary.mobile-actions-close{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        top:4px!important;
        right:4px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid{
        padding-right:26px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid > button,
    .video-card .mobile-card-actions[open] .mobile-action-grid > a,
    .video-card .mobile-card-actions[open] .mobile-action-grid > .mobile-action-disabled{
        min-height:58px!important;
        font-size:12px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-action-grid span{
        font-size:27px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications-title{
        font-size:16px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications button{
        min-height:54px!important;
        font-size:11px!important;
    }

    .video-card .mobile-card-actions[open] .mobile-certifications button span{
        font-size:22px!important;
    }
}