/* =======================================================
   LOGIN ZONA LIVE - PALETA DEL LOGO
   Azul noche / rojo / blanco / plata.
   Solo afecta a la pantalla de ingreso.
   ======================================================= */
:root {
    --zona-navy-1000: #01040c;
    --zona-navy-950: #030817;
    --zona-navy-900: #071126;
    --zona-navy-850: #0b1731;
    --zona-navy-800: #102044;
    --zona-red-700: #9d0a22;
    --zona-red-600: #c8102e;
    --zona-red-500: #eb1738;
    --zona-red-400: #ff435b;
    --zona-white: #ffffff;
    --zona-silver: #d9e0eb;
    --zona-muted: #aebbd0;
    --zona-line: rgba(216, 225, 239, .20);
    --zona-card: rgba(5, 12, 29, .82);
    --zona-red-gradient: linear-gradient(105deg, #a80c26 0%, #e51637 56%, #ff455c 100%);
    --zona-metal-gradient: linear-gradient(110deg, #ffffff 0%, #bfc9d8 42%, #ffffff 72%, #9ca9bd 100%);
}

html,
body {
    min-height: 100%;
}

.login-db-warning {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 24% 18%, rgba(235, 23, 56, .22), transparent 34%),
        linear-gradient(135deg, var(--zona-navy-1000), var(--zona-navy-850));
}

.login-db-warning #actualizarBaseD {
    font-size: 1rem !important;
    border-radius: 999px;
    padding: 14px 24px;
    color: var(--zona-white);
    background: var(--zona-red-gradient);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 20px 50px rgba(200, 16, 46, .34);
}

.container-login.zona-login {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(440px, .82fr);
    font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--zona-white);
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 10%, rgba(235, 23, 56, .30), transparent 27%),
        radial-gradient(circle at 55% 103%, rgba(132, 148, 176, .16), transparent 39%),
        radial-gradient(circle at 91% 19%, rgba(235, 23, 56, .12), transparent 25%),
        linear-gradient(135deg, #02050d 0%, #061126 47%, #0a1832 100%);
}

.zona-login::before,
.zona-login::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.zona-login::before {
    background-image:
        linear-gradient(rgba(224, 230, 240, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 230, 240, .045) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(circle at 52% 56%, #000 0%, transparent 67%);
    mask-image: radial-gradient(circle at 52% 56%, #000 0%, transparent 67%);
}

.zona-login::after {
    background:
        linear-gradient(90deg, transparent 0%, transparent 56%, rgba(255, 255, 255, .07) 56.08%, transparent 56.20%),
        linear-gradient(118deg, transparent 0 19%, rgba(235, 23, 56, .05) 19.2% 19.45%, transparent 19.65% 100%);
}

.login-bg-grid {
    position: absolute;
    width: 46vw;
    height: 46vw;
    left: 30vw;
    top: 17vh;
    background: radial-gradient(circle, rgba(235, 23, 56, .54) 1px, transparent 1.8px);
    background-size: 25px 25px;
    opacity: .18;
    transform: rotate(-7deg);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
    mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}

.login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    pointer-events: none;
    opacity: .58;
}

.orb-one {
    width: 300px;
    height: 300px;
    background: rgba(220, 15, 49, .48);
    left: -120px;
    top: 2vh;
}

.orb-two {
    width: 340px;
    height: 340px;
    background: rgba(134, 149, 177, .15);
    right: -110px;
    bottom: -110px;
}

/* ================= PANEL IZQUIERDO ================= */
.login-left-panel {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 4.8vw, 82px);
}

.login-brand {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 38px;
}

.login-brand-logo {
    width: clamp(138px, 10vw, 178px);
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(4, 10, 24, .36));
    border: 1px solid rgba(224, 230, 240, .22);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, .30),
        0 0 0 6px rgba(235, 23, 56, .06),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}

.login-brand-logo img {
    width: 96%;
    height: 96%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24));
}

.login-brand-text strong {
    display: block;
    color: var(--zona-white);
    font-size: clamp(1.35rem, 1.8vw, 1.95rem);
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}

.login-brand-text span {
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 13px;
    border: 1px solid rgba(235, 23, 56, .48);
    border-radius: 999px;
    color: #ff6377;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: rgba(39, 4, 14, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.login-hero-copy {
    position: relative;
    z-index: 4;
    max-width: 720px;
}

