/* ==========================================================
   SLIDER + INSPECTOR LEGIBLE
   ========================================================== */


/* ==========================================================
   INSPECTOR DERECHO OSCURO
   ========================================================== */

body.builder-clean-v2.builder-dark-v2 .builder-right{
    background:#111c2d !important;
    color:#f8fafc !important;
}


body.builder-clean-v2.builder-dark-v2 .builder-right h1,
body.builder-clean-v2.builder-dark-v2 .builder-right h2,
body.builder-clean-v2.builder-dark-v2 .builder-right h3,
body.builder-clean-v2.builder-dark-v2 .builder-right h4,
body.builder-clean-v2.builder-dark-v2 .builder-right strong{
    color:#ffffff !important;
}


body.builder-clean-v2.builder-dark-v2 .builder-right label,
body.builder-clean-v2.builder-dark-v2 .builder-right label span,
body.builder-clean-v2.builder-dark-v2 .builder-right .prop-field span,
body.builder-clean-v2.builder-dark-v2 .builder-right .builder-muted,
body.builder-clean-v2.builder-dark-v2 .builder-extra-heading small{
    color:#c7d2e1 !important;
    opacity:1 !important;
}


body.builder-clean-v2.builder-dark-v2 .builder-extra-panel{
    background:#162338 !important;
    border:1px solid #30435e !important;
    color:#ffffff !important;
}


body.builder-clean-v2.builder-dark-v2 .builder-right input,
body.builder-clean-v2.builder-dark-v2 .builder-right textarea,
body.builder-clean-v2.builder-dark-v2 .builder-right select{
    background:#0c1728 !important;
    color:#ffffff !important;
    border:1px solid #40536d !important;
}


body.builder-clean-v2.builder-dark-v2 .builder-right input::placeholder,
body.builder-clean-v2.builder-dark-v2 .builder-right textarea::placeholder{
    color:#8696aa !important;
}


body.builder-clean-v2.builder-dark-v2 .fx-field > span{
    color:#dce6f2 !important;
}


body.builder-clean-v2.builder-dark-v2 .fx-field > span b{
    color:#9eb0c6 !important;
    opacity:1 !important;
}


body.builder-clean-v2.builder-dark-v2 .fx-quick-presets button,
body.builder-clean-v2.builder-dark-v2 .slider-preset-grid button,
body.builder-clean-v2.builder-dark-v2 .fx-reset{
    background:#0e1a2b !important;
    color:#f5f7fa !important;
    border:1px solid #3b4e68 !important;
}


body.builder-clean-v2.builder-dark-v2 .fx-quick-presets button:hover,
body.builder-clean-v2.builder-dark-v2 .slider-preset-grid button:hover{
    background:#20324d !important;
    border-color:#6b83a3 !important;
}


/* ==========================================================
   PANEL MULTIMEDIA DEL SLIDER
   ========================================================== */

.slider-media-panel{
    border-top:3px solid #47b78b !important;
}


.slider-preset-panel{
    border-top:3px solid #b98b54 !important;
}


.builder-fx-panel{
    border-top:3px solid #5289e8 !important;
}


.slider-upload-button{
    min-height:44px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin-bottom:9px;
    padding:0 10px;
    border-radius:10px;
    background:#ffffff !important;
    color:#111827 !important;
    border:1px solid #ffffff !important;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}


.slider-upload-button.loading{
    opacity:.55;
    pointer-events:none;
}


.slider-link-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) 88px;
    gap:6px;
    margin-bottom:12px;
}


.slider-link-box input{
    grid-column:1 / -1;
}


.slider-link-box button{
    min-height:38px;
    border-radius:8px;
    font-size:10px;
    font-weight:800;
}


.slider-media-config{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
}


.slider-media-config label{
    display:flex;
    flex-direction:column;
    gap:5px;
}


.slider-media-config label span{
    font-size:9px;
    font-weight:800;
}


.slider-media-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}


.slider-media-empty{
    min-height:90px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:1px dashed #60738d;
    border-radius:10px;
    text-align:center;
}


.slider-media-empty strong{
    font-size:11px;
}


