/* Inventário de componentes da Fase 1 — EF-07 §1.6.
 * Só o que as telas da Fase 1 usam. Componente novo entra na tabela da ficha
 * antes de entrar aqui. Nenhum valor literal: só tokens. */

/* =========================================================================
   BOTÃO — primário, secundário, destrutivo, de texto.
   Estados: padrão, sobre, pressionado, foco, desabilitado, carregando.
   Uma ação primária por tela. O rótulo diz a ação, nunca "OK".
   ========================================================================= */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
  padding: 0 var(--e-3);
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-family: var(--fonte);
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-weight: var(--peso-forte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao);
}

/* Alvo de toque adequado nas telas do vendedor (EF-07 §1.4; PRD 15.8). */
@media (pointer: coarse) {
  .botao {
    min-height: var(--altura-controle-toque);
  }
}

.botao--primario {
  background: var(--cor-acao);
  color: var(--cor-superficie);
  border-color: var(--cor-acao);
}

/* LACUNA (EF-07 §1.2): a ficha fixa `acao-escura` como "estado pressionado" e
 * não nomeia o estado "sobre", que o inventário §1.6 exige. Sobre e pressionado
 * usam o mesmo token, e o pressionado se distingue pelo deslocamento de 1px. */
.botao--primario:hover {
  background: var(--cor-acao-escura);
  border-color: var(--cor-acao-escura);
}

.botao--primario:active {
  background: var(--cor-acao-escura);
  border-color: var(--cor-acao-escura);
  transform: translateY(1px);
}

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-acao);
  border-color: var(--cor-borda-controle);
}

.botao--secundario:hover {
  background: var(--cor-acao-fraca);
}

.botao--secundario:active {
  background: var(--cor-acao-fraca);
  transform: translateY(1px);
}

.botao--destrutivo {
  background: var(--cor-erro);
  color: var(--cor-superficie);
  border-color: var(--cor-erro);
}

.botao--destrutivo:active {
  transform: translateY(1px);
}

.botao--texto {
  background: transparent;
  color: var(--cor-acao);
  border-color: transparent;
  padding: 0 var(--e-2);
}

.botao--texto:hover {
  background: var(--cor-acao-fraca);
}

/* Desabilitado. LACUNA (EF-07 §1.2): não há token de "desabilitado". Usa
 * `fundo-base` + `texto-fraco` (4,6:1, acima de AA) + `borda`, sem cor nova. */
.botao[disabled],
.botao[aria-disabled="true"] {
  background: var(--cor-fundo-base);
  color: var(--cor-texto-fraco);
  border-color: var(--cor-borda);
  cursor: not-allowed;
  transform: none;
}

/* Carregando: mantém a largura e não desaparece (EF-07 §1.6). */
.botao[data-carregando="true"] {
  pointer-events: none;
}

.botao__girando {
  width: var(--e-3);
  height: var(--e-3);
  border: var(--traco-foco) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 800ms linear infinite;
  flex: none;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .botao__girando {
    animation: none;
  }
}

/* Barra de ações: a primária é a última na leitura, "Pular" fica à esquerda. */
.barra-de-acoes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.barra-de-acoes--fim {
  justify-content: flex-end;
}

/* =========================================================================
   CAMPO — texto, número, moeda, data, seleção.
   Rótulo REAL acima do campo, sempre (PRD 15.8). Texto de exemplo nunca faz
   as vezes de rótulo. Erro embaixo, em uma frase.
   ========================================================================= */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-bottom: var(--e-4);
}

.campo__rotulo {
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.campo__controle {
  min-height: var(--altura-controle);
  padding: var(--e-1) var(--e-3);
  background: var(--cor-superficie);
  color: var(--cor-texto-forte);
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-variant-numeric: tabular-nums;
  width: 100%;
}

@media (pointer: coarse) {
  .campo__controle {
    min-height: var(--altura-controle-toque);
  }
}

.campo__controle::placeholder {
  color: var(--cor-texto-fraco);
}

.campo__controle[aria-invalid="true"] {
  border-color: var(--cor-erro);
  border-width: var(--traco-foco);
}

.campo__controle[disabled] {
  background: var(--cor-fundo-base);
  color: var(--cor-texto-fraco);
  border-color: var(--cor-borda);
}

.campo__controle[readonly] {
  background: var(--cor-fundo-base);
  border-color: var(--cor-borda);
}

.campo__ajuda {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  color: var(--cor-texto-fraco);
}

.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: var(--e-1);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  color: var(--cor-erro);
  font-weight: var(--peso-forte);
}

