:root {
    --azul: #0d3b7a;
    --azul-escuro: #082d63;
    --azul-claro: #174f98;
    --verde: #159447;
    --verde-claro: #2eaa54;
    --dourado: #c99424;
    --dourado-claro: #e3b44e;
    --cinza: #68707a;
    --cinza-claro: #f5f7fa;
    --borda: #dfe4ea;
    --branco: #ffffff;
    --erro: #e74c3c;
    --sucesso: #2ecc71;
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #ffffff;
    color: var(--azul);
    overflow-x: hidden;
}

.login-page {
    min-height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    overflow: hidden;
    background: #ffffff;
}

/* DECORAÇÃO SUPERIOR */
.onda-superior {
    position: absolute;
    top: -170px;
    left: -120px;
    width: 650px;
    height: 270px;
    background: var(--azul);
    transform: rotate(-17deg);
    border-radius: 0 0 60% 0;
    z-index: 0;
}

.onda-superior-verde {
    position: absolute;
    top: -145px;
    left: -105px;
    width: 620px;
    height: 250px;
    background: var(--verde);
    transform: rotate(-17deg);
    border-radius: 0 0 60% 0;
    z-index: 1;
}

.onda-superior-dourada {
    position: absolute;
    top: -125px;
    left: -90px;
    width: 590px;
    height: 230px;
    background: var(--dourado);
    transform: rotate(-17deg);
    border-radius: 0 0 60% 0;
    z-index: 2;
}

/* DECORAÇÃO INFERIOR */
.onda-inferior {
    position: absolute;
    bottom: -145px;
    left: -100px;
    width: 900px;
    height: 230px;
    background: var(--azul);
    transform: rotate(8deg);
    border-radius: 60% 0 0 0;
    z-index: 0;
}

.onda-inferior-verde {
    position: absolute;
    bottom: -125px;
    left: -100px;
    width: 850px;
    height: 190px;
    background: var(--verde);
    transform: rotate(8deg);
    border-radius: 60% 0 0 0;
    z-index: 1;
}

/* CARD PRINCIPAL */
.card-login {
    position: relative;
    z-index: 5;
    width: min(900px, calc(100vw - 40px));
    display: flex;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(13, 59, 122, .15);
    height: auto;
}

/* LADO ESQUERDO */
.left {
    width: 42%;
    padding: clamp(25px, 4vw, 42px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #ffffff;
    position: relative;
}

.left:after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #e4e8ed, transparent);
}

.logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.logo img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 220px;
    object-fit: contain;
}

.welcome {
    width: 100%;
    max-width: 330px;
    text-align: left;
}

.welcome h2 {
    margin: 5px 0 10px;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--azul);
}

.linha-dourada {
    width: 55px;
    height: 4px;
    background: var(--dourado);
    border-radius: 5px;
    margin-bottom: 15px;
}

.welcome p {
    margin: 0;
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.5;
    color: var(--cinza);
}

/* LADO DIREITO */
.right {
    width: 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(25px, 4vw, 42px);
    background: #ffffff;
}

.slider-wrapper {
    width: 100%;
    max-width: 430px;
    overflow: hidden;
}

.slider {
    display: flex;
    width: 200%;
    transition: transform .45s ease;
}

.painel {
    width: 50%;
    flex-shrink: 0;
    padding: 5px 15px;
}

.login-header {
    text-align: center;
    margin-bottom: 22px;
}

.icone-login {
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7f9fc;
    border: 1px solid #e6eaf0;
    color: var(--azul);
    font-size: 24px;
    box-shadow: 0 6px 20px rgba(13, 59, 122, .06);
}

.login-header h3 {
    margin: 0;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--azul);
}

.linha-titulo {
    width: 60px;
    height: 3px;
    background: var(--dourado);
    margin: 13px auto 0;
    border-radius: 10px;
}

/* ALERTA DE MENSAGENS */
.alert-message {
    display: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.alert-message.erro {
    display: block;
    background-color: #fde8e8;
    color: var(--erro);
    border: 1px solid #f8b4b4;
}

.alert-message.sucesso {
    display: block;
    background-color: #eafaf1;
    color: var(--verde);
    border: 1px solid #a3e4d7;
}

/* CAMPOS DE ENTRADA */
.input-group {
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    display: flex;
    border: 1px solid var(--borda);
    border-radius: 9px;
    background: #ffffff;
    overflow: hidden;
    transition: .2s;
}

.input-group:focus-within {
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(13, 59, 122, .08);
}

.input-group-text {
    width: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--azul);
    border: none;
    font-size: 17px;
}

