/* A tela da verificação em duas etapas (pages/verificacao.py).

   O desenho é escrito aqui, e não em classes do Tailwind, nas partes que
   precisam medir certo em qualquer CSS (o buildado e o do CDN): os passos
   numerados, os blocos recolhidos e o foco. Revisão de 04/10/2026, vista pelo
   dono numa janela estreita: os círculos dos passos saíam do alinhamento, e o
   "Digitar a chave no aplicativo" ganhava o retângulo preto de foco do
   navegador. Segunda rodada, no mesmo dia: o cadastro em duas colunas do
   `lg` para cima, o "Abrir no aplicativo" só em tela de toque, a chave em
   duas linhas iguais, o toque de 44 px nas recolhidas e o erro do login com
   o desenho do `c.erro`. */

/* O campo do código espaça os dígitos, para a pessoa conferir com o que o
   aplicativo mostra. O exemplo do campo ("6 dígitos") fica na letra e no
   espaçamento de sempre. O `className` do dcc.Input vai ao invólucro
   (div.dash-input-container), e o exemplo é do <input> de dentro: por isso
   aqui, e não por uma classe do Tailwind no componente. O código fica no
   centro da caixa, como no aplicativo. */
.campo-do-codigo .dash-input-element {
  text-align: center;
}

.campo-do-codigo .dash-input-element::placeholder {
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
  letter-spacing: normal;
}

/* Os passos: uma grade de duas colunas, o círculo de 24 px numa e o texto na
   outra. A linha do texto é a de 20 px do resto da seção, e o círculo sobe
   2 px para o centro dele cair no centro da primeira linha, por mais linhas
   que o texto tenha. Todos com o mesmo recuo, dentro da seção. */
.verif-passos {
  display: grid;
  row-gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verif-passo {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
}

.verif-passo-numero {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-top: -0.125rem;
  background-color: var(--color-brand-600, #1f3b6e);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

/* `pretty`: sem uma palavra sozinha na última linha. Os nomes que não se
   partem ("Google Authenticator", "QR code") vêm com espaço inseparável. */
.verif-passo-texto {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-neutral-700, #404040);
  text-wrap: pretty;
}

/* Os textos e os avisos da tela (o texto do `c.alerta` é o `.min-w-0`) sem
   uma palavra sozinha na última linha ("Depois, entre de / novo."). A
   explicação do topo fica no `text-balance` dela. */
.verif-tela p:not(.text-balance),
.verif-tela .min-w-0 {
  text-wrap: pretty;
}

/* O cadastro: no celular e na janela estreita, uma coluna, na ordem da
   leitura (os passos, o QR code e a chave, o campo); do `lg` para cima, duas,
   com os passos e o campo à esquerda e o QR code e a chave à direita, para o
   campo e o "Confirmar" caberem na tela do notebook sem rolar. O mesmo espaço
   entre os blocos nas duas. */
.verif-cadastro-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.25rem;
}

@media (min-width: 1024px) {
  .verif-cadastro-grade {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "passos qr"
      "campo qr";
    column-gap: 2rem;
  }

  .verif-area-passos {
    grid-area: passos;
  }

  .verif-area-qr {
    grid-area: qr;
  }

  .verif-area-campo {
    grid-area: campo;
    align-self: start;
  }
}

/* "Está no celular?" e o "Abrir no aplicativo": só em tela de toque. Pela
   largura (o `sm:hidden` de antes), a janela estreita do computador mostrava
   um link `otpauth://` que no Windows não abre nada. */
.verif-so-no-toque {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .verif-so-no-toque {
    display: block;
  }
}

/* A chave em duas linhas de quatro grupos, em qualquer largura: entre 19 e 23
   caracteres da fonte mono cabem quatro grupos e o espaço, e não cinco. Sem
   grupo sozinho na linha de baixo, nem partido no meio. */
.verif-chave {
  max-width: 21ch;
}

/* "Digitar a chave no aplicativo" e "Perdeu ou trocou de celular?": o
   <details> do navegador, que abre e fecha sem callback. A seta do navegador
   sai e entra a do portal (a mesma da auditoria recolhida, 54-gestao.css). */
.verif-recolhida > summary {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  /* O alvo de toque do portal (10-marca.css), como a auditoria recolhida. */
  min-height: 2.75rem;
  /* A folga do anel de foco, sem tirar a seta do alinhamento com o texto. */
  margin-left: -0.375rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--color-brand-600, #1f3b6e);
  user-select: none;
}

.verif-recolhida > summary::-webkit-details-marker {
  display: none;
}

.verif-recolhida > summary::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0 0.125rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease-out;
}

.verif-recolhida[open] > summary::before {
  transform: rotate(45deg);
}

.verif-recolhida > summary:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.verif-recolhida-corpo {
  margin-top: 0.5rem;
}

/* O "Perdeu ou trocou de celular?" fica separado do botão por uma linha. */
.verif-recolhida-separada {
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
  padding-top: 1rem;
}

/* A mensagem do callback e o aviso do "Copiar a chave": vazios, não ocupam
   espaço; com texto, ficam logo abaixo do botão. */
.verif-mensagem:empty {
  display: none;
}

/* O foco: no teclado, o anel arredondado na cor da marca; no clique e no
   toque, nada (o retângulo preto do navegador era o que o dono via). O campo
   tem o foco dele em 12-formulario.css. */
.verif-tela summary:focus:not(:focus-visible),
.verif-tela a:focus:not(:focus-visible),
.verif-tela button:focus:not(:focus-visible) {
  outline: none;
}

.verif-tela summary:focus-visible,
.verif-tela a:focus-visible,
.verif-tela button:focus-visible {
  outline: 2px solid var(--color-brand-600, #1f3b6e);
  outline-offset: 2px;
}

/* O erro da tela de entrada (pages/login.py) com o desenho do `c.erro`: a
   caixa vermelha clara, o ícone e o texto à esquerda, como o erro do código
   que vem logo depois e o da troca da senha. O callback do login devolve só
   o texto, e o desenho é daqui. Vazio, não ocupa espaço. */
.login-erro:empty {
  display: none;
}

.login-erro {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--color-status-danger-bg, #fee2e2);
  color: var(--color-status-danger-text, #dc2626);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* O "circle-x" do lucide, o mesmo ícone do `c.erro`, na cor do texto. */
.login-erro::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------- o código por e-mail
   Pedido do dono em 04 e 05/10/2026; desde 14/10/2026 é o método do
   colaborador, e só dele, sem escolha: a tela dele traz o campo, o "Entrar"
   e, embaixo, o "Enviar outro código" com cara de link. */

/* O que a tela esconde (`hidden`) fica escondido, mesmo com uma classe que
   dá `display` ao elemento (os botões, os links de troca): sem isto, o
   `display` da classe vence o `hidden` (como em 32-ponto-selfie.css). */
.verif-tela [hidden] {
  display: none !important;
}

/* "Enviar outro código": um botão com cara de link, no centro, com o ícone
   na altura do texto e o alvo de toque do portal (44 px). */
.verif-trocas {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.verif-troca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--color-brand-600, #1f3b6e);
  cursor: pointer;
}

.verif-troca:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.verif-troca:disabled {
  cursor: progress;
  opacity: 0.6;
}

.verif-troca > svg {
  flex: none;
}