/* ============================================================
   PÁGINA: núcleo — telas de autenticação (login, definir senha,
   link inválido), modais de onboarding e elementos do toast de
   conquista que não casam 1:1 com o DS compartilhado.
   Valores são tradução exata do style= inline que existia antes.
   ============================================================ */

/* Casca centralizadora das telas de auth (layouts/auth.html.erb) */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo);
  padding: 16px;
}
.auth-shell--login {
  background:
    linear-gradient(var(--veu-login), var(--veu-login)),
    url("/assets/fundo-login-99f28fca.png") center / cover no-repeat;
  /* No escuro, a foto azul ganha um véu marinho para não ofuscar o cartão. */
  --veu-login: light-dark(transparent, rgba(7, 14, 22, 0.72));
}
.auth-shell--login .card-auth {
  box-shadow: var(--shadow-lg);
}
.auth-shell--login .card-auth__logo {
  height: 96px;
}

/* ── Cartão de autenticação ────────────────────────────────
   Card branco centralizado das telas /entrar, /senha/definir e
   link inválido. Difere do .card do DS (radius 8 / padding 24):
   aqui radius 12 e padding 48, largura fixa 460. */
.card-auth {
  background: var(--sup);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 48px;
  width: 460px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card-auth--vinte {
  gap: 20px;
}
.card-auth--centro {
  text-align: center;
}
.card-auth__logo {
  height: 72px;
  object-fit: contain;
}

/* Título "Boas-vindas!"/"Defina sua senha" (20/600 cinza-escuro) */
.auth-titulo {
  font-size: 20px;
  font-weight: 600;
  color: var(--txt-2);
  margin: 0;
  text-align: center;
}

/* Título do estado de erro (link inválido) — 18/700 */
.auth-titulo-erro {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto);
  margin: 0;
}

/* Subtítulo das telas de auth (14 cinza, line-height 1.5) */
.auth-subtitulo {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.5;
}
/* Variante sem line-height próprio (linha "nome — email" do /senha/definir):
   restaura o 120% herdado do body que o inline original usava. */
.auth-subtitulo--compacto {
  line-height: 120%;
}

/* Cabeçalho centralizado (título + subtítulo) do /senha/definir */
.auth-cabecalho-centro {
  text-align: center;
}

/* Linha de troca de fluxo no pé do card ("Primeiro acesso? Criar minha conta").
   Centraliza com text-align e NÃO com .centro: aquela é display:flex, e em
   container flex o nó de texto que é só espaço não é renderizado — o link
   colava na pergunta. */
.auth-troca-fluxo {
  text-align: center;
}

/* Label dos forms de auth (14/700) — maior que o .campo__label do DS (13). */
.auth-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-2);
}
.auth-label--media {
  font-size: 13px;
}

/* Form das telas de auth: pilha-16 do DS + width 100% (o .pilha-N não
   fixa largura). */
.form-auth {
  width: 100%;
}

/* Wrapper relativo do input de senha (ancora o botão de olho) */
.auth-campo-relativo {
  position: relative;
}

/* Span que embrulha o ícone na caixa-erro: o .caixa-erro svg{} do DS
   encolhe o svg, mas aqui o flex item é o span — então shrink vai nele. */
.auth-erro-icone {
  flex-shrink: 0;
}

/* Input das telas de auth: h48 (sem variante exata no DS; --grande tem
   padding 14 mas a borda do DS é --borda-input, igual aqui). */
.auth-input {
  height: 48px;
  border: 1px solid var(--borda-input);
  border-radius: 4px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--texto);
  outline: none;
  background: var(--sup);
  width: 100%;
}
/* Variante com espaço à direita pro botão de olho (mostrar senha) */
.auth-input--olho {
  padding: 0 44px 0 14px;
}
/* Input menor (h44) do modal esqueci-senha */
.auth-input--baixo {
  height: 44px;
  padding: 0 14px;
}
/* Selects do primeiro acesso (departamento e empresa) usam o mesmo input */
select.auth-input {
  cursor: pointer;
}

/* Suprime os ícones nativos de "revelar senha" do Edge e o container de
   decoração de autofill do Chrome/Safari — eles desenham por cima do input
   exatamente no mesmo canto (right) do nosso botão .auth-olho, e o clique
   às vezes acaba indo pro ícone nativo em vez do nosso (efeito "só funciona
   às vezes", dependente de navegador/gerenciador de senha). */
.auth-input--olho::-ms-reveal,
.auth-input--olho::-ms-clear {
  display: none;
}
.auth-input--olho::-webkit-textfield-decoration-container {
  visibility: hidden;
}
/* O botão de senha salva do Chrome/Safari mora dentro desse container e, em
   algumas versões, continua clicável mesmo com o pai em visibility:hidden —
   é ele que roubava o clique em cima do olho. */
.auth-input--olho::-webkit-credentials-auto-fill-button,
.auth-input--olho::-webkit-strong-password-auto-fill-button {
  display: none !important;
}

/* Botão "mostrar/ocultar senha" sobreposto ao input.
   Ocupa a altura inteira do input e os 44px de padding reservados à direita:
   antes o alvo era só a caixa do ícone (18px), o que exigia mira e dava a
   impressão de que só clicar um pouco fora do olho alternava a senha. */
.auth-olho {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-fraco);
}
/* svg inline assenta na linha-base e deixa a folga do descendente dentro do
   botão, empurrando o ícone pra cima do centro real do alvo. */
.auth-olho svg {
  display: block;
}

