/* ============================================================
   Sistema de Contratos Sotaq — Design System do Grupo Sotaques v1
   Fonte da verdade: ~/projetos-inovacao/design-system-grupo/DESIGN.md
   + telas 01-marcas/02-inicio/03-marca-form + mock do financeiro.

   Estrutura deste arquivo:
   1. Fontes (BR Cobane) + tokens semânticos DS (claro/escuro)
   2. Reset + base
   3. Casca (sidebar, topbar, page) — NOVO
   4. Componentes DS (botões, formulário, painel, chips, stat tile,
      tabela de dados em CSS grid, eyebrow) — NOVO
   5. Login / trocar senha — NOVO
   6. Compat legada: classes .pt-BR já usadas pelos templates de
      módulo (contratos/, esteira/, financeiro/, influenciadores/,
      links/, importacao/, d4sign/) — MANTIDAS, só re-tokenizadas.
      Ver contrato de classes no relatório de entrega do build.
   ============================================================ */

/* ---------- 1. Fontes ---------- */
@font-face { font-family: 'BR Cobane'; src: url('fonts/BRCobane-Black.otf') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'BR Cobane'; src: url('fonts/BRCobane-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'BR Cobane'; src: url('fonts/BRCobane-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'BR Cobane'; src: url('fonts/BRCobane-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'BR Cobane'; src: url('fonts/BRCobane-Light.otf') format('opentype'); font-weight: 300; font-style: normal; }

/* ---------- Tokens DS: tema claro (default) ---------- */
:root {
  --canvas: #F7F7F5;
  --surface: #FFFFFF;
  --surface-raised: #FAFAF8;
  --border: #EDEDEA;
  --border-strong: #E0E0DD;
  --ink: #0A0A0A;
  --ink-2: #4A4A4A;
  --ink-3: #6B6B6B;
  --accent: #FF6F38;
  --accent-ink: #B84A1F;
  --accent-tint: #FFF4EF;
  /* --danger usa #C22A20, não o #D93025 do DESIGN.md v1: o do DS mede 4.46:1 contra --canvas
     (abaixo do piso de 4.5:1); #C22A20 mede 5.11:1. Mesmo ajuste já aplicado no mock do
     financeiro (fonte citada pelo Alex) — mantido igual aqui por consistência entre módulos. */
  --danger: #C22A20;
  --danger-tint: #FDEEEC;
  --focus-ring: #FF6F38;

  /* ---------- Tokens legados (compat) — aliasados aos tokens DS acima.
     Como custom properties resolvem var() de forma preguiçosa, um único
     alias em :root já reage à troca de tema (não precisa repetir nos
     blocos [data-theme="dark"] / @media). Módulos ainda não migrados
     seguem funcionando sem qualquer alteração de classe. ---------- */
  --cor-pagina: var(--canvas);
  --cor-superficie: var(--surface);
  --cor-superficie-2: var(--surface-raised);
  --cor-borda: var(--border);
  --cor-texto: var(--ink);
  --cor-texto-secundario: var(--ink-2);
  --cor-texto-terciario: var(--ink-3);
  --foco: var(--focus-ring);

  --accent-hover: #FF7E4E;
  --accent-peach: var(--accent-tint);
  --accent-peach-texto: var(--accent-ink);

  --vermelho-bg: var(--danger-tint);
  --vermelho-texto: var(--danger);
  --critico-borda: var(--danger);
  --critico-texto: var(--danger);

  /* Paleta de status multi-hue (verde/âmbar/azul/cinza) não faz parte do DS v1
     (que só define accent + danger) — é necessidade de domínio (status de
     contrato/pagamento). Mantida com valores próprios, harmonizados com o
     canvas/superfície novos. */
  --verde-bg: #E7F4EC;
  --verde-texto: #1E7A44;
  --ambar-bg: #FDF3E1;
  /* --ambar-texto usa #8F5F00, não o #9A6700 original: o original mede 4.42:1
     contra --ambar-bg (abaixo do piso de 4.5:1); #8F5F00 mede 5.02:1 contra
     --ambar-bg e 5.52:1 contra --surface. Mesmo ajuste já aplicado no
     --danger acima — segue o precedente. */
  --ambar-texto: #8F5F00;
  --azul-bg: #E8F0FD;
  --azul-texto: #2B5DB9;
  --cinza-bg: #EEF0F2;
  --cinza-texto: #475467;

  --radius: 14px;
  --radius-sm: 10px;
  /* DS: "moldura sem sombra pesada; sombra só em overlay/dropdown" */
  --sombra: none;
  --sombra-media: 0 12px 28px -8px rgba(10, 10, 10, .18);

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
}

/* ---------- Tokens DS: tema escuro (explícito, toggle sol/lua) ---------- */
[data-theme="dark"] {
  --canvas: #0A0A0A;
  --surface: #141414;
  --surface-raised: #1C1C1C;
  --border: #262626;
  --border-strong: #333333;
  --ink: #F5F5F3;
  --ink-2: #B5B5B1;
  --ink-3: #9A9A96;
  --accent: #FF6F38;
  --accent-ink: #FF8A5C;
  --accent-tint: #241A14;
  --danger: #FF6B5C;
  --danger-tint: #2A1512;
  --focus-ring: #FF6F38;

  --sombra-media: 0 12px 28px -8px rgba(0, 0, 0, .55);

  --verde-bg: #14301F;
  --verde-texto: #4ADE80;
  --ambar-bg: #332708;
  --ambar-texto: #F2C94C;
  --azul-bg: #17233A;
  --azul-texto: #7BA6F2;
  --cinza-bg: #262C33;
  --cinza-texto: #B0B8C1;
}

/* ---------- Tokens DS: escuro por preferência do SO (sem escolha explícita) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0A0A0A;
    --surface: #141414;
    --surface-raised: #1C1C1C;
    --border: #262626;
    --border-strong: #333333;
    --ink: #F5F5F3;
    --ink-2: #B5B5B1;
    --ink-3: #9A9A96;
    --accent: #FF6F38;
    --accent-ink: #FF8A5C;
    --accent-tint: #241A14;
    --danger: #FF6B5C;
    --danger-tint: #2A1512;
    --focus-ring: #FF6F38;

    --sombra-media: 0 12px 28px -8px rgba(0, 0, 0, .55);

    --verde-bg: #14301F;
    --verde-texto: #4ADE80;
    --ambar-bg: #332708;
    --ambar-texto: #F2C94C;
    --azul-bg: #17233A;
    --azul-texto: #7BA6F2;
    --cinza-bg: #262C33;
    --cinza-texto: #B0B8C1;
  }
}

/* ---------- 2. Reset + base ---------- */
* {
  box-sizing: border-box;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

html, body {
  margin: 0;
  padding: 0;
  min-width: 1024px; /* DS v1 cobre desktop >=1024px, sem responsivo mobile */
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'BR Cobane', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }

::selection {
  background: var(--accent);
  /* fixo: texto sempre escuro sobre o laranja da seleção, nos dois temas */
  color: #0A0A0A;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

svg { display: block; flex-shrink: 0; }

/* ---------- 3. Casca ---------- */
.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-brand { padding: 28px 24px 20px; }
.sidebar-brand img { height: 28px; width: 28px; display: block; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 16px;
}

.nav-eyebrow {
  font-family: 'BR Cobane', system-ui;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 12px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.nav-item svg { color: var(--ink-3); }
.nav-item:hover { background: var(--surface-raised); color: var(--ink); }
.nav-item:hover svg { color: var(--ink); }
.nav-item.active { color: var(--accent-ink); background: transparent; font-weight: 500; }
.nav-item.active svg { color: var(--accent-ink); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.sidebar-note {
  font-size: 11px;
  color: var(--ink-3);
  padding: 10px 16px 0;
  line-height: 1.5;
}

.sidebar-footer {
  border-top: 1px solid var(--border-strong);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .avatar já é neutro tokenizado (36px) — aqui só ajustamos o tamanho pra
   caber no rodapé da sidebar no padrão avatar-chip (34px) do DS. */
.sidebar-footer .avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.footer-user { flex: 1; min-width: 0; }
.footer-user .name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer-user .email {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-toggle {
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface-raised); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: flex; }
[data-theme="dark"] .theme-toggle .icon-sun { display: flex; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: flex; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: flex; }

.footer-signout {
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
}
.footer-signout:hover { background: var(--surface-raised); color: var(--ink); }
.footer-signout button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
}

/* ---- Main / topbar ---- */
.main { position: relative; overflow: hidden; }

.main-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 22px 40px 0;
}

/* botão de ação primária do topo — sempre encostado na borda direita,
   mesmo quando o seletor de empresa (à esquerda) não é renderizado */
.topbar-cta { margin-left: auto; }

/* Seletor de empresa ativa (multi-empresa) — posicionado no topo do
   conteúdo, no padrão do mock do financeiro (scope-select). */
.empresa-switch-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empresa-switch { position: relative; }

.empresa-switch-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  list-style: none;
}
.empresa-switch-toggle::-webkit-details-marker { display: none; }
.empresa-switch-toggle:hover { color: var(--ink); }
.empresa-switch-toggle svg { width: 14px; height: 14px; color: var(--ink-3); }

.empresa-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--sombra-media);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.empresa-switch-opcao {
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
}
.empresa-switch-opcao:hover { background: var(--surface-raised); }
.empresa-switch-opcao.ativa { font-weight: 600; color: var(--accent-ink); }

/* ---- Page ---- */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 40px 80px;
  position: relative;
}
.page.form-page { max-width: 720px; }

.page-header {
  position: relative;
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 6px 10px 6px 6px;
  margin: -6px 0 18px -6px;
  border-radius: 8px;
}
.back-link:hover { background: var(--surface-raised); color: var(--ink); }
.back-link svg { width: 16px; height: 16px; color: var(--ink-3); }
.back-link:hover svg { color: var(--ink); }

.header-text .eyebrow,
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.header-text h1 {
  font-family: 'BR Cobane', system-ui;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 0 0 10px;
}

.header-text .subtitle {
  font-size: 14.5px;
  color: var(--ink-2);
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---------- 4. Componentes DS ---------- */

/* ---- Botões: base compartilhada por classes legadas (.btn-primario) e
   canônicas (.btn-primary). Um primário por tela é responsabilidade de
   quem monta a página, não do CSS. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }

.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 9px; }

/* primário — laranja com texto preto (branco sobre laranja reprova contraste) */
.btn-primary,
.btn-primario {
  background: var(--accent);
  color: #0A0A0A;
}
.btn-primary:hover,
.btn-primario:hover { background: var(--accent-hover); }
.btn-primary svg,
.btn-primario svg { color: #0A0A0A; }

/* secundário — outline ink */
.btn-secondary,
.btn-secundario,
.btn-neutro {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-secondary:hover,
.btn-secundario:hover,
.btn-neutro:hover { background: var(--surface-raised); }

/* ghost — só texto */
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  padding: 12px 14px;
}
.btn-ghost:hover { background: var(--surface-raised); color: var(--ink); }

/* destrutivo — outline; sólido só em confirmação */
.btn-danger-outline {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger-outline:hover { background: var(--danger-tint); }

.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { opacity: .9; }
/* DESIGN.md v1.2, seção 4: texto branco no claro mede 4.77:1 (ok); no
   escuro o branco cai pra 2.80:1 (reprova) -- preto mede 7.08:1. Regra
   escrita, medida, e sem override até agora porque este era o 1º uso
   real do botão sólido (só existia .btn-danger-outline em produção;
   Spec 21 é o primeiro modal de confirmação destrutiva do app). */
[data-theme="dark"] .btn-danger-solid { color: #0A0A0A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-danger-solid { color: #0A0A0A; }
}

/* zona destrutiva de painel (Spec 21, docs/21-spec-apagar-influenciador.md) --
   mesmo padrão de rodapé de painel do DESIGN.md v1.2 ("Zona destrutiva no
   rodapé do painel com aviso do que não dá pra desfazer"). */
.zona-destrutiva-aviso { margin: 0 0 14px; font-size: 13px; color: var(--ink-2); }

/* modal de confirmação destrutiva (DESIGN.md v1.2, componente obrigatório
   desde a v1.1) -- só existe este uso até agora (apagar influenciador,
   Spec 21); markup/classes ficam genéricos (.modal-overlay/.modal) pra
   dar pra reaproveitar quando a próxima ação destrutiva precisar. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  max-width: 440px;
  width: 100%;
  padding: 28px;
}
.modal h2 { margin: 0 0 10px; font-size: 19px; color: var(--ink); }
.modal p { margin: 0 0 22px; font-size: 14px; color: var(--ink-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.btn-icone {
  padding: 8px;
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-2);
}
.btn-icone:hover { background: var(--surface-raised); color: var(--ink); }

/* ---- Formulário DS ---- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-row .field + .field { margin-top: 0; }

.field-label {
  font-family: 'BR Cobane', system-ui;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
}
.field-label .opt { font-weight: 400; color: var(--ink-3); }

.field-input,
.field-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--ink-3); }
.field-textarea { resize: vertical; min-height: 62px; line-height: 1.5; }

.field-input:focus,
.field-textarea:focus,
.select-wrap select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field-input:disabled,
.field-textarea:disabled,
.select-wrap select:disabled { opacity: .6; cursor: not-allowed; }

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 40px 11px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.select-wrap svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
  width: 15px;
  height: 15px;
}

.field-hint { font-size: 12px; color: var(--ink-3); }
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--danger);
  margin-top: 2px;
}
.field-error svg { width: 14px; height: 14px; color: var(--danger); }
.field.has-error .field-input,
.field.has-error .field-textarea { border-color: var(--danger); }
.field.has-error .field-input:focus,
.field.has-error .field-textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }

/* ---- Abas (ficha do influenciador, Spec 18) ---- */
.tabs-wrap { margin-bottom: 24px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; }
.tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-family: 'BR Cobane', system-ui;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Painel DS (moldura: borda + raio, sem sombra pesada) ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  overflow: hidden;
}
.panel + .panel { margin-top: 24px; }
.panel-header { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.panel-header h2 { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.panel-header p { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.panel-body { padding: 8px 24px 20px; }

.panel-section { padding: 28px; border-bottom: 1px solid var(--border); }
.panel-section:last-child { border-bottom: none; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-title { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.section-count { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.section-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; max-width: 520px; }

/* zona destrutiva no rodapé do painel */
.danger-zone { background: var(--surface); }
.danger-zone-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.danger-zone-title { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.danger-zone-sub { font-size: 12.5px; color: var(--ink-3); }

/* ---- Chips DS ---- */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 6px 6px 6px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--ink-3);
  flex-shrink: 0;
}
.chip-remove:hover { background: var(--danger-tint); color: var(--danger); }
.chip-remove svg { width: 12px; height: 12px; }
.chip-more { background: transparent; border: 1px dashed var(--border-strong); color: var(--ink-3); padding: 6px 14px; }

.chip-add-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 14px;
  max-width: 340px;
}
.chip-add-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.chip-add-field svg { color: var(--ink-3); width: 15px; height: 15px; }
.chip-add-field input { all: unset; flex: 1; font-size: 14px; color: var(--ink); font-family: inherit; }
.chip-add-field input::placeholder { color: var(--ink-3); }

/* ---- Stat tile ---- */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px;
  min-width: 0;
}
.stat-tile .stat-number {
  font-family: 'BR Cobane', system-ui;
  font-weight: 300; /* Light — número display nunca laranja */
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.stat-tile .stat-label { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* ---- Tabela de dados em CSS grid (padrão do mock do financeiro) ----
   Novo componente pros agentes de módulo migrarem <table> pra este
   padrão. Cada módulo define sua própria .cols-<modulo> com
   grid-template-columns (nome flexível, número à direita fixo, badge em
   coluna própria, ações ~148px à direita — regra do DESIGN.md §3.3). */
.list-columns { display: grid; column-gap: 16px; padding: 0 8px 10px; margin-top: 12px; }
.list-columns .col-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-columns .col-label.align-right { text-align: right; }

/* Réguas .cols-* fluidas (minmax(0, Xfr) nas colunas de texto/nome, px fixo
   só em avatar/badge-categórico/data/dinheiro/ação — ver cada .cols-* mais
   abaixo). Isso substitui o overflow-x:auto genérico que existia aqui até
   07/08/2026: naquele modelo as réguas somavam ~800-990px mínimos e a
   lista inteira rolava lateralmente pra não cortar (inclusive o botão de
   ação, que ficava fora da área visível sem indicação de scroll — vetado
   por usabilidade). Com minmax(0, Xfr) a coluna de nome/campanha/badge de
   frase truncam com reticências (ver `.row-cell .badge` etc. abaixo) e a
   régua sempre cabe na largura do painel — nenhuma lista deste padrão
   precisou ficar com scroll-x como exceção. */

/* Badge dentro de célula de texto (motivo de bloqueio, estado de link,
   etapa) — mesmo tratamento de "texto longo" que .row-cell já dá ao seu
   próprio conteúdo: com a régua fluida, o texto do badge (às vezes uma
   frase inteira, ex. "em re-edição — volte o status para assinado para
   liberar") precisa poder truncar com reticências em vez de vazar pra
   fora da coluna. display:inline-block é só pra permitir o texto truncar
   (não há badge com ícone nestes contêineres — confirmado, sem grep de
   <svg> dentro de .badge). */
.row-cell .badge,
.row-cell-stack .badge,
.row-col-status .badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.list { margin-top: 4px; border-top: 1px solid var(--border); }
.row {
  display: grid;
  column-gap: 16px;
  align-items: center;
  height: 64px; /* DS: altura de linha de dados */
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
}
.row:hover { background: var(--surface-raised); }
.row:hover .row-actions { opacity: 1; pointer-events: auto; }
.row:hover .row-chevron { opacity: 1; }
.row.compact { height: 44px; cursor: default; }
.row.static { cursor: default; }
.row.subtotal { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: none; background: var(--surface-raised); }

.row-primary { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.row-name-wrap { min-width: 0; }
.row-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.row-sub { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.row-cell { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-cell.r { text-align: right; }
.row-cell.strong { color: var(--ink); font-weight: 600; }
.row-col-status { display: flex; flex-direction: column; gap: 3px; }
.row-caption { font-size: 11px; color: var(--ink-3); }
.row-col-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.row-actions { display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .12s ease; flex-shrink: 0; }
.icon-btn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 7px 11px; border-radius: 8px; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.icon-btn svg { width: 14px; height: 14px; }
.row-chevron { width: 14px; height: 14px; color: var(--ink-3); opacity: 0; transition: opacity .12s ease; flex-shrink: 0; }
.row-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; justify-content: center; }
.row-cell-stack .row-cell,
.row-cell-stack .row-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 5. Login / trocar senha ---------- */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-5);
  background: var(--canvas);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 38px 32px 28px;
}

.login-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.login-title {
  text-align: center;
  font-family: 'BR Cobane', system-ui;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.login-title .ponto { color: var(--accent-ink); }

.login-sub {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 26px;
}

.login-form .field + .field { margin-top: 16px; }
.login-form .btn { margin-top: 22px; }

.theme-toggle-floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

/* ============================================================
   6. Compat legada — classes já em uso pelos templates de módulo.
   Mantidas com os mesmos nomes/seletores; só os TOKENS mudaram.
   ============================================================ */

/* ---------- Navbar antiga (removida do base.html; classes preservadas
   caso algum template ainda a referencie durante a migração) ---------- */
.navbar-logo .ponto { color: var(--accent-ink); }

/* ---------- Chip "MVP em validação" / avisos de contexto ---------- */
.chip-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: 12px;
  color: var(--cor-texto-secundario);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 3px var(--espaco-3);
}
.chip-estado .ponto-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde-texto);
  display: inline-block;
}

/* ---------- Chip de empresa ativa (multi-empresa) ---------- */
.chip-empresa {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 3px var(--espaco-3);
}
.chip-empresa--SOTAQ { background: var(--accent-peach); color: var(--accent-peach-texto); }
.chip-empresa--INVOGA { background: var(--azul-bg); color: var(--azul-texto); }
.chip-empresa--MOVIN { background: var(--verde-bg); color: var(--verde-texto); }

/* ---------- Layout de página (legado — pré-casca) ---------- */
.pagina { max-width: 1200px; margin: 0 auto; padding: var(--espaco-6) var(--espaco-5); }
.pagina-header { margin-bottom: var(--espaco-6); }
.pagina-titulo { font-family: 'BR Cobane', system-ui; font-weight: 900; font-size: 32px; letter-spacing: -.01em; margin: 0 0 var(--espaco-2); }
.pagina-subtitulo { font-size: 14px; color: var(--cor-texto-secundario); max-width: 640px; margin: 0; }

/* ---------- Avatar de iniciais ---------- */
/* Chip neutro tokenizado (padrão canônico do DS — nada de paleta por hash):
   contraste texto/fundo medido 8.48:1 claro e 8.29:1 escuro (piso 4.5:1). */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--surface-raised);
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

/* ---------- Avatar de foto real (Spec 20) ---------- */
/* .avatar-foto é a base (tamanho vem de -sm/-md/-lg); .avatar-foto-fallback
   reaproveita os mesmos tokens do chip de iniciais acima (fundo neutro,
   nunca paleta por hash) quando não há foto pro influenciador. */
.avatar-foto {
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  vertical-align: middle;
}
.avatar-foto-fallback {
  background: var(--surface-raised);
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  font-weight: 600;
}
.avatar-foto-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-foto-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-foto-lg { width: 64px; height: 64px; font-size: 22px; }

/* ---------- KPI cards (legado — equivalente a .stat-tile) ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-6);
}
.kpi-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: var(--espaco-5);
}
.kpi-card.critico { border-color: var(--critico-borda); }
.kpi-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cor-texto-terciario);
  margin: 0 0 var(--espaco-2);
}
.kpi-valor {
  font-family: 'BR Cobane', system-ui;
  font-weight: 300; /* Light — número display, regra DS */
  font-size: 40px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.01em;
  color: var(--cor-texto);
}
.kpi-card.critico .kpi-valor { color: var(--critico-texto); }
.kpi-subtexto { font-size: 13px; color: var(--cor-texto-secundario); margin: var(--espaco-2) 0 0; }
.kpi-card-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); transition: box-shadow .15s ease, border-color .15s ease; }
.kpi-card-link:hover .kpi-card { border-color: var(--accent); }

/* ---------- Painel (legado) ---------- */
.painel { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--radius); box-shadow: var(--sombra); margin-bottom: var(--espaco-5); }
.painel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-4) var(--espaco-5); border-bottom: 1px solid var(--cor-borda); }
.painel-titulo { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 16px; margin: 0; }
.painel-corpo { padding: var(--espaco-5); }