.login-hero-copy h1 {
    max-width: 720px;
    margin: 0;
    color: var(--zona-white);
    font-size: clamp(2.45rem, 4.35vw, 5rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -.055em;
    text-wrap: balance;
    text-shadow: 0 18px 55px rgba(0, 0, 0, .38);
}

.login-hero-copy h1 span {
    background: linear-gradient(104deg, #ff2747 0%, #ff5368 43%, #ffffff 72%, #b7c2d2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(235, 23, 56, .18));
}

.login-hero-copy p {
    max-width: 620px;
    margin: 22px 0 0;
    color: #d4dceb;
    font-size: clamp(.98rem, 1.18vw, 1.16rem);
    line-height: 1.70;
}

.login-hero-copy p strong {
    color: var(--zona-white);
    font-weight: 900;
}

.login-feature-list {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    max-width: 550px;
    margin-top: 31px;
}

.login-feature-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 13px 17px;
    border-radius: 17px;
    background: linear-gradient(132deg, rgba(13, 30, 62, .88), rgba(4, 10, 24, .50));
    border: 1px solid rgba(208, 218, 232, .14);
    box-shadow:
        inset 3px 0 0 rgba(235, 23, 56, .66),
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 14px 34px rgba(0, 0, 0, .13);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.login-feature-card .feature-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #ff3b57;
    font-size: 1.24rem;
    background: linear-gradient(145deg, rgba(235, 23, 56, .20), rgba(197, 207, 224, .06));
    border: 1px solid rgba(235, 23, 56, .29);
    box-shadow: 0 0 22px rgba(235, 23, 56, .10);
}

.login-feature-card h3 {
    margin: 0 0 4px;
    color: var(--zona-white);
    font-size: .97rem;
    font-weight: 850;
}

.login-feature-card p {
    margin: 0;
    color: #b9c5d9;
    font-size: .83rem;
    line-height: 1.44;
}

.login-trust-line {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 25px;
    color: #c8d1df;
    font-size: .95rem;
}

.login-trust-line i {
    color: #ff334f;
}

.login-trust-line strong {
    color: #ffffff;
}

.login-support-btn {
    position: relative;
    z-index: 4;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 19px;
    padding: 11px 19px;
    border-radius: 999px;
    color: var(--zona-white);
    text-decoration: none;
    font-weight: 850;
    background: rgba(5, 13, 31, .70);
    border: 1px solid rgba(235, 23, 56, .55);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.login-support-btn i {
    color: #31d675;
}

.login-support-btn:hover,
.login-support-btn:focus {
    color: var(--zona-white);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: 0 18px 42px rgba(200, 16, 46, .23);
    text-decoration: none;
}

/* Visual de marca */
.login-hero-visual {
    position: absolute;
    right: clamp(-80px, -2.2vw, 12px);
    bottom: clamp(70px, 8vh, 118px);
    width: clamp(390px, 37vw, 680px);
    height: clamp(300px, 31vw, 560px);
    z-index: 2;
    pointer-events: none;
    opacity: .93;
}

.visual-logo-glow {
    position: absolute;
    inset: 7% 4% 14% 8%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 50%, rgba(235, 23, 56, .28), transparent 35%),
        radial-gradient(circle at 58% 50%, rgba(194, 205, 222, .17), transparent 55%);
    filter: blur(22px);
}

.visual-brand-mark {
    position: absolute;
    left: 5%;
    top: 18%;
    width: 88%;
    height: 56%;
    object-fit: contain;
    opacity: .87;
    filter:
        drop-shadow(0 24px 36px rgba(0, 0, 0, .42))
        drop-shadow(0 0 20px rgba(235, 23, 56, .18));
    transform: perspective(900px) rotateY(-5deg) rotateZ(-1deg);
}

.visual-float {
    position: absolute;
    display: grid;
    place-items: center;
    color: #f7f9fc;
    background: linear-gradient(145deg, rgba(16, 32, 66, .90), rgba(3, 8, 20, .67));
    border: 1px solid rgba(216, 225, 239, .24);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.visual-float::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 24px rgba(235, 23, 56, .10);
}

.visual-float-one {
    left: 11%;
    top: 53%;
    width: 70px;
    height: 86px;
    border-radius: 18px;
    color: #ff435b;
    font-size: 1.75rem;
}

.visual-float-two {
    right: 9%;
    top: 54%;
    width: 80px;
    height: 80px;
    border-radius: 19px;
    color: #dbe2ed;
    font-size: 1.75rem;
}

.visual-float-three {
    right: 13%;
    bottom: 11%;
    width: 62px;
    height: 62px;
    border-radius: 17px;
    color: #ff334f;
    font-size: 1.42rem;
}

.visual-equalizer {
    position: absolute;
    left: 30%;
    bottom: 5%;
    width: 42%;
    height: 72px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    padding: 11px 19px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(235, 23, 56, .28) 0%, rgba(107, 124, 154, .13) 45%, transparent 72%);
    border-bottom: 1px solid rgba(235, 23, 56, .30);
    box-shadow: 0 18px 42px rgba(235, 23, 56, .13);
}

