/* =========================================================
   Kines Video Player Lite v1.1.0
   Todos los estilos están aislados con kinesvpl-v100.
========================================================= */

[data-kinesvpl-v100="player"],
[data-kinesvpl-v100="player"] * {
    box-sizing: border-box;
}

figure.wp-block-video.kinesvpl-v100-figure,
.kinesvpl-v100-figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

[data-kinesvpl-v100="player"] {
    --kinesvpl-bg: #07030d;
    --kinesvpl-panel: #12051f;
    --kinesvpl-pink: #e0006c;
    --kinesvpl-pink-2: #ff1493;
    --kinesvpl-violet: #6e28f3;
    --kinesvpl-white: #ffffff;
    --kinesvpl-muted: rgba(255, 255, 255, .78);

    position: relative;
    width: min(100%, 960px);
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 10%, rgba(224, 0, 108, .18), transparent 34%),
        linear-gradient(145deg, var(--kinesvpl-panel), var(--kinesvpl-bg));
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(224, 0, 108, .08) inset;
    isolation: isolate;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--horizontal {
    width: min(100%, 960px);
}

[data-kinesvpl-v100="player"].kinesvpl-v100--vertical {
    width: min(100%, 460px);
}

[data-kinesvpl-v100="player"].kinesvpl-v100--square {
    width: min(100%, 620px);
}

[data-kinesvpl-v100="stage"] {
    position: relative;
    width: 100%;
    min-height: 220px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(110, 40, 243, .16), transparent 46%),
        #07030d;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--horizontal [data-kinesvpl-v100="stage"],
[data-kinesvpl-v100="player"].kinesvpl-v100--auto [data-kinesvpl-v100="stage"] {
    aspect-ratio: 16 / 9;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--vertical [data-kinesvpl-v100="stage"] {
    aspect-ratio: 9 / 16;
    max-height: 82vh;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--square [data-kinesvpl-v100="stage"] {
    aspect-ratio: 1 / 1;
}

[data-kinesvpl-v100="player"] video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000 !important;
    object-fit: contain !important;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--horizontal video {
    aspect-ratio: 16 / 9;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--vertical video {
    aspect-ratio: 9 / 16;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--square video {
    aspect-ratio: 1 / 1;
}

[data-kinesvpl-v100="overlay"] {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 0;
    color: var(--kinesvpl-white);
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .38)),
        radial-gradient(circle at center, rgba(224, 0, 108, .08), transparent 52%);
    transition: opacity .22s ease, visibility .22s ease;
}

[data-kinesvpl-v100="overlay"].kinesvpl-v100-is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

[data-kinesvpl-v100="play"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 22px 12px 14px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(224, 0, 108, .96), rgba(110, 40, 243, .94));
    color: var(--kinesvpl-white);
    box-shadow:
        0 0 22px rgba(255, 20, 147, .38),
        0 16px 34px rgba(0, 0, 0, .42);
    font: 800 16px/1.1 "Open Sans", Arial, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transform: translateY(0);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

[data-kinesvpl-v100="overlay"]:hover [data-kinesvpl-v100="play"],
[data-kinesvpl-v100="overlay"]:focus-visible [data-kinesvpl-v100="play"] {
    transform: translateY(-2px) scale(1.025);
    filter: brightness(1.08);
    box-shadow:
        0 0 28px rgba(255, 20, 147, .54),
        0 18px 38px rgba(0, 0, 0, .46);
}

[data-kinesvpl-v100="play-icon"] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--kinesvpl-white);
    color: var(--kinesvpl-pink);
    font-size: 18px;
    line-height: 1;
    padding-left: 3px;
}

[data-kinesvpl-v100="video-badge"] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(7, 3, 13, .76);
    color: var(--kinesvpl-white);
    backdrop-filter: blur(8px);
    font: 800 12px/1 "Open Sans", Arial, sans-serif;
    letter-spacing: .03em;
    pointer-events: none;
}

[data-kinesvpl-v100="duration"] {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(7, 3, 13, .76);
    color: var(--kinesvpl-white);
    backdrop-filter: blur(8px);
    font: 700 12px/1 "Open Sans", Arial, sans-serif;
    pointer-events: none;
}

