/* ==========================================================
   COLABORADORES IO
   Seguridad de cuenta / recuperación de contraseña
   Archivo independiente para no mezclar con portal/login
   ========================================================== */

:root {
    --seg-blue: #0b2861;
    --seg-blue-dark: #061d4d;
    --seg-blue-deep: #061944;
    --seg-blue-soft: #edf3ff;
    --seg-red: #d71132;
    --seg-yellow: #ffd400;
    --seg-text: #10224d;
    --seg-muted: #697386;
    --seg-line: #dce2ec;
    --seg-bg: #f4f6fa;
    --seg-white: #ffffff;
    --seg-shadow: 0 20px 55px rgba(13,35,78,.13);
}

.password-page,
.recovery-page {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--seg-text);
    background:
        radial-gradient(circle at 82% 8%, rgba(11,40,97,.05), transparent 25%),
        linear-gradient(145deg, #f1f3f7 0%, #fafbfc 50%, #f2f4f8 100%);
}

/* CAMBIO DE CONTRASEÑA */
.password-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px 24px;
}

.password-shell {
    width: min(1040px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: 46% 54%;
    overflow: hidden;
    border: 1px solid #cfd7e5;
    border-radius: 18px;
    background: var(--seg-white);
    box-shadow: var(--seg-shadow);
}

.password-brand {
    position: relative;
    overflow: hidden;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 44px 40px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(42,91,176,.20), transparent 42%),
        linear-gradient(155deg, #06245c 0%, #0b2c6b 54%, #071e4e 100%);
}

.password-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 72%, rgba(255,255,255,.025) 72% 73%, transparent 73%),
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.06), transparent 22%);
}

.password-logo {
    position: relative;
    z-index: 3;
    display: block;
    width: auto;
    max-width: 245px;
    max-height: 100px;
    object-fit: contain;
    object-position: left center;
}

.password-watermark {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 52%;
    width: min(520px, 110%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background-image: url("sol_ignaciano.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .10;
    filter: grayscale(1) brightness(2.3);
    pointer-events: none;
}

.password-brand > div:not(.password-watermark) {
    position: relative;
    z-index: 3;
}

.password-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--seg-yellow);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.password-brand h1 {
    max-width: 410px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.password-brand p {
    max-width: 430px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.76);
    font-size: .94rem;
    line-height: 1.65;
}

.password-motto {
    position: relative;
    z-index: 3;
    padding-top: 25px;
    color: rgba(255,255,255,.82);
    font-size: .70rem;
    font-weight: 500;
    letter-spacing: .38em;
}

.password-motto::before {
    content: "";
    display: block;
    width: 190px;
    height: 4px;
    margin-bottom: 18px;
    background: linear-gradient(90deg,#22418d 0 25%,var(--seg-red) 25% 50%,var(--seg-yellow) 50% 75%,#fff 75% 100%);
}

.password-form-panel {
    min-height: 650px;
    display: flex;
    background: #fff;
}

.password-form-wrap {
    width: min(410px, calc(100% - 64px));
    margin: auto;
    padding: 45px 0;
}

.password-step {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--seg-red);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.password-form-wrap h2,
.recovery-card h1 {
    margin: 0;
    color: var(--seg-blue-dark);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.password-form-wrap h2::after,
.recovery-card h1::after {
    content: "";
    display: block;
    width: 66px;
    height: 4px;
    margin-top: 13px;
    border-radius: 20px;
    background: linear-gradient(90deg,var(--seg-blue) 0 33%,var(--seg-red) 33% 66%,var(--seg-yellow) 66%);
}

.password-intro,
.recovery-card > p {
    margin: 20px 0 24px;
    color: var(--seg-muted);
    font-size: .86rem;
    line-height: 1.65;
}

.password-rules {
    margin: 0 0 24px;
    padding: 15px 17px;
    border: 1px solid #e1e6ef;
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--seg-muted);
    font-size: .78rem;
    line-height: 1.55;
}

.password-rules strong {
    display: block;
    margin-bottom: 7px;
    color: var(--seg-blue-dark);
    font-size: .80rem;
}

.password-rules ul {
    margin: 0;
    padding-left: 18px;
}

.password-rules li + li {
    margin-top: 3px;
}

.password-field {
    margin-bottom: 20px;
}

.password-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--seg-blue-dark);
    font-size: .78rem;
    font-weight: 750;
}

