/* Tela de login — composição PCO (Rafatella_PCO.html: viewLogin), adaptada para
 * Microsoft Entra ID (sem e-mail/senha). Depende de pco/tokens.css + pco/base.css.
 * Card branco centralizado sobre fundo --nav com grafismo institucional de fundo.
 *
 * Proporção compacta (2ª revisão do Diretor: "o card está muito grande").
 * A redução corta MAIS volume vertical do que largura — headline 27px -> 20px,
 * logo 210px -> 158px, paddings e ícones de estado menores — porque a revisão
 * anterior já havia alargado o card de propósito para fugir do formato
 * alto-e-estreito, e encolher só a largura reintroduziria aquele problema.
 * 396px é a largura do card do PCO original (viewLogin).
 *
 * A elevação passou de sombra pesada (--sh-lg, 0 8px 40px) para borda de 1px
 * + sombra suave (--sh): é o que dá o ar atual e reduz a mancha visual.
 *
 * Abaixo, o bug real que empilhava os 4 estados ao mesmo tempo — `.login-state-view`
 * setava `display:flex` com a MESMA especificidade do `[hidden]` do próprio
 * navegador (ambos 0,1,0); como regra de autor sempre vence a de user-agent em
 * empate de especificidade, o `hidden` do HTML era ignorado visualmente. Ver
 * `.login-view[hidden]` abaixo — cobre os 4 estados (idle incluso) com uma
 * única regra, para nunca mais depender de acerto de especificidade.
 */

.login {
  /* zoom (base.css: html { zoom: var(--app-zoom) }) redimensiona o
   * conteúdo renderizado mas NÃO redimensiona unidade de viewport — 100vh
   * continua sendo a altura real da janela, que fica MAIOR que a área
   * visível depois do zoom. Sem a compensação, sobrava uma faixa do fundo
   * da página (branco) embaixo do card, na altura da barra de tarefas.
   * Mesmo ajuste já feito em .shell/.nav (pco/shell.css). */
  min-height: calc(100vh / var(--app-zoom));
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--nav);
  position: relative;
  overflow: hidden;
}
.login-bg { position: absolute; inset: 0; pointer-events: none; }
.login-bg .graf { position: absolute; width: 132%; left: -16%; bottom: -4%; height: auto; }
.login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 46% at 50% 46%, rgba(27, 34, 48, .94) 30%, rgba(27, 34, 48, .55) 100%);
}

.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 396px;
  background: var(--surface);
  border-radius: 16px;
  padding: 30px 32px 26px;
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  text-align: center;
}

/* Wordmark vetorial exata do manual de marca (Rafatella_PCO.html: LOGO_SVG) —
   `currentColor` herda de `color` aqui, nunca hardcoded, para inverter se o
   card algum dia mudar de fundo. */
.login-logo {
  width: min(158px, 60%);
  margin: 0 auto 14px;
  color: var(--ink);
}
.login-logo svg { display: block; width: 100%; height: auto; aspect-ratio: 923.81 / 194.87; }

.eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--brand-dp);
}

.login-headline {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 10px 0 18px;
  color: var(--ink);
  line-height: 1.3;
  max-width: 18ch;
  margin-inline: auto;
}
.login-headline .accent { color: var(--brand); }

.login-ms-btn { width: 100%; margin-top: 4px; padding: 13px 18px; font-size: 14.5px; border-radius: 10px; }
.login-ms-btn svg { flex-shrink: 0; }

.login-footer-note { margin-top: 13px; font-size: 11.5px; color: var(--muted-2); }

.login-pending-note {
  margin-top: 16px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--brand-sf); border: 1px solid #F6D9C4;
  font-size: 11.5px; line-height: 1.5; color: var(--brand-dp); text-align: left;
}

/* O fluxo "conta conhecida" (chip com e-mail em cache + trocar de conta) foi
   removido do produto: `test_pages_security.py` proíbe no HTML os rótulos
   "Continuar como"/"Usar outra conta" e os ids correspondentes, porque uma
   conta no cache MSAL nunca equivale a uma sessão DRF autorizada. As regras de
   estilo daquele fluxo eram CSS morto e saíram junto. */

.login-denied-actions { display: flex; gap: 9px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }

/* Regra única que garante exatamente 1 estado visível por vez — cobre
   idle/conectando/negado/erro com o mesmo seletor, então não depende de
   nenhuma outra regra de display para "vencer" o atributo hidden. */
.login-view[hidden] { display: none; }

/* ---------- Estados: conectando / negado / erro ---------- */

.login-state-view { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 6px 0 2px; }
.login-state-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.login-state-icon.is-loading { background: var(--brand-sf); color: var(--brand-dp); }
.login-state-icon.is-denied { background: var(--neg-sf); color: var(--neg); }
.login-state-icon.is-error { background: #FFF3CF; color: var(--warn); }

.login-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--brand-sf); border-top-color: var(--brand);
  animation: login-spin .8s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-spinner { animation-duration: 2.4s; } }

.login-state-title { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.login-state-message { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 30ch; }

@media (max-width: 640px) {
  .login-card { max-width: 340px; padding: 26px 22px 24px; border-radius: 14px; }
  .login-logo { width: min(140px, 68%); }
  .login-headline { font-size: 18.5px; }
}