.slider-media-empty span{
    color:#9baabc !important;
    font-size:9px;
}


.slider-media-item{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    padding:7px;
    border-radius:9px;
    border:1px solid #354962;
    background:#0f1a2b;
}


.slider-media-thumb{
    width:56px;
    height:56px;
    display:block;
    border-radius:7px;
    object-fit:cover;
    background:#050b13;
}


.slider-media-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}


.slider-media-info strong{
    color:#ffffff !important;
    font-size:10px;
}


.slider-media-info span{
    color:#aebdce !important;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


.slider-media-item-actions{
    display:flex;
    gap:3px;
}


.slider-media-item-actions button{
    width:27px !important;
    min-width:27px !important;
    height:27px !important;
    min-height:27px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:6px !important;
    background:#17253a !important;
    color:#ffffff !important;
    border:1px solid #425672 !important;
}


.slider-media-item-actions .slider-media-remove{
    color:#ff8585 !important;
}


.slider-media-error{
    margin-top:8px;
    padding:8px;
    border-radius:8px;
    background:#3a1519;
    color:#ffb4b4;
    font-size:10px;
    font-weight:700;
}


/* ==========================================================
   SLIDER EN EL CANVAS
   ========================================================== */

.ir-slider-real{
    position:absolute;
    isolation:isolate;
}


.ir-slider-real .ir-slider-media-layer{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    border-radius:inherit;
    background:#eef0f3;
}


.ir-slider-real .ir-slider-real-media{
    width:100%;
    height:100%;
    display:block;
}


.ir-slider-real .ir-slider-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 25%,
            rgba(0,0,0,.68) 100%
        );
}


.ir-slider-real .ir-slider-text{
    position:absolute;
    z-index:3;
    left:18px;
    right:18px;
    bottom:36px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:none;
}


.ir-slider-real .ir-slider-title,
.ir-slider-real .ir-slider-date,
.ir-slider-real .ir-slider-eyebrow,
.ir-slider-real .ir-slider-ornament{
    text-shadow:
        0 2px 8px
        rgba(0,0,0,.52);
}


.ir-slider-real .ir-slider-nav{
    position:absolute;
    z-index:4;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(8,12,18,.78);
    color:#ffffff;
    font-size:23px;
    cursor:pointer;
}


.ir-slider-real .ir-slider-prev{
    left:9px;
}


.ir-slider-real .ir-slider-next{
    right:9px;
}


.ir-slider-real-dots{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    display:flex;
    gap:5px;
}


.ir-slider-real-dots span{
    width:6px;
    height:6px;
    display:block;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
}


.ir-slider-real-dots span.active{
    background:#ffffff;
    transform:scale(1.3);
}


.ir-slider-empty{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
    background:#f4f5f7;
    color:#374151;
}


.ir-slider-empty strong{
    font-size:16px;
}


.ir-slider-empty span{
    font-size:10px;
}



/* ==========================================================
   SLIDER - PRESETS DE MOVIMIENTO
   ========================================================== */

.slider-motion-section{
    margin:14px 0;
    padding:12px;
    border:1px solid #354962;
    border-radius:11px;
    background:#101c2d;
}


.slider-motion-title{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:10px;
}


.slider-motion-title strong{
    color:#ffffff !important;
    font-size:11px;
}


.slider-motion-title small{
    color:#9cacc0 !important;
    font-size:9px;
}


.slider-motion-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
}


.slider-motion-grid button{
    min-height:64px;
    padding:7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid #3d516d !important;
    border-radius:10px;
    background:#0c1728 !important;
    color:#ffffff !important;
    cursor:pointer;
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}


.slider-motion-grid button:hover{
    background:#172a43 !important;
    border-color:#6d88aa !important;
    transform:translateY(-1px);
}


.slider-motion-grid button.active{
    background:#1c3c62 !important;
    border-color:#63a8ff !important;
    box-shadow:
        0 0 0 1px
        rgba(99,168,255,.25);
}


.slider-motion-grid button span{
    color:#ffffff !important;
    font-size:22px;
    line-height:1;
}


