/* ============================================================
   CERCA UI V4.0.1 — ACTUALIZACIÓN DE ZONA
   Overlay conectado · sin toast superior
   ============================================================ */

:root {
    --cerca-v4-cyan: #18cfff;
    --cerca-v4-blue: #2778ff;
    --cerca-v4-purple: #8238f2;
    --cerca-v4-pink: #ff1875;
    --cerca-v4-green: #16d69b;
    --cerca-v4-bg: #030b18;
    --cerca-v4-ease: cubic-bezier(.22,.75,.18,1);
}

#cercaUiV4UpdateOverlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

    display: grid;
    place-items: center;

    padding:
        max(20px, env(safe-area-inset-top))
        20px
        max(24px, env(safe-area-inset-bottom));

    background:
        radial-gradient(circle at 50% 32%, rgba(26, 117, 255, .14), transparent 38%),
        radial-gradient(circle at 74% 55%, rgba(255, 24, 117, .10), transparent 32%),
        rgba(1, 7, 17, .80);

    backdrop-filter: blur(15px) saturate(.82);
    -webkit-backdrop-filter: blur(15px) saturate(.82);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .30s var(--cerca-v4-ease),
        visibility .30s var(--cerca-v4-ease);
}

#cercaUiV4UpdateOverlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cerca-ui4-card {
    position: relative;
    overflow: hidden;

    width: min(88vw, 390px);

    padding:
        24px
        22px
        21px;

    border-radius: 30px;

    border:
        1px solid
        rgba(106, 188, 255, .25);

    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 42, .97),
            rgba(3, 12, 28, .985)
        );

    box-shadow:
        0 32px 90px rgba(0,0,0,.55),
        0 0 52px rgba(33, 145, 255, .08),
        inset 0 1px 0 rgba(255,255,255,.045);

    text-align: center;

    transform:
        translateY(16px)
        scale(.965);

    transition:
        transform .34s var(--cerca-v4-ease);
}

#cercaUiV4UpdateOverlay.is-visible .cerca-ui4-card {
    transform:
        translateY(0)
        scale(1);
}

.cerca-ui4-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(24, 207, 255, .75),
            rgba(130, 56, 242, .28) 42%,
            rgba(255, 24, 117, .72)
        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.cerca-ui4-logo-stage {
    position: relative;

    width: 100%;
    min-height: 160px;

    display: grid;
    place-items: center;

    margin:
        2px
        0
        4px;
}

.cerca-ui4-radar {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 154px;
    height: 154px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(68, 139, 255, .23);

    box-shadow:
        0 0 0 17px rgba(62, 75, 255, .032),
        0 0 0 38px rgba(255, 24, 117, .025);
}

.cerca-ui4-radar::before,
.cerca-ui4-radar::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cerca-ui4-radar::before {
    inset: -12px;

    border:
        2px solid
        transparent;

    border-top-color:
        var(--cerca-v4-cyan);

    border-right-color:
        rgba(130, 56, 242, .62);

    border-bottom-color:
        var(--cerca-v4-pink);

    filter:
        drop-shadow(0 0 8px rgba(24, 207, 255, .45))
        drop-shadow(0 0 9px rgba(255, 24, 117, .30));

    animation:
        cercaUiV4Orbit
        2.4s
        linear
        infinite;
}

.cerca-ui4-radar::after {
    inset: 17px;

    border:
        1px dashed
        rgba(129, 94, 255, .38);

    animation:
        cercaUiV4OrbitReverse
        5.2s
        linear
        infinite;
}

.cerca-ui4-logo {
    position: relative;
    z-index: 2;

    width: min(78%, 285px);
    max-height: 118px;

    object-fit: contain;

    filter:
        drop-shadow(0 9px 20px rgba(0, 180, 255, .17))
        drop-shadow(0 10px 20px rgba(255, 24, 117, .16));

    animation:
        cercaUiV4LogoFloat
        2.6s
        ease-in-out
        infinite;
}

.cerca-ui4-eyebrow {
    margin:
        3px
        0
        7px;

    color:
        #69dcff;

    font-size:
        .68rem;

    font-weight:
        900;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}

.cerca-ui4-title {
    margin: 0;

    color:
        #f8fbff;

    font-size:
        clamp(1.45rem, 5.3vw, 1.85rem);

    font-weight:
        790;

    letter-spacing:
        -.035em;

    line-height:
        1.08;
}

.cerca-ui4-subtitle {
    margin:
        10px
        auto
        0;

    max-width:
        310px;

    color:
        rgba(217, 233, 247, .74);

    font-size:
        .89rem;

    font-weight:
        520;

    line-height:
        1.48;
}

.cerca-ui4-progress-track {
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 6px;

    margin:
        20px
        0
        17px;

    border-radius:
        999px;

    background:
        rgba(148, 163, 184, .13);
}

