@import url('https://fonts.googleapis.com/css2?family=New+Amsterdam&family=News+Cycle:wght@400;700&display=swap');

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.tela-autenticacao {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vh, 2rem) clamp(0.75rem, 2vw, 1.5rem);
    background-color: #FFFFFF;
    background-image: url("data:svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M-50 140 C 250 80 450 200 800 120 C 1150 40 1300 180 1500 110 L 1500 250 L -50 250 Z' fill='%23E2EDE4' opacity='0.7'/%3E%3Cpath d='M-50 170 C 200 120 500 230 900 140 C 1200 80 1380 200 1500 160 L 1500 250 L -50 250 Z' fill='%23C9DCCB' opacity='0.55'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% clamp(70px, 12vh, 150px);
    background-attachment: fixed;
    font-family: var(--font-body, 'News Cycle', sans-serif);
    font-size: 100%;
    color: var(--color-text-dark, #280D07);
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================================
   2. CONTAINER & LAYOUT PRINCIPAL (DESKTOP)
   ========================================================================== */
.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 4vw, 5rem);
    width: 100%;
    max-width: 1300px;
    margin: auto;
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
    background-color: transparent;
    border-radius: 16px;
    position: relative;
    z-index: 1;
}

/* Coluna da Imagem / Ilustração */
.predio {
    flex: 1 1 50%;
    max-width: 580px;
    /* A ilustracao e quadrada (1918x1918); o quadro acompanha a proporcao. */
    aspect-ratio: 1;
    max-height: min(75vh, 600px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* A ilustracao e puramente decorativa e pesa 2,5 MB. Como fundo declarado
   apenas no desktop, o arquivo nunca e baixado no celular: regra que nao casa
   nao dispara requisicao. Um <img> escondido com `display: none` continuaria
   sendo baixado. */
@media (min-width: 901px) {
    .predio {
        background-image: url("../img/auth/design.4c6e66687c9d.webp");
    }
}

/* Coluna do Formulário */
.login {
    flex: 1 1 50%;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    margin: 0 auto;
}

/* ==========================================================================
   3. CABEÇALHO DA AUTENTICAÇÃO (BARRA SUPERIOR, LOGO & TÍTULOS)
   ========================================================================== */
.auth-top-bar,
.header-cadastro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.btn-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast, 0.2s), transform var(--transition-fast, 0.2s), background-color var(--transition-fast, 0.2s);
}

.btn-voltar:hover {
    opacity: 0.8;
    background-color: rgba(48, 113, 70, 0.08);
    transform: translateX(-2px);
}

.btn-voltar img {
    width: 24px;
    height: auto;
    display: block;
}

.logo {
    width: clamp(110px, 14vw, 140px);
    max-width: 150px;
    height: auto;
    display: block;
    align-self: center;
}

.login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