.slider-motion-grid button b{
    color:#ffffff !important;
    font-size:9px;
}


/* ==========================================================
   1. CINE ZOOM
   Acercamiento lento.
   ========================================================== */

.ir-slider-motion-cinemaZoom{
    animation:
        irSliderCinemaZoom
        8s
        ease-out
        both;
}


@keyframes irSliderCinemaZoom{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.16);
    }

}


/* ==========================================================
   2. KEN BURNS
   Zoom + desplazamiento lateral.
   ========================================================== */

.ir-slider-motion-kenBurns{
    animation:
        irSliderKenBurns
        10s
        ease-in-out
        both;
}


@keyframes irSliderKenBurns{

    0%{
        transform:
            scale(1.06)
            translate3d(-2%,0,0);
    }

    100%{
        transform:
            scale(1.20)
            translate3d(3%,-1%,0);
    }

}


/* ==========================================================
   3. TIKTOK PUNCH
   Impacto rápido.
   ========================================================== */

.ir-slider-motion-tiktokPunch{
    animation:
        irSliderTikTokPunch
        1.6s
        cubic-bezier(.2,.75,.25,1)
        both;
}


@keyframes irSliderTikTokPunch{

    0%{
        transform:scale(1);
        filter:brightness(.92);
    }

    20%{
        transform:scale(1.13);
        filter:brightness(1.08);
    }

    38%{
        transform:scale(1.06);
    }

    60%{
        transform:scale(1.11);
    }

    100%{
        transform:scale(1.08);
        filter:brightness(1);
    }

}


/* ==========================================================
   4. SLIDE REVEAL
   Entrada lateral cinematográfica.
   ========================================================== */

.ir-slider-motion-slideReveal{
    animation:
        irSliderSlideReveal
        1.4s
        cubic-bezier(.16,.8,.2,1)
        both;
}


@keyframes irSliderSlideReveal{

    0%{
        opacity:.25;
        transform:
            scale(1.08)
            translate3d(12%,0,0);
    }

    100%{
        opacity:1;
        transform:
            scale(1.08)
            translate3d(0,0,0);
    }

}


/* ==========================================================
   5. PARALLAX
   Movimiento vertical suave.
   ========================================================== */

.ir-slider-motion-parallax{
    animation:
        irSliderParallax
        7s
        ease-in-out
        both;
}


@keyframes irSliderParallax{

    0%{
        transform:
            scale(1.12)
            translate3d(0,3%,0);
    }

    100%{
        transform:
            scale(1.16)
            translate3d(0,-3%,0);
    }

}


/*
 * GPU / suavidad
 */
.ir-slider-real-media{
    transform-origin:center center;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
}


/*
 * Respetar accesibilidad.
 */
@media (prefers-reduced-motion: reduce){

    .ir-slider-motion-cinemaZoom,
    .ir-slider-motion-kenBurns,
    .ir-slider-motion-tiktokPunch,
    .ir-slider-motion-slideReveal,
    .ir-slider-motion-parallax{
        animation:none !important;
    }

}



/*
 * ============================================================
 * XV_TEMPLATE_SLIDER_MEDIA_ONLY_V1
 *
 * Slider fotográfico de Página 1 en plantillas XV.
 *
 * - NO sombreado negro.
 * - NO título interno "Slider".
 * - NO fecha interna.
 * - NO ornamento interno.
 * - conserva fotos/videos.
 * - conserva navegación si existen varias imágenes.
 * ============================================================
 */

.ir-slider-real.ir-slider-media-only
.ir-slider-overlay{
    display:none !important;
    opacity:0 !important;
    background:transparent !important;
}

.ir-slider-real.ir-slider-media-only
.ir-slider-text{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.ir-slider-real.ir-slider-media-only
.ir-slider-eyebrow,

.ir-slider-real.ir-slider-media-only
.ir-slider-title,

.ir-slider-real.ir-slider-media-only
.ir-slider-ornament,

.ir-slider-real.ir-slider-media-only
.ir-slider-date{
    display:none !important;
}

.ir-slider-real.ir-slider-media-only{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
}