.visual-equalizer span {
    width: 7px;
    min-height: 12px;
    border-radius: 999px;
    background: linear-gradient(to top, #b60c29, #ff3d58 62%, #ffffff);
    box-shadow: 0 0 13px rgba(235, 23, 56, .38);
    animation: zonaEqualizer 1.3s ease-in-out infinite alternate;
    transform-origin: bottom;
}

.visual-equalizer span:nth-child(1) { height: 24px; animation-delay: -.20s; }
.visual-equalizer span:nth-child(2) { height: 43px; animation-delay: -.85s; }
.visual-equalizer span:nth-child(3) { height: 31px; animation-delay: -.45s; }
.visual-equalizer span:nth-child(4) { height: 58px; animation-delay: -.70s; }
.visual-equalizer span:nth-child(5) { height: 38px; animation-delay: -.15s; }
.visual-equalizer span:nth-child(6) { height: 50px; animation-delay: -.58s; }
.visual-equalizer span:nth-child(7) { height: 27px; animation-delay: -.35s; }

@keyframes zonaEqualizer {
    from { transform: scaleY(.58); opacity: .65; }
    to { transform: scaleY(1); opacity: 1; }
}

/* ================= PANEL DERECHO ================= */
.login-right-panel {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(25px, 4.7vw, 74px);
}

.login-card {
    position: relative;
    width: min(100%, 552px);
    padding: clamp(31px, 3.9vw, 55px) clamp(28px, 3.7vw, 49px);
    border-radius: 31px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(13, 28, 59, .88), rgba(3, 8, 20, .87));
    border: 1px solid rgba(215, 224, 238, .18);
    box-shadow:
        0 36px 96px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(145deg, #f42846 0%, rgba(255, 255, 255, .40) 44%, rgba(193, 203, 219, .16) 68%, #a90b27 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .75;
    pointer-events: none;
}

.login-card::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    top: -148px;
    right: -108px;
    background: radial-gradient(circle, rgba(235, 23, 56, .22), transparent 68%);
    pointer-events: none;
}

.login-card-logo {
    position: relative;
    z-index: 2;
    width: min(74%, 268px);
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -8px auto 10px;
}

.login-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 16px 24px rgba(0, 0, 0, .40))
        drop-shadow(0 0 16px rgba(235, 23, 56, .12));
}

.login-header {
    position: relative;
    z-index: 2;
    margin-bottom: 29px;
    text-align: center;
}

.login-header h2 {
    margin: 0 0 8px;
    color: var(--zona-white);
    font-size: clamp(1.75rem, 2.3vw, 2.28rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.login-header p {
    margin: 0;
    color: #b7c2d4;
    font-size: .98rem;
}

#form-login {
    position: relative;
    z-index: 2;
}

.login-field-label {
    display: block;
    margin: 0 0 8px;
    color: #f2f5fa;
    font-size: .87rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.login-input-group {
    position: relative;
    margin-bottom: 19px;
}

.login-input-group input {
    width: 100%;
    height: 61px;
    box-sizing: border-box;
    padding: 0 54px 0 55px;
    border-radius: 16px;
    border: 1px solid rgba(198, 210, 229, .20);
    outline: none;
    background: rgba(2, 7, 18, .48);
    color: var(--zona-white) !important;
    font-size: .99rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.login-input-group input::placeholder {
    color: #7f8ca2;
}

.login-input-group input:focus {
    border-color: rgba(239, 35, 66, .83);
    background: rgba(5, 13, 31, .82);
    box-shadow:
        0 0 0 4px rgba(235, 23, 56, .11),
        0 0 30px rgba(235, 23, 56, .09);
}

.login-input-icon {
    position: absolute;
    z-index: 2;
    left: 21px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a7bd;
    font-size: 1.08rem;
    transition: color .22s ease;
}

.login-input-group:focus-within .login-input-icon {
    color: #ff3e58;
}

.login-toggle-password {
    position: absolute;
    z-index: 3;
    right: 15px;
    top: 50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #98a7bd;
    cursor: pointer;
    transition: color .20s ease, background .20s ease;
}

.login-toggle-password:hover,
.login-toggle-password:focus {
    color: #ff435b;
    background: rgba(235, 23, 56, .09);
    outline: none;
}

.login-help-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -2px 0 24px;
}

.login-help-row a {
    color: #ff4b63;
    font-size: .91rem;
    font-weight: 750;
    text-decoration: none;
}

.login-help-row a:hover,
.login-help-row a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.login-button {
    position: relative;
    width: 100%;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 17px;
    color: var(--zona-white);
    background: var(--zona-red-gradient);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .105em;
    cursor: pointer;
    box-shadow:
        0 23px 44px rgba(200, 16, 46, .30),
        inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.login-button::before {
    content: '';
    position: absolute;
    top: -70%;
    left: -45%;
    width: 35%;
    height: 240%;
    transform: rotate(24deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transition: left .55s ease;
}

.login-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
        0 28px 56px rgba(200, 16, 46, .37),
        0 0 28px rgba(235, 23, 56, .16);
}

.login-button:hover::before {
    left: 120%;
}

.login-button:active {
    transform: translateY(0);
}

.login-button span,
.login-button i {
    position: relative;
    z-index: 1;
}

#resultLogin {
    position: relative;
    z-index: 2;
    margin-top: 13px;
    color: var(--zona-white);
    text-align: center;
}

#resultLogin img {
    max-width: 72px !important;
}

.login-sunat-box {
    position: relative;
    z-index: 2;
    margin-top: 27px;
    color: #aeb9cb;
    text-align: center;
}

.sunat-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.sunat-divider::before,
.sunat-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205, 215, 231, .22), transparent);
}

