/* ============================================================================
   form.css — componente único de formulário do site
   ----------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE
   O site chegou a ter quatro formulários em três páginas, cada um com um
   dialeto próprio: o demo.html com utilities do Tailwind repetidas campo a
   campo, o diagnostico.html com .diag-campo no seu próprio CSS, e o
   investidores.html com .inv-campo no institucional.css. Três implementações
   do mesmo componente, três lugares para corrigir o mesmo bug.

   Curiosamente os três tinham chegado aos MESMOS valores — fundo
   rgba(255,255,255,.04), borda .1, raio 8px, padding 12/16, corpo 14px,
   rótulo 13px a 50% de branco. O padrão já existia de fato; faltava existir
   de direito. Os tokens abaixo são exatamente esses valores, então migrar uma
   página para cá não muda um pixel.

   COMO USAR
     <form class="form" data-form-webhook="https://..."
           data-form-ok="id-do-aviso-ok" data-form-erro="id-do-aviso-erro">
       <div class="campo">
         <label class="campo__rotulo" for="x">Rótulo</label>
         <input class="campo__entrada" id="x" name="x" required />
       </div>
       ...
     </form>

   O comportamento (validação, envio, estados) vem do js/form.js e é dirigido
   por atributos — nenhum JS por página. Ver o cabeçalho daquele arquivo.

   TEMA
   O padrão é o tema escuro do site. Para fundo claro, acrescente .form--claro
   no <form>; só os tokens mudam, as classes são as mesmas.

   ORDEM DE CARGA: depois de site.css. Pode vir antes ou depois de
   institucional.css — não há sobreposição de seletores.

   ARMADILHA DO BUILD — LEIA ANTES DE MEXER
   O preflight do Tailwind aplica a button, input, select e textarea:
     background-color: transparent;
     border-radius: 0;
     font: inherit;          <- derruba família, corpo, entrelinha e peso
     border: 0 solid; margin: 0; padding: 0;
   com o hack :not(#\#) repetido 4x — especificidade (4,0,1), acima de
   qualquer classe simples (0,1,0). Sem !important, TODA regra dessas
   propriedades aqui é descartada em silêncio: o campo fica sem fundo, o
   botão perde o raio e o texto volta para 16px herdados do body.

   Foi exatamente o que aconteceu na primeira versão deste arquivo. As
   utilities do Tailwind escapam porque usam o mesmo hack 8x (8,1,0) e ganham
   do preflight — nós não temos essa saída.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens — tema escuro (padrão)
   --------------------------------------------------------------------------- */

/* .campo--solto entra na mesma lista porque os tokens moram no <form>, e uma
   busca numa listagem não está dentro de um. Duas entradas no MESMO seletor,
   e não um bloco duplicado: os valores continuam existindo num lugar só.
   O tema claro segue funcionando — .form--claro redefine as variáveis no seu
   próprio subárvore e vence por herança. */
.form,
.campo--solto {
  --campo-bg: rgba(255, 255, 255, 0.04);
  --campo-borda: rgba(255, 255, 255, 0.1);
  --campo-texto: #fff;
  --campo-placeholder: rgba(255, 255, 255, 0.2);
  --campo-rotulo: rgba(255, 255, 255, 0.5);
  --campo-foco-borda: rgba(22, 27, 169, 0.7);
  --campo-foco-bg: rgba(255, 255, 255, 0.06);
  --campo-foco-anel: transparent;
  --campo-erro-borda: rgba(239, 68, 68, 0.6);
  --campo-erro-bg: rgba(239, 68, 68, 0.05);
  --campo-seta: rgba(255, 255, 255, 0.4);
  --form-nota: rgba(255, 255, 255, 0.35);
  --form-voltar-borda: rgba(255, 255, 255, 0.15);
  --form-voltar-texto: rgba(255, 255, 255, 0.75);
  --form-voltar-borda-hover: rgba(255, 255, 255, 0.3);
  --form-voltar-bg-hover: rgba(255, 255, 255, 0.05);
  --form-trilha-linha: rgba(255, 255, 255, 0.15);
  --form-trilha-num-bg: rgba(255, 255, 255, 0.04);
  --form-trilha-num-texto: rgba(255, 255, 255, 0.4);
  --form-trilha-feito-bg: #ffffff;
  --form-trilha-feito-texto: #080808;
  --form-trilha-atual-rotulo: #ffffff;
}