/* ---------- Chip de decisão ---------- */
.chip-decisao {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--accent-peach);
  color: var(--accent-peach-texto);
  border-radius: 999px;
  padding: 4px var(--espaco-3);
}

/* ---------- Badges de status (legado — multi-hue, necessidade de domínio) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 3px var(--espaco-3);
  white-space: nowrap;
}
.badge-verde { background: var(--verde-bg); color: var(--verde-texto); }
.badge-ambar { background: var(--ambar-bg); color: var(--ambar-texto); }
.badge-vermelho { background: var(--vermelho-bg); color: var(--vermelho-texto); }
.badge-azul { background: var(--azul-bg); color: var(--azul-texto); }
.badge-cinza { background: var(--cinza-bg); color: var(--cinza-texto); }

/* ---------- Formulários (legado) ---------- */
.campo { margin-bottom: var(--espaco-4); }
.campo label { display: block; font-size: 13px; font-weight: 500; color: var(--cor-texto-secundario); margin-bottom: var(--espaco-1); }
.campo .ajuda { font-size: 12px; color: var(--cor-texto-terciario); margin-top: var(--espaco-1); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px var(--espaco-3);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ---------- Tabelas <table> (legado — módulos ainda não migrados pra
   o padrão CSS grid da seção 4) ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-texto-terciario);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
}
tbody tr { height: 64px; } /* DS: altura de linha de dados */
tbody tr:hover { background: var(--cor-superficie-2); }
tbody td { padding: var(--espaco-3) var(--espaco-4); border-bottom: 1px solid var(--cor-borda); font-size: 14px; }