.sunat-divider span {
    color: #aeb9cb;
    font-size: .87rem;
}

.sunat-verify {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--zona-white);
}

.sunat-verify > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--zona-white);
    background: linear-gradient(135deg, #a60b25, #f02a47);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 24px rgba(235, 23, 56, .20);
}

.sunat-verify span {
    display: block;
    color: #b8c3d5;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-align: left;
}

.sunat-verify strong {
    display: block;
    color: #f8fafc;
    font-size: 1.72rem;
    line-height: 1;
    letter-spacing: .04em;
}

.login-sunat-box p {
    margin: 17px 0 0;
    color: #98a9c0;
    font-size: .89rem;
}

.login-sunat-box p i {
    margin-right: 8px;
    color: #d0d9e6;
}

/* ================= RESPONSIVE ================= */
@media screen and (max-width: 1240px) {
    .container-login.zona-login {
        grid-template-columns: minmax(0, 1fr) minmax(430px, .88fr);
    }

    .login-left-panel {
        padding-left: 42px;
        padding-right: 34px;
    }

    .login-hero-visual {
        opacity: .58;
        right: -110px;
    }
}

@media screen and (max-width: 1050px) {
    .container-login.zona-login {
        display: block;
        overflow-y: auto;
    }

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

    .login-left-panel {
        min-height: auto;
        padding: 34px 38px 25px;
    }

    .login-brand {
        margin-bottom: 24px;
    }

    .login-hero-copy {
        max-width: 720px;
    }

    .login-hero-copy h1 {
        max-width: 720px;
        font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    }

    .login-feature-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
        gap: 10px;
        margin-top: 23px;
    }

    .login-feature-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .login-feature-card .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .login-feature-card p {
        display: none;
    }

    .login-trust-line,
    .login-support-btn {
        display: none;
    }

    .login-hero-visual {
        display: none;
    }

    .login-right-panel {
        min-height: auto;
        padding: 10px 30px 42px;
    }

    .login-card {
        width: min(100%, 620px);
    }
}

@media screen and (max-width: 720px) {
    .container-login.zona-login {
        background:
            radial-gradient(circle at 18% 5%, rgba(235, 23, 56, .23), transparent 29%),
            linear-gradient(155deg, #02050e 0%, #071328 55%, #0a1831 100%);
    }

    .login-left-panel {
        padding: 22px 18px 8px;
    }

    .login-brand {
        gap: 12px;
        margin-bottom: 13px;
    }

    .login-brand-logo {
        width: 112px;
        height: 59px;
        border-radius: 14px;
    }

    .login-brand-text strong {
        font-size: 1.12rem;
    }

    .login-brand-text span {
        margin-top: 6px;
        padding: 4px 9px;
        font-size: .60rem;
    }

    .login-hero-copy h1 {
        font-size: clamp(1.72rem, 8.5vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: -.04em;
    }

    .login-hero-copy p {
        display: none;
    }

    .login-feature-list {
        display: none;
    }

    .login-right-panel {
        padding: 12px 14px 26px;
    }

    .login-card {
        padding: 25px 18px;
        border-radius: 23px;
    }

    .login-card-logo {
        width: min(72%, 230px);
        height: 91px;
        margin-top: -7px;
        margin-bottom: 4px;
    }

    .login-header {
        margin-bottom: 24px;
    }

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

    .login-header p {
        font-size: .90rem;
    }

    .login-input-group input {
        height: 57px;
        border-radius: 14px;
    }

    .login-button {
        height: 59px;
        border-radius: 15px;
        font-size: .90rem;
        letter-spacing: .065em;
    }

    .login-sunat-box {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .visual-equalizer span,
    .login-button,
    .login-support-btn {
        animation: none !important;
        transition: none !important;
    }
}