.password-field input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid #d8dfe9;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: var(--seg-text);
    font-size: .92rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.password-field input:focus {
    border-color: #7d91ba;
    box-shadow: 0 0 0 3px rgba(11,40,97,.07);
}

.password-field input::placeholder {
    color: #9aa2b1;
}

.password-submit {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(100deg, #0c3278 0%, #061d4d 100%);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(6,29,77,.18);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.password-submit:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(6,29,77,.23);
    filter: brightness(1.05);
}

/* RECUPERACIÓN */
.recovery-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px 24px;
}

.recovery-card {
    width: min(520px, 100%);
    padding: 38px 42px 40px;
    border: 1px solid #cfd7e5;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--seg-shadow);
}

.recovery-logo {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 76px;
    margin-bottom: 26px;
    object-fit: contain;
    object-position: left center;
}

.recovery-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 14px;
    background: var(--seg-blue-soft);
    color: var(--seg-blue);
    font-size: 1.3rem;
}

.recovery-card h1 {
    font-size: 1.85rem;
}

.recovery-card .alert {
    border-radius: 9px;
    font-size: .82rem;
}

.recovery-back {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 15px;
    border: 1px solid #d7dce6;
    border-radius: 8px;
    background: #fff;
    color: var(--seg-blue);
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
    transition: .16s ease;
}

.recovery-back:hover {
    background: var(--seg-blue-soft);
    color: var(--seg-blue);
}

.recovery-button-link {
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .password-page {
        align-items: flex-start;
        padding: 24px 18px;
    }

    .password-shell {
        grid-template-columns: 42% 58%;
        min-height: 610px;
    }

    .password-brand,
    .password-form-panel {
        min-height: 610px;
    }

    .password-brand {
        padding: 40px 30px 34px;
    }

    .password-logo {
        max-width: 190px;
        max-height: 62px;
    }

    .password-brand h1 {
        font-size: 1.75rem;
    }

    .password-form-wrap {
        width: min(390px, calc(100% - 48px));
    }
}

@media (max-width: 767.98px) {
    .password-page {
        padding: 0;
        background: #fff;
    }

    .password-shell {
        width: 100%;
        min-height: 100vh;
        display: block;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .password-brand {
        min-height: 285px;
        padding: 26px 24px 28px;
    }

    .password-logo {
        max-width: 170px;
        max-height: 50px;
    }

    .password-watermark {
        width: 330px;
        top: 55%;
        opacity: .08;
    }

    .password-brand h1 {
        margin-top: 25px;
        font-size: 1.85rem;
    }

    .password-brand p {
        font-size: .82rem;
    }

    .password-motto {
        margin-top: 22px;
        font-size: .61rem;
        letter-spacing: .31em;
    }

    .password-form-panel {
        min-height: auto;
    }

    .password-form-wrap {
        width: calc(100% - 42px);
        max-width: 420px;
        padding: 34px 0 40px;
    }

    .password-form-wrap h2 {
        font-size: 1.7rem;
    }

    .recovery-page {
        align-items: flex-start;
        padding: 20px 14px;
    }

    .recovery-card {
        margin-top: 15px;
        padding: 28px 23px 30px;
        border-radius: 15px;
    }

    .recovery-logo {
        max-width: 160px;
        max-height: 60px;
        margin-bottom: 22px;
    }

    .recovery-card h1 {
        font-size: 1.6rem;
    }
}

@media (max-width: 430px) {
    .password-brand {
        min-height: 265px;
    }

    .password-brand h1 {
        font-size: 1.65rem;
    }

    .password-brand p {
        display: none;
    }

    .recovery-card {
        padding: 25px 20px 28px;
    }
}