[data-kinesvpl-v100="status"] {
    display: none;
    width: 100%;
    padding: 12px 16px;
    margin: 0;
    background: rgba(224, 0, 108, .14);
    color: var(--kinesvpl-white);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font: 700 13px/1.4 "Open Sans", Arial, sans-serif;
    text-align: center;
}

[data-kinesvpl-v100="player"].kinesvpl-v100-has-error [data-kinesvpl-v100="status"] {
    display: block;
}

[data-kinesvpl-v100="player"].kinesvpl-v100-has-error [data-kinesvpl-v100="overlay"] {
    display: none;
}

@media (max-width: 640px) {
    figure.wp-block-video.kinesvpl-v100-figure,
    .kinesvpl-v100-figure {
        margin: 20px auto !important;
    }

    [data-kinesvpl-v100="player"] {
        border-radius: 14px;
    }

    [data-kinesvpl-v100="play"] {
        min-height: 56px;
        padding: 10px 18px 10px 12px;
        font-size: 14px;
    }

    [data-kinesvpl-v100="play-icon"] {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 16px;
    }

    [data-kinesvpl-v100="video-badge"],
    [data-kinesvpl-v100="duration"] {
        top: 9px;
        min-height: 28px;
        padding: 5px 9px;
        font-size: 11px;
    }

    [data-kinesvpl-v100="video-badge"] {
        left: 9px;
    }

    [data-kinesvpl-v100="duration"] {
        right: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-kinesvpl-v100="overlay"],
    [data-kinesvpl-v100="play"] {
        transition: none !important;
    }
}


[data-kinesvpl-v100="player"] [data-kinesvpl-v100="overlay"] {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

[data-kinesvpl-v100="preview-note"] {
    display: block;
    max-width: min(86%, 420px);
    color: rgba(255,255,255,.84);
    font: 700 12px/1.2 "Open Sans", Arial, sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
}

[data-kinesvpl-v100="preview-title"] {
    display: block;
    max-width: min(86%, 460px);
    color: rgba(255,255,255,.96);
    font: 800 18px/1.22 "Open Sans", Arial, sans-serif;
    text-wrap: balance;
}

[data-kinesvpl-v100="player"].kinesvpl-v100--no-poster [data-kinesvpl-v100="overlay"] {
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.44)),
        radial-gradient(circle at 20% 15%, rgba(224,0,108,.24), transparent 32%),
        radial-gradient(circle at 84% 82%, rgba(110,40,243,.20), transparent 36%),
        linear-gradient(145deg, #15061f, #090111);
}

[data-kinesvpl-v100="player"].kinesvpl-v100-theme-1 { --kinesvpl-accent-a: rgba(224,0,108,.22); --kinesvpl-accent-b: rgba(110,40,243,.16); }
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-2 { --kinesvpl-accent-a: rgba(255,138,0,.20); --kinesvpl-accent-b: rgba(224,0,108,.14); }
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-3 { --kinesvpl-accent-a: rgba(15,255,80,.16); --kinesvpl-accent-b: rgba(110,40,243,.18); }
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-4 { --kinesvpl-accent-a: rgba(255,193,7,.18); --kinesvpl-accent-b: rgba(224,0,108,.14); }

[data-kinesvpl-v100="player"].kinesvpl-v100-theme-1 [data-kinesvpl-v100="stage"],
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-2 [data-kinesvpl-v100="stage"],
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-3 [data-kinesvpl-v100="stage"],
[data-kinesvpl-v100="player"].kinesvpl-v100-theme-4 [data-kinesvpl-v100="stage"] {
    background:
        radial-gradient(circle at center, var(--kinesvpl-accent-b, rgba(110,40,243,.16)), transparent 46%),
        radial-gradient(circle at 20% 15%, var(--kinesvpl-accent-a, rgba(224,0,108,.18)), transparent 30%),
        #07030d;
}

@media (max-width: 640px) {
    [data-kinesvpl-v100="preview-title"] {
        font-size: 15px;
        max-width: min(90%, 340px);
    }

    [data-kinesvpl-v100="preview-note"] {
        font-size: 11px;
    }
}