/* =========================================================================
   ETIQUETA DE ESTADO — ícone + palavra + cor, nesta ordem de importância.
   Cor nunca é o único sinal (P-5). Estado é etiqueta, nunca parte do nome (P-7).
   ========================================================================= */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0 var(--e-2);
  border-radius: var(--raio-etiqueta);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-forte);
  border: 1px solid transparent;
  max-width: 100%;
}

.etiqueta--neutra {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-controle);
}

.etiqueta--sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
}

.etiqueta--atencao {
  background: var(--cor-atencao-fundo);
  color: var(--cor-atencao);
  border-color: var(--cor-atencao);
}

.etiqueta--erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  border-color: var(--cor-erro);
}

.etiqueta__icone {
  flex: none;
}

/* Etiqueta de filtro ativo: fica no título da lista, com o ✕ que a remove. */
.etiqueta-de-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-1) 0 var(--e-2);
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
  border: 1px solid var(--cor-acao);
  border-radius: var(--raio-etiqueta);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-forte);
}

.etiqueta-de-filtro__remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--e-4);
  height: var(--e-4);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--raio-etiqueta);
  color: var(--cor-acao);
  cursor: pointer;
  font-size: var(--tamanho-legenda);
}

/* =========================================================================
   CARTÃO E PAINEL — elevação plana (borda, sem sombra).
   ========================================================================= */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--e-4);
}

.bloco {
  margin-bottom: var(--e-6);
}

.bloco:last-child {
  margin-bottom: 0;
}

.bloco__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  flex-wrap: wrap;
}

/* =========================================================================
   LINHA DE LISTA — 40 px, 12 a 15 linhas por tela sem rolagem.
   Clique na linha abre o registro; ação de linha à direita.
   ========================================================================= */

.lista {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.linha {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--altura-linha-de-lista);
  padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  text-decoration: none;
}

.linha:last-child {
  border-bottom: none;
}

.linha:hover {
  background: var(--cor-acao-fraca);
}

.linha[aria-current="true"] {
  background: var(--cor-acao-fraca);
}

.linha__principal {
  flex: 1 1 auto;
  min-width: 0;
  /* Texto longo e nome com caractere especial quebram dentro da linha:
     a página nunca estoura na horizontal, nem em 320 px. */
  overflow-wrap: anywhere;
}

.linha__acoes {
  flex: none;
  margin-left: auto;
}

/* A lista de contatos (quadro 45:13): quatro colunas alinhadas entre o
   cabeçalho e as linhas — CONTATO · EMPRESA · TELEFONE · LEADS. As larguras
   do desenho viram proporções para a tela não estourar em janela estreita. */
.lista--contatos .linha {
  display: grid;
  grid-template-columns: minmax(140px, 3fr) minmax(110px, 2.8fr) minmax(110px, 2.2fr) minmax(90px, 2fr);
  align-items: center;
}

/* O cabeçalho da lista é a mesma etiqueta em caixa alta do §1.3 — os tokens
   dela, não uma cópia com números próprios. Antes da emenda 57 os dois valores
   coincidiam por acaso (etiqueta = legenda) e a cópia passava despercebida. */
.linha--cabecalho,
.linha--cabecalho:hover {
  background: var(--cor-fundo-base);
  min-height: auto;
  font-size: var(--tamanho-rotulo-caixa-alta);
  line-height: var(--entrelinha-rotulo-caixa-alta);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: var(--espacamento-caixa-alta);
}

/* Tabela larga rola dentro do próprio recipiente: a página nunca estoura. */
.rolagem-horizontal {
  overflow-x: auto;
  max-width: 100%;
}

/* =========================================================================
   AVISO — inline, de bloco e global.
   Global é faixa no topo, em toda tela, até a correção.
   ========================================================================= */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  border: 1px solid;
  background: var(--cor-superficie);
}

.aviso--atencao {
  background: var(--cor-atencao-fundo);
  border-color: var(--cor-atencao);
  color: var(--cor-texto-forte);
}

.aviso--erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro);
  color: var(--cor-texto-forte);
}

.aviso--sucesso {
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso);
  color: var(--cor-texto-forte);
}

.aviso__icone {
  flex: none;
  font-weight: var(--peso-forte);
}

.aviso--atencao .aviso__icone {
  color: var(--cor-atencao);
}

.aviso--erro .aviso__icone {
  color: var(--cor-erro);
}

.aviso--sucesso .aviso__icone {
  color: var(--cor-sucesso);
}

.aviso__corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: var(--largura-texto-corrido);
}

