/* ═══════════════════════════════════════════════════════════════════════
   Kaderna Studio — acessibilidade (M-15)

   ── O achado ──

   Acessibilidade aqui era AUSÊNCIA, não descuido pontual: `:focus-visible`,
   `aria-*`, `role=`, `tabindex` e `prefers-reduced-motion` tinham ZERO
   ocorrências em todas as telas do produto. `<label for>` também.

   ── Por que uma folha e não uma varredura de ocorrências ──

   Os defeitos se repetem em cinco padrões, e três deles se resolvem no CSS,
   de uma vez, para todas as telas:

     1. foco apagado com `outline:none` sem substituto
     2. animação que não respeita quem pediu menos movimento
     3. alvo de toque pequeno demais

   Os outros dois — controle feito de `<div onclick>` e campo sem rótulo —
   precisam de atributo no elemento, e vão no HTML.

   Esta folha é carregada DEPOIS do Tailwind de propósito: várias das regras
   abaixo desfazem o `outline:none` que ele aplica por padrão, e a ordem é o
   que decide.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. o foco volta a ser visível ──────────────────────────────────────
   `:focus-visible` e não `:focus`: o navegador já sabe distinguir foco por
   teclado de foco por clique, e usar `:focus` puro põe um anel em volta de
   todo botão clicado com o mouse — que é exatamente por que alguém escreveu
   `outline:none` em primeiro lugar. */
:focus-visible {
  outline: 2px solid var(--zh-accent, #6366f1);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Elementos que apagam o próprio foco no estilo embutido precisam de um
   seletor mais forte. `!important` aqui é a exceção que se justifica: a
   alternativa é editar centenas de atributos `style=` inline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--zh-accent, #6366f1) !important;
  outline-offset: 2px !important;
}

/* Sobre fundo claro (o preview, os modais brancos) o anel de acento some.
   Uma sombra externa garante contraste dos dois lados. */
@media (prefers-color-scheme: light) {
  :focus-visible {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .18);
  }
}

/* ── 2. quem pediu menos movimento recebe menos movimento ───────────────
   Não é preferência estética: movimento pode causar náusea e enxaqueca em
   quem tem sensibilidade vestibular, e o sistema operacional já tem a chave.
   `0.01ms` em vez de `none` porque animação de duração zero não dispara
   `animationend`, e há código que espera por ele. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* O vídeo de fundo é decoração pura e é o que mais incomoda. */
  .hero-video-bg,
  video[autoplay] {
    display: none !important;
  }
}

/* ── 3. alvo de toque ───────────────────────────────────────────────────
   24×24 CSS px é o mínimo do WCAG 2.2 (2.5.8). Vários ícones do painel eram
   menores, o que atinge quem usa o produto no celular e quem tem tremor —
   duas populações que não se sobrepõem e ambas afetadas. */
button,
[role="button"],
a[href] {
  min-height: 24px;
  min-width: 24px;
}

/* ── 4. o link de pular para o conteúdo ────────────────────────────────
   Quem navega por teclado atravessa a barra lateral inteira antes de chegar
   ao chat, em toda troca de tela. Este link é a saída, e ele fica invisível
   até receber foco. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 16px;
  background: var(--zh-surface, #16181d);
  color: var(--zh-text, #fff);
  border-radius: 0 0 8px 0;
  font-size: 13px;
  text-decoration: none;
}
.pular-para-conteudo:focus {
  left: 0;
}

/* ── 5. rótulo só para leitor de tela ──────────────────────────────────
   Para o ícone que carrega significado sozinho e não tem espaço para texto.
   A técnica preserva a leitura em voz e some visualmente — `display:none`
   não serve, porque some para o leitor também. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 6. contraste do texto secundário ──────────────────────────────────
   As cores base do tema passam com folga (o acento fica em 6,47:1). Quem
   reprovava era o ALFA: `rgba(...,.2)` e `.25` sobre o fundo escuro caem
   abaixo de 3:1, e é neles que estão rótulo de campo, dica e legenda — o
   texto que MAIS precisa ser lido por quem enxerga pouco.

   O piso é 0.55, que sobre o fundo do produto passa em AA para texto normal.
   Não mexe no que já está acima disso. */
.text-secundario,
[data-secundario] {
  color: rgba(239, 237, 253, .62);
}