/* ==========================================================
   CONTAINER PRO V1
   ========================================================== */

.ir-container-pro{
    --container-opacity:.26;
    --container-blur:22px;
    --container-radius:26px;
    --container-padding:18px;
    --container-border-width:1px;
    --container-shadow-alpha:.18;

    box-sizing:border-box;
    overflow:hidden;

    padding:
        var(--container-padding);

    border-radius:
        var(--container-radius);

    border-style:
        solid;

    border-width:
        var(--container-border-width);

    backdrop-filter:
        blur(
            var(--container-blur)
        );

    -webkit-backdrop-filter:
        blur(
            var(--container-blur)
        );

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.ir-container-body{
    width:100%;
    min-height:100%;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    justify-content:center;
}


.ir-container-title{
    margin:0;

    font-size:20px;
    line-height:1.15;

    font-weight:850;

    letter-spacing:
        -.015em;
}


.ir-container-subtitle{
    margin-top:7px;

    font-size:11px;
    line-height:1.35;

    font-weight:600;

    opacity:.82;
}


/* ==========================================================
   1. GLASS PREMIUM
   ========================================================== */

.ir-container-pro[
    data-container-preset="glassPremium"
]{
    background:
        rgba(
            255,
            255,
            255,
            var(--container-opacity)
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .48
        );

    box-shadow:
        0 18px 44px
        rgba(
            0,
            0,
            0,
            var(--container-shadow-alpha)
        );
}


.ir-container-pro[
    data-container-preset="glassPremium"
]
.ir-container-title{
    color:#182235;
}


.ir-container-pro[
    data-container-preset="glassPremium"
]
.ir-container-subtitle{
    color:#4f5b6f;
}


/* ==========================================================
   2. CINE DARK
   ========================================================== */

.ir-container-pro[
    data-container-preset="cinemaDark"
]{
    background:
        rgba(
            7,
            12,
            22,
            var(--container-opacity)
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .14
        );

    box-shadow:
        0 24px 55px
        rgba(
            0,
            0,
            0,
            var(--container-shadow-alpha)
        );
}


.ir-container-pro[
    data-container-preset="cinemaDark"
]
.ir-container-title{
    color:#ffffff;
}


.ir-container-pro[
    data-container-preset="cinemaDark"
]
.ir-container-subtitle{
    color:#c9d2de;
}


/* ==========================================================
   3. XV ELEGANTE
   ========================================================== */

.ir-container-pro[
    data-container-preset="xvElegant"
]{
    background:
        rgba(
            39,
            30,
            15,
            var(--container-opacity)
        );

    border-color:
        rgba(
            218,
            187,
            102,
            .48
        );

    box-shadow:
        0 20px 50px
        rgba(
            0,
            0,
            0,
            var(--container-shadow-alpha)
        ),
        inset 0 0 0 1px
        rgba(
            255,
            238,
            188,
            .05
        );
}


.ir-container-pro[
    data-container-preset="xvElegant"
]
.ir-container-title{
    color:#f1d994;
}


.ir-container-pro[
    data-container-preset="xvElegant"
]
.ir-container-subtitle{
    color:#f4ead0;
}


/* ==========================================================
   4. GLOW MODERNO
   ========================================================== */

.ir-container-pro[
    data-container-preset="glowModern"
]{
    background:
        rgba(
            20,
            25,
            48,
            var(--container-opacity)
        );

    border-color:
        rgba(
            174,
            157,
            255,
            .48
        );

    box-shadow:
        0 0 24px
        rgba(
            164,
            146,
            255,
            calc(
                var(--container-shadow-alpha)
                * .75
            )
        ),
        0 20px 44px
        rgba(
            0,
            0,
            0,
            var(--container-shadow-alpha)
        );
}


.ir-container-pro[
    data-container-preset="glowModern"
]
.ir-container-title{
    color:#ffffff;
}


.ir-container-pro[
    data-container-preset="glowModern"
]
.ir-container-subtitle{
    color:#d5cff9;
}


/* ==========================================================
   5. MINIMAL CLEAN
   ========================================================== */

.ir-container-pro[
    data-container-preset="minimalClean"
]{
    background:
        rgba(
            255,
            255,
            255,
            var(--container-opacity)
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .22
        );

    box-shadow:
        0 10px 28px
        rgba(
            0,
            0,
            0,
            var(--container-shadow-alpha)
        );
}


.ir-container-pro[
    data-container-preset="minimalClean"
]
.ir-container-title{
    color:#ffffff;
}


.ir-container-pro[
    data-container-preset="minimalClean"
]
.ir-container-subtitle{
    color:
        rgba(
            255,
            255,
            255,
            .76
        );
}


/* ==========================================================
   INSPECTOR
   ========================================================== */

.container-pro-panel{
    margin-bottom:15px;

    padding:12px;

    border:
        1px solid
        #354a65;

    border-radius:
        12px;

    background:
        #14233a;
}


.container-pro-header{
    display:flex;
    flex-direction:column;
    gap:2px;

    margin-bottom:
        10px;
}


.container-pro-header strong{
    color:#ffffff !important;
    font-size:12px;
}


.container-pro-header small{
    color:#9eafc4 !important;
    font-size:9px;
}


.container-pro-presets{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:7px;
}


.container-pro-presets button{
    min-height:72px;

    padding:
        7px 5px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;

    border:
        1px solid
        #3d526d !important;

    border-radius:
        11px;

    background:
        #0d192a !important;

    color:
        #ffffff !important;

    cursor:pointer;
}


.container-pro-presets button:hover{
    background:
        #192d49 !important;

    border-color:
        #6a86aa !important;
}


.container-pro-presets button.active{
    background:
        #21446d !important;

    border-color:
        #67aaff !important;

    box-shadow:
        0 0 0 1px
        rgba(
            103,
            170,
            255,
            .20
        );
}


.container-pro-presets button span{
    color:#ffffff !important;
    font-size:21px;
    line-height:1;
}


.container-pro-presets button b{
    color:#ffffff !important;
    font-size:9px;
}


.container-pro-presets button small{
    color:#9fb1c6 !important;
    font-size:8px;
}



/* ==========================================================
   CONTAINER PRO V2
   DESTELLO ANIMADO DEL BORDE
   ========================================================== */

@property --container-spark-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}