.aviso__titulo {
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

/* Faixa global: largura inteira, acima de tudo. A pessoa não a dispensa. */
.aviso-global {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* =========================================================================
   ESQUELETO — só na área do dado, nunca a tela inteira (EF-07 §1.5).
   ========================================================================= */

.esqueleto {
  background: var(--cor-borda);
  border-radius: var(--raio-etiqueta);
  height: var(--entrelinha-corpo);
  animation: pulsar 1200ms ease-in-out infinite;
}

.esqueleto--titulo {
  height: var(--entrelinha-titulo-secao);
}

.esqueleto--linha {
  height: var(--altura-linha-de-lista);
  border-radius: var(--raio);
}

@keyframes pulsar {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto {
    animation: none;
  }
}

.pilha-de-esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* =========================================================================
   ESTADO VAZIO — é tela de primeira impressão, e cita a entidade certa.
   ========================================================================= */

.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-8) var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.estado-vazio__texto {
  max-width: var(--largura-texto-corrido);
  color: var(--cor-texto);
}

/* Gradação "gráfico sem volume": estrutura completa esmaecida, aviso por cima. */
.estrutura-esmaecida {
  position: relative;
}

.estrutura-esmaecida__fundo {
  opacity: 0.3;
  pointer-events: none;
}

.estrutura-esmaecida__aviso {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
}

/* =========================================================================
   DADO AUSENTE — traço em texto-fraco, com o motivo ao alcance de um clique.
   Nunca zero, nunca célula muda (P-1; EF-07 §4, D-1).
   ========================================================================= */

.ausente {
  color: var(--cor-texto-fraco);
  border-bottom: 1px dotted var(--cor-borda-controle);
  cursor: help;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 0;
  font: inherit;
}

/* =========================================================================
   CARTÃO DE INDICADOR — número NUNCA sem subtexto (P-2; RF-07 regra 3).
   ========================================================================= */

.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  text-decoration: none;
  color: inherit;
}

.indicador__valor {
  font-size: var(--tamanho-numero-grande);
  line-height: var(--entrelinha-numero-grande);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.indicador__valor--indisponivel {
  color: var(--cor-texto-fraco);
}

.indicador__subtexto {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  color: var(--cor-texto-fraco);
}

/* =========================================================================
   MENU E SELETOR — elevação flutuante.
   ========================================================================= */

.menu {
  position: relative;
}

.menu__gatilho {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
  padding: 0 var(--e-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: var(--tamanho-corpo);
  color: var(--cor-texto);
  cursor: pointer;
}

.menu__gatilho:hover {
  background: var(--cor-acao-fraca);
}

.menu__painel {
  position: absolute;
  right: 0;
  top: calc(var(--altura-controle) + var(--e-1));
  min-width: calc(var(--largura-lateral) - var(--e-8));
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flutuante);
  padding: var(--e-1);
  z-index: 2;
}

.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-etiqueta);
  color: var(--cor-texto);
  text-decoration: none;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

.menu__item:hover {
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
}

/* O Sair é formulário (escrita nunca vai por link), e o formulário não pode
   acrescentar espaço nenhum: quem desenha o item é o botão dentro dele. */
.menu__formulario {
  margin: 0;
}

/* =========================================================================
   BUSCA GLOBAL
   ========================================================================= */

.busca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
  padding: 0 var(--e-3);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  width: 100%;
  max-width: calc(var(--largura-formulario) / 2);
}

.busca__campo {
  border: none;
  outline-offset: var(--e-1);
  background: transparent;
  font-family: var(--fonte);
  font-size: var(--tamanho-corpo);
  color: var(--cor-texto-forte);
  width: 100%;
}

.busca__atalho {
  flex: none;
  color: var(--cor-texto-fraco);
  font-size: var(--tamanho-legenda);
}

/* =========================================================================
   TRILHA DE PASSOS DO ASSISTENTE — "3 de 4" é verdade; percentual não é.
   ========================================================================= */

.trilha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0;
  margin-bottom: var(--e-6);
}

.trilha__passo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--raio-etiqueta);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  color: var(--cor-texto-fraco);
  border: 1px solid var(--cor-borda);
}

.trilha__passo[data-estado="atual"] {
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
  border-color: var(--cor-acao);
  font-weight: var(--peso-forte);
}

.trilha__passo[data-estado="concluido"] {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
}

/* =========================================================================
   OPÇÃO EM CARTÃO (passo 1 do assistente) — rádio real por baixo.
   ========================================================================= */

.opcoes {
  display: grid;
  gap: var(--e-3);
  margin-bottom: var(--e-6);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  cursor: pointer;
}

.opcao:hover {
  background: var(--cor-acao-fraca);
}

.opcao__entrada {
  margin: 0;
  flex: none;
  accent-color: var(--cor-acao);
  width: var(--e-4);
  height: var(--e-4);
}

.opcao:has(.opcao__entrada:checked) {
  background: var(--cor-acao-fraca);
  border-color: var(--cor-acao);
  border-width: var(--traco-foco);
}

