.acceso-pulso-modal,
.acceso-pulso-modal *,
.acceso-pulso-modal *::before,
.acceso-pulso-modal *::after {
    box-sizing: border-box;
}

.acceso-pulso-modal {
    --pulso-cian: #55d8ff;
    --pulso-verde: #4dff62;
    --pulso-acento: #4dff62;
    --pulso-acento-rgb: 77, 255, 98;
    --pulso-texto: #effaff;
    --pulso-fuente-pixel: "gridlite-pe-variable", "Silkscreen", monospace;
    --pulso-fuente-cuerpo: "itc-avant-garde-gothic-pro", "Segoe UI", Arial, sans-serif;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pulso-texto);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: var(--pulso-fuente-cuerpo);
}

    .acceso-pulso-modal[open] {
        display: grid;
        place-items: center;
    }

    .acceso-pulso-modal::backdrop {
        background: rgba(1, 7, 19, .79);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

.acceso-pulso-escena {
    position: relative;
    display: grid;
    place-items: center;
    width: min(550px, 100%);
    min-height: 515px;
    margin: auto;
    isolation: isolate;
    animation: acceso-pulso-entrada .48s cubic-bezier(.2, .9, .2, 1) both;
}

.acceso-pulso-halo {
    position: absolute;
    inset: 7%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(8, 49, 75, .70) 0%, rgba(6, 33, 58, .50) 45%, rgba(2, 6, 23, 0) 72%);
    filter: blur(9px);
}

.acceso-pulso-anillos {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(500px, 98%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.acceso-pulso-orbita {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
}

.acceso-pulso-orbita--uno {
    border: 1px solid rgba(85, 216, 255, .47);
    box-shadow: 0 0 28px rgba(85, 216, 255, .11), inset 0 0 25px rgba(85, 216, 255, .07);
    animation: acceso-pulso-respirar 3.6s ease-in-out infinite;
}

.acceso-pulso-orbita--dos {
    inset: 5%;
    border: 1px dashed rgba(85, 216, 255, .28);
    border-left-color: transparent;
    border-right-color: transparent;
    animation: acceso-pulso-girar 29s linear infinite;
}

.acceso-pulso-orbita--tres {
    inset: -2%;
    border: 2px solid transparent;
    border-top-color: rgba(85, 216, 255, .94);
    border-bottom-color: rgba(var(--pulso-acento-rgb), .70);
    filter: drop-shadow(0 0 6px rgba(85, 216, 255, .7));
    animation: acceso-pulso-girar 17s linear infinite reverse;
}

.acceso-pulso-cifra {
    position: absolute;
    font: 400 10px/1 var(--pulso-fuente-pixel);
    letter-spacing: .32em;
    color: rgba(85, 216, 255, .55);
    text-shadow: 0 0 9px rgba(85, 216, 255, .3);
}

.acceso-pulso-cifra--a {
    top: 12%;
    left: 6%;
    transform: rotate(-44deg);
}

.acceso-pulso-cifra--b {
    right: 4%;
    bottom: 15%;
    transform: rotate(-42deg);
}

.acceso-pulso-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(410px, 86%);
    padding: 35px 3px 43px;
    text-align: center;
}

.acceso-pulso-emblema {
    position: relative;
    width: 101px;
    height: 101px;
    margin-bottom: 17px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--pulso-acento-rgb), .09), transparent 72%);
    filter: drop-shadow(0 0 13px rgba(var(--pulso-acento-rgb), .22));
}

    .acceso-pulso-emblema::after {
        content: "";
        position: absolute;
        inset: 7px;
        border: 1px solid rgba(var(--pulso-acento-rgb), .18);
        border-radius: 50%;
        animation: acceso-pulso-respirar 2.6s ease-in-out infinite;
    }

    .acceso-pulso-emblema svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.acceso-pulso-circulo {
    stroke: rgba(85, 216, 255, .85);
    stroke-width: 1.35;
}

.acceso-pulso-check {
    stroke: var(--pulso-acento);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 54;
    stroke-dashoffset: 54;
    animation: acceso-pulso-check .62s .26s ease-out forwards;
    filter: drop-shadow(0 0 5px rgba(var(--pulso-acento-rgb), .7));
}

.acceso-pulso-etiqueta {
    margin-bottom: 13px;
    color: #73dfff;
    font-family: var(--pulso-fuente-pixel);
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: .12em;
}

.acceso-pulso-contenido h2 {
    margin: 0 0 15px;
    color: #f8fdff;
    font-family: var(--pulso-fuente-pixel);
    font-size: clamp(18px, 3vw, 25px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .065em;
    text-shadow: 0 0 13px rgba(85, 216, 255, .5);
}

    .acceso-pulso-contenido h2 #lunubiesPulsoTituloResaltado {
        color: var(--pulso-acento);
        text-shadow: 0 0 13px rgba(var(--pulso-acento-rgb), .5);
    }

