/* LASTRO — componentes BEM. Um padrão por problema.
   Antes de criar componente novo, procure aqui. Ver docs/12_COMPONENTS_KIT.md */

/* ════════ .btn ════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary { background: var(--primary); color: var(--primary-text); }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn--secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-subtle); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-muted); }

.btn--danger { background: var(--danger); color: var(--text-inverted); }

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--text-base); }

/* ════════ .field ════════ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-strong);
  color: var(--text-secondary);
}

.field__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base); /* nunca abaixo de 16px: iOS dá zoom ao focar */
  transition: border-color var(--duration-fast) var(--ease);
}
.field__input:focus { border-color: var(--primary); outline: none; }
.field__input::placeholder { color: var(--text-subtle); }

.field__help { font-size: var(--text-xs); color: var(--text-muted); }

.field__error {
  font-size: var(--text-xs);
  font-weight: var(--fw-strong);
  color: var(--danger);
}
.field--erro .field__input { border-color: var(--danger); }

/* ════════ .card ════════ */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ════════ .badge ════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--lastreado { background: var(--lastreado-soft); color: var(--lastreado); border-color: var(--lastreado-border); }
.badge--declarado { background: var(--declarado-soft); color: var(--declarado); border-color: var(--declarado-border); }
.badge--alerta    { background: var(--danger-bg);      color: var(--danger);    border-color: var(--danger-border); }
.badge--neutro    { background: var(--bg-muted);       color: var(--text-muted); border-color: var(--border); }

/* ════════ .section-header ════════ */
.section-header { margin-bottom: var(--space-5); }
.section-header__title { font-size: var(--text-2xl); }
.section-header__sub { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }

/* ════════ .skeleton ════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton 1.4s var(--ease) infinite;
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* ════════ .empty ════════ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-5);
  text-align: center;
}
.empty__title { font-weight: var(--fw-strong); }
.empty__text { font-size: var(--text-sm); color: var(--text-muted); max-width: 32ch; }

/* ════════ .toast ════════ */
.toast-root {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  width: min(calc(100% - var(--space-8)), 26rem);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-inverted);
  color: var(--text-inverted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  animation: toast-in var(--duration) var(--ease-out);
}
.toast--sucesso { background: var(--success); }
.toast--erro    { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ════════ .auth — tela de entrada ════════ */
.auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-6);
}
.auth__box { width: 100%; max-width: 22rem; margin: 0 auto; }
.auth__marca {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.auth__nome {
  font-size: var(--text-2xl);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-tighter);
}
.auth__tag { font-size: var(--text-xs); color: var(--text-muted); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__rodape {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  text-align: center;
}

/* ════════ .modal ════════ */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; }
.modal__fundo { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  max-height: 92dvh;
  background: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-2xl);
  animation: modal-in var(--duration) var(--ease-out);
}
@keyframes modal-in { from { transform: translateY(16px); opacity: 0; } }
.modal__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.modal__titulo { font-size: var(--text-lg); font-weight: var(--fw-title); }
.modal__corpo {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
}
.modal__pe {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
}
.modal__pe .btn { flex: 1; }

@media (min-width: 40rem) {
  .modal { align-items: center; padding: var(--space-5); }
  .modal__caixa { border-radius: var(--radius-xl); }
  .modal__pe .btn { flex: 0 0 auto; }
}

/* ════════ ícones ════════
   Rede de segurança: o createIcons já define width/height, mas ícone sem
   tamanho estoura o layout inteiro — e falha assim não dá erro no console.
   Ver assets/vendor/lucide.js. */
svg[aria-hidden="true"] { flex: none; }
.btn svg { width: 18px; height: 18px; }
.linha > svg,
.card > svg { width: 20px; height: 20px; }

/* ════════ .secreto — campo de senha ou código com olhinho ════════
   Lei do projeto: todo campo mascarado tem o botão de mostrar.
   Ver docs/25_SENHAS_E_CODIGOS.md e components/campo-secreto.js */
.secreto { position: relative; display: flex; }

.secreto__campo {
  /* espaço para o botão não cobrir o texto digitado */
  padding-right: calc(var(--touch-min) + var(--space-2));
}