.opcao:has(.opcao__entrada:focus-visible) {
  outline: var(--traco-foco) solid var(--cor-acao);
  outline-offset: var(--e-1);
}

.opcao__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

/* =========================================================================
   AVISO MOMENTÂNEO (toast) — só para o que já aconteceu. 5 s.
   ========================================================================= */

.toast {
  position: fixed;
  left: var(--e-4);
  bottom: var(--e-4);
  z-index: 4;
  max-width: var(--largura-formulario);
  box-shadow: var(--sombra-flutuante);
}

/* =========================================================================
   MODAL — só confirmação destrutiva e decisão que não cabe na tela.
   ========================================================================= */

.modal {
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flutuante);
  padding: var(--e-4);
  max-width: var(--largura-formulario);
  width: 100%;
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.modal::backdrop {
  background: var(--cor-cortina);
}

.modal__titulo {
  margin-bottom: var(--e-3);
}

.modal__texto {
  margin-bottom: var(--e-4);
  max-width: var(--largura-texto-corrido);
}

/* =========================================================================
   GRUPO DE CAIXAS DE SELEÇÃO (perfil da fonte) — o mesmo cartão de opção do
   assistente, em grade compacta: 31 termos precisam caber sem virar rolagem
   de página inteira. Fieldset é semântica, não moldura: a borda some.
   ========================================================================= */

.grupo-de-opcoes {
  border: 0;
  margin: 0;
  padding: 0;
}

.grupo-de-opcoes legend {
  margin-bottom: var(--e-2);
}

.opcoes--compactas {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--e-2);
  margin-bottom: 0;
}

.opcoes--compactas .opcao {
  padding: var(--e-2) var(--e-3);
}

/* Linha de lista que NÃO é link (ex.: tradução de nome, com a ação à direita):
   sem fundo de pouso — pousar não pode sugerir clique onde não há. */
.linha--estatica:hover {
  background: var(--cor-superficie);
}

/* =========================================================================
   FICHA UNIFICADA (T2) — três colunas, a do meio rola (EF-07 §3).
   ========================================================================= */

.ficha {
  display: grid;
  grid-template-columns:
    var(--largura-coluna-de-identificacao)
    minmax(0, 1fr)
    var(--largura-coluna-de-origem);
  gap: var(--e-4);
  align-items: start;
}

@media (max-width: 1279px) {
  /* A origem SOBE, não some (D-2): vira a primeira faixa acima da linha do tempo. */
  .ficha { grid-template-columns: var(--largura-coluna-de-identificacao) minmax(0, 1fr); }
  .ficha__origem { grid-column: 2; grid-row: 1; }
  .ficha__meio { grid-column: 2; grid-row: 2; }
}

.ficha__coluna {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--e-4);
}

/* O divisor da coluna. Sem esta regra ele encolhia para um risco de poucos
   pixels no meio da coluna: o `hr` do navegador vem com margem automática dos
   dois lados, e dentro de uma pilha vertical isso o impede de esticar. O
   desenho pede uma linha inteira separando "quem é" de "negociação". */
.ficha__coluna hr {
  width: 100%;
  margin: 0;
  border: none;
  border-top: 1px solid var(--cor-borda);
}

/* A caixa de nota do desenho é um campo de fundo próprio, e não uma caixa
   branca sobre branco. */
.ficha__meio .campo__controle {
  background: var(--cor-fundo-base);
}

/* A origem é a leitura que só este produto dá, e o desenho a destaca com o
   traço da ação e um levantamento leve — nunca com fundo colorido, que
   competiria com o aviso de rastreio incompleto que mora dentro dela. */
.ficha__origem {
  border-color: var(--cor-acao);
  box-shadow: var(--sombra-cartao);
}

.ficha__origem .rotulo-caixa-alta {
  color: var(--cor-acao);
}

/* Rótulo curto à esquerda, valor colado nele: assim a coluna se lê como ficha
   de origem, e não como tabela de duas colunas largas. */
.ficha__origem .par {
  grid-template-columns: var(--largura-rotulo-de-origem) minmax(0, 1fr);
  gap: var(--e-2);
  align-items: baseline;
}

.ficha__origem .par dt {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-corpo);
}

/* "Já chegou {n}x" é a única aparição do modelo de quatro entidades, e o
   desenho lhe dá caixa própria — é fato útil, não nota de rodapé. */
.ficha__recorrencia {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  background: var(--cor-acao-fraca);
  border-radius: var(--raio);
}

.ficha__recorrencia-frase {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-forte);
  color: var(--cor-acao);
}

/* "Detalhes ▸" é o convite do desenho para o resto dos campos: fica na cor da
   ação, e continua sendo um `details` que abre sem script. */
