/* Login: split screen — marca à esquerda, formulário à direita (como no mockup). */

.login {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Lado da marca ------------------------------------------------------ */
.login__marca {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--esp-10);
    background: var(--cor-tinta);
    color: var(--cor-texto-inverso);
}

.login__logo { display: flex; align-items: center; gap: var(--esp-3); }
.login__logo-marca {
    /* Bloco branco pelo mesmo motivo da sidebar: o traço do emblema é
       verde-escuro e desapareceria neste painel. */
    width: 48px; height: 48px;
    background: #fff;
    border-radius: var(--raio-campo);
    padding: 4px;
    object-fit: contain;
    flex-shrink: 0;
}
.login__logo-nome { font-family: var(--fonte-titulo); font-size: var(--texto-lg); font-weight: 700; }
.login__logo-sub {
    font-family: var(--fonte-mono);
    font-size: var(--texto-xs);
    letter-spacing: var(--espaco-letra-rotulo);
    color: #8FA9A4;
}

.login__titulo {
    max-width: 15ch;
    font-size: 40px;
    line-height: 1.1;
    color: #fff;
}
.login__tagline {
    margin-top: var(--esp-4);
    max-width: 42ch;
    color: #A9BFC0;
    font-size: var(--texto-lg);
    line-height: 1.6;
}

/* Legenda dos três eixos One Health */
.login__eixos { display: flex; gap: var(--esp-6); margin-top: var(--esp-8); }
.login__eixo {
    display: flex; align-items: center; gap: var(--esp-2);
    font-size: var(--texto-base);
    color: #C4D5D4;
}
.login__eixo::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cor);
}

.login__selos {
    display: flex; flex-direction: column; gap: var(--esp-1);
    font-family: var(--fonte-mono);
    font-size: var(--texto-xs);
    letter-spacing: var(--espaco-letra-rotulo);
    color: #6E8688;
}

/* ---- Lado do formulário ------------------------------------------------- */
.login__painel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--esp-10);
    background: var(--cor-superficie);
}

.login__form { width: 100%; max-width: 368px; }

/* A abertura do formulário é centrada: marca, título e subtítulo formam um
   bloco só. Os CAMPOS seguem alinhados à esquerda — rótulo centralizado sobre
   campo de largura total fica solto e atrapalha a leitura de cima para baixo. */
.login__marca-completa {
    display: block;
    width: 232px; height: auto;
    margin: 0 auto var(--esp-6);
}
.login__form h2,
.login__form-sub { text-align: center; }
.login__form h2 {
    font-size: 27px;
    margin-bottom: var(--esp-2);
}
.login__form-sub {
    margin: 0 0 var(--esp-8);
    color: var(--cor-texto-secundario);
    font-size: var(--texto-md);
}

.login__campo { margin-bottom: var(--esp-5); }

.login__acoes { display: flex; flex-direction: column; gap: var(--esp-4); }
.login__acoes .botao { width: 100%; padding: 12px; }
.login__esqueci {
    text-align: center;
    font-size: var(--texto-base);
    color: var(--cor-texto-secundario);
}

.login__erro {
    padding: var(--esp-3);
    margin-bottom: var(--esp-5);
    background: var(--status-descartado-bg);
    color: var(--status-descartado-fg);
    border-radius: var(--raio-campo);
    font-size: var(--texto-md);
}

.login__lgpd { margin-top: var(--esp-10); }

/* Abaixo de 900px o split vira coluna única; a plataforma segue desktop-first,
   mas a tela de login não deveria travar quem abre no celular para conferir. */
@media (max-width: 900px) {
    .login { grid-template-columns: minmax(0, 1fr); }
    .login__marca { padding: var(--esp-6); }
    .login__titulo { font-size: 30px; }
}