/* ==========================================================================
   AstriomAI - telas de autenticacao (login, solicitar codigo, definir senha)

   Este arquivo so tem o que e especifico destas telas. Cores, fontes e a
   textura de grao vem das variaveis de estilo.css, que e a fonte unica:
   duplicar aqui faria uma mudanca futura de paleta valer so na metade
   das telas.

   Escrito mobile primeiro: a base atende celular, a media query de 900px
   monta as duas colunas do desktop.
   ========================================================================== */

.moldura-autenticacao {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* barra de endereco do celular nao deixa sobrar rolagem */
}

/* --------------------------------------------------------------------------
   Coluna escura da marca. No celular vira uma faixa fina no topo, so com a
   marca; a frase aparece apenas no desktop.
   -------------------------------------------------------------------------- */

.coluna-marca {
  position: relative;
  background-color: var(--azul-profundo);
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Mesma textura de grao dos blocos escuros da landing: e o que faz as telas
   parecerem a mesma plataforma */
.coluna-marca::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--textura-grao);
}

.marca-autenticacao,
.frase-marca {
  position: relative; /* acima da textura */
}

.marca-autenticacao {
  font-family: var(--fonte-titulo);
  font-size: var(--t-secao);
  font-weight: 600;
  color: var(--branco);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  align-self: flex-start;
}

.frase-marca {
  display: none;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--azul-claro);
  max-width: 20rem;
}

/* --------------------------------------------------------------------------
   Coluna do formulario
   -------------------------------------------------------------------------- */

.coluna-formulario {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem 3.5rem;
  background-color: var(--branco);
}

.caixa-formulario {
  width: 100%;
  max-width: 400px;
  /* Sem animacao propria: a caixa e um container de degraus da entrada de
     toda pagina (estilo.css), e o titulo, os campos e o botao sobem um por
     um dentro dela. */
}

.caixa-formulario h1 {
  font-size: var(--t-pagina);
  margin-bottom: 0.6rem;
}

.instrucao-formulario {
  color: var(--texto-secundario);
  font-size: var(--t-base);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------------------
   Mensagens de estado. O min-height reserva o espaco desde o comeco, para a
   mensagem aparecer sem empurrar o formulario para baixo.
   -------------------------------------------------------------------------- */

.area-mensagem {
  min-height: 2.9rem;
  margin-bottom: 0.8rem;
  font-size: var(--t-base);
  line-height: 1.45;
}

/* Unica excecao legitima ao veto de vermelho: mensagem de erro */
.mensagem-erro {
  color: var(--dado-negativo);
}


/* Sucesso em azul, nao em verde: verde fica reservado para dado no painel */
.mensagem-sucesso {
  color: var(--azul-acao);
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

.campo-grupo {
  margin-bottom: 1.3rem;
}

.rotulo-campo {
  display: block;
  font-size: var(--t-base);
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.campo-entrada {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.8rem;
  font-family: var(--fonte-texto);
  /* 16px no minimo: abaixo disso o Safari do iPhone da zoom sozinho ao focar
     o campo e desmonta o layout */
  font-size: var(--t-corpo);
  color: var(--texto);
  background-color: var(--branco);
  border: 1px solid var(--linha-de-campo);
  border-radius: var(--raio-controle);
}

/* Foco em bronze: o unico lugar do bronze nestas telas, como na landing */
.campo-entrada:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.grupo-senha {
  display: flex;
}

.grupo-senha .campo-entrada {
  flex: 1;
  min-width: 0; /* sem isso o campo nao encolhe e estoura em tela de 320px */
  border-right: none;
  border-radius: var(--raio-controle) 0 0 var(--raio-controle);
}

.botao-mostrar-senha {
  min-height: 48px;
  min-width: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 0 var(--raio-controle) var(--raio-controle) 0;
  background-color: var(--branco);
  color: var(--azul-acao);
  font-family: var(--fonte-texto);
  font-size: var(--t-mini);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.botao-mostrar-senha:hover {
  background-color: var(--azul-claro);
}

.dica-campo {
  margin-top: 0.4rem;
  font-size: var(--t-mini);
  color: var(--texto-secundario);
}

/* --------------------------------------------------------------------------
   Botao principal e links de troca de tela
   -------------------------------------------------------------------------- */

.botao-largo {
  width: 100%;
  margin-top: 0.4rem;
}

/* O .botao de estilo.css foi escrito para <a>; aqui ele veste um <button> */
button.botao {
  border: none;
  cursor: pointer;
}

.botao:disabled {
  opacity: 0.65;
  cursor: default;
  /* sem hover nem movimento enquanto o envio esta em andamento */
  pointer-events: none;
  transform: none;
}

.link-troca {
  margin-top: 1.4rem;
  font-size: var(--t-base);
  color: var(--texto-secundario);
}

.link-troca + .link-troca {
  margin-top: 0.35rem;
}

.link-troca a {
  color: var(--azul-acao);
  /* Alvo de toque de 44px sem inflar o texto: o padding cresce a area
     clicavel e a margem negativa devolve o espaco visual */
  padding: 0.7rem 0.15rem;
  margin: -0.7rem -0.15rem;
  transition: color 200ms ease;
}

.link-troca a:hover {
  color: var(--azul-profundo);
}

/* --------------------------------------------------------------------------
   Desktop: duas colunas, marca com peso a esquerda
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .moldura-autenticacao {
    flex-direction: row;
  }

  .coluna-marca {
    width: 40%;
    padding: 2.5rem;
  }

  .frase-marca {
    display: block;
  }

  .coluna-formulario {
    padding: 4rem 3rem;
  }
}

/* --------------------------------------------------------------------------
   Telas em passos (primeiro acesso e esqueci a senha)
   -------------------------------------------------------------------------- */

/* "Passo 1 de 2": pequeno e acima do titulo, pra a pessoa saber quanto falta */
.passo-do-fluxo {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-acao);
  margin-bottom: 0.35rem;
}

.instrucao-formulario strong {
  color: var(--texto);
  font-weight: 600;
  overflow-wrap: anywhere; /* e-mail comprido nao estoura a caixa em 320px */
}

/* A escolha do tipo de conta: dois cartoes grandes, um toque cada. Botao, e
   nao radio com "continuar": a escolha ja e a acao. */
.escolha-de-conta {
  display: grid;
  gap: 0.75rem;
}

.cartao-escolha {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 2.6rem 1rem 1.1rem;
  position: relative;
  background-color: var(--branco);
  border: 1px solid var(--linha-de-campo);
  border-radius: var(--raio-bloco);
  font-family: var(--fonte-texto);
  color: var(--texto);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

/* A seta diz que o cartao leva adiante */
.cartao-escolha::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--azul-acao);
  border-right: 2px solid var(--azul-acao);
  transform: translateY(-50%) rotate(45deg);
}

.cartao-escolha:hover {
  border-color: var(--azul-acao);
  background-color: var(--branco-frio);
  box-shadow: 0 4px 14px rgba(12, 26, 43, 0.08);
}

.cartao-escolha:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.titulo-escolha {
  display: block;
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--azul-profundo);
  margin-bottom: 0.25rem;
}

.texto-escolha {
  display: block;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--texto-secundario);
}