.ficha__detalhes > summary {
  color: var(--cor-acao);
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.barra-de-etapas {
  display: flex;
  gap: var(--e-1);
  flex-wrap: wrap;
}

/* Etapas de largura igual, como no desenho: a barra é uma régua do caminho,
   e degrau mais largo que o outro sugere peso que não existe. */
.barra-de-etapas__etapa {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-controle);
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-etiqueta);
  background: var(--cor-superficie);
  color: var(--cor-texto-fraco);
  font: inherit;
  font-size: var(--tamanho-legenda);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.barra-de-etapas__etapa[data-estado="concluida"] {
  background: var(--cor-acao-fraca);
  border-color: transparent;
  color: var(--cor-acao);
}

.barra-de-etapas__etapa[data-estado="atual"] {
  background: var(--cor-acao);
  border-color: var(--cor-acao);
  color: var(--cor-superficie);
  font-weight: var(--peso-forte);
}

.barra-de-etapas__etapa:focus-visible {
  outline: var(--traco-foco) solid var(--cor-acao);
  outline-offset: var(--e-1);
}

.linha-do-tempo { display: grid; gap: var(--e-3); }

.linha-do-tempo__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
}

.linha-do-tempo__marcador {
  width: var(--e-2);
  height: var(--e-2);
  margin-top: var(--e-2);
  border-radius: 50%;
  background: var(--cor-acao);
}

.filtro-da-linha { display: inline-flex; gap: var(--e-1); }

/* Cada opção é um LINK, e não um botão à espera de script: sem JavaScript o
   filtro continua funcionando (EF-07 §1.8 — o filtro não é camada 3). O
   desenho continua o mesmo; o que muda é o elemento por baixo. */
/* O desenho tira a moldura de quem não está escolhido: só o recorte corrente
   ganha caixa. O alvo de toque continua inteiro (a altura não muda). */
.filtro-da-linha a {
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-controle);
  padding: var(--e-1) var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--raio-etiqueta);
  background: transparent;
  font: inherit;
  font-size: var(--tamanho-legenda);
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.filtro-da-linha a:hover {
  background: var(--cor-fundo-base);
}

.filtro-da-linha a[aria-current="true"] {
  background: var(--cor-acao-fraca);
  border-color: transparent;
  color: var(--cor-acao);
  font-weight: var(--peso-forte);
}

/* =========================================================================
   FUNIL (T3) — colunas, cartão com no máximo cinco informações.
   ========================================================================= */

/* A linha que diz QUAL funil está aberto. No desenho ela vive ao lado do
   título da tela; aqui ela abre o quadro, na mesma leitura de subtítulo. */
.cabecalho-do-quadro {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
}

/* A escolha do funil é NAVEGAÇÃO, e por isso são links e não um `<select>`:
   cada funil tem endereço próprio, e a tela não tem script para submeter um
   controle (`script-src 'self'`, sem manipulador em linha). O funil aberto
   fica como texto, sem virar link para onde a pessoa já está. */
.seletor-de-funil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
}

.seletor-de-funil__opcao,
.seletor-de-funil__atual {
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-controle);
  padding: 0 var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--raio);
  font-size: var(--tamanho-legenda);
}

.seletor-de-funil__opcao {
  border-color: var(--cor-borda-controle);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
}

.seletor-de-funil__opcao:hover {
  border-color: var(--cor-acao);
}

/* Aberto: fundo e peso, nunca só cor (P-5) — e o `aria-current` diz o mesmo
   para quem não vê nenhuma das duas. */
.seletor-de-funil__atual {
  background: var(--cor-acao-fraca);
  color: var(--cor-texto);
  font-weight: 600;
}

/* Coluna de largura fixa, como no desenho: cinco ou seis cabem na tela e a
   sexta rola. Coluna elástica encolhia o cartão junto e mudava a leitura de
   "onde está o volume" conforme o tamanho da janela. */
.funil {
  display: flex;
  gap: var(--e-4);
  align-items: start;
  overflow-x: auto;
  padding-bottom: var(--e-3);
}

/* A coluna é fundo, não caixa: sem traço em volta, quem se destaca é o cartão
   branco — a hierarquia que o desenho pede. */
.funil__coluna {
  flex: 0 0 var(--largura-coluna-do-funil);
  background: var(--cor-fundo-coluna);
  border-radius: var(--raio);
  padding: var(--e-3) var(--e-2);
  display: grid;
  gap: var(--e-2);
}

.funil__cabecalho { padding: 0 var(--e-1); }

.cartao-do-funil {
  background: var(--cor-superficie);
  border: 1px solid transparent;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  padding: var(--e-2) var(--e-3);
  display: grid;
  gap: var(--e-1);
  color: inherit;
  text-decoration: none;
}