.secreto__olho {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  background: none;
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease);
}
.secreto__olho:hover { color: var(--text); }
.secreto__olho[aria-pressed="true"] { color: var(--primary); }
.secreto__olho svg { width: 20px; height: 20px; }

/* ════════════════════════════════════════════════════════════════════════
   FASE 1 — componentes base do Design System.
   Ver docs/DESIGN_SYSTEM.md. Nenhum HEX aqui: só token.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════ foco visível — WCAG 2.4.7, em tudo que recebe teclado ════════ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* ════════ papéis tipográficos ════════ */
.t-display { font-size: var(--display-size); font-weight: var(--display-weight); line-height: var(--display-lh); letter-spacing: var(--tracking-tighter); }
.t-h1      { font-size: var(--h1-size);      font-weight: var(--h1-weight);      line-height: var(--h1-lh);      letter-spacing: var(--tracking-tight); }
.t-h2      { font-size: var(--h2-size);      font-weight: var(--h2-weight);      line-height: var(--h2-lh);      letter-spacing: var(--tracking-tight); }
.t-h3      { font-size: var(--h3-size);      font-weight: var(--h3-weight);      line-height: var(--h3-lh); }
.t-body    { font-size: var(--body-size);    font-weight: var(--body-weight);    line-height: var(--body-lh); }
.t-body-sm { font-size: var(--body-sm-size); font-weight: var(--body-sm-weight); line-height: var(--body-sm-lh); }
.t-label   { font-size: var(--label-size);   font-weight: var(--label-weight);   line-height: var(--label-lh); }
.t-caption { font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); color: var(--text-secondary); }
.t-eyebrow {
  font-size: var(--caption-size); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
}

/* ════════ .btn — variação de ícone e tamanho ════════ */
.btn--icone {
  width: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0;
}
.btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }

/* Controle interativo precisa de borda com 3:1 — WCAG 1.4.11. */
.field__input,
.btn--secondary { border-color: var(--border-control); }

/* ════════ .selo — status com ícone E texto, nunca só cor ════════ */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: var(--fw-strong);
  line-height: 1.4;
  white-space: nowrap;
}
.selo svg { width: 13px; height: 13px; flex: none; }