.cerca-ui4-progress-runner {
    position: absolute;
    inset:
        0
        auto
        0
        0;

    width: 44%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--cerca-v4-blue),
            var(--cerca-v4-purple),
            var(--cerca-v4-pink)
        );

    box-shadow:
        0 0 16px
        rgba(255, 24, 117, .38);

    animation:
        cercaUiV4Progress
        1.55s
        ease-in-out
        infinite;
}

.cerca-ui4-stages {
    display: grid;

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

    gap: 8px;
}

.cerca-ui4-stage {
    min-width: 0;

    padding:
        10px
        5px
        8px;

    border:
        1px solid
        rgba(148, 163, 184, .08);

    border-radius:
        14px;

    background:
        rgba(15, 29, 50, .42);

    color:
        #718096;

    transition:
        border-color .24s ease,
        background .24s ease,
        color .24s ease;
}

.cerca-ui4-stage-icon {
    width: 25px;
    height: 25px;

    margin:
        0
        auto
        5px;

    display: grid;
    place-items: center;

    border-radius:
        50%;

    border:
        2px solid
        rgba(113, 128, 150, .42);

    font-size:
        14px;

    font-weight:
        950;
}

.cerca-ui4-stage strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;

    font-size:
        .68rem;

    font-weight:
        850;

    white-space:
        nowrap;
}

.cerca-ui4-stage small {
    display: block;

    margin-top:
        2px;

    font-size:
        .57rem;

    font-weight:
        650;
}

.cerca-ui4-stage.is-active {
    color:
        #d9f7ff;

    border-color:
        rgba(24, 207, 255, .24);

    background:
        rgba(12, 115, 153, .10);
}

.cerca-ui4-stage.is-active .cerca-ui4-stage-icon {
    border-color:
        var(--cerca-v4-cyan);

    color:
        var(--cerca-v4-cyan);

    box-shadow:
        0 0 0 4px
        rgba(24, 207, 255, .07);

    animation:
        cercaUiV4StagePulse
        1.1s
        ease-in-out
        infinite alternate;
}

.cerca-ui4-stage.is-done {
    color:
        #ccfff1;

    border-color:
        rgba(22, 214, 155, .25);

    background:
        rgba(22, 214, 155, .08);
}

.cerca-ui4-stage.is-done .cerca-ui4-stage-icon {
    border-color:
        var(--cerca-v4-green);

    background:
        rgba(22, 214, 155, .12);

    color:
        var(--cerca-v4-green);
}

.cerca-ui4-finish {
    display: none;

    margin-top:
        14px;

    color:
        #a7ffe3;

    font-size:
        .78rem;

    font-weight:
        800;
}

#cercaUiV4UpdateOverlay.is-complete .cerca-ui4-finish {
    display: block;
}

#cercaUiV4UpdateOverlay.is-complete .cerca-ui4-progress-runner {
    width: 100%;

    transform: none !important;

    animation: none;

    background:
        linear-gradient(
            90deg,
            #0ea5e9,
            #16d69b
        );
}

@keyframes cercaUiV4Orbit {
    to {
        transform:
            rotate(360deg);
    }
}

@keyframes cercaUiV4OrbitReverse {
    to {
        transform:
            rotate(-360deg);
    }
}

@keyframes cercaUiV4LogoFloat {
    0%, 100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-4px)
            scale(1.015);
    }
}

@keyframes cercaUiV4Progress {
    0% {
        transform:
            translateX(-120%);
    }

    100% {
        transform:
            translateX(325%);
    }
}

@keyframes cercaUiV4StagePulse {
    from {
        transform:
            scale(.93);
    }

    to {
        transform:
            scale(1.06);
    }
}

@media (max-width: 420px) {
    .cerca-ui4-card {
        width: min(91vw, 372px);

        padding:
            20px
            18px
            18px;

        border-radius:
            27px;
    }

    .cerca-ui4-logo-stage {
        min-height:
            146px;
    }

    .cerca-ui4-radar {
        width:
            138px;

        height:
            138px;
    }

    .cerca-ui4-logo {
        width:
            min(80%, 260px);

        max-height:
            104px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cerca-ui4-radar::before,
    .cerca-ui4-radar::after,
    .cerca-ui4-logo,
    .cerca-ui4-progress-runner,
    .cerca-ui4-stage.is-active .cerca-ui4-stage-icon {
        animation:
            none !important;
    }
}


/* V4.0.2 — bloqueo visual real durante actualización */
.cerca-ui4-update-overlay.is-visible {
    overscroll-behavior: none;
}

.cerca-ui4-update-overlay.is-visible .cerca-ui4-card {
    will-change: transform, opacity;
}