.cartao-do-funil:hover {
  border-color: var(--cor-acao);
}

/* O título do cartão é o mais escuro; o valor vem logo abaixo, um tom atrás.
   A ficha manda o valor ser `corpo-forte`, e ele continua sendo — o desenho
   só o afasta do preto para o título liderar a leitura. */
.cartao-do-funil__valor {
  color: var(--cor-texto);
}

.cartao-do-funil:focus-visible {
  outline: var(--traco-foco) solid var(--cor-acao);
  outline-offset: var(--e-1);
}

.adicao-rapida {
  /* Bloco explícito: hoje é um link para a tela de nova negociação, e um <a>
     em linha perderia a caixa tracejada que o botão tinha. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-controle-toque);
  border: 1px dashed var(--cor-borda-controle);
  border-radius: var(--raio);
  padding: var(--e-2);
  text-align: center;
  color: var(--cor-texto-fraco);
  background: none;
  font: inherit;
  font-size: var(--tamanho-legenda);
  cursor: pointer;
  text-decoration: none;
}

.adicao-rapida:hover {
  border-color: var(--cor-acao);
  color: var(--cor-acao);
}

/* =========================================================================
   CARTÕES DE PLANO (T1 v2, /escolher-plano) — não é página de venda (P-14).
   ========================================================================= */

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e-3);
}

.plano {
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-2);
}

.plano--escolhido { border-color: var(--cor-acao); border-width: var(--traco-foco); }

/* Tabela simples de linhas rotuladas (assinatura, perfil, uso da chave). */
.pares { display: grid; gap: var(--e-2); }
.par { display: grid; grid-template-columns: 200px 1fr; gap: var(--e-3); }
.par dt { color: var(--cor-texto-fraco); }
.par dd { margin: 0; }

/* Caixa de reentrada (EF-09 §4.5): a tela original VISÍVEL atrás, intacta. */
.reentrada {
  position: fixed;
  inset: 0;
  background: var(--cor-cortina);
  display: grid;
  place-items: center;
  padding: var(--e-4);
}

.reentrada__caixa {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio);
  box-shadow: var(--sombra-flutuante);
  padding: var(--e-4);
  width: min(400px, 100%);
  display: grid;
  gap: var(--e-3);
}

/* Ilustração do estado vazio — a família do rastro (provisória até a
   identidade; gerada em 12/08/2026). Decorativa: alt vazio, tamanho contido. */
.estado-vazio__ilustracao {
  width: 160px;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}

/* =========================================================================
   REGISTROS PARECIDOS — a tela de duplicados (EF-04 §4.2).

   Duas colunas lado a lado, porque a decisão é uma COMPARAÇÃO: empilhar os
   dois registros obrigaria a pessoa a guardar o primeiro de cabeça enquanto
   lê o segundo. Abaixo de 700 px eles empilham, e aí a comparação passa a
   depender de rolagem — é a troca aceita, não um descuido.
   ========================================================================= */
.duplicado { display: grid; gap: var(--e-3); }

.duplicado__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-3);
}

@media (min-width: 700px) {
  .duplicado__colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.duplicado__lado {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: var(--e-3);
}

.duplicado__campos { display: grid; gap: var(--e-1); margin: 0; }
.duplicado__campos dd { margin: 0; }

/* O que é IGUAL nos dois lados fica marcado (EF-04 §5: "com o que é igual em
   destaque e o que difere ao lado"). O destaque é fundo + peso, NUNCA cor
   sozinha (P-5): quem não distingue a cor continua vendo o negrito. */
.duplicado__igual {
  background: var(--cor-acao-fraca);
  font-weight: 600;
  border-radius: var(--raio-etiqueta);
  padding-inline: var(--e-1);
}

/* A OUTRA METADE da mesma frase da ficha: "e o que difere AO LADO". Sem ela,
   ausência de destaque significava três coisas ao mesmo tempo — difere, não
   foi comparado, não tem valor —, e a diferença é o que decide a junção.

   É PALAVRA, e não outra cor: a pista precisa continuar legível para quem não
   distingue cor (P-5), e a cor daqui só reforça o que o texto já diz. */
.duplicado__difere {
  margin-inline-start: var(--e-1);
  color: var(--cor-atencao);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  white-space: nowrap;
}

.duplicado__escolha {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-1);
}

.duplicado__acoes { display: grid; gap: var(--e-2); }
.duplicado__recusa { display: block; }

/* Lista de consequências da confirmação de junção. */
.lista-simples { margin: 0; padding-left: var(--e-4); display: grid; gap: var(--e-1); }

