/* 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 {
    /* `gap` pequeno de propósito: o PNG traz 30% de margem transparente no
       topo (ver a conta em `.login__parceiros`), que já afasta a assinatura do
       rótulo. Somar um `gap` largo a ela solta as duas coisas.

       O `margin-top` NÃO é redundante com o `space-between` do painel. Abaixo
       de 900px o split vira coluna única e a altura passa a ser ditada pelo
       conteúdo: sem folga sobrando, `space-between` não distribui nada, e o
       rótulo encostava na linha dos eixos — lido como um quarto item dela.
       Medido a 768px e a 375px, e só a captura mostrou. É o mesmo valor que a
       linha dos eixos usa acima de si. */
    margin-top: var(--esp-8);
    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;
}

/* A assinatura conjunta ILMD · Fiocruz · SUS.
 *
 * `width` EXPLÍCITO junto de `height: auto` — armadilha registrada no
 * CLAUDE.md, e o `estilo.css` do manual a comenta nesta mesma imagem: sem
 * largura declarada o navegador pode derivar a largura da altura e a faixa
 * deforma.
 *
 * A LARGURA DECLARADA NÃO É O QUE SE VÊ, e é por isso que ela merece conta. O
 * arquivo é marca de terceiro e não pode ser recortado, então os 61% de altura
 * vazia entram na medida: a caixa útil é 1781×174 dentro de 1942×442, ou seja,
 * as marcas desenham `1781/1942` da largura declarada por `174/1942` dela de
 * altura. Quem for mexer neste número refaz a conta com essas duas frações.
 *
 *     520px  ->  caixa 520×118px,  marcas 477×47px
 *
 * O tamanho é escolha de identidade visual, não de código — foi calibrado
 * olhando a tela. Passou por 320px e por 220px antes de parar aqui.
 *
 * NÃO existe piso de legibilidade no subtítulo do ILMD. Este comentário já
 * afirmou que 320px era o mínimo para "INSTITUTO LEÔNIDAS & MARIA DEANE /
 * Fiocruz Amazônia" se ler, e era falso: aquelas três linhas cabem em ~40% dos
 * 174px úteis, o que a 320px dava ~3px por linha — borrão, não texto. A 520px
 * elas finalmente ganham corpo (~7px), o que é um argumento a favor desta
 * medida que o comentário anterior errou ao dar por vencido.
 *
 * `max-width` é o que segura o celular: a 375px o painel oferece 327px de
 * conteúdo, bem menos que 520 — a imagem encolhe junto em vez de rolar. Sem
 * ele, esta largura poria a tela de login para rolar na horizontal. */
.login__parceiros {
    display: block;
    width: 520px;
    max-width: 100%;
    height: auto;
}

/* ---- 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; }
}