h1 {
    color: var(--color-brand-green, #307146);
    font-family: var(--font-heading, "New Amsterdam", sans-serif);
    font-size: clamp(2.3rem, 4.5vw, 3.5rem);
    line-height: 1;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0;
}

.msg {
    color: var(--color-brand-green, #307146);
    font-family: var(--font-body, "News Cycle", sans-serif);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.35;
    font-weight: 500;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
}

/* ==========================================================================
   4. FORMULÁRIO & INPUTS
   ========================================================================== */
form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.input-container {
    position: relative;
    width: 100%;
}

.input-container input {
    width: 100%;
    height: 48px;
    padding: 0 1.15rem;
    padding-right: 3rem;
    border: 2px solid #280D07;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #280D07;
    font-family: var(--font-body, "News Cycle", sans-serif);
    background-color: #FFFFFF;
    transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}

.input-container input[type="email"],
.input-container input[type="text"],
.input-container input[type="tel"] {
    padding-right: 1.15rem;
}

.input-container input:focus {
    outline: none;
    border-color: var(--color-brand-green, #307146);
    box-shadow: 0 0 0 3px rgba(48, 113, 70, 0.15);
}

.input-container input::placeholder {
    color: #5A4A42;
    font-weight: 700;
    opacity: 0.85;
    text-transform: uppercase;
}

.icone-olho {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.icone-olho img {
    width: 22px;
    height: auto;
    display: block;
    transition: opacity var(--transition-fast, 0.2s);
}

.icone-olho:hover img {
    opacity: 0.65;
}

/* ==========================================================================
   5. AÇÕES SECUNDÁRIAS & BOTÃO
   ========================================================================== */
.opcoes-login {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lembrar-me {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--color-brand-green, #307146);
    font-family: var(--font-body, "News Cycle", sans-serif);
    cursor: pointer;
    user-select: none;
}

.lembrar-me input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-brand-green, #307146);
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color var(--transition-fast, 0.2s), border-color var(--transition-fast, 0.2s);
}

.lembrar-me input[type="checkbox"]:checked {
    background-color: var(--color-brand-green, #307146);
}

.lembrar-me input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.esqueci-senha {
    color: var(--color-brand-green, #307146);
    font-family: var(--font-body, "News Cycle", sans-serif);
    text-decoration: none;
    font-weight: 600;
    transition: opacity var(--transition-fast, 0.2s);
}

.esqueci-senha:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.botao-login {
    width: 100%;
    height: 48px;
    padding: 0.4rem;
    background-color: #1E3624;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-family: var(--font-heading, "New Amsterdam", sans-serif);
    font-size: 1.4rem;
    letter-spacing: 0.75px;
    cursor: pointer;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast, 0.2s), transform var(--transition-fast, 0.2s);
}

.botao-login:hover:not(:disabled) {
    background-color: #152518;
}

.botao-login:active:not(:disabled) {
    transform: scale(0.99);
}

.botao-login:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cadastro {
    text-align: center;
    margin-top: 0.15rem;
    font-family: var(--font-body, "News Cycle", sans-serif);
    color: #000000;
    font-weight: 500;
    font-size: 0.9rem;
}

.cadastro a {
    color: var(--color-brand-green, #307146);
    text-decoration: none;
    font-weight: 700;
    transition: opacity var(--transition-fast, 0.2s);
}

.cadastro a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* ==========================================================================
   6. PÁGINA DE CADASTRO
   ========================================================================== */
.linha-dupla {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.linha-dupla .input-container {
    flex: 1;
}

.regras-senha {
    color: #E53935;
    font-family: var(--font-body, "News Cycle", sans-serif);
    font-size: 0.8rem;
    font-weight: bold;
    list-style-type: none;
    margin-top: -0.5rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.regra-ok {
    color: var(--color-brand-green, #307146) !important;
}

/* ==========================================================================
   7. FEEDBACK INLINE E RECUPERAÇÃO DE SENHA
   ========================================================================== */
.auth-feedback {
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-family: var(--font-body, "News Cycle", sans-serif);
    font-size: 0.9rem;
    line-height: 1.35;
    font-weight: 700;
}

.auth-feedback--error {
    background-color: #FDF2F2;
    color: #991B1B;
    border: 1.5px solid #F87171;
}

.auth-feedback--success {
    background-color: #F0FDF4;
    color: #166534;
    border: 1.5px solid #4ADE80;
}

.auth-feedback--info {
    background-color: #EFF6FF;
    color: #1E40AF;
    border: 1.5px solid #60A5FA;
}

.passo-recuperacao {
    width: 100%;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg-erro-inline {
    color: #E53935;
    font-family: var(--font-body, "News Cycle", sans-serif);
    font-size: 0.8rem;
    margin-top: 0.4rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.msg-erro-inline p {
    font-weight: bold;
    margin: 0;
}

.msg-erro-inline span {
    font-weight: normal;
}

/* ==========================================================================
   8. RESPONSIVIDADE MOBILE (VIEWPORT EXATA SEM SCROLL)
   ========================================================================== */
@media (max-width: 900px) {
    body.tela-autenticacao {
        padding: 0.25rem 1rem 0.75rem 1rem;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 380px;
        padding: 0;
        gap: clamp(0.2rem, 0.9vh, 0.45rem);
        margin: auto;
    }

    /* A ilustracao sai do fluxo no layout empilhado: em tela estreita ela
       empurrava o formulario para baixo da dobra. Segue visivel no desktop. */
    .predio {
        display: none;
    }

    .login {
        width: 100%;
        max-width: 100%;
        gap: clamp(0.25rem, 1vh, 0.5rem);
    }

    /* Barra superior com logo centralizado e botão voltar compacto */
    .auth-top-bar,
    .header-cadastro {
        justify-content: center;
        position: relative;
        width: 100%;
        margin-bottom: -0.25rem;
    }

    .btn-voltar {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-voltar img {
        width: 20px;
    }

    .btn-voltar:hover {
        transform: translateY(-50%) translateX(-2px);
    }

    .logo {
        width: clamp(95px, 25vw, 115px);
        margin: 0 auto;
    }

    .login-header {
        gap: 0.1rem;
    }

    h1 {
        font-size: clamp(2.1rem, 6.5vw, 2.5rem);
        line-height: 1;
        margin: 0;
    }

    .msg {
        font-size: clamp(0.78rem, 2.3vw, 0.86rem);
        line-height: 1.25;
        max-width: 325px;
    }

    form {
        gap: clamp(0.35rem, 1vh, 0.55rem);
    }

    .linha-dupla {
        flex-direction: column;
        gap: 0.5rem;
    }

    .input-container input {
        height: 42px;
        padding: 0 0.95rem;
        padding-right: 2.75rem;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    .icone-olho {
        right: 0.85rem;
    }

    .icone-olho img {
        width: 19px;
    }

    .opcoes-login {
        font-size: 0.82rem;
        gap: 0.3rem;
        margin: 0;
    }

    .lembrar-me {
        font-size: 0.82rem;
        gap: 0.35rem;
    }

    .lembrar-me input[type="checkbox"] {
        width: 1.15rem;
        height: 1.15rem;
    }

    .esqueci-senha {
        font-size: 0.82rem;
    }

    .botao-login {
        height: 44px;
        font-size: 1.35rem;
        border-radius: 10px;
        margin-top: 0.05rem;
    }

    .cadastro {
        font-size: 0.82rem;
        margin-top: 0.05rem;
    }
}

@media (max-width: 360px) or (max-height: 620px) {
    /* Janela baixa no desktop: a ilustracao encolhe para nao empurrar o form. */
    .predio {
        max-height: 110px;
        max-width: 130px;
    }

    .logo {
        width: 85px;
    }

    h1 {
        font-size: 1.9rem;
    }

    .msg {
        font-size: 0.74rem;
        line-height: 1.15;
    }

    .input-container input {
        height: 38px;
        font-size: 0.82rem;
    }

    .botao-login {
        height: 40px;
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   9. TELA DE RECUPERAÇÃO DE SENHA
   ========================================================================== */
.tela-recuperacao .login-header h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: normal;
}

.tela-recuperacao .login {
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.tela-recuperacao .header-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tela-recuperacao form {
    gap: 1.5rem;
}

.tela-recuperacao .input-container input {
    text-align: left;
}
/* Recuperação de acesso */
.passo-recuperacao[hidden] { display: none !important; }
.recovery-description { line-height: 1.6; margin: 0 0 20px; color: #374151; overflow-wrap: anywhere; }
.passo-recuperacao label { display: block; margin-bottom: 8px; font-weight: 700; }
.recovery-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin: 20px 0; }
.recovery-actions button { border: 0; background: transparent; color: #307146; text-decoration: underline; cursor: pointer; font: inherit; }
.recovery-actions button:disabled { opacity: .6; cursor: wait; }
#codigo-rec { letter-spacing: .4em; font-size: 24px; }
.recovery-login { display: block; text-align: center; text-decoration: none; }

/* Preserve readable fields and natural scrolling when the keyboard opens. */
.login, .input-container, .linha-dupla > * { min-width: 0; }
.auth-feedback { overflow-wrap: anywhere; }
@media (max-width: 900px) {
    body.tela-autenticacao { padding-block: 20px; }
    .login { gap: 16px; }
    form { gap: 12px; }
    .input-container input { min-height: 48px; font-size: 16px; }
    .botao-login { min-height: 48px; height: auto; padding-block: 10px; }
    .msg, .cadastro, .opcoes-login, .lembrar-me, .esqueci-senha { font-size: 14px; line-height: 1.5; }
    .opcoes-login { flex-wrap: wrap; gap: 8px 16px; }
    .btn-voltar { width: 44px; height: 44px; }
}