/* ---------- Barra de progresso horizontal ---------- */
.barra-progresso { display: flex; align-items: center; gap: var(--espaco-3); }
.barra-progresso-trilho { flex: 1; height: 8px; background: var(--cinza-bg); border-radius: 999px; overflow: hidden; }
.barra-progresso-preenchida { height: 100%; background: var(--accent); border-radius: 999px; }
.barra-progresso-label { font-size: 12px; color: var(--cor-texto-secundario); white-space: nowrap; }

/* ---------- Estado vazio ---------- */
.estado-vazio { text-align: center; padding: var(--espaco-7) var(--espaco-5); color: var(--cor-texto-secundario); }
.estado-vazio-titulo { font-family: 'BR Cobane', system-ui; font-size: 16px; font-weight: 600; color: var(--cor-texto); margin: 0 0 var(--espaco-2); }

/* ---------- Flash messages ---------- */
.flashes { display: flex; flex-direction: column; gap: var(--espaco-2); margin-bottom: var(--espaco-5); }
.flash { border-radius: var(--radius-sm); padding: var(--espaco-3) var(--espaco-4); font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.flash-sucesso { background: var(--verde-bg); color: var(--verde-texto); border-color: var(--verde-texto); }
.flash-erro { background: var(--vermelho-bg); color: var(--vermelho-texto); border-color: var(--vermelho-texto); }
.flash-aviso { background: var(--ambar-bg); color: var(--ambar-texto); border-color: var(--ambar-texto); }

/* ---------- Utilidades ---------- */
.u-mt-0 { margin-top: 0; }
.u-flex { display: flex; align-items: center; }
.u-gap-2 { gap: var(--espaco-2); }
.u-gap-3 { gap: var(--espaco-3); }
.u-w-full { width: 100%; }

/* ============================================================
   Extensões do módulo Influenciadores — aditivas, não alteram
   nada acima. Ver src/blueprints/influenciadores.py.
   ============================================================ */

.filtros-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espaco-3); margin-bottom: var(--espaco-4); }
.filtros-barra .campo { margin-bottom: 0; min-width: 180px; }
.filtros-barra .campo-busca { flex: 1; min-width: 220px; }