/* ---------------------------------------------------------------------------
   Tokens — tema claro
   ----------------------------------------------------------------------------
   Nenhuma página usa hoje: o portão de investidores, que estreou o tema, voltou
   ao fundo escuro. Fica disponível para o próximo bloco claro — e é o que
   garante que os tokens sejam de fato tokens.

   Nada aqui pode herdar cor: todo texto, borda e anel de foco do site assume
   fundo escuro.
   --------------------------------------------------------------------------- */

.form--claro {
  --campo-bg: #ffffff;
  --campo-borda: #d5d5d5;
  --campo-texto: #080808;
  --campo-placeholder: #9a9a9a;
  --campo-rotulo: #2e2e2e;
  --campo-foco-borda: var(--color-brand-500, #2228cc);
  --campo-foco-bg: #ffffff;
  --campo-foco-anel: rgba(34, 40, 204, 0.15);
  --campo-erro-borda: #c62828;
  --campo-erro-bg: #fdf4f4;
  --campo-seta: #6b6b6b;
  --form-nota: #6b6b6b;
  --form-voltar-borda: #d5d5d5;
  --form-voltar-texto: #2e2e2e;
  --form-voltar-borda-hover: #080808;
  --form-voltar-bg-hover: #ffffff;
  --form-trilha-linha: #d5d5d5;
  --form-trilha-num-bg: #ffffff;
  --form-trilha-num-texto: #9a9a9a;
  --form-trilha-feito-bg: #080808;
  --form-trilha-feito-texto: #ffffff;
  --form-trilha-atual-rotulo: #080808;
}

/* ---------------------------------------------------------------------------
   Grade de campos
   ----------------------------------------------------------------------------
   Opcional: use .form__campos quando os campos forem lado a lado. Sem ela,
   cada .campo empilha com a própria margem.
   --------------------------------------------------------------------------- */

.form__campos {
  display: grid;
  grid-template-columns: repeat(var(--form-colunas, 1), 1fr);
  gap: 14px;
  /* Mesma margem inferior do .campo solto, para blocos de grade e campos
     avulsos empilharem com o mesmo respiro. Sem isto, dois .form__campos
     seguidos ficam colados: medido em 0px no demo.html, que tem três blocos
     em sequência — o investidores.html tem um só e nunca expôs a falha. */
  margin: 0 0 16px !important;
}

/* O último não empurra o rodapé do formulário. */
.form__campos:last-child {
  margin-bottom: 0 !important;
}

/* Campo que ocupa a linha inteira numa grade de duas colunas */
.campo--largo {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   Campo
   --------------------------------------------------------------------------- */

/* Dentro de .form__campos quem espaça é o gap da grade; solto, a margem. */
.campo {
  margin: 0 0 16px !important;
}

.form__campos .campo {
  margin: 0 !important;
}

.campo__rotulo {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--campo-rotulo) !important;
  margin: 0 0 6px !important;
}

/* background-color com !important: ver a armadilha do preflight no topo.
   Usar background-color e não o atalho background, senão o shorthand apaga a
   seta do <select> declarada mais abaixo. */
.campo__entrada {
  width: 100%;
  background-color: var(--campo-bg) !important;
  border: 1px solid var(--campo-borda) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--campo-texto) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.campo__entrada::placeholder {
  color: var(--campo-placeholder) !important;
}

.campo__entrada:focus {
  outline: none;
  border-color: var(--campo-foco-borda) !important;
  background-color: var(--campo-foco-bg) !important;
  box-shadow: 0 0 0 3px var(--campo-foco-anel);
}

/* Estado de erro. É a classe que o js/form.js aplica — não use utilities do
   Tailwind aqui: as do tema escuro somem sobre fundo claro e vice-versa. */
.campo__entrada.is-invalido {
  border-color: var(--campo-erro-borda) !important;
  background-color: var(--campo-erro-bg) !important;
}

/* Seta do <select>, já que appearance:none remove a nativa. A cor vem do
   token, via currentColor codificado na URL — por isso há uma regra por tema. */
select.campo__entrada {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px !important;
  cursor: pointer;
}

.form--claro select.campo__entrada {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* As <option> herdam o fundo do sistema, não do campo: no tema escuro elas
   sairiam brancas com texto branco em alguns navegadores. */
.form:not(.form--claro) select.campo__entrada option {
  background: #111;
  color: #fff;
}

textarea.campo__entrada {
  resize: vertical;
  min-height: 84px;
}

/* Remove o "x" nativo do type=search, que destoa do tema escuro */
.campo__entrada[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------------------------------------------------------------------------
   Variante: campo com ícone interno
   ----------------------------------------------------------------------------
   Usada na busca das listagens. O ícone é irmão do input, não pai, para o
   rótulo (quando houver) continuar acima do conjunto.
   40px de recuo à esquerda = 14 da margem + 16 do ícone + 10 de respiro.
   --------------------------------------------------------------------------- */

.campo--busca {
  position: relative;
  display: flex;
  align-items: center;
}

.campo--busca .campo__icone {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--campo-placeholder);
  pointer-events: none;
}

.campo--busca .campo__entrada {
  padding-left: 40px !important;
}

/* ---------------------------------------------------------------------------
   Botão de envio
   ----------------------------------------------------------------------------
   Só a base. A forma final do CTA é decisão de cada página — o demo usa
   pílula branca com seta, o portão usa pílula preta de largura inteira — e
   isso é identidade de marca, não componente.
   --------------------------------------------------------------------------- */

.form__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px !important;
  padding: 13px 24px !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.form__botao--bloco {
  width: 100%;
}

.form__botao--escuro {
  background-color: #080808 !important;
  border-color: #080808 !important;
  color: #ffffff !important;
}

.form__botao--escuro:hover {
  background-color: var(--color-brand-500, #2228cc) !important;
  border-color: var(--color-brand-500, #2228cc) !important;
}

.form__botao--claro {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #080808 !important;
}

.form__botao--claro:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Enquanto o envio está em curso o js desabilita o botão */
.form__botao:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Avisos de retorno
   ----------------------------------------------------------------------------
   Escondidos pelo ATRIBUTO hidden, não por classe. O atributo é o mecanismo
   nativo, funciona sem JS e é o que o js/form.js alterna.

   O display:none precisa de !important porque as utilities do Tailwind, com o
   hack :not(#\#) repetido 8x, ganham do [hidden] do preflight — um elemento
   com `hidden` e `flex` ficaria visível.
   --------------------------------------------------------------------------- */

.form__retorno {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  border: 1px solid transparent !important;
  padding: 14px 16px !important;
  margin: 0 0 16px !important;
  font-size: 14px;
  line-height: 1.55;
}

.form__retorno[hidden] {
  display: none !important;
}

.form__retorno svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.form__retorno--ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: #86efac !important;
}

.form__retorno--erro {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}

.form--claro .form__retorno--ok {
  background: #eef5ee;
  border-color: #c9dfc9 !important;
  color: #1f5c2b !important;
}

.form--claro .form__retorno--erro {
  background: #fdf4f4;
  border-color: #e8c9c9 !important;
  color: #8c2020 !important;
}

.form__retorno a {
  color: inherit !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Nota de rodapé do formulário (consentimento, prazo, canal alternativo)
   --------------------------------------------------------------------------- */

.form__nota {
  font-size: 12px;
  line-height: 1.55;
  color: var(--form-nota) !important;
  margin: 14px 0 0 !important;
}

.form__nota a {
  color: inherit !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Extras de campo — marcação de opcional e texto de ajuda
   --------------------------------------------------------------------------- */

.campo__opcional {
  margin-left: 6px !important;
  font-size: 11px;
  font-weight: 400;
  color: var(--form-nota) !important;
}

.campo__ajuda {
  margin: 6px 0 0 !important;
  font-size: 12px;
  line-height: 1.5;
  color: var(--form-nota) !important;
}

/* ---------------------------------------------------------------------------
   Campo de arquivo
   ----------------------------------------------------------------------------
   O seletor nativo é o único controle que o navegador pinta sozinho. Os dois
   seletores existem porque ::file-selector-button só chegou ao Safari 14.1; o
   -webkit- cobre as versões anteriores.

   O js/form.js converte o arquivo para base64 e o manda no mesmo JSON dos
   demais campos — ver o cabeçalho daquele arquivo para o limite de tamanho.
   --------------------------------------------------------------------------- */

.campo__entrada[type="file"] {
  padding: 9px 12px !important;
  cursor: pointer;
}

.campo__entrada[type="file"]::file-selector-button,
.campo__entrada[type="file"]::-webkit-file-upload-button {
  margin-right: 12px !important;
  padding: 7px 14px !important;
  border: 1px solid var(--form-voltar-borda) !important;
  border-radius: 12px !important;
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--campo-texto) !important;
  cursor: pointer;
}

.campo__entrada[type="file"]:hover::file-selector-button,
.campo__entrada[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--form-voltar-borda-hover) !important;
}

/* ---------------------------------------------------------------------------
   Modo etapas — painéis e navegação
   ----------------------------------------------------------------------------
   Estas regras moravam no institucional.css, junto da página que estreou as
   etapas. Vieram para cá quando o segundo formulário passou a usá-las: eram
   valores de tema claro fixos, e no fundo escuro do portão de investidores o
   botão "Voltar" saía cinza-escuro sobre preto. Agora saem dos tokens.
   --------------------------------------------------------------------------- */

/* display:none próprio: a etapa oculta não pode ocupar espaço nem receber
   foco por tabulação. */
.form-passo[hidden] {
  display: none;
}

/* Voltar e Continuar na mesma linha, com o Continuar ocupando a sobra: o
   avanço é a ação principal e precisa ser o alvo maior. */
.form-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px !important;
}

.form-nav .form__botao {
  flex: 1 1 auto;
}

/* Mesmas medidas do .form__botao — muda só a pintura, que aqui é secundária. */
.form-nav__voltar {
  flex: 0 0 auto;
  border-radius: 12px !important;
  padding: 13px 24px !important;
  border: 1px solid var(--form-voltar-borda) !important;
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--form-voltar-texto) !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.form-nav__voltar:hover {
  border-color: var(--form-voltar-borda-hover) !important;
  background-color: var(--form-voltar-bg-hover) !important;
}

.form-nav__voltar[hidden],
.form-nav .form__botao[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Modo etapas — trilha visual (opcional)
   ----------------------------------------------------------------------------
   Nenhuma página usa hoje: as duas que têm etapas ficaram só com o aviso
   sr-only, a pedido. As regras seguem aqui porque o js/form.js continua
   suportando a marcação — quem quiser a trilha de volta acrescenta o <ol> e
   ela já sai no tema certo.
   --------------------------------------------------------------------------- */

.form-trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0 0 24px !important;
  padding: 0 !important;
}

.form-trilha__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Fio até o marcador anterior. Começa no item 2 — no primeiro não há o que
   ligar. Fica atrás do número (z-index) para não cortar o círculo. */
.form-trilha__item + .form-trilha__item::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--form-trilha-linha);
}

.form-trilha__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--form-trilha-linha) !important;
  background: var(--form-trilha-num-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--form-trilha-num-texto) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.form-trilha__rot {
  font-size: 12px;
  line-height: 1.3;
  color: var(--form-trilha-num-texto) !important;
}