.acceso-pulso-contenido p {
    max-width: 355px;
    margin: 0 0 25px;
    color: #d8edfb;
    font-family: var(--pulso-fuente-cuerpo);
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 400;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.acceso-pulso-continuar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 188px;
    min-height: 46px;
    padding: 11px 25px;
    border: 1px solid #55d8ff;
    border-radius: 26px;
    color: #ffffff;
    background: rgba(4, 28, 51, .62);
    box-shadow: 0 0 17px rgba(85, 216, 255, .24), inset 0 0 12px rgba(85, 216, 255, .07);
    font-family: var(--pulso-fuente-cuerpo), sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    font-variation-settings: normal;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-shadow: none;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .acceso-pulso-continuar:hover {
        color: #020617;
        background: #55d8ff;
        text-shadow: none;
        box-shadow: 0 0 16px rgba(85, 216, 255, .45), 0 0 28px rgba(85, 216, 255, .20);
        transform: translateY(-1px);
    }

    .acceso-pulso-continuar:focus-visible {
        outline: 2px solid var(--pulso-acento);
        outline-offset: 4px;
    }

.acceso-pulso-saliendo .acceso-pulso-escena {
    animation: acceso-pulso-salida .26s ease-in both;
}

@keyframes acceso-pulso-entrada {
    from {
        opacity: 0;
        transform: scale(.86);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes acceso-pulso-salida {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(.94);
    }
}

@keyframes acceso-pulso-girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes acceso-pulso-respirar {
    0%, 100% {
        opacity: .6;
        box-shadow: 0 0 15px rgba(85, 216, 255, .08);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 25px rgba(85, 216, 255, .20);
    }
}

@keyframes acceso-pulso-check {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 520px) {
    .acceso-pulso-escena {
        min-height: 440px;
    }

    .acceso-pulso-anillos {
        width: min(390px, 100%);
    }

    .acceso-pulso-contenido {
        width: 85%;
        padding: 44px 0;
    }

    .acceso-pulso-emblema {
        width: 79px;
        height: 79px;
        margin-bottom: 13px;
    }

    .acceso-pulso-etiqueta {
        font-size: 8px;
        letter-spacing: .06em;
    }

    .acceso-pulso-contenido h2 {
        font-size: clamp(17px, 5.2vw, 21px);
    }

    .acceso-pulso-contenido p {
        font-size: 13px;
        max-width: 290px;
    }

    .acceso-pulso-continuar {
        min-width: 170px;
        min-height: 44px;
    }
}

@media (max-height: 540px) {
    .acceso-pulso-escena {
        min-height: 405px;
    }

    .acceso-pulso-anillos {
        width: min(370px, 85%);
    }

    .acceso-pulso-contenido {
        padding: 16px 4px;
    }

    .acceso-pulso-emblema {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acceso-pulso-modal *,
    .acceso-pulso-modal *::before,
    .acceso-pulso-modal *::after {
        animation: none !important;
        transition: none !important;
    }

    .acceso-pulso-check {
        stroke-dashoffset: 0;
    }
}

/* ================== VARIANTES DEL MODAL ================== */
/* Éxito mantiene exactamente el esquema original cian + verde. */
.acceso-pulso--exito {
    --pulso-acento: #4dff62;
    --pulso-acento-rgb: 77, 255, 98;
}

/* Error: señal roja/rosada, cruz y órbita roja. */
.acceso-pulso--error {
    --pulso-acento: #ff647d;
    --pulso-acento-rgb: 255, 100, 125;
}

/* Advertencia: advertencia ámbar, sin comunicar fallo total. */
.acceso-pulso--advertencia {
    --pulso-acento: #ffd067;
    --pulso-acento-rgb: 255, 208, 103;
}

/* Información: cian, sin semántica de éxito confirmado. */
.acceso-pulso--informativa {
    --pulso-acento: #55d8ff;
    --pulso-acento-rgb: 85, 216, 255;
}

/* Cambian luces del aro exterior y del emblema, no el formulario de fondo. */
.acceso-pulso-modal:not(.acceso-pulso--exito) .acceso-pulso-orbita--tres {
    filter: drop-shadow(0 0 6px rgba(var(--pulso-acento-rgb), .55));
}

.acceso-pulso-modal:not(.acceso-pulso--exito) .acceso-pulso-circulo {
    stroke: rgba(var(--pulso-acento-rgb), .85);
}

.acceso-pulso-modal:not(.acceso-pulso--exito) .acceso-pulso-orbita--uno {
    border-color: rgba(var(--pulso-acento-rgb), .38);
    box-shadow: 0 0 28px rgba(var(--pulso-acento-rgb), .09), inset 0 0 24px rgba(var(--pulso-acento-rgb), .05);
}

/* Ícono vectorial exclusivo para estados distintos del éxito. */
.acceso-pulso-simbolo {
    stroke: var(--pulso-acento);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: acceso-pulso-check .68s .26s ease-out forwards;
    filter: drop-shadow(0 0 5px rgba(var(--pulso-acento-rgb), .65));
}

.acceso-pulso--advertencia .acceso-pulso-simbolo {
    stroke-width: 3.5;
}

.acceso-pulso--informativa .acceso-pulso-simbolo {
    stroke-width: 5.5;
}

/* La luz interior de los estados de atención es deliberadamente moderada. */
.acceso-pulso-modal:not(.acceso-pulso--exito) .acceso-pulso-halo {
    background: radial-gradient(circle, rgba(var(--pulso-acento-rgb), .065) 0%, rgba(6, 33, 58, .48) 45%, rgba(2, 6, 23, 0) 72%);
}

.acceso-pulso-modal:not(.acceso-pulso--exito) .acceso-pulso-continuar:hover {
    border-color: var(--pulso-acento);
    background: var(--pulso-acento);
    color: #051423;
    box-shadow: 0 0 24px rgba(var(--pulso-acento-rgb), .45);
}

@media (prefers-reduced-motion: reduce) {
    .acceso-pulso-simbolo {
        stroke-dashoffset: 0;
    }
}


/* Solo se muestra el símbolo correspondiente al tipo elegido. */
.acceso-pulso-icono {
    display: none;
}

    .acceso-pulso-icono.activo {
        display: inline;
    }