:root {
    --navy-950: #04162c;
    --navy-900: #072449;
    --navy-800: #0a315f;
    --blue-700: #075fc9;
    --blue-600: #0a72dd;
    --blue-500: #269cf0;
    --cyan-400: #39b7f4;

    --surface: #ffffff;
    --background: #f3f6fa;
    --border: #d8e1ec;

    --text: #102d55;
    --muted: #718198;

    --danger: #b42318;
    --danger-bg: #fdecec;
    --danger-border: #f4b6b2;

    --info: #175ca9;
    --info-bg: #eaf3ff;
    --info-border: #b9d5f8;

    --shadow:
        0 24px 60px rgba(7, 36, 73, 0.12),
        0 4px 15px rgba(7, 36, 73, 0.06);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
    color: var(--text);
    background: var(--background);
    font-family: Inter, Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
.login-page { min-height: 100vh; }

/* CORREÇÃO PRINCIPAL:
   remover mínimos excessivos nas colunas para o painel da direita não sumir */
.login-layout {
    display: grid;
    grid-template-columns: 57% 43%;
    min-height: 100vh;
    overflow: hidden;
}

/* ESQUERDA */
.login-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: #ffffff;
    isolation: isolate;
}
.login-hero-background {
    position: absolute;
    z-index: -4;
    inset: 0;
    background-image: url("../img/fabrica-login.jpg");
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}
.login-hero-overlay {
    position: absolute;
    z-index: -3;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 22, 47, 0.94) 0%, rgba(5, 39, 78, 0.84) 52%, rgba(4, 29, 61, 0.93) 100%);
}
.login-hero-glow {
    position: absolute;
    z-index: -2;
    top: -120px;
    left: -150px;
    width: 780px;
    height: 480px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(80, 168, 235, 0.12) 28%, transparent 68%);
    pointer-events: none;
}
.login-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    width: min(730px, calc(100% - 110px));
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vh, 68px) 0 clamp(34px, 5vh, 68px) clamp(30px, 4.6vw, 78px);
}
.hero-header { margin-bottom: clamp(34px, 5vh, 62px); }
.hero-logo { display: block; width: min(430px, 82%); height: auto; }
.hero-message h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 3vw, 56px);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.07;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.hero-accent {
    width: 185px;
    height: 4px;
    margin: 25px 0 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan-400), var(--blue-500));
}
.hero-features { width: min(570px, 100%); }
.hero-feature {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    min-height: 104px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.19);
}
.hero-feature:last-child { border-bottom: 0; }
.feature-icon {
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: rgba(5, 43, 83, 0.22);
    backdrop-filter: blur(4px);
}
.feature-icon svg {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-content strong, .feature-content span { display: block; }
.feature-content strong {
    margin-bottom: 6px;
    color: #39b9fa;
    font-size: clamp(22px, 1.6vw, 30px);
    line-height: 1;
}
.feature-content span {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(15px, 1.05vw, 19px);
    line-height: 1.4;
}

/* CURVAS DIREITA */
.hero-curve {
    position: absolute;
    top: -6%;
    bottom: -6%;
    border-radius: 50% 0 0 50%;
    pointer-events: none;
}
.hero-curve-dark {
    z-index: 3;
    right: -56px;
    width: 128px;
    background: linear-gradient(180deg, #0a5fb2 0%, #082c58 78%);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.08);
}
.hero-curve-light {
    z-index: 4;
    right: 50px;
    width: 28px;
    background: linear-gradient(180deg, #4ec4ff 0%, #1b97e8 100%);
}

/* DIREITA */
.login-form-area {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 42px 50px 30px 58px;
    background: linear-gradient(180deg, #f9fbfd 0%, #f1f5fa 100%);
}
.circuit-decoration {
    position: absolute;
    left: 0;
    right: 0;
    height: 210px;
    opacity: 0.65;
    pointer-events: none;
}
.circuit-decoration::before,
.circuit-decoration::after {
    content: "";
    position: absolute;
    width: 48%;
    height: 100%;
    background-image: linear-gradient(90deg, transparent 0 17%, #cbd6e5 17% 17.4%, transparent 17.4% 35%, #cbd6e5 35% 35.4%, transparent 35.4%);
    opacity: 0.55;
}
.circuit-decoration::before { left: 0; }
.circuit-decoration::after { right: 0; transform: scaleX(-1); }
.circuit-top { top: -22px; }
.circuit-bottom { bottom: -70px; transform: rotate(180deg); }

.login-card {
    position: relative;
    z-index: 3;
    width: min(100%, 610px);
    padding: clamp(30px, 4vw, 46px);
    border: 1px solid rgba(216, 225, 236, 0.88);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow);
}
.login-card-header { display: flex; justify-content: center; }
.login-card-logo { display: block; width: min(390px, 88%); height: auto; }
.login-card-divider {
    height: 1px;
    margin: 25px 0 32px;
    background: linear-gradient(90deg, transparent, #d4dee9 12%, #d4dee9 88%, transparent);
}
.form-group { margin-bottom: 24px; }
.form-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--navy-900);
    font-size: 17px;
    font-weight: 750;
}
.input-control { position: relative; }
.input-control input {
    width: 100%;
    height: 60px;
    padding: 0 56px 0 55px;
    border: 2px solid var(--border);
    border-radius: 13px;
    outline: none;
    color: #405875;
    background: #ffffff;
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-control input::placeholder { color: #98a6b8; }
.input-control input:focus {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 4px rgba(10, 114, 221, 0.12);
}
.input-icon, .password-toggle {
    position: absolute;
    top: 50%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #74869c;
    transform: translateY(-50%);
}
.input-icon { left: 17px; }
.password-toggle {
    right: 17px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.input-icon svg, .password-toggle svg { width: 24px; height: 24px; fill: currentColor; }
.password-toggle:hover { color: var(--blue-600); }
.login-button {
    width: 100%;
    min-height: 64px;
    margin-top: 5px;
    border: 0;
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(90deg, #0872df 0%, #0758bd 100%);
    box-shadow: 0 12px 25px rgba(8, 105, 207, 0.24);
    cursor: pointer;
    font-size: 19px;
    font-weight: 750;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.login-button:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(8, 105, 207, 0.28);
}
.login-button:active { transform: translateY(0); }
.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
    color: #61758f;
    font-size: 14px;
}
.security-note svg { width: 19px; height: 19px; fill: currentColor; }
.login-alert {
    margin-bottom: 22px;
    padding: 13px 15px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 14px;
    line-height: 1.45;
}
.login-alert-danger { border-color: var(--danger-border); color: var(--danger); background: var(--danger-bg); }
.login-alert-info { border-color: var(--info-border); color: var(--info); background: var(--info-bg); }
.login-footer {
    position: relative;
    z-index: 3;
    margin-top: 31px;
    color: #637994;
    font-size: 13px;
    text-align: center;
}

/* AJUSTES INTERMEDIÁRIOS */
@media (max-width: 1280px) {
    .login-layout { grid-template-columns: 56% 44%; }
    .login-hero-content { width: calc(100% - 90px); padding-left: 42px; }
    .hero-message h1 { font-size: 38px; }
    .hero-logo { width: 380px; }
    .hero-feature { grid-template-columns: 72px minmax(0, 1fr); }
    .feature-icon { width: 67px; height: 67px; }
    .feature-icon svg { width: 39px; height: 39px; }
    .hero-curve-dark { right: -52px; width: 120px; }
    .hero-curve-light { right: 46px; width: 26px; }
    .login-form-area { padding-inline: 28px 34px; }
}

@media (max-width: 1100px) {
    .login-layout { grid-template-columns: 54% 46%; }
    .hero-message h1 { font-size: 34px; }
    .hero-logo { width: 340px; }
    .login-card { width: min(100%, 560px); }
    .hero-curve-dark { right: -46px; width: 106px; }
    .hero-curve-light { right: 40px; width: 22px; }
}

/* TABLET */
@media (max-width: 980px) {
    .login-layout {
        display: block;
        min-height: 100vh;
        overflow: visible;
    }
    .login-hero { min-height: auto; }
    .login-hero-content {
        width: 100%;
        min-height: auto;
        padding: 36px 28px 45px;
    }
    .hero-header { margin-bottom: 28px; }
    .hero-logo { width: 330px; max-width: 80%; }
    .hero-message h1 { max-width: 700px; font-size: clamp(30px, 6vw, 45px); }
    .hero-features {
        display: grid;
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
    .hero-feature {
        display: block;
        min-height: 190px;
        padding: 19px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.055);
    }
    .feature-icon { width: 62px; height: 62px; margin-bottom: 15px; }
    .feature-content strong { font-size: 22px; }
    .feature-content span { font-size: 14px; }
    .hero-curve { display: none; }
    .login-form-area {
        min-height: auto;
        padding: 55px 24px 34px;
    }
    .login-card { max-width: 590px; }
}

/* CELULAR */
@media (max-width: 680px) {
    .login-hero-content { padding: 26px 20px 34px; }
    .hero-logo { width: 275px; max-width: 88%; }
    .hero-header { margin-bottom: 24px; }
    .hero-message h1 {
        font-size: clamp(28px, 8vw, 38px);
        letter-spacing: -0.035em;
    }
    .hero-message h1 br:nth-child(2),
    .hero-message h1 br:nth-child(3) { display: none; }
    .hero-accent { width: 125px; margin: 20px 0; }
    .hero-features { grid-template-columns: 1fr; gap: 10px; }
    .hero-feature {
        display: grid;
        min-height: auto;
        grid-template-columns: 60px minmax(0, 1fr);
        align-items: center;
        padding: 14px;
    }
    .feature-icon { width: 55px; height: 55px; margin: 0; }
    .feature-icon svg { width: 33px; height: 33px; }
    .feature-content strong { font-size: 20px; }
    .feature-content span { font-size: 13px; }
    .login-form-area { padding: 32px 14px max(24px, env(safe-area-inset-bottom)); }
    .login-card {
        padding: 28px 20px;
        border-radius: 19px;
    }
    .login-card-logo { width: min(310px, 90%); }
    .login-card-divider { margin: 20px 0 26px; }
    .input-control input { height: 56px; font-size: 16px; }
    .login-button { min-height: 58px; font-size: 17px; }
    .login-footer { margin-top: 24px; font-size: 11px; }
}

/* TELAS BAIXAS */
@media (min-width: 981px) and (max-height: 800px) {
    .login-hero-content {
        justify-content: flex-start;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .hero-header { margin-bottom: 25px; }
    .hero-logo { width: 330px; }
    .hero-message h1 { font-size: 32px; }
    .hero-accent { margin-block: 16px 10px; }
    .hero-feature { min-height: 85px; padding-block: 9px; }
    .feature-icon { width: 60px; height: 60px; }
    .feature-icon svg { width: 36px; height: 36px; }
    .login-card { max-width: 555px; padding: 28px 36px; }
    .login-card-logo { width: 320px; }
    .login-card-divider { margin: 18px 0 24px; }
    .form-group { margin-bottom: 18px; }
    .input-control input { height: 54px; }
    .login-button { min-height: 56px; }
}

/* AJUSTE DA BORDA DIREITA / CURVA CENTRAL */

.login-layout {
    display: grid;
    grid-template-columns: 58% 42%;
    min-height: 100vh;
    overflow: hidden;
}

.login-hero {
    position: relative;
    min-height: 100vh;
    overflow: visible;
    color: #ffffff;
    isolation: isolate;
    z-index: 1;
}

/* Curva principal escura */
.hero-curve {
    position: absolute;
    top: -4%;
    bottom: -4%;
    border-radius: 55% 0 0 55% / 50% 0 0 50%;
    pointer-events: none;
}

.hero-curve-dark {
    z-index: 5;
    right: -92px;
    width: 170px;
    background: linear-gradient(
        180deg,
        #0b4f99 0%,
        #072f61 34%,
        #062754 68%,
        #041d3f 100%
    );
    box-shadow: -8px 0 18px rgba(0, 0, 0, 0.08);
}

/* Faixa azul clara fina */
.hero-curve-light {
    z-index: 6;
    right: 36px;
    width: 42px;
    background: linear-gradient(
        180deg,
        #57caff 0%,
        #2aaef7 36%,
        #1693e3 100%
    );
}

.login-form-area {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 42px 52px 30px 64px;
    background: linear-gradient(180deg, #f8fbfe 0%, #f1f5fa 100%);
}

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

@media (max-width: 1280px) {
    .login-layout {
        grid-template-columns: 57% 43%;
    }

    .hero-curve-dark {
        right: -82px;
        width: 154px;
    }

    .hero-curve-light {
        right: 34px;
        width: 38px;
    }

    .login-form-area {
        padding: 38px 34px 26px 48px;
    }
}

@media (max-width: 1100px) {
    .login-layout {
        grid-template-columns: 56% 44%;
    }

    .hero-curve-dark {
        right: -74px;
        width: 140px;
    }

    .hero-curve-light {
        right: 30px;
        width: 34px;
    }

    .login-form-area {
        padding-left: 38px;
    }
}

@media (max-width: 980px) {
    .hero-curve,
    .hero-curve-dark,
    .hero-curve-light {
        display: none;
    }

    .login-layout {
        display: block;
        overflow: visible;
    }

    .login-form-area {
        min-height: auto;
        padding: 55px 24px 34px;
    }
}