/* O que muda para o funcionario, dito antes do campo */
.quadro-explicacao {
  background-color: var(--branco-frio);
  border-left: 3px solid var(--azul-acao);
  border-radius: 0 var(--raio-controle) var(--raio-controle) 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.3rem;
  font-size: var(--t-base);
  line-height: 1.5;
}

.quadro-explicacao p + p {
  margin-top: 0.5rem;
}

/* Codigo em numeros grandes e espacados: e lido de outra tela e copiado */
.campo-codigo {
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.nota-do-funcionario {
  margin-top: 0.9rem;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--texto-secundario);
}

/* Voltar e "usar outro e-mail": acao de apoio, em texto, abaixo do principal */
.botao-voltar,
.botao-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  color: var(--azul-acao);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao-voltar {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.6rem;
  text-align: center;
}

.botao-link {
  min-height: 44px;
}

.botao-voltar:hover,
.botao-link:hover {
  color: var(--azul-profundo);
}

.botao-voltar:focus-visible,
.botao-link:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.botao-link:disabled {
  opacity: 0.65;
  cursor: default;
}

/* No login, o convite para quem ainda nao tem senha, separado do formulario
   por um filete: e outro caminho, nao um detalhe do login */
.chamada-primeiro-acesso {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}

.titulo-chamada {
  font-size: var(--t-corpo);
  font-weight: 600;
  color: var(--azul-profundo);
}

.texto-chamada {
  margin: 0.3rem 0 0.9rem;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--texto-secundario);
}

/* Quem prefere menos movimento recebe a tela pronta, sem animacao */
@media (prefers-reduced-motion: reduce) {
  .botao-mostrar-senha,
  .link-troca a,
  .cartao-escolha {
    transition: none;
  }
}

/* O aceite da criacao de conta e os links legais do fim de cada caixa. */
.campo-aceite {
  margin-top: 0.25rem;
}

.rotulo-aceite {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--t-base);
  line-height: 1.5;
  cursor: pointer;
}

.rotulo-aceite input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--azul-acao);
  flex-shrink: 0;
}

.rotulo-aceite a,
.links-legais a {
  color: var(--azul-acao);
}

.links-legais {
  margin-top: 1.75rem;
  font-size: var(--t-mini);
  color: var(--texto-secundario);
}