/* =========================================================================
   AS TELAS DE CONFIGURAÇÃO EM CARTÃO — `/config/fontes`, `/config/fontes/{id}`
   e `/config/auditoria`.

   Fonte: Figma "03 · Telas do produto", quadros 41:13, 84:13, 155:108,
   163:108 e 60:394, lidos em 20/08/2026 (o dono decidiu que o desenho manda
   no código). Tudo aqui é MODIFICADOR: nenhuma classe compartilhada muda de
   aparência, para o desenho destas três telas não vazar para as outras 20.
   ========================================================================= */

/* O cartão: superfície branca, traço claro, canto de 10 e folga de 24.
   O desenho não usa sombra em nenhum dos cinco quadros. */
.bloco--cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio-cartao);
  padding: var(--e-4) var(--e-6);
}

.bloco--cartao > .bloco__cabecalho {
  display: block;
  margin-bottom: var(--e-2);
}

.bloco--cartao > .bloco__cabecalho .legenda {
  display: block;
  margin-top: var(--e-1);
  max-width: var(--largura-texto-corrido);
}

/* O cartão vale nos CINCO estados, e não só onde há lista: os cinco moram na
   mesma moldura, senão a tela salta de forma a cada carregamento. O vazio e o
   sem-permissão já trazem moldura própria — dentro do cartão ela some, para
   não virar borda dentro de borda. */
.bloco--cartao .estado-vazio {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--e-4) 0;
}

/* A abertura da tela: o que o quadro põe embaixo do título — a contagem e a
   frase que diz o que aquela tela é. O título continua um só, no topo. */
.introducao-de-tela {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  max-width: var(--largura-texto-corrido);
}

.introducao-de-tela p {
  color: var(--cor-texto-fraco);
}

/* Lista dentro do cartão: sem moldura própria (o cartão já é a moldura), com
   linha alta e divisória clara. A margem negativa devolve a folga do cartão
   para o pouso do cursor cobrir a linha inteira, como no quadro. */
.lista--folgada {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.lista--folgada .linha {
  min-height: auto;
  padding: var(--e-3) var(--e-6);
  margin-inline: calc(var(--e-6) * -1);
  border-bottom-color: var(--cor-borda-suave);
}

/* Linha de duas alturas: o fato em cima, o quando e o detalhe embaixo. */
.linha--empilhada {
  align-items: center;
}

.linha__empilha {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A lista de fontes: nome, o que a fonte declarou esperar, e o estado. */
.lista--fontes .linha {
  display: grid;
  grid-template-columns: minmax(160px, 320px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-4);
  padding-block: var(--e-4);
}

@media (max-width: 719px) {
  .lista--fontes .linha {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lista--fontes .linha > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* =========================================================================
   A FICHA DA FONTE — duas colunas (quadro 84:13): o caminho principal à
   esquerda, a tradução de nome de campo à direita.
   ========================================================================= */

.ficha-da-fonte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
}

@media (min-width: 1100px) {
  .ficha-da-fonte {
    grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
  }
}

.ficha-da-fonte__principal,
.ficha-da-fonte__lado {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

/* A folga entre cartões é do empilhamento, não da margem de `.bloco`: as duas
   somadas dariam 40 px, que não existe na escala. */
.ficha-da-fonte .bloco {
  margin-bottom: 0;
}

/* O campo de cópia do quadro: o botão mora DENTRO da caixa, à direita.
   O endereço continua num campo só — a posição única do segredo. */
.campo-de-copia {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-de-copia .campo__controle {
  min-height: var(--altura-controle-toque);
  padding-right: var(--e-12);
  font-variant-numeric: normal;
  text-overflow: ellipsis;
}

.campo-de-copia .botao {
  position: absolute;
  right: var(--e-1);
  min-height: var(--e-8);
}

/* =========================================================================
   GUIA DE LIGAÇÃO POR FERRAMENTA (quadro 163:108) — um cartão recolhível por
   ferramenta, com o nome, para quem ela é, e os passos numerados.
   ========================================================================= */

.guia-ferramenta {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-suave);
  border-radius: var(--raio);
}

.guia-ferramenta > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  cursor: pointer;
  list-style: none;
}

.guia-ferramenta > summary::-webkit-details-marker {
  display: none;
}

.guia-ferramenta > summary:hover {
  background: var(--cor-fundo-base);
  border-radius: var(--raio);
}

.guia-ferramenta__identificacao {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 0;
}

.guia-ferramenta__alternar {
  flex: none;
  color: var(--cor-acao);
  font-weight: var(--peso-forte);
}

/* Um rótulo por estado: o recolhido convida a abrir, o aberto oferece fechar.
   Os dois moram na marcação — texto que a pessoa lê não nasce em folha de
   estilo. */
.guia-ferramenta[open] .guia-ferramenta__alternar--abrir,
.guia-ferramenta:not([open]) .guia-ferramenta__alternar--fechar {
  display: none;
}

.guia-ferramenta__passos {
  display: grid;
  gap: var(--e-2);
  counter-reset: passo-do-guia;
  padding: 0 var(--e-4) var(--e-4);
  margin: 0;
}

/* O número é uma bolha POSICIONADA, não uma coluna de grade: o passo tem
   `<code>` e `<strong>` dentro, e numa grade cada um deles viraria uma célula
   própria — o texto do passo se despedaçava em colunas. Medido na primeira
   renderização desta entrega. */
.guia-ferramenta__passos li {
  position: relative;
  padding-left: calc(var(--e-6) + var(--e-3));
  min-height: var(--e-6);
}

.guia-ferramenta__passos li::before {
  counter-increment: passo-do-guia;
  content: counter(passo-do-guia);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--e-6);
  height: var(--e-6);
  border-radius: 50%;
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-forte);
}

.guia-ferramenta code,
.guia-do-endereco code {
  background: var(--cor-fundo-base);
  border-radius: var(--raio-etiqueta);
  padding: 0 var(--e-1);
}

/* =========================================================================
   CONTAGENS DO QUE CHEGOU (quadro 155:108) — número grande com o subtexto que
   diz de quê ele é. Ausência NUNCA entra aqui: quando não chegou nada, quem
   chama mostra a frase, não um "0".
   ========================================================================= */

.contagens {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-8);
}

