/* =========================================================
   LOGIN · SUBNEXO934 · DISEÑO DEFINITIVO
   ========================================================= */

.login-subnexo {
    width: 100%;
    height: calc(100dvh - 115px);
    min-height: 590px;
    max-height: 850px;

    display: grid;
    grid-template-columns:
        minmax(480px, 1.05fr)
        minmax(480px, 0.95fr);

    position: relative;
    overflow: hidden;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 23% 12%,
            rgba(25, 85, 190, 0.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 70% 50%,
            rgba(14, 90, 190, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #06142d 0%,
            #07172f 48%,
            #040e1f 100%
        );

    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.18);

    color: #ffffff;
}


/* =========================================================
   COLUMNA IZQUIERDA
   ========================================================= */

.login-presentacion {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    position: relative;

    padding:
        clamp(1.3rem, 2.3vh, 2.2rem)
        clamp(2rem, 3vw, 3.3rem)
        1.4rem;

    overflow: hidden;
}


/* Fondo geométrico */

.login-presentacion::before {
    content: "";

    position: absolute;
    width: 560px;
    height: 560px;

    top: -260px;
    right: -190px;

    border-radius: 50%;

    border:
        1px solid
        rgba(59, 130, 246, 0.09);

    box-shadow:
        0 0 0 90px
        rgba(59, 130, 246, 0.018),
        0 0 0 180px
        rgba(59, 130, 246, 0.012);

    pointer-events: none;
}


/* ---------------------------------------------------------
   MARCA
   --------------------------------------------------------- */

.login-marca {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    gap: 1rem;

    margin-bottom:
        clamp(1rem, 2.1vh, 1.8rem);
}


.login-logo-oficial {
    width: clamp(62px, 6vw, 86px);
    height: clamp(72px, 7vw, 100px);

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(0, 0, 0, 0.28)
        );
}


.login-marca-texto {
    display: flex;
    flex-direction: column;
}


.login-nombre-marca {
    color: #ffffff;

    font-size:
        clamp(1.55rem, 2.2vw, 2.15rem);

    font-weight: 850;

    letter-spacing: -0.045em;

    line-height: 1;
}


.login-nombre-marca span {
    color: #2585ff;
}


.login-marca-texto small {
    margin-top: 0.4rem;

    color:
        rgba(226, 232, 240, 0.75);

    font-size: 0.84rem;
}


/* ---------------------------------------------------------
   TEXTO
   --------------------------------------------------------- */

.login-presentacion-contenido {
    position: relative;
    z-index: 3;

    max-width: 590px;
}


.login-eyebrow {
    display: block;

    margin-bottom: 0.55rem;

    color: #32bfff;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.20em;
}


.login-presentacion h1 {
    display: flex;
    flex-direction: column;

    margin: 0 0 0.75rem;

    color: #ffffff;

    font-size:
        clamp(2rem, 3vw, 3.2rem);

    font-weight: 850;

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.login-presentacion h1 span {
    color: #3180f5;
}


.login-presentacion-texto {
    max-width: 570px;

    margin: 0;

    color:
        rgba(226, 232, 240, 0.79);

    font-size:
        clamp(0.88rem, 1vw, 1rem);

    line-height: 1.55;
}


/* =========================================================
   ZONA CENTRAL IZQUIERDA
   ========================================================= */

.login-zona-central {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.05fr)
        minmax(170px, 0.75fr);

    align-items: center;

    gap: 1rem;

    position: relative;

    margin-top: 0.8rem;
}


/* ---------------------------------------------------------
   CARACTERÍSTICAS
   --------------------------------------------------------- */

.login-caracteristicas {
    display: grid;

    gap: 0.55rem;

    position: relative;
    z-index: 4;
}


.login-caracteristica {
    min-height: 60px;

    display: flex;
    align-items: center;

    gap: 0.8rem;

    padding: 0.65rem 0.85rem;

    border:
        1px solid
        rgba(110, 160, 220, 0.16);

    border-radius: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(24, 52, 95, 0.58),
            rgba(13, 33, 70, 0.28)
        );

    backdrop-filter: blur(7px);
}


.login-caracteristica-icono {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        rgba(37, 99, 235, 0.18);

    color: #49bfff;

    font-size: 1.05rem;
}


.login-caracteristica strong {
    display: block;

    margin-bottom: 0.1rem;

    color: #ffffff;

    font-size: 0.91rem;
}


