/*
 * ONDA A — identidade, cadastro e LGPD.
 *
 * ESTE ARQUIVO NÃO É O DESIGN SYSTEM. Os tokens (`--cor-*`, `--espaco-*`,
 * `--raio-*`), os componentes compartilhados (`.botao`, `.formulario`,
 * `.aviso`) e a tipografia são da ONDA D, em `01_tokens.css` e seguintes. O que
 * mora aqui é só o que é ESTRUTURAL das telas desta onda e que ninguém mais vai
 * escrever: a coluna estreita do fluxo de acesso, a trilha dos quatro passos do
 * paredão e o medidor.
 *
 * Todo `var()` vem com fallback de propósito: as duas ondas correm ao mesmo
 * tempo, e a tela de login precisa ser legível no dia em que 01_tokens.css
 * ainda não existir. Quando D chegar, os fallbacks somem sozinhos do resultado
 * — o token vence.
 *
 * O integrador acrescenta `@import "30_identidade.css";` em application.css.
 */

/* ── O fluxo de acesso: coluna estreita, centrada, um assunto por tela ──── */
.acesso,
.estado,
.legal,
.contrato {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--espaco-4, 1.5rem);
}

.acesso__titulo,
.estado__titulo,
.contrato__titulo {
  margin-block: 0 var(--espaco-2, 0.5rem);
}

.acesso__chamada,
.estado__corpo,
.contrato__chamada {
  margin-block: 0 var(--espaco-4, 1.5rem);
  color: var(--cor-texto-suave, #9aa4b2);
}

.acesso__saidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3, 1rem);
  margin-block-start: var(--espaco-4, 1.5rem);
}

/* ── O medidor do paredão (§13.4) ────────────────────────────────────────
 * NÃO tem regra aqui, de propósito. `.medidor` é componente da ONDA D
 * (`10_componentes.css`), construído sobre `<progress>` — que é a única forma
 * de largura dinâmica que sobrevive à CSP do projeto (`style-src` com nonce,
 * sem `unsafe-inline` e sem `style-src-attr`). Esta folha carrega DEPOIS da 10;
 * redefinir `.medidor__trilho`/`__preenchido` aqui misturava duas estruturas
 * internas diferentes no mesmo nome. O paredão usa o componente de D.
 */
.paredao .medidor {
  margin-block: var(--espaco-3, 1rem);
}

/* ── A trilha dos quatro passos ─────────────────────────────────────────── */
.passos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2, 0.5rem);
  margin: var(--espaco-3, 1rem) 0;
  padding: 0;
  list-style: none;
}

.passos__elo {
  display: block;
  padding: var(--espaco-1, 0.25rem) var(--espaco-2, 0.5rem);
  border-radius: var(--raio-2, 0.5rem);
  text-decoration: none;
  color: var(--cor-texto-suave, #9aa4b2);
}

.passos__item--pronto .passos__elo { color: var(--cor-aprovado, #2ecc71); }

.passos__item--atual .passos__elo {
  background: var(--cor-marca-tenue, #182146);
  color: var(--cor-marca, #4f6bff);
}

/* ── Paredão e perfil ───────────────────────────────────────────────────── */
.paredao,
.perfil {
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--espaco-4, 1.5rem);
}

.paredao__ajuda,
.perfil__nota,
.formulario__dica {
  font-size: 0.875rem;
  color: var(--cor-texto-suave, #9aa4b2);
}

.formulario__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-3, 1rem);
  margin-block-start: var(--espaco-4, 1.5rem);
}

.formulario__estado {
  font-size: 0.875rem;
  color: var(--cor-texto-suave, #9aa4b2);
}

.foto__previa {
  inline-size: 8rem;
  block-size: 8rem;
  object-fit: cover;
  border-radius: var(--raio-cheio, 999px);
}

/* A lista de aceites é leitura, não formulário: cada item respira. */
.consentimentos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.consentimentos__item {
  padding-block: var(--espaco-3, 1rem);
  border-block-end: 1px solid var(--cor-borda, #232a36);
}

.consentimentos__efeito {
  font-size: 0.875rem;
  color: var(--cor-texto-suave, #9aa4b2);
}

/* ── Marca (§15.2) ──────────────────────────────────────────────────────── */
.paletas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paletas__opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2, 0.5rem);
}

/* A COR de cada amostra não mora aqui: ela sai do `<style nonce>` que a view
 * `admin/marcas/show` já abre, uma regra por paleta pronta. Atributo `style=`
 * seria descartado pela CSP e as seis amostras virariam seis quadrados iguais,
 * na única tela cujo assunto é cor. */
.paletas__amostra {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--raio-cheio, 999px);
  border: 1px solid var(--cor-borda, #232a36);
}

/* A prévia recebe as cinco variáveis derivadas num <style nonce> emitido pelo
 * `Admin::MarcasController` — é aqui que elas caem, e é por isso que o bloco
 * inteiro fica isolado numa classe própria. */
.previa-de-marca {
  margin-block-start: var(--espaco-5, 2rem);
  padding: var(--espaco-4, 1.5rem);
  border: 1px solid var(--cor-borda, #232a36);
  border-radius: var(--raio-3, 0.75rem);
}

.previa-de-marca .botao--primario {
  background: var(--cor-marca, #4f6bff);
  color: var(--cor-marca-contraste, #090c12);
  border-color: var(--cor-marca-forte, #1c40ff);
}

.previa-de-marca .etiqueta {
  display: inline-block;
  padding: var(--espaco-1, 0.25rem) var(--espaco-2, 0.5rem);
  border-radius: var(--raio-cheio, 999px);
  background: var(--cor-marca-tenue, #182146);
  color: var(--cor-marca-suave, #9cabfa);
}

.ficha__valor--codigo {
  font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  overflow-wrap: anywhere;
}