/* Link "Esqueci minha senha" (verde, alinhado à direita) */
.auth-link-senha {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 0;
  color: var(--sucesso-texto);
  font-size: 13px;
  /* !important vence o bold global de button{} (botoes.css) — era 500 inline */
  font-weight: 500 !important;
  cursor: pointer;
  font-family: inherit;
}

/* Botão submit das telas de auth (full width, padding 14 20). Difere do
   .btn do DS (padding 12 20): aqui 14 20 com radius 8. */
.auth-submit {
  color: var(--sobre-cor);
  font-size: 14px;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  width: 100%;
  line-height: 1.2;
}

/* Botão "Ir para o login" da tela de link inválido (bloco centrado). */
.auth-botao-bloco {
  display: block;
  color: var(--sobre-cor);
  background: var(--azul);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 20px;
  text-align: center;
}

/* Caixa do modal esqueci-senha sobre o .modal-caixa do DS: o DS não tem
   padding/gap (vêm de .modal-corpo); esta tela usa caixa "chapada"
   (padding 32 + gap 20) e não rola — daí o reset de max-height/overflow. */
.modal-caixa--auth {
  padding: 32px;
  gap: 20px;
  max-height: none;
  overflow-y: visible;
}

/* Rodapé de ações do modal esqueci-senha (gap 8 + respiro acima) */
.auth-modal-acoes {
  gap: 8px;
  margin-top: 8px;
}

/* Botões compactos do modal esqueci-senha (h38, radius 8) */
.auth-btn-modal {
  border-radius: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}
.auth-btn-modal--enviar {
  color: var(--sobre-cor);
  border: none;
  padding: 0 18px;
}

/* ── Modais de onboarding (boas-vindas / fim do tour) ───────
   Usam .modal-overlay do DS, mas a caixa tem padding e gap
   próprios (40 32 28 / gap 20 / centralizado) e z-index 9999. */
.modal-onboarding-overlay {
  z-index: 9999;
}
.modal-onboarding-caixa {
  background: var(--sup);
  border-radius: 12px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  position: relative;
  padding: 40px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.modal-onboarding-caixa--440 {
  width: 440px;
}
.modal-onboarding-caixa--480 {
  width: 480px;
}

/* Form que ancora o X no canto superior direito do modal de onboarding */
.modal-onboarding-x-form {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Botão X no canto do modal de onboarding */
.modal-onboarding-x {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* Círculo de ícone (graduação / check) no topo do modal de onboarding */
.modal-onboarding-icone {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sobre-cor);
}
.modal-onboarding-icone--azul {
  background: var(--azul);
}
.modal-onboarding-icone--verde {
  background: var(--verde);
}

/* Bloco de texto centralizado do modal */
.modal-onboarding-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  width: 100%;
}
.modal-onboarding-titulo {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--texto);
}
.modal-onboarding-paragrafo {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--texto-suave);
}

/* Rodapé de ações do modal boas-vindas (botões espaçados) */
.modal-onboarding-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.modal-onboarding-acoes--fim {
  justify-content: flex-end;
  margin-top: 4px;
}

/* Botões 40px de altura dos modais de onboarding */
.btn-onboarding {
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-onboarding--pular { padding: 0 18px; }
.btn-onboarding--comecar { padding: 0 20px; color: var(--sobre-cor); }
.btn-onboarding--estudar { padding: 0 24px; color: var(--sobre-cor); }

/* Fluxo "Módulos → Aulas → Avaliação → Certificado" do fim do tour */
.fluxo-trilha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  flex-wrap: wrap;
}
.fluxo-trilha__passo {
  background: var(--fundo);
  color: var(--marca-texto);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
}
.fluxo-trilha__passo--certificado {
  background: var(--sucesso-suave);
  color: var(--sucesso-texto);
}
.fluxo-trilha__seta {
  color: var(--borda-input);
  font-size: 14px;
}

/* ── Toast de conquista desbloqueada ───────────────────────
   Cartão maior que o .toast do DS (320px, align-items flex-start,
   padding 14 16, gap 12); a borda esquerda verde é fixa aqui. */
.toast-conquista {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--sup);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--verde);
  border-radius: 8px;
  padding: 14px 16px;
  width: 320px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', sans-serif;
  pointer-events: all;
}
.toast-conquista__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde);
}
.toast-conquista__emoji {
  font-size: 15px;
  line-height: 1;
}
.toast-conquista__corpo {
  flex: 1;
  min-width: 0;
}
.toast-conquista__titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 2px;
  line-height: 1.3;
}
.toast-conquista__nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 2px;
  line-height: 1.3;
}
.toast-conquista__descricao {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.4;
}
.toast-conquista__fechar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-fraco);
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Botão fechar do toast comum (porta o style= do _toast.html.erb) */
.toast__fechar {
  display: flex;
  padding: 4px;
  border-radius: 6px;
  color: var(--texto-fraco);
}

/* Ações do onboarding agrupadas à direita: "Pular" (ghost) subordinado a
   "Começar tour" (primário) — descarte não compete com a ação desejada. */
.modal-onboarding-acoes {
  justify-content: flex-end !important;
  gap: 10px;
}
input.btn-ghost.btn-onboarding--pular {
  background: none;
  border: none;
  color: var(--texto-suave);
}
input.btn-ghost.btn-onboarding--pular:hover {
  background: var(--sup-hover);
}

/* Hover do olho da senha */
.auth-olho { transition: color 0.12s; }
.auth-olho:hover { color: var(--texto); }