/* Letrivo - modal de login (shared/js/auth-ui.js). Reaproveita .modal-card,
   .modal-close-x e .btn de base.css e as variáveis de tema; aqui só o que é
   próprio do formulário. É um <dialog> (camada superior do navegador), não o
   .modal de base.css — aquele é position:absolute dentro do tabuleiro de cada
   jogo, e o login abre de qualquer página, inclusive das de turmas/. */

.auth-dialog{
  padding:0; border:none; background:transparent;
  max-width:calc(100vw - 32px);
  overflow:visible;
}
.auth-dialog::backdrop{ background:rgba(18,17,15,.82); }

/* [hidden] precisa vencer qualquer display de componente (ex.: .btn é flex). */
.auth-dialog [hidden]{ display:none !important; }

.auth-card{
  width:360px; max-width:100%;
  max-height:calc(100dvh - 32px); overflow-y:auto;
  box-sizing:border-box;
  text-align:left;
}
.auth-card h2{ font-size:22px; text-align:center; margin:0 0 16px; }

.auth-largo{ width:100%; margin-top:10px; }

.auth-divisor{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 12px;
  font-size:12px; color:var(--modal-muted);
}
.auth-divisor::before, .auth-divisor::after{
  content:""; flex:1; height:1px; background:var(--modal-muted); opacity:.4;
}

.auth-abas{
  display:grid; grid-template-columns:1fr 1fr;
  margin-bottom:6px;
  border-bottom:1px solid color-mix(in srgb, var(--modal-muted) 40%, transparent);
}
.auth-aba{
  background:none; border:none; cursor:pointer;
  padding:8px 4px;
  font-family:var(--font-ui); font-size:13px;
  color:var(--modal-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.auth-aba.ativa{ color:var(--modal-accent); border-bottom-color:var(--modal-accent); font-weight:600; }

.auth-campo{
  display:block; margin-top:10px;
  font-size:12px; color:var(--modal-muted);
}
.auth-campo input{
  display:block; width:100%; box-sizing:border-box;
  margin-top:4px; padding:8px 10px;
  font-family:var(--font-ui); font-size:16px; /* 16px: iOS não dá zoom no foco */
  color:var(--modal-ink);
  background:color-mix(in srgb, var(--modal-ink) 6%, var(--modal-bg));
  border:1px solid color-mix(in srgb, var(--modal-muted) 60%, transparent);
  border-radius:4px;
}
.auth-campo input:focus{ outline:2px solid var(--modal-accent); outline-offset:1px; }

.auth-texto{ font-size:14px; color:var(--modal-ink); line-height:1.45; margin:0 0 6px; overflow-wrap:anywhere; }
.auth-link{ text-align:center; margin:12px 0 0; font-size:13px; }
.auth-link a{ color:var(--modal-accent); }

.auth-msg{ font-size:13px; margin:12px 0 0; line-height:1.4; }
.auth-msg:empty{ display:none; }
.auth-msg-erro{ color:var(--red-ink); }
.auth-msg-ok{ color:var(--online-ink); }