.tabela-scroll { overflow-x: auto; }

.celula-principal { display: flex; align-items: center; gap: var(--espaco-3); }
.celula-principal-texto { line-height: 1.3; }
.celula-principal-nome { font-weight: 600; }
.celula-principal-arroba { font-size: 12px; color: var(--cor-texto-terciario); }

.chips-pendencia { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
.chip-pendencia {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--ambar-bg);
  color: var(--ambar-texto);
  border-radius: 999px;
  padding: 2px var(--espaco-2);
  white-space: nowrap;
}
.chip-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--vermelho-bg);
  color: var(--vermelho-texto);
  border-radius: 999px;
  padding: 2px var(--espaco-2);
  white-space: nowrap;
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-3);
  padding: var(--espaco-4) var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
  font-size: 13px;
  color: var(--cor-texto-secundario);
}
.paginacao-links { display: flex; align-items: center; gap: var(--espaco-2); }

.form-secao { margin-bottom: var(--espaco-6); }
.form-secao:last-child { margin-bottom: 0; }
.form-secao-titulo {
  font-family: 'BR Cobane', system-ui;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--espaco-4);
  padding-bottom: var(--espaco-2);
  border-bottom: 1px solid var(--cor-borda);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--espaco-4); }
.form-grid .campo-largo { grid-column: 1 / -1; }
.campo-obrigatorio-marca { color: var(--critico-texto); margin-left: 2px; }