.login-caracteristica small {
    display: block;

    color:
        rgba(203, 213, 225, 0.70);

    font-size: 0.76rem;

    line-height: 1.35;
}


/* =========================================================
   GRÁFICO
   ========================================================= */

.login-grafico {
    height: 100%;

    min-height: 220px;

    position: relative;

    opacity: 0.95;
}


.login-orbita {
    position: absolute;

    left: 50%;
    top: 52%;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(37, 150, 255, 0.22);
}


.login-orbita-1 {
    width: 280px;
    height: 280px;
}


.login-orbita-2 {
    width: 210px;
    height: 210px;
}


.login-orbita-3 {
    width: 145px;
    height: 145px;
}


.login-escudo {
    position: absolute;

    left: 50%;
    top: 52%;

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

    width: 94px;
    height: 112px;

    display: grid;
    place-items: center;

    border:
        2px solid #35c8ff;

    border-radius:
        45% 45% 52% 52%
        / 30% 30% 68% 68%;

    background:
        linear-gradient(
            180deg,
            rgba(19, 105, 221, 0.28),
            rgba(6, 38, 83, 0.15)
        );

    color: #4fd7ff;

    font-size: 2.25rem;

    box-shadow:
        0 0 32px
        rgba(0, 153, 255, 0.34),
        inset 0 0 25px
        rgba(0, 183, 255, 0.10);
}


.login-nodo {
    position: absolute;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(59, 181, 255, 0.55);

    background: #071a39;

    color: #4bc9ff;

    font-size: 1rem;

    box-shadow:
        0 0 16px
        rgba(37, 99, 235, 0.24);
}


.login-nodo-1 {
    top: 16%;
    left: 39%;
}


.login-nodo-2 {
    top: 52%;
    left: 4%;
}


.login-nodo-3 {
    bottom: 4%;
    right: 8%;
}


/* ---------------------------------------------------------
   PIE IZQUIERDO
   --------------------------------------------------------- */

.login-presentacion-pie {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    gap: 0.45rem;

    color:
        rgba(203, 213, 225, 0.52);

    font-size: 0.75rem;
}


.login-presentacion-pie i {
    color: #37aaff;
}


/* =========================================================
   COLUMNA DERECHA
   ========================================================= */

.login-zona-formulario {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding:
        clamp(1.1rem, 2.2vh, 2rem)
        clamp(1.7rem, 3vw, 3rem);
}


/* =========================================================
   TARJETA
   ========================================================= */

.login-tarjeta {
    width: min(100%, 610px);

    padding:
        clamp(1.35rem, 2.4vh, 2rem)
        clamp(1.6rem, 2.5vw, 2.5rem)
        1.2rem;

    border:
        1px solid
        rgba(91, 154, 225, 0.40);

    border-radius: 27px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 35, 74, 0.72),
            rgba(5, 20, 46, 0.65)
        );

    backdrop-filter: blur(18px);

    box-shadow:
        0 26px 60px
        rgba(0, 0, 0, 0.26),
        inset 0 1px 0
        rgba(255, 255, 255, 0.035);
}


/* ---------------------------------------------------------
   CABECERA TARJETA
   --------------------------------------------------------- */

.login-cabecera {
    margin-bottom:
        clamp(0.9rem, 1.8vh, 1.4rem);

    text-align: center;
}


.login-icono-acceso {
    width: 56px;
    height: 56px;

    margin:
        0 auto
        clamp(0.55rem, 1.2vh, 0.9rem);

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(48, 187, 255, 0.42);

    color: #35bcff;

    background:
        radial-gradient(
            circle,
            rgba(22, 104, 215, 0.20),
            rgba(10, 40, 90, 0.04)
        );

    font-size: 1.5rem;
}


.login-cabecera .login-eyebrow {
    margin-bottom: 0.55rem;
}


.login-cabecera h2 {
    margin: 0 0 0.35rem;

    color: #ffffff;

    font-size:
        clamp(1.8rem, 2.3vw, 2.45rem);

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.035em;
}