.selo--ativo        { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.selo--pendente     { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.selo--confirmado   { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.selo--parcial      { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.selo--divergencia  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.selo--atrasado     { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.selo--inativo      { background: var(--neutral-bg); color: var(--text-secondary); border-color: var(--neutral-border); }
.selo--info         { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }

/* ════════ .kpi — o número é o conteúdo ════════ */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.kpi__rotulo {
  display: block;
  font-size: var(--caption-size);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.kpi__valor {
  display: block;
  font-size: var(--kpi-size);
  font-weight: var(--kpi-weight);
  line-height: var(--kpi-lh);
  letter-spacing: var(--tracking-tighter);
  font-variant-numeric: tabular-nums;
}
.kpi__apoio {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.kpi__valor--meta          { color: var(--stage-meta); }
.kpi__valor--declarado     { color: var(--stage-declarado); }
.kpi__valor--identificado  { color: var(--stage-identificado); }
.kpi__valor--validado      { color: var(--stage-validado); }
.kpi__valor--lastreado     { color: var(--stage-lastreado); }
.kpi__valor--vazio         { color: var(--text-subtle); }

/* ════════ .tabela — profissional, densa, com estados ════════ */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.tabela { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.tabela th {
  font-size: var(--caption-size);
  font-weight: var(--fw-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabela td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--bg-muted); }
.tabela .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ════════ .alerta — bloco de aviso em bloco ════════ */
.alerta {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.alerta svg { flex: none; margin-top: 1px; }
.alerta--info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--text); }
.alerta--info svg    { color: var(--info); }
.alerta--aviso   { background: var(--warning-bg); border-color: var(--warning-border); color: var(--text); }
.alerta--aviso svg   { color: var(--warning); }
.alerta--perigo  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--text); }
.alerta--perigo svg  { color: var(--danger); }
.alerta--sucesso { background: var(--success-bg); border-color: var(--success-border); color: var(--text); }
.alerta--sucesso svg { color: var(--success); }

/* ════════ desafio de PIN — docs/18 ════════ */
.desafio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.desafio__rotulo { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.desafio__pin {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--fw-strong);
  letter-spacing: .35em;
  text-align: center;
  color: var(--text);
  user-select: none;
}
.modal__msg { margin: 0; font-size: var(--text-base); color: var(--text-secondary); }
.modal__titulo { display: flex; align-items: center; gap: var(--space-2); }

/* ── Marcação (caixa de marcar) ────────────────────────────────────────
   docs/30_COMPONENTES.md. Estava escrito com style inline em liderancas.js
   e territorios.js — quatro cópias da mesma coisa, e nenhuma alcançável por
   uma mudança de design. As medidas aqui são as que já estavam lá.

   O alvo de toque de 20px não é enfeite: o mobilizador marca o consentimento
   de pé, com uma mão, muitas vezes no sol. */
.marcacao {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.marcacao__caixa {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Versão em bloco, para decisão que merece peso — consentimento, ativar
   território. Alinha ao topo porque o texto tem duas linhas. */
.marcacao--destaque {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.marcacao--destaque .marcacao__caixa { margin-top: 3px; }
.marcacao--destaque .marcacao__texto { font-size: var(--text-sm); }

/* ── Blocos de conteúdo ────────────────────────────────────────────────
   docs/30_COMPONENTES.md. Estes padrões estavam escritos como style inline,
   repetidos tela a tela — cada um um lugar onde o design system não chegava.
   Trocar o espaçamento de um cartão agora alcança todos. */

/* Cartão que tem outro embaixo. */
.card--sep { margin-bottom: var(--space-4); }

.card__titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}

.card__sub {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

/* Texto explicativo dentro do cartão, antes dos botões. */
.card__texto {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* Fila de botões que quebra em telas estreitas em vez de espremer. O
   min-width mantém o alvo de toque utilizável com uma mão. */
.linha-botoes {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.linha-botoes > .btn {
  flex: 1;
  min-width: 9rem;
  /* 05/09: "Baixar CSV das lideranças" estourava o card em 390 px com nowrap */
  white-space: normal;
  text-align: center;
}

/* Área que rola sozinha — histórico, listas longas. */
.rolagem {
  max-height: 24rem;
  overflow-y: auto;
}

/* ── utilitários ── */
.u-xs      { font-size: var(--text-xs); }
.u-sm      { font-size: var(--text-sm); }
.u-nowrap  { white-space: nowrap; }
.u-centro  { text-align: center; }
.u-topo-6  { margin-top: var(--space-6); }
.u-sem-fim { margin-bottom: 0; }

/* ── Aviso ─────────────────────────────────────────────────────────────
   Faixa de atenção dentro da página: unidade não definida, liderança calada,
   número impossível. Estava escrita como style inline em painel.js, uma cópia
   por tipo — e o design nunca alcançaria nenhuma. */
.aviso {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.aviso__texto {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.aviso__icone { flex: none; }

/* Pendência: falta uma decisão, nada está errado. */
.aviso--pendente {
  background: var(--declarado-soft);
  border-color: var(--declarado-border);
}

/* Perigo: alguma coisa precisa de ação. */
.aviso--perigo {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  align-items: center;
}

.aviso--perigo .aviso__icone { color: var(--danger); }

/* ── Filtros ── */
.filtros {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.filtros__campo { flex: 0 1 14rem; }

/* ── outros blocos ── */
.secao__titulo {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
}

/* Caixa de colar lista — importação de lideranças. */
.area-texto {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Prévia da importação: mostra o que vai entrar antes de gravar. */
.previa {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-height: 9rem;
  overflow: auto;
}

/* Nota logo abaixo de um número, colada nele de propósito. */
.nota-do-numero {
  font-size: var(--text-xs);
  margin: calc(var(--space-4) * -1) 0 var(--space-5);
}

.u-topo-3 { margin-top: var(--space-3); }
.u-sem-margem { margin: 0; }

/* ── mais blocos, segunda passada ── */

/* Título com um número ou selo do lado direito. */
.linha-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

/* Botão sozinho, centralizado — "Abrir rodada", "Carregar mais". */
.u-centralizar { display: flex; justify-content: center; }

/* Ícone dentro de aviso ou linha: não encolhe e herda a cor do contexto. */
.icone { flex: none; }
.icone--lastreado { color: var(--lastreado); flex: none; }
.icone--fraco     { color: var(--text-subtle); flex: none; }
.icone--info      { color: var(--info); flex: none; }

/* Aviso informativo — explica, não alerta. */
.aviso--info {
  background: var(--info-bg);
  border-color: var(--info-border);
  margin-bottom: var(--space-4);
}

/* Busca ocupa o espaço que sobra; o filtro ao lado tem largura própria. */
.filtros__busca { flex: 1; min-width: 12rem; }

.card--sutil { background: var(--bg-subtle); }

.u-topo-4 { margin-top: var(--space-4); }
.u-topo-5 { margin-top: var(--space-5); }
.u-fim-3  { margin-bottom: var(--space-3); }

/* Aviso que fica até ser dispensado. A raiz não recebe toque (pointer-events:
   none) para não cobrir a tela; o aviso fixo precisa receber, senão o botão de
   fechar não funciona. Ver BUG 6 em toast.js. */
.toast--fixo { pointer-events: auto; align-items: flex-start; }
.toast__fechar {
  margin-left: auto;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-1);
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════
   PAINEL MASTER — docs/33_PAINEL_MASTER.md
   Nasce dentro da regra de docs/30: as telas do master não têm estilo
   inline; tudo que precisam está aqui, por token.
   ════════════════════════════════════════════════════════════════════════ */

/* Grade de .kpi (o cartão do design system, não o .kpis das telas antigas). */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Tons de estado para número que NÃO é do funil. Os tons de estágio
   (declarado, lastreado…) são exclusivos do funil. */
.kpi__valor--info    { color: var(--info); }
.kpi__valor--atencao { color: var(--warning); }
.kpi__valor--alerta  { color: var(--danger); }

/* Módulos da plataforma: o que está no ar e o lugar reservado do que vem. */
.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease);
}
a.modulo:hover { border-color: var(--border-strong); }
.modulo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.modulo__icone { width: 22px; height: 22px; color: var(--primary); }
.modulo__nome { font-weight: var(--fw-strong); }
.modulo__texto {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
/* Previsto: só o lugar. Tracejado para não parecer clicável. */
.modulo--previsto { background: var(--bg-subtle); border-style: dashed; }
.modulo--previsto .modulo__icone { color: var(--text-subtle); }

/* .alerta com corpo e ação (components/aviso.js). */
.alerta__corpo { flex: 1; min-width: 0; }
.alerta__acao  { flex: none; }
.alerta + .alerta { margin-top: var(--space-2); }

/* Notificação ainda não lida. */
.linha--nova { border-left: 3px solid var(--info); }

/* Amostra de cor do cliente. A cor em si vem do dado, pintada pelo DOM. */
.amostra {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: none;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  background: var(--bg-muted);
}
.amostra--vazia {
  background: repeating-linear-gradient(45deg, var(--bg-muted), var(--bg-muted) 4px, var(--border) 4px, var(--border) 6px);
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

/* Lista rótulo/valor dentro de cartão (components/cartao.js). */
.definicoes {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.definicoes__item { display: contents; }
.definicoes dt { color: var(--text-muted); }
.definicoes dd { margin: 0; overflow-wrap: anywhere; }

/* Dois campos lado a lado num formulário. */
.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.perfil__selos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Foto de perfil na ficha da equipe (docs/38) ── */
.foto-campo { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); align-items: start; }
.foto-campo__previa {
  width: 64px; height: 64px; border-radius: var(--radius-full);
  background: var(--bg-muted); border: 1px solid var(--border);
  overflow: hidden; display: block;
}
.foto-campo__previa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cabeça de cartão com um botão à direita (Ajustes › perfil da campanha, 05/09/2026). */
.card__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.card__cabeca .card__titulo { margin-bottom: 0; }
.card__cabeca + .linha__meta { margin-top: var(--space-3); }