.alerta-inline {
  display: flex;
  gap: var(--espaco-3);
  align-items: flex-start;
  background: var(--vermelho-bg);
  color: var(--vermelho-texto);
  border: 1px solid var(--vermelho-texto);
  border-radius: var(--radius-sm);
  padding: var(--espaco-3) var(--espaco-4);
  font-size: 13px;
  margin-bottom: var(--espaco-4);
}
.alerta-inline strong { display: block; margin-bottom: 2px; }

.checklist-cadastro { display: flex; flex-direction: column; gap: var(--espaco-2); }
.checklist-item { display: flex; align-items: center; gap: var(--espaco-2); font-size: 13px; }
.checklist-item .marca { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.checklist-item.ok .marca { background: var(--verde-bg); color: var(--verde-texto); }
.checklist-item.falta .marca { background: var(--ambar-bg); color: var(--ambar-texto); }
.checklist-item.falta { color: var(--cor-texto-secundario); }

.detalhe-acoes { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }
.dado-readonly {
  padding: 11px var(--espaco-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--cor-superficie-2);
  font-size: 14px;
  color: var(--cor-texto);
  min-height: 20px;
}

/* === modulos esteira-financeiro ===
   Migração pro design system do grupo (07/08/2026). Só apresentação —
   nenhuma regra de negócio muda aqui. Ver relatório do build pro
   contrato de classes completo. */

/* ---- Toolbar de filtros (barra horizontal reaproveitada em esteira e financeiro) ---- */
.toolbar { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar .field { gap: 6px; min-width: 160px; }
.toolbar .field-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.toolbar-note { font-size: 12px; color: var(--ink-3); margin: 2px 0 18px; }

/* ---- Esteira: atalhos de etapa (contador clicável por status) ---- */
/* minmax 150px deixava a régua estreita demais pro maior rótulo ("Aguardando
   assinatura", ~164px de texto) — quebrava em 2 linhas em 1024-1280px e
   desalinhava o número entre os tiles-irmãos. 200px garante 1 linha nas
   4 larguras testadas (1024-1920). */
.esteira-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.esteira-coluna { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.esteira-coluna:hover { border-color: var(--border-strong); }
.esteira-coluna.ativa { border-color: var(--accent); }
.esteira-coluna-label { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.esteira-coluna-qtd { font-family: 'BR Cobane', system-ui; font-weight: 300; font-size: 28px; color: var(--ink); margin: 4px 0 0; letter-spacing: -.01em; }
.esteira-coluna.ativa .esteira-coluna-label,
.esteira-coluna.ativa .esteira-coluna-qtd { color: var(--accent-ink); }

/* ---- Esteira: mudar status expansível (mantido em <table> — ver relatório) ---- */
.mudar-status summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); list-style: none; }
.mudar-status summary::-webkit-details-marker { display: none; }
.form-mudar-status { margin: 12px 0; padding: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; min-width: 260px; }
.linha-parada-ambar td:first-child { border-left: 3px solid var(--ambar-texto); }
.linha-parada-vermelha td:first-child { border-left: 3px solid var(--danger); }

/* ---- Régua de colunas: painel.html "Precisa de ação hoje" ----
   Contrato/Atendente/Motivo fluidos (nome, atendente e badge de motivo
   truncam com reticências). Etapa é badge_status (piso 153px cobre o
   maior rótulo, "Aguardando assinatura" = 145px medido). Ação nunca
   encolhe: botão "Ver e responder"/"Ver histórico" mede até 127px
   medido, 135px fixo dá folga sem cortar. */
.cols-acao { grid-template-columns: minmax(0, 1.3fr) 153px minmax(0, 0.7fr) minmax(0, 1fr) 135px; }

/* ---- Feed de eventos (painel.html "Últimos eventos") ---- */
.feed-eventos { list-style: none; margin: 0; padding: 0; }
.feed-eventos li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.feed-eventos li:last-child { border-bottom: none; }
.feed-eventos p { margin: 0; font-size: 14px; color: var(--ink); }
.feed-eventos .evento-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---- Timeline (esteira/_timeline.html) ---- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marcador { position: absolute; left: -28px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.timeline-corpo { font-size: 14px; color: var(--ink); }
.timeline-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.timeline-vazio { color: var(--ink-2); }

/* ---- Financeiro: fila agrupada por mês (details/summary sobre .panel) ---- */
.grupo-mes { margin-bottom: 16px; }
.grupo-mes:last-child { margin-bottom: 0; }
.grupo-mes summary { cursor: pointer; list-style: none; }
.grupo-mes summary::-webkit-details-marker { display: none; }
.grupo-mes .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grupo-mes-titulo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.grupo-mes-chevron { color: var(--ink-3); transition: transform .12s ease; flex-shrink: 0; }
.grupo-mes[open] .grupo-mes-chevron { transform: rotate(90deg); }
.grupo-mes-subtotal { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 14.5px; color: var(--ink); white-space: nowrap; }

/* ---- Régua de colunas: financeiro (fila de pagamento / bloqueados / comprovantes) ----
   .cols-fila não é usada em nenhum template — a "Fila de pagamento" e
   "Atrasos antigos" (financeiro/index.html) usam <table> legada com
   overflow-x:auto próprio, fora do escopo desta régua. Código morto,
   mantido (não é desta mudança apagar código morto pré-existente). */
.cols-fila { grid-template-columns: minmax(190px, 1.3fr) minmax(170px, 1.3fr) 116px 116px 120px 132px 148px; }
/* Influenciador/Campanha fluidos. Total devido é dinheiro — nunca trunca,
   108px cobre até R$ 9.999.999,99 (93px medido) com folga. Situação é
   badge_status fixo (mesmo piso de .cols-acao). Motivo do bloqueio é
   badge de frase (ex. "em re-edição — volte o status para assinado para
   liberar" = 319px medido) — fluido com reticências, ver `.row-cell
   .badge` acima; texto completo também em title="" no template. */
.cols-bloqueados { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 108px 160px minmax(0, 1.3fr); }
.cols-comprovante { grid-template-columns: minmax(0, 1fr) 160px; }

.aviso-atrasos-antigos { background: var(--ambar-bg); color: var(--ambar-texto); border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.aviso-atrasos-antigos strong { font-weight: 700; }

/* variantes de stat-tile pra sinalizar urgência sem virar bloco de cor grande —
   borda + número mudam de cor, fundo continua --surface */
.stat-tile.critico { border-color: var(--danger); }
.stat-tile.critico .stat-number { color: var(--danger); }
.stat-tile.aviso { border-color: var(--ambar-texto); }
.stat-tile.aviso .stat-number { color: var(--ambar-texto); }

/* variante pra número em reais (mais largo que contador) — sem isso o valor
   estoura a borda do tile em telas de 3-4 colunas (medido no financeiro).
   26px fixo ainda estourava em col-3 @1024 (tile de ~150px); troca pra
   clamp() em cqi (unidade de container query) porque col-3 e col-4 têm
   larguras de tile bem diferentes — vw sozinho não distingue as duas. */
.stat-tile:has(.stat-number-long) { padding-left: 14px; padding-right: 14px; container-type: inline-size; }
.stat-tile .stat-number.stat-number-long { font-size: clamp(16px, 11cqi, 36px); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }

/* ---- Detalhe chave/valor (financeiro/pagamento.html — resumo do contrato, dados bancários) ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 16px; }
.detail-item .dt-label { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; }
.detail-item .dt-val { font-size: 13.5px; color: var(--ink); font-weight: 500; }

/* ---- Registrar pagamento: um cartão por parte exigida ---- */
.parte-pagamento { border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.parte-pagamento:last-child { margin-bottom: 0; }
.parte-pagamento-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.parte-pagamento-titulo { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.campo-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); font-weight: 400; }
.campo-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* === modulo contratos === */
/* Migração dos templates src/templates/contratos/*.html pro design
   system do grupo. Ver DESIGN.md + contrato de classes no relatório
   de entrega do build. Append-only — nada acima desta linha foi tocado. */

/* ---- Colunas das listas (CSS grid) específicas do módulo ----
   Campanha/Empresa fluidos. Esteira e Financeiro são badge_status — em
   telas largas (>=1280px) mostram o rótulo inteiro; em 1024px o maior
   rótulo ("Aguardando assinatura") pode truncar — aceitável (só dinheiro
   e ação têm garantia de nunca truncar). Valor é dinheiro: nunca trunca,
   100px cobre até R$ 9.999.999,99 (93px medido). Criado em é data
   YYYY-MM-DD fixa (69px medido), 75px fixo. */
.cols-contratos { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.5fr) minmax(0, 0.9fr) minmax(0, 0.7fr) 100px 75px; }
/* Nome/@ fluidos. Cadastro é badge_status curto (Completo/Incompleto,
   máx. 95px medido), 105px fixo. Seta é só ícone 16px. */
.cols-influenciadores-busca { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) 105px 28px; }
/* Arquivo (nome do arquivo gerado, pode passar de 350px) e Quem/Quando
   fluidos com reticências — Quando (timestamp com segundos, "2026-07-15
   00:02:25" = 129px medido) tem title="" no template pra ver a hora
   completa no hover. Tipo é badge de um conjunto fechado (5 valores,
   máx. "termo_representacao" = 136px medido), fixo com folga. Versão é
   "vN", texto mínimo. Ação (Baixar, 66px medido) nunca trunca. */
.cols-arquivos { grid-template-columns: minmax(0, 1.6fr) 148px 35px minmax(0, 0.7fr) minmax(0, 0.9fr) 85px; }

/* linha de lista como link (todas as listas do módulo navegam a partir
   da linha inteira, herdando o comportamento do .row do DS) */
a.row { text-decoration: none; color: inherit; }

/* fallback de compat: o compat legado (secção 6) redefine `table` global;
   dentro de .list a densidade é dada pelo próprio .row, então isso não
   interfere — listas do módulo não usam <table>. */

/* ---- Header actions auxiliares ---- */
.filtro-identidade { display: flex; align-items: center; gap: 8px; }
.filtro-identidade .select-wrap select { min-width: 170px; padding-top: 9px; padding-bottom: 9px; }

/* ---- Passo do wizard (novo contrato) ---- */
.step-eyebrow-extra { color: var(--ink-3); }

/* ---- Busca de influenciador (passo 1) ---- */
.busca-form { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
.busca-form .field { flex: 1; margin: 0; }
.busca-form .btn { flex-shrink: 0; }

/* ---- Card de influenciador escolhido (passo 2) ---- */
.card-influencer {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.card-influencer-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.card-influencer-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.card-influencer .btn { margin-left: auto; flex-shrink: 0; }

/* ---- Grupo de opções por radio (exclusividade/território/logística) ---- */
.radio-group { display: flex; flex-direction: column; gap: 2px; }
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--ink);
}
.radio-row input[type="radio"] { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.radio-row label { cursor: pointer; }
.radio-subfield { margin-left: 25px; margin-top: 4px; margin-bottom: 8px; }

/* campos condicionais escondidos por [hidden] — o CSS de .field define
   display:flex, então precisamos reforçar o [hidden] nativo (regra que
   já existia inline no template original, preservada aqui). */
.field[hidden], .radio-subfield[hidden] { display: none; }

/* ---- Linha de escopo (repetível, JS clona a 1ª linha) ---- */
.escopo-linhas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.escopo-linha {
  display: grid;
  grid-template-columns: 170px 100px 1fr 36px;
  gap: 10px;
  align-items: center;
}
.escopo-linha .field-input,
.escopo-linha .select-wrap select { padding-top: 9px; padding-bottom: 9px; }
.escopo-linha .btn-icone { align-self: center; }

/* ---- Meta do cabeçalho do contrato (detalhe) ---- */
.contrato-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.contrato-meta-item { font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.contrato-meta-item strong { color: var(--ink); font-weight: 600; }

/* ---- Abas de documento do kit ---- */
.doc-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-tab {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 100px;
  padding: 7px 16px;
  color: var(--ink-2);
  background: var(--surface);
}
.doc-tab:hover { background: var(--surface-raised); color: var(--ink); }
.doc-tab.active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }

/* ---- "Papel" — fac-símile do documento (Quadro Resumo + cláusulas).
   Deliberadamente fora da linguagem de app (serif, como o .docx oficial)
   — não é uma tela de produto, é o documento em si. ---- */
.papel {
  font-family: Georgia, "Times New Roman", serif;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 40px 56px;
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.55;
  font-size: 15px;
  color: var(--ink);
}
.papel .doc-titulo { text-align: center; font-weight: 700; font-size: 17px; margin: 0 0 24px; }
.papel .doc-secao { text-align: center; font-weight: 700; font-size: 16px; margin: 24px 0 16px; }
.papel table.quadro { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.papel table.quadro td { border: 1px solid var(--border); padding: 8px 12px; vertical-align: top; font-size: 14px; }
.papel table.quadro td.rotulo { width: 27%; font-weight: 700; }
.papel .clausula h3 { font-size: 15px; margin: 16px 0 8px; }
.papel .clausula p { margin: 0 0 12px; text-align: justify; }
.papel .pre { white-space: pre-wrap; }

.bloco-clausula { position: relative; border-radius: 10px; padding: 2px 8px; margin: 0 -8px; }
.bloco-clausula:hover { background: var(--surface-raised); }
.bloco-clausula .acoes-clausula { display: none; align-items: center; gap: 4px; position: absolute; top: 2px; right: 2px; }
.bloco-clausula:hover .acoes-clausula { display: inline-flex; }
.bloco-clausula.editada { border-left: 3px solid var(--ambar-texto); padding-left: 12px; }
.marcador-editada {
  display: inline-block;
  font-family: 'BR Cobane', system-ui;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ambar-bg);
  color: var(--ambar-texto);
  border-radius: 100px;
  padding: 2px 10px;
  margin-bottom: 6px;
}
.editor-clausula, .painel-diff { font-family: 'BR Cobane', system-ui, sans-serif; }
.editor-clausula[hidden], .painel-diff[hidden] { display: none; }
.editor-clausula { margin-top: 12px; }
.editor-clausula textarea { min-height: 180px; font-family: Georgia, serif; font-size: 14px; }
.painel-diff {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin: 8px 0;
}
.painel-diff-titulo { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.painel-diff del { background: var(--danger-tint); color: var(--danger); text-decoration: line-through; padding: 0 2px; }
.painel-diff ins { background: var(--verde-bg); color: var(--verde-texto); text-decoration: none; padding: 0 2px; }

.assinaturas-view { margin-top: 32px; display: flex; justify-content: space-around; text-align: center; }
.assinaturas-view .linha { border-top: 1px solid var(--ink); padding: 8px 32px 0; }

.aviso-pendente-juridico {
  font-family: 'BR Cobane', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ambar-texto);
  background: var(--ambar-bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Ajustes solicitados (negociação) ---- */
.ajustes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ajuste-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.ajuste-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ajuste-card-title { font-family: 'BR Cobane', system-ui; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ajuste-card-meta { font-size: 12px; color: var(--ink-3); }
.ajuste-card-head .btn { margin-left: auto; }
.ajuste-comment { font-style: italic; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; margin: 0 0 14px; }
.ajuste-form .field-textarea { margin-bottom: 10px; }
.ajuste-form-actions { display: flex; gap: 8px; }

/* ---- Painéis auxiliares menores (distrato, assinatura, arquivos) ---- */
.painel-texto-apoio { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 12px; }
.upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.upload-form .field-input[type="file"] { max-width: 300px; padding: 9px 12px; }
.upload-form .select-wrap { max-width: 220px; }
.link-atualizado-form { margin-top: 16px; max-width: 380px; }
.link-atualizado-form .field + .field { margin-top: 14px; }

/* === modulos influenciadores-links-import-d4sign === */
/* Migração dos templates src/templates/influenciadores/*.html,
   src/templates/links/*.html, src/templates/importacao/relatorio.html
   (parcial — página estática, tokens só) e src/templates/d4sign/*.html
   pro design system do grupo. Ver DESIGN.md. Append-only — nada acima
   desta linha foi tocado por este bloco. */

/* ---- Colunas das listas (CSS grid) específicas destes módulos ----
   Influenciador/CPF-CNPJ/Pendências fluidos. Origem e Cadastro são badges
   de conjunto fechado (máx. "Form público" = 93px medido), fixos com
   folga. Pendências acumula chips (chip-pendencia/chip-alerta, não
   .badge — flex-wrap próprio já existente, quebra linha em vez de
   truncar quando há muitos). Seta é só ícone. */
.cols-influenciadores { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) 100px 108px minmax(0, 1.3fr) 28px; }
/* Influenciador/CPF-CNPJ-informado/PIX fluidos. Cadastro acumula badges
   (Completo ou N% + divergência) com flex-wrap próprio. Ação (Revisar e
   decidir, 129px medido) nunca trunca — é o motivo do chamado original. */
.cols-conferencia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 155px; }
/* 7 colunas — a mais densa do padrão. Tipo (3 valores fixos, ex. "Leitura
   de contrato" = 113px medido) e Estado (badge que pode ser uma frase
   inteira, ex. "Encerrado · contrato assinado" = 181px medido) e
   Expira/Último acesso (datas + IP) todos fluidos com reticências —
   title="" no Estado do template pra ver o rótulo completo no hover.
   Acessos é contador (0-3 dígitos tipicamente), fixo mínimo. Ação
   (Revogar, 78px medido) nunca trunca. Mesmo com 5 colunas fluidas
   disputando espaço, cabe sem scroll nas 4 larguras validadas — não
   precisou do opt-in de scroll. */
.cols-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.6fr) 50px minmax(0, 0.6fr) 95px; }

/* linha de lista como link (base de influenciadores navega pela linha
   inteira, herdando o comportamento do .row do DS) */
a.row { text-decoration: none; color: inherit; }

/* ---- Stat tile: variante de alerta (equivalente ao .kpi-card.critico
   legado) e wrapper clicável (card "Aguardando conferência") ---- */
.stat-tile.tile-alerta { border-color: var(--danger); }
.stat-tile.tile-alerta .stat-number { color: var(--danger); }
.stat-tile-link { display: block; text-decoration: none; color: inherit; border-radius: 14px; }
.stat-tile-link:hover .stat-tile { border-color: var(--accent); }

/* ---- Divergência form público: par "valor atual → valor informado".
   Hierarquia por peso/tachado/realce — nunca só por cor (regra do
   DESIGN.md). Usado em influenciadores/detalhe.html. ---- */
.divergencia-item { padding: 10px 0; border-bottom: 1px solid var(--border-strong); }
.divergencia-item:last-child { border-bottom: none; padding-bottom: 0; }
.divergencia-item:first-child { padding-top: 0; }
.divergencia-campo { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.divergencia-valores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.divergencia-valor { font-size: 13.5px; }
.divergencia-valor-atual { color: var(--ink-3); text-decoration: line-through; }
.divergencia-seta { color: var(--ink-3); flex-shrink: 0; }
.divergencia-valor-novo { color: var(--ink); font-weight: 600; background: var(--accent-tint); padding: 3px 10px; border-radius: 100px; }

/* ---- Escolha de modo por rádio (links/index.html — "pra quem é o
   link?"): opção simples, sem o peso visual de radio-group/radio-row
   (não reaproveitado de outro módulo pra manter este bloco autônomo). ---- */
.modo-escolha { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.modo-opcao { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); padding: 6px 0; cursor: pointer; }
.modo-opcao input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }

/* === feature: navegador de cláusulas editadas (docs/08-spec-portal-
   influenciador.md, Feature A) — badge "N cláusula(s) editada(s)" vira
   controle clicável (accent, NÃO o laranja sólido do botão primário da
   tela) + navegador "N de M" que aparece depois do 1º clique. Append-only,
   nada acima desta linha foi tocado por este bloco. === */
.badge-clausulas-nav {
  cursor: pointer;
  border: none;
  font: inherit;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.badge-clausulas-nav:hover { filter: brightness(0.96); }
.badge-clausulas-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-clausulas-editadas { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; vertical-align: middle; }
.nav-clausulas-btn { padding: 3px 7px; font-size: 13px; }
.nav-clausulas-contador { font-size: 12px; color: var(--ink-3); padding: 0 2px; }

@keyframes clausula-flash-anim {
  0% { background: var(--accent-tint); }
  100% { background: transparent; }
}
.clausula-flash { animation: clausula-flash-anim 1.6s ease; border-radius: 10px; }

/* === feature: portal do influenciador — Módulo Links (docs/08-spec-
   portal-influenciador.md, Feature B) — sem CSS próprio nesta folha
   (reaproveita .badge-cinza/.link-atualizado-form/.btn-danger-outline já
   existentes); marcador deixado só pra localizar o bloco na spec. === */

/* === financeiro acao (docs/09-spec-financeiro-acao.md) ===
   Tile ativo (recorte selecionado via ?filtro=), por cima da borda de
   .critico/.aviso quando os dois coincidem (regra CSS: mesma
   especificidade — 2 classes —, este bloco é o último no arquivo, então
   vence no empate).

   Revisão pós-build 12/08 (achado MÉDIO): a 1ª versão daqui era só borda +
   box-shadow de cor (--accent + --accent-tint) — quase some no tema
   escuro (--accent fica perto de --danger/--critico, e o glow em
   --accent-tint quase preto não contrasta contra --surface). Regra do DS:
   cor nunca é o único canal. Versão medida nos dois temas (fórmula WCAG,
   ver docs/09-spec-financeiro-acao.md pro número exato):
     1) borda 2px em --accent-ink (não --accent — 4.98:1 no claro / 7.34:1
        no escuro contra --surface-raised; --accent puro só dava 2.65:1 no
        claro, abaixo do piso de 3:1 pra componente de UI) + fundo
        --surface-raised;
     2) chip de TEXTO "✓ Ativo" (.tile-ativo-marca, 4.81:1 claro / 7.33:1
        escuro) — o canal robusto de verdade, não depende de percepção de
        cor; leitor de tela também anuncia "Ativo". */
.stat-tile.ativo {
  border-width: 2px;
  border-color: var(--accent-ink);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.tile-ativo-marca {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}