.login-cabecera p {
    margin: 0;

    color:
        rgba(203, 213, 225, 0.68);

    font-size: 0.88rem;
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.login-campo {
    margin-bottom:
        clamp(0.7rem, 1.35vh, 1rem);
}


.login-campo > label {
    display: block;

    margin-bottom: 0.42rem;

    color: #f8fafc;

    font-size: 0.9rem;

    font-weight: 700;
}


.login-control {
    position: relative;

    display: flex;
    align-items: center;
}


.login-control > i:first-child {
    position: absolute;

    left: 1rem;

    z-index: 2;

    color: #3cbcff;

    font-size: 1rem;

    pointer-events: none;
}


.login-input {
    width: 100%;
    height: 52px;

    padding:
        0 3rem
        0 2.9rem;

    border:
        1px solid
        rgba(108, 165, 225, 0.42);

    border-radius: 15px;

    outline: none;

    background:
        rgba(3, 14, 33, 0.38);

    color: #ffffff;

    font-size: 0.95rem;

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


.login-input::placeholder {
    color:
        rgba(203, 213, 225, 0.42);
}


.login-input:hover {
    border-color:
        rgba(75, 190, 255, 0.60);
}


.login-input:focus {
    border-color: #32bfff;

    background:
        rgba(6, 23, 51, 0.68);

    box-shadow:
        0 0 0 3px
        rgba(50, 191, 255, 0.10);
}


.login-ver-password {
    position: absolute;

    right: 0.65rem;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #85a9d0;

    cursor: pointer;
}


.login-ver-password:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.05);
}


/* ---------------------------------------------------------
   ERRORES
   --------------------------------------------------------- */

.login-error {
    display: flex;
    align-items: center;

    gap: 0.35rem;

    margin:
        0.35rem 0 0;

    color: #fda4af;

    font-size: 0.8rem;
}


/* =========================================================
   OPCIONES
   ========================================================= */

.login-opciones {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin:
        0.2rem 0
        clamp(0.85rem, 1.6vh, 1.2rem);
}


.login-recordar {
    display: flex;
    align-items: center;

    gap: 0.55rem;

    margin: 0;

    color: #e2e8f0;

    font-size: 0.84rem;

    cursor: pointer;
}


.login-recordar input {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    accent-color: #2378ff;
}


.login-recuperacion {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 0.3rem;
}