.form-control {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 50px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #333;
    padding: 0 12px 0 0;
}

.form-control::placeholder {
    color: #9aa1aa;
}

.recuperar {
    text-align: right;
    margin: 0 0 18px;
}

.recuperar a,
#btnEsqueciSenha,
#btnVoltarLogin {
    color: var(--azul);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.recuperar a:hover,
#btnEsqueciSenha:hover,
#btnVoltarLogin:hover {
    color: var(--dourado);
    text-decoration: underline;
}

.btn-login,
.btn-rec {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--azul), var(--azul-claro));
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
    box-shadow: 0 7px 18px rgba(13, 59, 122, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-login:disabled,
.btn-rec:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-login:hover:not(:disabled),
.btn-rec:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(13, 59, 122, .23);
}

.recuperacao-texto {
    color: var(--cinza);
    font-size: 14px;
    line-height: 1.5;
    margin: -5px 0 22px;
    text-align: center;
}

.voltar {
    margin-top: 20px;
    text-align: center;
}

.marca {
    margin-top: 20px;
    color: #8a929b;
    font-size: 12px;
    text-align: center;
}

.marca i {
    color: var(--azul);
    margin-right: 4px;
}

.footer {
    position: fixed;
    z-index: 10;
    bottom: 12px;
    right: 25px;
    color: #7c848d;
    font-size: 12px;
}

.footer i {
    color: var(--azul);
    margin-right: 5px;
}

@media (max-width: 800px) {
    .login-page { padding: 20px; }
    .card-login { width: min(700px, calc(100vw - 30px)); }
    .left, .right { padding: 25px; }
    .logo img { max-width: 240px; max-height: 180px; }
    .welcome { max-width: 280px; }
}

@media (max-width: 650px) {
    body { overflow-y: auto; }
    .login-page { min-height: 100vh; height: auto; padding: 15px; align-items: flex-start; }
    .card-login { width: 100%; max-width: 430px; flex-direction: column; border-radius: 18px; margin: 5px auto 45px; box-shadow: 0 10px 35px rgba(13, 59, 122, .12); }
    .left { width: 100%; padding: 22px 20px 12px; border-bottom: 1px solid #edf0f3; }
    .left:after { display: none; }
    .logo { margin-bottom: 5px; }
    .logo img { max-width: 220px; max-height: 145px; }
    .welcome { max-width: 320px; text-align: center; }
    .welcome h2 { font-size: 23px; margin: 5px 0 7px; }
    .linha-dourada { margin-left: auto; margin-right: auto; margin-bottom: 10px; }
    .welcome p { font-size: 13px; line-height: 1.4; margin-bottom: 3px; }
    .right { width: 100%; padding: 24px 18px 28px; }
    .slider-wrapper { width: 100%; max-width: 100%; }
    .painel { padding: 0 4px; }
    .login-header { margin-bottom: 19px; }
    .icone-login { width: 52px; height: 52px; font-size: 22px; margin-bottom: 9px; }
    .login-header h3 { font-size: 22px; }
    .input-group { height: 48px; margin-bottom: 13px; }
    .input-group-text { width: 45px; font-size: 16px; }
    .form-control, .btn-login, .btn-rec { height: 48px; font-size: 15px; }
    .recuperar { margin: 0 0 17px; }
    .footer { position: fixed; left: 0; right: 0; bottom: 6px; width: 100%; text-align: center; font-size: 10px; z-index: 20; }
    .onda-superior, .onda-superior-verde, .onda-superior-dourada { display: none; }
    .onda-inferior, .onda-inferior-verde { opacity: .25; }
}

@media (max-width: 380px) {
    .login-page { padding: 10px; }
    .card-login { margin-top: 5px; border-radius: 15px; }
    .left { padding: 18px 15px 8px; }
    .logo img { max-width: 190px; max-height: 120px; }
    .welcome h2 { font-size: 21px; }
    .welcome p { font-size: 12px; }
    .right { padding: 20px 14px 25px; }
    .login-header h3 { font-size: 21px; }
    .painel { padding: 0; }
    .marca { margin-top: 15px; font-size: 11px; }
}

@media (max-height: 650px) and (min-width: 651px) {
    .login-page { padding: 10px; }
    .card-login { transform: scale(.90); transform-origin: center center; }
    .logo img { max-height: 160px; }
    .left, .right { padding: 20px; }
}