.ir-container-pro{
    --container-spark-color:#ffd66b;
    --container-spark-speed:3s;
    --container-spark-size:14px;
    --container-spark-border:2px;
}


/*
 * El contenido debe quedar encima
 */
.ir-container-pro .ir-container-body{
    position:relative;
    z-index:2;
}


/*
 * Destello
 */
.ir-container-pro[data-container-spark="1"]::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    border-radius:inherit;

    padding:
        var(--container-spark-border);

    background:
        conic-gradient(
            from
            var(--container-spark-angle),

            transparent
            0deg,

            transparent
            292deg,

            color-mix(
                in srgb,
                var(--container-spark-color)
                20%,
                transparent
            )
            310deg,

            var(--container-spark-color)
            329deg,

            #ffffff
            338deg,

            var(--container-spark-color)
            347deg,

            transparent
            360deg
        );


    -webkit-mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);


    -webkit-mask-composite:
        xor;


    mask:
        linear-gradient(#000 0 0)
        content-box,

        linear-gradient(#000 0 0);


    mask-composite:
        exclude;


    filter:
        drop-shadow(
            0 0
            calc(
                var(--container-spark-size)
                * .35
            )
            var(--container-spark-color)
        )

        drop-shadow(
            0 0
            var(--container-spark-size)
            var(--container-spark-color)
        );


    animation:
        containerSparkBorderRun
        var(--container-spark-speed)
        linear
        infinite;
}


@keyframes containerSparkBorderRun{

    from{
        --container-spark-angle:
            0deg;
    }

    to{
        --container-spark-angle:
            360deg;
    }

}


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

    .ir-container-pro[data-container-spark="1"]::before{
        animation:none;
    }

}


/* ==========================================================
   INSPECTOR DESTELLO
   ========================================================== */

.container-spark-panel{
    margin-bottom:15px;
    padding:12px;

    border:
        1px solid
        #4a5870;

    border-radius:
        12px;

    background:
        #111f33;
}


.container-spark-quick{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:7px;

    margin-top:10px;
}


.container-spark-quick button{
    min-height:34px;

    border:
        1px solid
        #415975 !important;

    border-radius:
        8px;

    background:
        #172a43 !important;

    color:
        #ffffff !important;

    font-size:
        9px;

    font-weight:
        750;

    cursor:pointer;
}


.container-spark-quick button:hover{
    background:
        #23476f !important;

    border-color:
        #72b2ff !important;
}