.login-recuperacion a {
    display: flex;
    align-items: center;

    gap: 0.3rem;

    color: #32bfff;

    text-decoration: none;

    font-size: 0.81rem;
    font-weight: 650;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.login-recuperacion a:hover {
    color: #ffffff;

    transform: translateX(2px);
}


.login-recuperacion i {
    font-size: 0.65rem;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.login-boton-acceso {
    width: 100%;
    height: 52px;

    border: 0;
    border-radius: 14px;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;

    background:
        linear-gradient(
            90deg,
            #1f73ff 0%,
            #1689ff 45%,
            #2bc5ee 100%
        );

    box-shadow:
        0 14px 30px
        rgba(37, 99, 235, 0.27);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}


.login-boton-acceso:hover {
    color: #ffffff;

    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        0 17px 36px
        rgba(37, 99, 235, 0.36);
}


/* =========================================================
   PIE TARJETA
   ========================================================= */

.login-pie {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 0.5rem;

    margin-top:
        clamp(0.75rem, 1.4vh, 1rem);

    padding-top:
        clamp(0.65rem, 1.2vh, 0.9rem);

    border-top:
        1px solid
        rgba(148, 163, 184, 0.15);

    color:
        rgba(203, 213, 225, 0.57);

    font-size: 0.77rem;

    text-align: center;
}


.login-pie i {
    color: #35baff;
}


/* ---------------------------------------------------------
   PIE DERECHO
   --------------------------------------------------------- */

.login-zona-pie {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin-top: 0.8rem;

    color:
        rgba(203, 213, 225, 0.40);

    font-size: 0.72rem;
}


.login-punto {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(77, 190, 255, 0.60);
}


/* =========================================================
   SWEETALERT
   ========================================================= */

.usuario-creado-swal {
    margin: 0.9rem 0;

    padding: 0.7rem 1rem;

    border-radius: 12px;

    background: #eff6ff;

    color: #1d4ed8;

    font-size: 1.2rem;

    font-weight: 800;
}


/* =========================================================
   PORTÁTILES / ESCRITORIO CON POCA ALTURA
   ========================================================= */

@media
    (min-width: 1101px)
    and (max-height: 780px) {

    .login-subnexo {
        height: calc(100dvh - 105px);
        min-height: 550px;
    }

    .login-marca {
        margin-bottom: 0.75rem;
    }

    .login-logo-oficial {
        width: 55px;
        height: 66px;
    }

    .login-nombre-marca {
        font-size: 1.45rem;
    }

    .login-marca-texto small {
        margin-top: 0.2rem;
        font-size: 0.72rem;
    }

    .login-presentacion h1 {
        font-size: 2rem;
    }

    .login-presentacion-texto {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .login-zona-central {
        margin-top: 0.45rem;
    }

    .login-caracteristica {
        min-height: 50px;
        padding: 0.45rem 0.65rem;
    }

    .login-caracteristica-icono {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .login-caracteristica strong {
        font-size: 0.8rem;
    }

    .login-caracteristica small {
        font-size: 0.68rem;
    }

    .login-grafico {
        min-height: 170px;
    }

    .login-tarjeta {
        padding:
            1rem
            1.75rem
            0.9rem;
    }

    .login-icono-acceso {
        width: 45px;
        height: 45px;
        margin-bottom: 0.4rem;
        font-size: 1.2rem;
    }

    .login-cabecera {
        margin-bottom: 0.65rem;
    }

    .login-cabecera h2 {
        font-size: 1.65rem;
    }

    .login-cabecera p {
        font-size: 0.78rem;
    }

    .login-campo {
        margin-bottom: 0.55rem;
    }

    .login-input {
        height: 45px;
    }

    .login-opciones {
        margin-bottom: 0.65rem;
    }

    .login-boton-acceso {
        height: 46px;
    }

    .login-pie {
        margin-top: 0.55rem;
        padding-top: 0.5rem;
    }

    .login-zona-pie {
        margin-top: 0.45rem;
    }
}


/* =========================================================
   TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1100px) {

    .login-subnexo {
        height: auto;
        min-height: auto;
        max-height: none;

        grid-template-columns:
            minmax(280px, 0.8fr)
            minmax(390px, 1.2fr);

        border-radius: 24px;
    }

    .login-presentacion {
        padding: 1.6rem;
    }

    .login-logo-oficial {
        width: 58px;
        height: 70px;
    }

    .login-presentacion h1 {
        font-size: 2.1rem;
    }

    .login-presentacion-texto {
        font-size: 0.88rem;
    }

    .login-zona-central {
        display: block;
    }

    .login-caracteristicas {
        margin-top: 1.2rem;
    }

    .login-caracteristica:nth-child(3) {
        display: none;
    }

    .login-grafico {
        display: none;
    }

    .login-zona-formulario {
        padding: 1.5rem;
    }
}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 820px) {

    .login-subnexo {
        display: block;

        border-radius: 22px;
    }

    .login-presentacion {
        height: auto;

        padding:
            1.3rem
            1.3rem
            1rem;
    }

    .login-marca {
        margin-bottom: 0.8rem;
    }

    .login-logo-oficial {
        width: 52px;
        height: 62px;
    }

    .login-nombre-marca {
        font-size: 1.4rem;
    }

    .login-presentacion h1 {
        display: block;

        margin-bottom: 0.5rem;

        font-size: 1.8rem;
    }

    .login-presentacion h1 span {
        margin-left: 0.2rem;
    }

    .login-presentacion-texto {
        max-width: 650px;

        font-size: 0.84rem;
    }

    .login-zona-central,
    .login-presentacion-pie {
        display: none;
    }

    .login-zona-formulario {
        height: auto;

        padding:
            0.5rem
            1rem
            1.3rem;
    }

    .login-tarjeta {
        width: min(100%, 600px);
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .login-subnexo {
        border-radius: 16px;
    }

    .login-presentacion {
        padding:
            1rem
            1rem
            0.65rem;
    }

    .login-marca {
        gap: 0.7rem;

        margin-bottom: 0.6rem;
    }

    .login-logo-oficial {
        width: 44px;
        height: 52px;
    }

    .login-nombre-marca {
        font-size: 1.2rem;
    }

    .login-marca-texto small {
        margin-top: 0.2rem;
        font-size: 0.66rem;
    }

    .login-eyebrow {
        font-size: 0.62rem;
    }

    .login-presentacion h1 {
        font-size: 1.55rem;
    }

    .login-presentacion-texto {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .login-zona-formulario {
        padding:
            0.4rem
            0.7rem
            1rem;
    }

    .login-tarjeta {
        padding:
            1.2rem
            1rem
            1rem;

        border-radius: 19px;
    }

    .login-icono-acceso {
        width: 44px;
        height: 44px;

        font-size: 1.15rem;
    }

    .login-cabecera h2 {
        font-size: 1.6rem;
    }

    .login-opciones {
        flex-direction: column;

        gap: 0.65rem;
    }

    .login-recuperacion {
        align-items: flex-start;
    }

    .login-recuperacion a {
        font-size: 0.78rem;

        text-align: left;
    }

    .login-zona-pie {
        display: none;
    }
}

/* =========================================================
   RECUPERACIÓN DE ACCESO · SUBNEXO934
   ========================================================= */

.login-subnexo-recuperacion .login-presentacion {
    justify-content: flex-start;
}

.login-subnexo-recuperacion .login-presentacion-contenido {
    max-width: 560px;
}


/* ---------------------------------------------------------
   SECUENCIA VISUAL · RECORDAR USUARIO
   --------------------------------------------------------- */

.recuperacion-visual {
    position: relative;

    display: flex;
    flex: 1;

    min-height: 150px;

    align-items: center;
    justify-content: center;

    gap: 0;

    padding: 1rem 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    transition: none;
}

.recuperacion-visual:hover {
    border-color: transparent;

    box-shadow: none;

    transform: none;
}

.recuperacion-visual-icono {
    width: 74px;
    height: 74px;

    flex: 0 0 74px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(63, 184, 255, 0.42);

    background:
        radial-gradient(
            circle,
            rgba(31, 115, 255, 0.24),
            rgba(7, 28, 63, 0.22)
        );

    color: #39c0ff;

    font-size: 1.7rem;

    box-shadow:
        0 0 28px
        rgba(30, 120, 255, 0.15);
}

.recuperacion-linea {
    width: clamp(55px, 8vw, 120px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(50, 191, 255, 0.15),
            rgba(50, 191, 255, 0.75),
            rgba(50, 191, 255, 0.15)
        );
}


/* ---------------------------------------------------------
   MENSAJE DE SEGURIDAD
   --------------------------------------------------------- */

.recuperacion-mensaje-seguridad {
    display: flex;
    align-items: flex-start;

    gap: 0.8rem;

    padding: 0.8rem 1rem;

    margin-bottom: 1rem;

    border:
        1px solid
        rgba(78, 156, 235, 0.17);

    border-radius: 15px;

    background:
        rgba(18, 47, 89, 0.32);
}

.recuperacion-mensaje-seguridad > i {
    color: #43c3ff;
    font-size: 1.15rem;
}

.recuperacion-mensaje-seguridad strong {
    display: block;

    margin-bottom: 0.1rem;

    color: #f8fafc;

    font-size: 0.86rem;
}

.recuperacion-mensaje-seguridad span {
    display: block;

    color:
        rgba(203, 213, 225, 0.68);

    font-size: 0.75rem;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   TARJETA
   --------------------------------------------------------- */

.recuperacion-tarjeta {
    width: min(100%, 590px);
}


/* ---------------------------------------------------------
   CUENTA
   --------------------------------------------------------- */

.recuperacion-cuenta {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    margin-bottom: 1rem;

    padding: 0.75rem 0.9rem;

    border:
        1px solid
        rgba(78, 156, 235, 0.18);

    border-radius: 14px;

    background:
        rgba(7, 29, 62, 0.45);
}

.recuperacion-cuenta-icono {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        rgba(37, 99, 235, 0.18);

    color: #46c4ff;
}

.recuperacion-cuenta small {
    display: block;

    color:
        rgba(203, 213, 225, 0.58);

    font-size: 0.7rem;
}

.recuperacion-cuenta strong {
    display: block;

    color: #f8fafc;

    font-size: 0.84rem;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   BOTONES GENERAR / MOSTRAR
   --------------------------------------------------------- */

.recuperacion-acciones-password {
    display: flex;

    gap: 0.55rem;

    margin:
        0.1rem 0
        0.75rem;
}

.recuperacion-boton-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.4rem;

    min-height: 38px;

    padding: 0.45rem 0.75rem;

    border:
        1px solid
        rgba(77, 170, 245, 0.35);

    border-radius: 10px;

    background:
        rgba(8, 31, 67, 0.58);

    color: #8bd8ff;

    font-size: 0.78rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.recuperacion-boton-secundario:hover {
    border-color: #39bfff;

    background:
        rgba(20, 70, 130, 0.45);

    color: #ffffff;
}


/* ---------------------------------------------------------
   REQUISITOS
   --------------------------------------------------------- */

.recuperacion-requisitos {
    display: flex;
    align-items: flex-start;

    gap: 0.65rem;

    margin-bottom: 0.9rem;

    padding: 0.7rem 0.8rem;

    border:
        1px solid
        rgba(61, 161, 236, 0.16);

    border-radius: 12px;

    background:
        rgba(7, 29, 62, 0.34);

    color:
        rgba(203, 213, 225, 0.70);

    font-size: 0.73rem;

    line-height: 1.42;
}

.recuperacion-requisitos i {
    flex: 0 0 auto;

    margin-top: 0.05rem;

    color: #43c7ff;

    font-size: 1rem;
}


/* ---------------------------------------------------------
   ACCIONES FINALES
   --------------------------------------------------------- */

.recuperacion-acciones-finales {
    display: grid;

    grid-template-columns:
        auto
        minmax(180px, 1fr);

    align-items: center;

    gap: 0.8rem;
}

.recuperacion-cancelar {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    color:
        rgba(203, 213, 225, 0.72);

    font-size: 0.8rem;
    font-weight: 600;

    text-decoration: none;
}

.recuperacion-cancelar:hover {
    color: #ffffff;
}


/* ---------------------------------------------------------
   PIE VOLVER
   --------------------------------------------------------- */

.login-pie-volver a {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    color: #49c6ff;

    text-decoration: none;

    font-size: 0.8rem;

    font-weight: 650;
}

.login-pie-volver a:hover {
    color: #ffffff;
}


/* =========================================================
   GRÁFICO PASSWORD
   ========================================================= */

.recuperacion-password-grafico {
    flex: 1;

    min-height: 145px;

    position: relative;

    display: grid;
    place-items: center;
}

.recuperacion-escudo {
    width: 110px;
    height: 130px;

    display: grid;
    place-items: center;

    border:
        2px solid
        rgba(53, 200, 255, 0.85);

    border-radius:
        45% 45% 52% 52%
        / 30% 30% 68% 68%;

    background:
        linear-gradient(
            180deg,
            rgba(31, 115, 255, 0.24),
            rgba(7, 31, 68, 0.16)
        );

    color: #48caff;

    font-size: 2.6rem;

    box-shadow:
        0 0 38px
        rgba(0, 145, 255, 0.24);
}

.recuperacion-punto {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #39c4ff;

    box-shadow:
        0 0 14px
        rgba(57, 196, 255, 0.9);
}

.punto-1 {
    left: 25%;
    top: 32%;
}

.punto-2 {
    right: 25%;
    top: 25%;
}

.punto-3 {
    right: 32%;
    bottom: 20%;
}


/* =========================================================
   PORTÁTILES BAJOS
   ========================================================= */

@media
    (min-width: 1101px)
    and (max-height: 780px) {

    .recuperacion-visual,
    .recuperacion-password-grafico {
        min-height: 105px;
    }

    .recuperacion-visual-icono {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 1.25rem;
    }

    .recuperacion-escudo {
        width: 78px;
        height: 92px;

        font-size: 1.8rem;
    }

    .recuperacion-mensaje-seguridad {
        padding: 0.55rem 0.7rem;

        margin-bottom: 0.6rem;
    }
}


/* =========================================================
   TABLET / MÓVIL
   ========================================================= */

@media (max-width: 820px) {

    .recuperacion-visual,
    .recuperacion-password-grafico,
    .recuperacion-mensaje-seguridad {
        display: none;
    }
}


@media (max-width: 600px) {

    .recuperacion-acciones-password {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .recuperacion-acciones-finales {
        grid-template-columns: 1fr;
    }

    .recuperacion-cancelar {
        justify-content: center;

        order: 2;

        padding-top: 0.25rem;
    }
}

/* =========================================================
   SOLICITUD DE APERTURA DE CHAT
   ========================================================= */

.bloque-solicitar-chat {
    width: min(100%, 620px);

    display: flex;
    align-items: center;

    gap: 1rem;

    padding: 1.1rem 1.2rem;

    margin-top: 1rem;

    border: 1px solid
        rgba(37, 99, 235, 0.18);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.07),
            rgba(14, 165, 233, 0.03)
        );
}


.bloque-solicitar-chat-icono {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background:
        rgba(37, 99, 235, 0.12);

    color: #2563eb;

    font-size: 1.35rem;
}


.bloque-solicitar-chat-contenido {
    flex: 1;
}


.bloque-solicitar-chat h3 {
    margin:
        0
        0
        0.3rem;

    font-size: 1rem;
}


.bloque-solicitar-chat p {
    margin:
        0
        0
        0.8rem;

    color: var(--texto-secundario);

    font-size: 0.9rem;

    line-height: 1.5;
}


@media (max-width: 600px) {

    .bloque-solicitar-chat {
        align-items: flex-start;
    }

    .bloque-solicitar-chat-icono {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }
}

/* =========================================================
   ZONA DE PELIGRO · APARTADOS
   ========================================================= */

.zona-peligro-categoria {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    margin-top: 2rem;
    padding: 1.2rem 1.3rem;

    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: 14px;

    background:
        rgba(220, 53, 69, 0.035);
}

.zona-peligro-categoria h3 {
    margin:
        0.15rem
        0
        0.25rem;

    font-size: 1rem;
}

.zona-peligro-categoria p {
    margin: 0;

    color: var(--texto-secundario);

    font-size: 0.88rem;
}

@media (max-width: 700px) {

    .zona-peligro-categoria {
        align-items: flex-start;
        flex-direction: column;
    }

    .zona-peligro-categoria .btn {
        width: 100%;
    }
}

/* ============================================================
   SUBNEXO934 · CAMBIO DE CONTRASEÑA
   ============================================================ */


/* ============================================================
   GRÁFICO
   ============================================================ */

.cambio-password-grafico {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    margin: 28px 0;
}


.cambio-password-icono {
    display: grid;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    place-items: center;

    color:
        rgb(255 255 255 / 72%);

    font-size: 1rem;

    background:
        rgb(255 255 255 / 8%);

    border:
        1px solid
        rgb(255 255 255 / 12%);

    border-radius: 13px;
}


.cambio-password-icono-central {
    width: 60px;
    height: 60px;

    flex-basis: 60px;

    color: #ffffff;

    font-size: 1.35rem;

    background:
        rgb(255 255 255 / 14%);

    border-color:
        rgb(255 255 255 / 22%);

    border-radius: 17px;

    box-shadow:
        0 10px 28px
        rgb(0 0 0 / 12%);
}


.cambio-password-linea {
    width: 54px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgb(255 255 255 / 10%),
            rgb(255 255 255 / 36%),
            rgb(255 255 255 / 10%)
        );
}


/* ============================================================
   CAMBIO OBLIGATORIO · PRESENTACIÓN
   ============================================================ */

.cambio-password-aviso-obligatorio {
    color: #fef3c7;

    background:
        rgb(245 158 11 / 12%);

    border-color:
        rgb(245 158 11 / 22%);
}


.cambio-password-aviso-obligatorio > i {
    color: #fbbf24;
}


/* ============================================================
   TARJETA
   ============================================================ */

.cambio-password-tarjeta {
    width: min(
        470px,
        100%
    );
}


.cambio-password-tarjeta-obligatoria {
    border-top:
        3px solid
        #f59e0b;
}


.login-icono-acceso-warning {
    color: #92400e;

    background-color: #fef3c7;
}


/* ============================================================
   AVISO INTERIOR
   ============================================================ */

.cambio-password-alerta {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin:
        0
        0
        16px;

    padding: 10px 11px;

    color: #854d0e;

    background-color: #fffbeb;

    border:
        1px solid
        #fde68a;

    border-radius: 10px;
}


.cambio-password-alerta > i {
    margin-top: 1px;

    color: #d97706;
}


.cambio-password-alerta > div {
    display: grid;
}


.cambio-password-alerta strong {
    font-size: 0.67rem;
}


.cambio-password-alerta span {
    margin-top: 2px;

    font-size: 0.6rem;

    line-height: 1.45;
}


/* ============================================================
   SEPARADOR
   ============================================================ */

.separador-cambio-password {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 1px 0;
}


.separador-cambio-password::before {
    position: absolute;

    top: 50%;
    right: 0;
    left: 0;

    height: 1px;

    content: "";

    background-color: #e2e8f0;
}


.separador-cambio-password span {
    position: relative;

    z-index: 1;

    padding: 0 9px;

    color: #94a3b8;

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    background-color: #ffffff;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 520px) {

    .cambio-password-grafico {
        gap: 7px;

        margin: 22px 0;
    }


    .cambio-password-icono {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .cambio-password-icono-central {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }


    .cambio-password-linea {
        width: 30px;
    }

}