.contagem {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.contagem__valor {
  font-size: var(--tamanho-numero-grande);
  line-height: var(--entrelinha-numero-grande);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.contagem__valor--texto {
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
}

/* =========================================================================
   ETIQUETA DE AUTORIA (quadro 60:394) — a palavra que diz o que agiu, à
   direita da linha de auditoria. Cor sozinha nunca decide: a palavra está
   escrita. Pessoa não recebe etiqueta — é isso que faz a distinção significar
   alguma coisa, e o vazio à direita é o sinal mais forte que o desenho tem.
   ========================================================================= */

.etiqueta-de-autoria {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e-2);
  border-radius: var(--raio-etiqueta);
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-forte);
}

.etiqueta-de-autoria--suporte {
  background: var(--cor-atencao-fundo);
  color: var(--cor-atencao);
}

/* Os detalhes de um resultado de busca — empresa, e-mail e telefone — são
   marcas independentes, e sem isto saíam GRUDADAS: "Studio Belamarina@…".
   Achado ao renderizar e olhar, em 20/08/2026; o defeito não dependia do
   tamanho do texto e por isso nenhuma mudança de escala o teria revelado. */
.linha__detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
}

/* =========================================================================
   PAINEL DE AQUISIÇÃO — a grade de cartões, a variação com sentido, a quebra
   por chave e os dois seletores de recorte.

   Nenhum valor fora da escala de espaçamento (4, 8, 12, 16, 24, 32, 48), e
   nenhuma cor fora dos tokens: cor é sinal, e sinal tem nome de papel.
   ========================================================================= */

.grade-de-indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e-3);
}

/* O cartão do painel NÃO é âncora enquanto o detalhamento não existir: o
   seletor de elemento cobre a versão em `div`, sem duplicar a regra base. */
.indicador--painel {
  gap: var(--e-1);
}

/* A VARIAÇÃO CARREGA MELHORA OU PIORA, NÃO A DIREÇÃO. E a cor nunca é o único
   sinal: a palavra vai junto, no mesmo elemento. */
.variacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
}

.variacao__palavra {
  text-transform: lowercase;
}

.variacao--melhora {
  color: var(--cor-sucesso);
}

.variacao--piora {
  color: var(--cor-erro);
}

.variacao--estavel,
.variacao--neutro,
.variacao--sem-base {
  color: var(--cor-texto-fraco);
}

/* A quebra por chave: a primeira coluna é o nome, as demais são números
   alinhados. Larguras em proporção para a tela não estourar em janela
   estreita — a mesma escolha da lista de contatos. */
.lista--painel .linha {
  display: grid;
  grid-template-columns: minmax(140px, 3fr) repeat(auto-fit, minmax(84px, 1fr));
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.seletor-de-recorte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
}

.seletor-de-recorte__opcao {
  color: var(--cor-acao);
  text-decoration: none;
  border: 1px solid var(--cor-borda-controle);
  border-radius: var(--raio-etiqueta);
  padding: var(--e-1) var(--e-2);
}

.seletor-de-recorte__opcao[aria-current="true"] {
  background: var(--cor-acao-fraca);
  border-color: var(--cor-acao);
}