/* Etapa atual e etapas vencidas usam a cor de ação do tema. A diferença entre
   as duas é o rótulo, que só a atual destaca. */
.form-trilha__item.is-atual .form-trilha__num,
.form-trilha__item.is-feito .form-trilha__num {
  background: var(--form-trilha-feito-bg);
  border-color: var(--form-trilha-feito-bg) !important;
  color: var(--form-trilha-feito-texto) !important;
}

.form-trilha__item.is-atual .form-trilha__rot {
  color: var(--form-trilha-atual-rotulo) !important;
}

.form-trilha__item.is-feito + .form-trilha__item::before {
  background: var(--form-trilha-feito-bg);
}

/* ---------------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------------- */

@media (max-width: 639px) {
  /* Duas colunas em 390px dariam ~170px por campo */
  .form__campos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  /* Em 360px os rótulos da trilha quebram em duas linhas e desalinham os
     círculos; fica o número, que com o aviso de etapa já situa a pessoa. */
  .form-trilha__rot {
    display: none;
  }

  /* Empilhado, "Voltar" abaixo do "Continuar" mantém a ação principal no topo */
  .form-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}


/* ---------------------------------------------------------------------------
   Página de demonstração — campos claros sobre o azul da marca
   ----------------------------------------------------------------------------
   O /demo roda .form--claro para ter os campos brancos. O tema claro foi
   desenhado para PÁGINA clara, e por isso escurece também o rótulo
   (--campo-rotulo: #2e2e2e). Aqui o rótulo não fica dentro do campo: fica
   sobre o #161BA9 do fundo, onde um cinza escuro some.

   Só esse token volta ao valor do tema escuro. Todo o resto do .form--claro
   é aproveitado como está — inclusive a seta do <select>, que no tema escuro
   é branca e sumiria dentro do campo branco, e as <option>, que deixam de ser
   forçadas para fundo #111. --------------------------------------------------- */
.pagina-demo .form--claro {
  --campo-rotulo: rgba(255, 255, 255, 0.5);
}