/* Tela de entrada (homologação). Usa os tokens do painel (app.css): papel branco, fio de 1 px, barra azul-marinho
   da Rometal, ciano da marca só no foco. */
body.entrar { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: var(--chao); color: var(--tinta); font-family: var(--fonte); }
.entrar-caixa { box-sizing: border-box; padding: 0; margin: 0; max-width: 400px; width: 100%; background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.entrar-marca { background: var(--cab-fundo); padding: 22px 28px; }
.entrar-marca .logo { display: block; height: 30px; width: auto; }
.entrar-form { padding: 28px; display: grid; gap: 6px; }
.entrar-form h1 { margin: 0 0 4px; font-family: var(--fonte-sc); font-weight: 600; font-size: 28px; line-height: 1.15; }
.entrar-dica { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--tinta-2); }
.entrar-form label { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.entrar-form input { height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda-controle); border-radius: var(--raio-controle); }
.entrar-form input:focus-visible, .entrar-form button:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.entrar-form button { margin-top: 18px; height: 46px; font: inherit; font-weight: 600; font-size: 16px; color: #FFFFFF; background: var(--cab-fundo); border: 0; border-radius: var(--raio-controle); cursor: pointer; }
.entrar-form button:hover { background: #10107A; }
.entrar-form button:disabled { opacity: .65; cursor: progress; }
.entrar-erro { margin: 10px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--alerta); background: var(--papel-2); border-left: 3px solid var(--alerta); border-radius: 2px; }
.entrar-erro[hidden] { display: none; }
@media (max-width: 420px) { .entrar-form { padding: 22px 18px; } }