/*
 * DecisionFinder: tela da POC.
 *
 * DIRECAO: "precisao editorial em papel branco". A clareza do Stripe com a assinatura azul da 4U.
 * Tokens da marca tirados do guia comercial da 4U (guia-conducao-comercial-palestra.html): ink #0b0b12,
 * blue #3b3bf4, paper #f4f5f8, line #e4e5ec, muted #6b6f7b, menta #5af0b9, alerta #ff6a2b; fonte Inter.
 *
 * PAPEIS DE COR: azul e identidade e acao; verde so para "deu certo"; laranja so para "atencao"; vermelho so para
 * "falhou". Menta e alerta da marca sao cores de preenchimento (pontos, barras): como texto em branco nao passam de
 * 1,6:1 e 2,9:1, entao o texto usa os tons escuros derivados (--sage, --amber), medidos contra branco e #f4f5f8.
 *
 * ASSINATURA: o icone em quadrado azul-suave nas metricas e os chips com ponto colorido.
 */

:root {
  --void: #f4f5f8;
  --carbon: #ffffff;
  --carbon-2: #f8f9fb;
  --inset: #f4f5f8;

  --text: #0b0b12;
  --text-2: #3f4351;
  --text-3: #6b6f7b;

  --azul: #3b3bf4;
  --azul-escuro: #2525b8;
  --azul-suave: #eeeeff;
  --azul-suave-2: #dcdcff;
  --azul-borda: #c4c4fb;

  --menta: #5af0b9;
  --alerta: #ff6a2b;

  --sage: #08734f;
  --sage-dim: #8fe3c4;
  --sage-wash: #e4faf1;
  --amber: #a8430c;
  --amber-wash: #fff0e8;
  --rust: #be2f22;
  --rust-wash: #fdeceb;

  --sinal-borda: #a6e9cf;
  --atencao-borda: #ffcdb3;
  --falha-borda: #f4bab3;

  --linha: #e4e5ec;
  --linha-forte: #d3d5df;

  --sombra-1: 0 1px 2px rgba(11, 11, 18, 0.05);
  --sombra-2: 0 1px 2px rgba(11, 11, 18, 0.04), 0 10px 28px -16px rgba(11, 11, 18, 0.16);
  --sombra-3: 0 30px 80px -30px rgba(11, 11, 18, 0.35);

  --fonte: "Inter", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  /* Números em Inter com algarismos tabulares: alinham em coluna sem a cara de terminal da monoespaçada. */
  --mono: "Inter", "Inter Variable", ui-sans-serif, system-ui, sans-serif;

  --t-micro: 0.6875rem;
  --t-mini: 0.75rem;
  --t-corpo: 0.875rem;
  --t-medio: 1rem;
  --t-titulo: 1.375rem;
  --t-grande: 2rem;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  --r1: 6px;
  --r2: 10px;
  --r3: 14px;

  --rapido: 120ms;
  --lento: 420ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  --menu-largura: 248px;
  --foco: 0 0 0 2px var(--carbon), 0 0 0 4px rgba(59, 59, 244, 0.5);
}

/* Conferencia da importacao no proprio fluxo da Carteira. */
.conciliacao { flex-shrink: 0; border: 1px solid var(--azul-borda); border-radius: var(--r3); padding: var(--e4) var(--e5); margin-bottom: var(--e4); background: var(--carbon); box-shadow: var(--sombra-1); }
.carteira:has(> .conciliacao:not([hidden])) { height: auto; }
.carteira:has(> .conciliacao:not([hidden])) > .carteira__corpo { flex: none; height: max(420px, calc(100dvh - 420px)); }
.conciliacao__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); }
.conciliacao__etiqueta { color: var(--text-2); font-size: var(--t-mini); font-weight: 600; }
.conciliacao h2 { margin: var(--e1) 0 var(--e2); font-size: var(--t-titulo); }
.conciliacao p { color: var(--text-2); font-size: var(--t-corpo); margin: 0; }
.conciliacao__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); flex-shrink: 0; }
.conciliacao__acoes .botao { min-height: 40px; }
.conciliacao .botao:focus-visible, .conciliacao summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.conciliacao__nota { margin-top: var(--e3) !important; max-width: 90ch; }
.conciliacao__detalhes { margin-top: var(--e4); border-top: 1px solid var(--linha); padding-top: var(--e3); }
.conciliacao__detalhes > summary { cursor: pointer; color: var(--text-2); font-size: var(--t-corpo); font-weight: 600; padding-block: var(--e2); }
.conciliacao__lista { max-height: 42vh; overflow: auto; overscroll-behavior: contain; margin-top: var(--e3); }
.conciliacao__empresa { padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); margin-bottom: var(--e3); }
.conciliacao__empresa-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); }
.conciliacao h3 { font-size: var(--t-medio); overflow-wrap: anywhere; }
.conciliacao__campos { margin-top: var(--e3); }
.conciliacao__campo { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--e3); padding-block: var(--e2); border-top: 1px solid var(--linha); font-size: var(--t-corpo); }
.conciliacao__campo dt { color: var(--text-2); font-weight: 600; }
.conciliacao__campo dd { margin: 0; display: grid; gap: var(--e1); }
.conciliacao__campo dd > div { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: var(--e2); overflow-wrap: anywhere; }
.conciliacao__rotulo { color: var(--text-2); }
.conciliacao__paginas { display: flex; align-items: center; justify-content: flex-end; gap: var(--e3); margin-top: var(--e3); font-size: var(--t-corpo); }
.conciliacao__sucesso { display: flex; align-items: center; gap: var(--e3); color: var(--sage); }
.conciliacao__sucesso p { margin-top: var(--e1); }
.conciliacao__status:not(:empty) { margin-top: var(--e3); font-weight: 600; }
@media (max-width: 1100px) {
  .conciliacao__topo, .conciliacao__empresa-topo { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .conciliacao { padding: var(--e4); }
  .conciliacao__acoes { width: 100%; }
  .conciliacao__acoes .botao { flex: 1 1 150px; min-height: 44px; white-space: normal; }
  .conciliacao__campo { grid-template-columns: minmax(0,1fr); gap: var(--e1); }
}
@media (max-width: 900px) {
  .carteira:has(> .conciliacao:not([hidden])) > .carteira__corpo { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 1ms; --lento: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r2); }
::selection { background: var(--azul); color: var(--void); }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 99px; }
[hidden] { display: none !important; }

.rotulo {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Casca ───────────────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--menu-largura) minmax(0, 1fr); height: 100%; }

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  padding: var(--e5) var(--e4) var(--e4);
  background: var(--carbon);
  border-right: 1px solid var(--linha);
  overflow-y: auto;
}
.menu__marca { display: flex; align-items: center; gap: var(--e3); padding-inline: var(--e1); }
.menu__logo { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--azul); stroke-width: 1.6; }
.menu__logo rect { stroke: var(--linha-forte); fill: var(--carbon-2); }
.menu__logo-centro { fill: var(--azul); stroke: none; }
.menu__nome { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.menu__meta { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); letter-spacing: 0.08em; }
.menu__nav { display: flex; flex-direction: column; gap: var(--e5); flex: 1; }
.menu__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu__grupo-titulo { padding: 0 var(--e3) var(--e2); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 40px;
  padding: var(--e2) var(--e3);
  border-radius: var(--r2);
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  transition: background-color var(--rapido) ease, color var(--rapido) ease;
}
.menu__item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu__item span:first-of-type { flex: 1; }
.menu__item:hover { background: var(--inset); color: var(--text); }
.menu__item[aria-current="page"] { background: var(--carbon-2); color: var(--text); font-weight: 600; }
.menu__item[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--e4)); top: var(--e2); bottom: var(--e2); width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); }
.menu__item[aria-current="page"] svg { color: var(--azul); }
.menu__contador { min-width: 24px; padding: 0 var(--e2); border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--void); font-family: var(--mono); font-size: var(--t-mini); line-height: 20px; text-align: center; color: var(--text-2); }
.menu__rodape { display: grid; gap: var(--e2); padding: var(--e4) var(--e2) 0; border-top: 1px solid var(--linha); }
.menu__status { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-mini); color: var(--text-2); }
.menu__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.menu__status--ok::before { background: var(--sage); }
.menu__sair { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.menu__status--alerta::before { background: var(--amber); }
a.menu__status { text-decoration: none; }
a.menu__status:hover { color: var(--text); }
.menu__acao { margin: -4px 0 0 16px; font-size: var(--t-mini); }

/* ── Menu recolhido ──────────────────────────────────────────────────────────────────
 * Mesmo conceito do menu do DNA no Genesis (web/src/fases/PainelDna.css): uma variável de largura
 * trocada por classe no container, transição na própria grade, e o rótulo nunca sai do DOM: vira texto
 * de leitor de tela e reaparece como title nativo. Abaixo de 901px o recolhido não vale e o botão some. */
.app { transition: grid-template-columns 200ms ease; }
.menu__identidade { min-width: 0; }
.menu__recolher { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border: 1px solid transparent; border-radius: var(--r1); background: none; color: var(--text-3); cursor: pointer; }
.menu__recolher:hover { background: var(--inset); border-color: var(--linha-forte); color: var(--text); }
.menu__recolher svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 901px) {
  .app--menu-recolhido { --menu-largura: 72px; }
  .app--menu-recolhido .menu { padding-inline: var(--e3); align-items: center; }
  .app--menu-recolhido .menu__marca { flex-direction: column-reverse; gap: var(--e3); padding-inline: 0; }
  .app--menu-recolhido .menu__recolher { margin-left: 0; }
  .app--menu-recolhido :is(.menu__identidade, .menu__grupo-titulo, .menu__status, .menu__acao) { display: none; }
  .app--menu-recolhido .menu__nav { width: 100%; }
  .app--menu-recolhido .menu__grupo { padding-top: var(--e3); border-top: 1px solid var(--linha); }
  .app--menu-recolhido .menu__grupo:first-child { padding-top: 0; border-top: 0; }
  .app--menu-recolhido .menu__item { justify-content: center; width: 44px; height: 44px; min-height: 0; margin-inline: auto; padding: 0; }
  .app--menu-recolhido .menu__item[aria-current="page"]::before { left: calc(-1 * var(--e3)); }
  /* O rótulo continua sendo o nome acessível do item; só deixa de ocupar espaço. */
  .app--menu-recolhido .menu__item span:not(.menu__contador) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* O número vira um ponto sobre o ícone; o valor continua legível no title. */
  .app--menu-recolhido .menu__contador { position: absolute; top: 7px; right: 7px; min-width: 0; width: 8px; height: 8px; padding: 0; border: 2px solid var(--carbon); background: var(--azul); font-size: 0; line-height: 0; }
  /* Os status do rodapé são frases; sem largura para elas, o bloco só deixaria uma caixa vazia. */
  .app--menu-recolhido .menu__rodape { display: none; }
  .app--menu-recolhido .menu__sair { justify-content: center; width: 44px; height: 44px; min-height: 0; margin-inline: auto; padding: 0; }
}
/* Em tela estreita o botão continua, com outro papel: abrir e fechar a lista de menus. */
@media (max-width: 900px) { .menu__recolher { display: grid; } }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }

.principal { min-width: 0; overflow-y: auto; padding: var(--e6) 40px var(--e7); }
.principal:focus { outline: none; }
.principal > * { max-width: 1240px; margin-inline: auto; }

/* ── Topo de cada vista ──────────────────────────────────────────────────────────── */
.topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e5); margin-bottom: var(--e5); }
.topo__trilha { font-size: 13px; color: var(--text-2); }
.topo__trilha a { text-decoration: none; }
.topo__trilha a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.topo__trilha span { margin-inline: 6px; color: var(--text-3); }
.topo h1 { margin-top: var(--e1); font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.topo__descricao { margin-top: var(--e1); color: var(--text-2); font-size: 15px; max-width: 80ch; }
.topo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin-top: var(--e2); color: var(--text-2); font-size: 13px; }
.topo__acoes { display: flex; gap: var(--e2); flex: none; }

.secao { margin-top: var(--e6); }
.secao__titulo { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e3); }
.secao__titulo h2 { font-size: var(--t-medio); font-weight: 600; }

/* ── Botões ──────────────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 40px;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r2);
  background: var(--carbon-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--t-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.botao:hover:not(:disabled) { border-color: var(--azul-borda); transform: translateY(-1px); }
.botao:active:not(:disabled) { transform: scale(0.98); }
.botao--principal { border-color: var(--azul-borda); color: var(--azul); }
.botao--principal:hover:not(:disabled) { background: var(--azul-suave); border-color: var(--azul); }
.botao--custo { border-color: var(--atencao-borda); color: var(--amber); }
.botao--perigo { border-color: var(--falha-borda); color: var(--rust); }
.botao--perigo:hover:not(:disabled) { border-color: var(--rust); background: var(--rust-wash); }

/* ── Confirmação de exclusão ──────────────────────────────────────────────────────── */
.confirmacao { display: grid; gap: var(--e2); max-width: 420px; padding: var(--e3) var(--e4); border: 1px solid var(--falha-borda); border-radius: var(--r2); background: var(--carbon); }
.confirmacao__pergunta { font-weight: 600; color: var(--text); }
.confirmacao__texto { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.confirmacao__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.detalhe-rodape { padding-top: var(--e4); border-top: 1px solid var(--linha); }
.botao:disabled { border-color: var(--linha); color: var(--text-3); cursor: not-allowed; }
.link { color: var(--azul); font-size: 13px; text-underline-offset: 3px; }

/* ── Selo: fundo opaco, cor só na borda e no texto ───────────────────────────────── */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 1px var(--e2);
  border: 1px solid var(--linha-forte);
  border-radius: var(--r1);
  background: var(--carbon-2);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-2);
}
.selo--sinal { border-color: var(--sinal-borda); color: var(--sage); }
.selo--atencao { border-color: var(--atencao-borda); color: var(--amber); }
.selo--falha { border-color: var(--falha-borda); color: var(--rust); }
.selo--neutro { color: var(--text-2); }

/* ── Aviso ───────────────────────────────────────────────────────────────────────── */
.avisos { display: grid; gap: var(--e2); margin-bottom: var(--e5); }
.aviso {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--atencao-borda);
  border-radius: var(--r2);
  background: var(--carbon);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}
.aviso--falha { border-color: var(--falha-borda); }
.aviso--info { border-color: var(--linha-forte); }
.aviso__marca { display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border: 1px solid var(--amber); border-radius: 50%; color: var(--amber); font-family: var(--mono); font-size: 11px; }
.aviso--falha .aviso__marca { border-color: var(--rust); color: var(--rust); }
.aviso--info .aviso__marca { border-color: var(--text-3); color: var(--text-2); }
.aviso strong { color: var(--text); font-weight: 600; }

/* ── Leituras de instrumento ─────────────────────────────────────────────────────── */
.leituras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-bottom: var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--linha); overflow: hidden; }
.leitura { padding: var(--e4); background: var(--carbon); }
.leitura__valor { margin-top: var(--e1); font-family: var(--mono); font-size: var(--t-grande); line-height: 1.1; font-variant-numeric: tabular-nums; }
.leitura__nota { margin-top: var(--e1); font-size: var(--t-mini); color: var(--text-3); }

/* ── Tabela ──────────────────────────────────────────────────────────────────────── */
.tabela-caixa { border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha-forte); text-align: left; font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.tabela td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); vertical-align: middle; color: var(--text-2); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tabela th.num { text-align: right; }
.tabela__linha { cursor: pointer; transition: background-color var(--rapido) ease; }
.tabela__linha:hover { background: var(--carbon-2); }
.tabela__empresa { color: var(--text); font-weight: 600; text-decoration: none; }
.tabela__empresa:hover { text-decoration: underline; text-underline-offset: 3px; }
.tabela__sub { display: block; margin-top: 2px; font-family: var(--mono); font-size: var(--t-mini); color: var(--text-3); }
.tabela td.col-empresa { min-width: 280px; }
.tabela td.mono { white-space: nowrap; }

/* ── Radar ───────────────────────────────────────────────────────────────────────── */
.encaixe { display: grid; grid-template-columns: 2.5em minmax(64px, 1fr); align-items: center; gap: var(--e2); min-width: 120px; }
.encaixe__valor { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.encaixe__barra { height: 4px; }
.secao__nota { margin: calc(-1 * var(--e1)) 0 var(--e3); color: var(--text-2); font-size: 13px; }
.sinais { display: grid; gap: 1px; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--linha); overflow: hidden; }
.sinal { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--e3); align-items: start; padding: var(--e3) var(--e4); background: var(--carbon); }
.sinal .selo { justify-self: start; }
.sinal p { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.lista__resto { align-self: center; color: var(--text-3); font-family: var(--mono); font-size: var(--t-micro); }
@media (max-width: 900px) { .sinal { grid-template-columns: 1fr; } }

/* ── Próxima ação: o primeiro bloco da ficha ─────────────────────────────────────── */
.acao__rotulo { color: var(--azul); }
.acao__texto { font-size: var(--t-medio); line-height: 1.45; color: var(--text); max-width: 90ch; }
.acao__nota { color: var(--text-3); font-size: var(--t-mini); }



.lacuna__pergunta { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--amber); border-radius: 50%; color: var(--amber); font-family: var(--mono); font-size: 11px; }

  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: var(--e5);
  border: 1px solid var(--linha);
  border-radius: var(--r3);
  background: var(--carbon);
}

.medida { display: grid; gap: var(--e1); }
.medida__linha { display: flex; justify-content: space-between; align-items: baseline; }
.medida__valor { font-family: var(--mono); font-size: var(--t-titulo); font-variant-numeric: tabular-nums; color: var(--text); }
.medida__valor small { font-size: var(--t-mini); color: var(--text-3); }
.barra { height: 4px; border-radius: 99px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.barra__preenchida { height: 100%; background: var(--azul-borda); transform-origin: left; animation: encher var(--lento) var(--curva) both; }
@keyframes encher { from { transform: scaleX(0); } }

.conta { display: grid; gap: 2px; padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); font-family: var(--mono); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
.conta__fator { display: grid; grid-template-columns: 9.5em 3em minmax(0, 1fr); gap: var(--e2); align-items: baseline; color: var(--text-2); }
.conta__fator b { font-weight: 500; color: var(--text); text-align: right; }
.conta__fator span:first-child { white-space: nowrap; }
.conta__fator span:last-child { color: var(--text-3); font-family: var(--fonte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta__total { display: flex; justify-content: space-between; margin-top: var(--e1); padding-top: var(--e2); border-top: 1px solid var(--linha); color: var(--azul); }

.lista { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); }
.lista__item { padding: 2px var(--e2); border: 1px solid var(--linha); border-radius: var(--r1); background: var(--inset); color: var(--text-2); font-size: var(--t-mini); }

.contato__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.busca-publica { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.busca-publica .bloco__nota { margin: 0; }

.porque summary { cursor: pointer; color: var(--text-2); font-size: 13px; list-style: none; display: flex; align-items: center; gap: var(--e2); min-height: 32px; }
.porque summary::-webkit-details-marker { display: none; }
.porque summary::before { content: "+"; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--linha-forte); border-radius: var(--r1); font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.porque[open] summary::before { content: "−"; }
.porque ul { margin: var(--e2) 0 0; padding-left: var(--e4); display: grid; gap: var(--e1); color: var(--text-2); font-size: 13px; }

/* ── Campos da empresa ───────────────────────────────────────────────────────────── */
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--e5); padding: var(--e2) var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); }
.campo { display: grid; gap: var(--e1); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); }
.campo__valor { color: var(--text); overflow-wrap: anywhere; }
.campo__ausente { color: var(--text-3); font-size: var(--t-mini); font-style: italic; }

/* ── Formulário ──────────────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--e4); max-width: 720px; padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); }
.form__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e4); }
.form label { display: grid; gap: var(--e1); }
.form input[type="text"], .form input[type="password"], .form input[type="email"], .form input[type="number"] { min-width: 0; width: 100%; min-height: 40px; padding: var(--e2) var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text); }
.form input[type="text"]::placeholder { color: var(--text-3); }
.form input[type="text"]:focus-visible, .form input[type="password"]:focus-visible, .form input[type="email"]:focus-visible, .form input[type="number"]:focus-visible { border-color: var(--azul-borda); }
.form label { min-width: 0; }
#convite-cadastro { display: grid; gap: var(--e4); }
#convite-cadastro[hidden] { display: none; }
.clientes__lista { display: grid; gap: var(--e3); margin: var(--e4) 0; }
.clientes__cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); gap: var(--e4); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.clientes__cartao:hover { border-color: var(--azul-borda); }
.clientes__cartao small { display: block; color: var(--text-2); }
.clientes__cartao progress, .secao > progress { width: 100%; max-width: 720px; accent-color: var(--azul); margin: var(--e2) 0; }
.clientes__convites { margin-top: var(--e5); }
.clientes__convites summary { cursor: pointer; font-weight: 600; margin-bottom: var(--e3); }
.clientes__registro { padding: var(--e3) 0; border-bottom: 1px solid var(--linha); overflow-wrap: anywhere; }
@media (max-width: 700px) { .clientes__cartao { grid-template-columns: minmax(0, 1fr); } }

/* ── Login ───────────────────────────────────────────────────────────────────────── */
.entrada { display: grid; place-items: center; min-height: 100%; padding: var(--e5) var(--e4); }
.entrada__form { width: min(100%, 380px); }
.entrada__form .menu__marca { padding: 0 0 var(--e2); }
/* Estado de recuperação do convite: sem campo e sem botão de enviar, só o que explica e o caminho de saída. */
.entrada__titulo { font-size: var(--t-medio); font-weight: 600; }
/* O formato do arquivo é informação secundária do botão: fica visível, menor, depois da ação. */
.botao__formato { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); }
.opcao { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: var(--e3) !important; padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); cursor: pointer; }
.opcao input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--azul); }
.opcao__texto { display: grid; gap: 2px; font-size: 13px; }
.opcao__nota { color: var(--text-3); font-size: var(--t-mini); }
.form__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ── Estados ─────────────────────────────────────────────────────────────────────── */
.vazio { display: grid; justify-items: start; gap: var(--e3); padding: var(--e6); border: 1px dashed var(--linha-forte); border-radius: var(--r2); background: var(--carbon); }
.vazio h2 { font-size: var(--t-medio); font-weight: 600; }
.vazio p { color: var(--text-2); max-width: 64ch; }
.esqueleto { height: 52px; border-bottom: 1px solid var(--linha); background: linear-gradient(90deg, var(--carbon) 0%, var(--carbon-2) 50%, var(--carbon) 100%); background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }

.surge { animation: surgir var(--lento) var(--curva) both; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Dossiê: espaço de trabalho por assunto (padrão do painel do DNA, Genesis ADR 0046) ── */
.menu__voltar { display: grid; gap: 2px; padding-bottom: var(--e3); border-bottom: 1px solid var(--linha); }
.menu__item--voltar { min-height: 34px; font-size: 14px; }
.menu__empresa { display: grid; gap: 2px; padding: 0 var(--e3); }
.menu__empresa-nome { font-size: 14px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.menu__contador--atencao { color: var(--amber); border-color: var(--atencao-borda); }

.topo--dossie { margin-bottom: var(--e4); }
.topo--dossie h1 { font-size: 24px; }

.bloco { display: grid; align-content: start; gap: var(--e3); padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); min-width: 0; }
.bloco__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2) var(--e3); flex-wrap: wrap; }
.bloco h2, .mestre__detalhe h2 { font-size: var(--t-medio); font-weight: 600; }
.bloco__nota { color: var(--text-3); font-size: var(--t-mini); line-height: 1.45; }

.visao { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e4); }
.bloco--porque, .bloco--acao { grid-column: span 7; }
.bloco--comece, .atalhos { grid-column: span 5; }
.bloco--comece { border-color: var(--sinal-borda); }
.bloco--acao { border-left: 3px solid var(--azul); }
.acao__rotulo { color: var(--azul); }
.acao__confirmar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); align-items: start; font-size: 13px; color: var(--text-2); }
.acao__confirmar b { color: var(--text); font-weight: 600; }
.acao__comite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); align-items: start; font-size: 13px; color: var(--text-2); }

.indicador-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e2); }
.indicador-linha__valor { font-size: var(--t-titulo); color: var(--text); }
.indicador-linha .rotulo { margin-right: var(--e4); }

.evids { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.evid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); align-items: start; font-size: 13px; color: var(--text-2); }
.evid b { color: var(--text); font-weight: 600; }

.pessoa-nome { font-size: var(--t-medio); font-weight: 600; }
.pessoa-cargo { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }

.contato-bloco { display: grid; gap: var(--e1) var(--e2); padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); }
.contato-bloco--compacto { padding: var(--e2) var(--e3); }
.contato-bloco__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.contato-bloco__nota { color: var(--text-3); font-size: var(--t-mini); }
.contato-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); font-size: 13px; }
.contato-linha a { color: var(--text); overflow-wrap: anywhere; }
.contato-linha a.link { color: var(--azul); }
.contato-linha__rotulo { min-width: 4.5rem; color: var(--text-3); font-size: var(--t-mini); }
.copiar { min-height: 24px; padding: 0 var(--e2); border: 1px solid var(--linha-forte); border-radius: var(--r1); background: var(--carbon-2); color: var(--text-2); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; }
.copiar:hover { color: var(--text); border-color: var(--azul-borda); }

.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--linha); overflow: hidden; align-self: start; }
.atalho { display: grid; gap: 2px; padding: var(--e3) var(--e4); background: var(--carbon); text-decoration: none; min-width: 0; transition: background-color var(--rapido) ease; }
.atalho:hover { background: var(--carbon-2); }
.atalho__valor { font-size: var(--t-titulo); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atalho__nota { color: var(--text-3); font-size: var(--t-mini); }

/* Mestre-detalhe: trilho à esquerda, detalhe do item escolhido à direita. */
.mestre { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: var(--e4); align-items: start; }
.mestre__trilho { display: grid; gap: var(--e3); min-width: 0; }
.mestre__detalhe { display: grid; align-content: start; gap: var(--e4); padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); min-width: 0; }
.trilho { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.trilho__item { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--e2); min-height: 40px; padding: var(--e2) var(--e3); border-radius: var(--r2); color: var(--text-2); cursor: pointer; font-size: 14px; }
.trilho__item:hover { background: var(--inset); color: var(--text); }
.trilho__item[aria-selected="true"] { background: var(--carbon-2); color: var(--text); font-weight: 600; }
.trilho__item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: var(--e2); bottom: var(--e2); width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); }
.trilho__titulo { min-width: 0; overflow-wrap: anywhere; }
.gancho-bloco { display: grid; gap: var(--e2); padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); font-size: 13px; }
.detalhe-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
.detalhe-grade > div { display: grid; align-content: start; gap: var(--e3); min-width: 0; }
.selos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); }
.pontos { color: var(--text); }
.pergunta { display: grid; gap: var(--e2); }
.pergunta p { color: var(--text); font-size: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.filtro { display: inline-flex; align-items: center; gap: var(--e2); min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--carbon); color: var(--text-2); font-size: 13px; }
.filtro:hover:not(:disabled) { color: var(--text); border-color: var(--azul-borda); }
.filtro[aria-pressed="true"] { border-color: var(--azul); color: var(--text); background: var(--carbon-2); }
.filtro:disabled { color: var(--text-3); cursor: not-allowed; }
.filtro__n { font-family: var(--mono); font-size: var(--t-mini); color: var(--text-3); }

.paginada__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pessoa-item { display: grid; gap: 2px; padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); cursor: pointer; }
.pessoa-item:hover { border-color: var(--linha-forte); }
.pessoa-item[aria-selected="true"] { border-color: var(--azul-borda); background: var(--carbon-2); }
.pessoa-item__nome { color: var(--text); font-weight: 600; font-size: 13px; }
.pessoa-item__rank { color: var(--azul); font-weight: 400; }
.pessoa-item__cargo { color: var(--text-2); font-size: var(--t-mini); overflow-wrap: anywhere; }
.pessoa-item__marcas { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: 2px; }
.paginas { display: flex; justify-content: flex-end; align-items: center; gap: var(--e2); margin-top: var(--e3); font-family: var(--mono); font-size: var(--t-mini); color: var(--text-2); }
.paginas:empty { display: none; }
.paginas__botao { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon-2); color: var(--text); font-size: 16px; }
.paginas__botao:disabled { color: var(--text-3); border-color: var(--linha); cursor: not-allowed; }
.linha-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e3); align-items: start; padding: var(--e2) 0; border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--text-2); }
.linha-item__titulo { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.leituras--compactas .leitura { padding: var(--e3) var(--e4); }
.leituras--compactas .leitura__valor { font-size: var(--t-titulo); }
.secao--compacta { margin-top: var(--e5); }
.empresa .campos { margin-bottom: 0; }

/* Texto limitado: o corte é só visual; "Ler tudo" abre no lugar, sem sobrepor nada. */
/* O botão cobre o fim da última linha, sobre o fundo do contêiner (--fundo-limitado). */
.limitado { position: relative; display: block; min-width: 0; --fundo-limitado: var(--carbon); }
.contato-bloco .limitado, .pessoa-item .limitado { --fundo-limitado: var(--inset); }
.limitado__texto { display: -webkit-box; -webkit-line-clamp: var(--linhas, 2); -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.limitado--aberto .limitado__texto { display: block; -webkit-line-clamp: unset; overflow: visible; }
.limitado__ler { position: absolute; right: 0; bottom: 0; padding: 0 0 0 var(--e5); background: linear-gradient(90deg, transparent, var(--fundo-limitado) var(--e4)); color: var(--azul); font-size: var(--t-mini); line-height: inherit; text-decoration: underline; text-underline-offset: 3px; }
.limitado--aberto .limitado__ler { position: static; display: inline-block; margin-top: 2px; padding: 0; background: none; }

@media (max-width: 1100px) {
  .bloco--porque, .bloco--acao, .bloco--comece, .atalhos { grid-column: 1 / -1; }
  .detalhe-grade { grid-template-columns: 1fr; }
}
/* ── Telas estreitas: o menu vira barra no topo ──────────────────────────────────── */
@media (max-width: 900px) {
  /* Celular e zoom alto: a página rola inteira, sem área de rolagem interna. */
  html, body { height: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; }
  .principal { overflow: visible; }
  .mestre { grid-template-columns: 1fr; }
  .menu__voltar { grid-auto-flow: column; justify-content: start; padding-bottom: 0; border-bottom: 0; }
  .menu__empresa { flex: 1 1 100%; padding: 0; }
  .menu { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-right: 0; border-bottom: 1px solid var(--linha); overflow: visible; }
  .menu__grupo-titulo, .menu__rodape { display: none; }
  .menu__marca { flex: 1 1 auto; }
  .menu__recolher { margin-left: auto; }
  /* Confirmação de exclusão aberta no topo: linha inteira, sem espremer ao lado de Markdown. */
  .topo__acoes { flex-wrap: wrap; }
  .destrutiva:has(.confirmacao) { flex: 1 1 100%; }
  .destrutiva .confirmacao { max-width: none; }
  .menu__grupo ul { display: flex; flex-wrap: wrap; }
  .menu__item[aria-current="page"]::before { display: none; }
  .principal { padding: var(--e5) var(--e4) var(--e6); }
  .topo { flex-direction: column; align-items: flex-start; }
}

/* ── Inteligência: a abertura do dossiê ───────────────────────────────────────────────
 * Ordem de leitura: tese e qualidade, relações, hipóteses e abordagem, como foi feito, o que conferir.
 * Assinatura: o mapa de relações, onde a mesma pessoa no cadastro e no mapa leva o mesmo número.
 * Cores só dos tokens: verde para fato, âmbar para leitura por regra, cinza para declarado e desconhecido. */
.intel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e4); }
.intel-tese { grid-column: span 8; border-left: 3px solid var(--azul); }
.intel-qualidade { grid-column: span 4; }
.intel-relacoes { grid-column: 1 / -1; }
.intel-hipoteses { grid-column: span 7; }
.intel-abordagem { grid-column: span 5; border-color: var(--sinal-borda); }
.intel-passos { grid-column: span 7; }
.intel-conflitos { grid-column: span 5; }
.intel-verificacoes { grid-column: span 5; }
.intel-evidencias { grid-column: span 7; }

.intel-tese__selos { display: flex; flex-wrap: wrap; gap: var(--e1); }
.intel-tese__texto { font-size: var(--t-titulo); line-height: 1.3; font-weight: 500; color: var(--text); max-width: 62ch; text-wrap: pretty; }
.intel-tese__rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.intel-tese__rodape .contato__acoes { align-items: center; }

.evid__fonte { display: block; margin-top: 2px; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); overflow-wrap: anywhere; }

.intel-barra { display: flex; gap: 2px; height: 8px; border-radius: var(--r1); overflow: hidden; background: var(--inset); }
.intel-barra__parte { flex-basis: 0; min-width: 4px; }
.intel-barra__parte--conf, .intel-legenda__item--conf::before { background: var(--sage); }
.intel-barra__parte--decl, .intel-legenda__item--decl::before { background: var(--text-3); }
.intel-barra__parte--inf, .intel-legenda__item--inf::before { background: var(--amber); }
.intel-barra__parte--desc, .intel-legenda__item--desc::before { background: var(--linha-forte); }
.intel-legenda { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); font-size: var(--t-micro); color: var(--text-3); }
.intel-legenda__item { display: inline-flex; align-items: center; gap: var(--e1); }
.intel-legenda__item::before { content: ""; width: 8px; height: 8px; border-radius: 1px; }
.intel-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e4); margin: 0; }
.intel-numero { display: grid; gap: 2px; align-content: start; }
.intel-numero dd { margin: 0; }
.intel-numero__valor { font-size: var(--t-titulo); color: var(--text); }

.intel-colunas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.intel-coluna { display: grid; align-content: start; gap: var(--e2); min-width: 0; }
.intel-nos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.intel-no { display: grid; gap: 2px; padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); }
.intel-no__titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: var(--e1) var(--e2); font-size: 13px; font-weight: 600; color: var(--text); }
/* O nome ocupa a linha e o selo desce quando não cabe: nome nunca vira coluna de letras. */
.intel-no__titulo > span:first-child { flex: 1 1 14ch; min-width: 0; overflow-wrap: break-word; }
.intel-no__sub { font-size: var(--t-mini); color: var(--text-3); overflow-wrap: anywhere; }
.intel-no--par { border-color: var(--azul); background: var(--azul-suave); }
.intel-par { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 var(--e1); border: 1px solid var(--azul); border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-micro); color: var(--azul); }
.intel-grupo { display: grid; gap: var(--e1); }
.intel-grupo + .intel-grupo { margin-top: var(--e2); }
.intel-grupo__titulo { font-size: var(--t-mini); color: var(--text-2); }

.intel-hip-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); counter-reset: hip; }
.intel-hip { display: grid; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linha); counter-increment: hip; }
.intel-hip:first-child { padding-top: 0; border-top: 0; }
.intel-hip__texto { font-weight: 600; color: var(--text); line-height: 1.4; }
.intel-hip__texto::before { content: counter(hip) ". "; font-family: var(--mono); color: var(--amber); }
.intel-hip__teste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e1) var(--e3); margin: 0; font-size: 13px; color: var(--text-2); }
.intel-hip__teste dd { margin: 0; }

.intel-entrada { display: grid; gap: 2px; padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); }
.intel-acao { display: grid; gap: var(--e1); padding-left: var(--e3); border-left: 3px solid var(--azul); font-size: 13px; color: var(--text); }
.intel-perguntas { margin: var(--e1) 0 0; padding-left: var(--e5); display: grid; gap: var(--e2); font-size: 13px; color: var(--text-2); }

.intel-linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.intel-passo { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--e3); padding-bottom: var(--e4); }
.intel-passo:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--linha-forte); }
.intel-passo__ponto { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--text-3); background: var(--carbon); }
.intel-passo--done .intel-passo__ponto { border-color: var(--sage); background: var(--sage); }
.intel-passo--reused .intel-passo__ponto { border-color: var(--sage-dim); }
.intel-passo--recommended .intel-passo__ponto { border-color: var(--amber); }
.intel-passo--failed .intel-passo__ponto, .intel-passo--blocked .intel-passo__ponto { border-color: var(--rust); }
.intel-passo__corpo { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-2); }
.intel-passo__topo { display: flex; justify-content: space-between; align-items: start; gap: var(--e2); }
.intel-passo__pergunta { font-weight: 600; color: var(--text); }

.intel-conf-lista, .intel-ver-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.intel-conf { display: grid; gap: var(--e2); padding: var(--e3); border: 1px solid var(--falha-borda); border-radius: var(--r2); background: var(--inset); }
.intel-conf .limitado { --fundo-limitado: var(--inset); }
.intel-conf__lados { display: grid; gap: var(--e3); }
.intel-ver { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2); align-items: start; font-size: 13px; color: var(--text-2); }
.intel-filtros { margin-bottom: 0; }

@media (max-width: 1100px) {
  .intel > .bloco { grid-column: 1 / -1; }
  .intel-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .intel-colunas, .intel-numeros { grid-template-columns: 1fr; }
  .intel-tese__texto { font-size: var(--t-medio); }
}
@media (prefers-reduced-motion: reduce) { .intel-no { transition: none; } }

/* ── Carteira: planilha importada, decisores e contatos ─────────────────────────────
 * Ocupa a altura da janela: lista paginada pelo que cabe à esquerda, empresa à direita. A página não rola
 * no computador; no celular a página rola e a lista mostra 12 por vez. Decisor e contato vêm primeiro no detalhe. */
.principal > .surge:has(> .carteira) { max-width: 1480px; }
.carteira { display: flex; flex-direction: column; height: calc(100dvh - var(--e6) - var(--e7)); min-height: 520px; }
.carteira > .topo { margin-bottom: var(--e3); }
.carteira .topo h1 { font-size: 24px; }
.carteira > .topo { align-items: flex-start; }
.carteira > .topo > div:first-child { flex: 1 1 auto; min-width: 0; }
.carteira .topo__acoes { align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
.carteira .topo__meta { gap: var(--e1) var(--e3); }
.carteira .topo__meta > * { white-space: nowrap; }
.carteira__arquivo { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; }
/* O escopo de quem está olhando vem antes do tamanho da importação, e com peso maior. */
.carteira__escopo { color: var(--text); font-weight: 600; }
.carteira__aceitas { cursor: help; text-decoration: underline dotted var(--text-3); text-underline-offset: 3px; }
.carteira__seletor { min-height: 32px; max-width: 280px; padding: 0 var(--e2); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon); color: var(--text); font-size: 13px; }
.carteira__exportar { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.carteira__exportar .confirmacao { max-width: 420px; }
.carteira__contatos { display: inline-flex; align-items: center; gap: var(--e1); font-size: 13px; color: var(--text-2); }

.carteira__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-bottom: var(--e3); }
.carteira__busca { flex: 1 1 260px; max-width: 360px; min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text); font-size: 13px; }
.carteira__busca:focus-visible, .carteira__seletor:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.carteira__chips { margin-bottom: 0; }
.filtro__icone { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Painel de filtros operacionais ──────────────────────────────────────────────────
   Expande e retrai na própria página. A transição é de linhas de grade, não de altura:
   o conteúdo pode crescer sem número mágico, e a lista é remedida quando a animação acaba. */
.carteira__aplicados { margin-bottom: var(--e3); }
.filtro--removivel { padding-right: var(--e2); }
.filtro--excluido { border-style: dashed; color: var(--amber); border-color: var(--atencao-borda); background: var(--amber-wash); }
.filtro--excluido:hover { color: var(--amber); border-color: var(--amber); }
.filtro__x { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* O painel é a primeira coluna do corpo da Carteira. A largura anima na grade do corpo (mesmo recurso do menu
   do Genesis); aqui só a opacidade e o conteúdo. Cabeçalho e rodapé fixos, corpo rolável: as ações nunca somem. */
.avancado { display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); }
/* Nunca display:none: item escondido sai da grade e a lista escorregaria para a coluna do painel.
   Fica na grade com largura zero, invisível e fora do alcance do teclado. */
.carteira__corpo > .avancado { min-width: 0; visibility: hidden; }
/* Coluna zerada ainda deixa o gap. Puxa a lista de volta por aqui: margem negativa no painel só o alargaria. */
.carteira__corpo > .carteira__mestre { margin-left: calc(-1 * var(--e4)); transition: margin-left 200ms ease; }
.carteira--filtrando .carteira__corpo > .carteira__mestre { margin-left: 0; }
.carteira--filtrando .carteira__corpo > .avancado { visibility: visible; }
.avancado__carregando { padding: var(--e4); }

.avancado__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex: none;
  padding: var(--e3) var(--e3) var(--e3) var(--e4); border-bottom: 1px solid var(--linha); }
.avancado__titulo { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-corpo); font-weight: 600; }
.avancado__fechar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r1); color: var(--text-3); }
.avancado__fechar:hover { background: var(--inset); color: var(--text); }

.avancado__corpo { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--e4); padding: var(--e4); }
.avancado__secao { display: grid; align-content: start; gap: var(--e3); min-width: 0; }
.avancado__secao-cabeca { display: flex; align-items: center; gap: var(--e2); width: 100%; padding: 0; color: var(--text-2); text-align: left; }
.avancado__secao-cabeca:hover { color: var(--text); }
.avancado__secao-titulo { flex: 1; font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.avancado__chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform var(--rapido) var(--curva); }
.avancado__secao--fechada .avancado__chevron { transform: rotate(0deg); }
.avancado__secao-corpo { display: grid; align-content: start; gap: var(--e3); min-width: 0; }
@media (prefers-reduced-motion: reduce) { .avancado__chevron { transition: none; } }

.avancado__rodape { flex: none; display: grid; gap: var(--e2); padding: var(--e3) var(--e4) var(--e4); border-top: 1px solid var(--linha); background: var(--carbon-2); }
.avancado__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.avancado__meio, .avancado__largo { width: 100%; justify-content: center; }
.avancado__meio { padding-inline: var(--e2); font-size: var(--t-mini); white-space: nowrap; }

.avancado__campo { display: grid; gap: var(--e1); min-width: 0; align-content: start; }
.avancado__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e3); align-items: start; }

.avancado__rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); font-size: var(--t-mini); color: var(--text-3); }
.avancado__disponiveis { font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); }
.avancado__escolhidos { margin-bottom: var(--e1); gap: var(--e1); }
.avancado__escolhidos .filtro { min-height: 26px; font-size: var(--t-mini); padding: 0 var(--e1) 0 var(--e2); }

.avancado__caixa { display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e2); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); }
.avancado__caixa:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }
.avancado__lupa { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; }
.avancado__busca { flex: 1; min-width: 0; min-height: 30px; border: 0; background: none; color: var(--text); font-size: 13px; }
.avancado__busca:focus-visible { outline: none; box-shadow: none; }
/* O placeholder do navegador fica em 4,23:1; os limites reais da importação aparecem nele e precisam ser lidos. */
.avancado__busca::placeholder, .avancado__numero::placeholder { color: var(--text-3); opacity: 1; }

/* Dentro de uma coluna estreita e rolável, a lista flutuante seria cortada pelo corpo. Ela entra no fluxo:
   o corpo do painel rola e a lista aparece inteira abaixo do campo. */
.avancado__lista { margin-top: var(--e2); max-height: 240px; overflow-y: auto; padding: var(--e1); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); }
.avancado__opcao { display: flex; align-items: center; gap: var(--e1); border-radius: var(--r1); }
.avancado__opcao:hover { background: var(--carbon); }
.avancado__opcao-nome { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e1) var(--e2); color: var(--text-2); font-size: var(--t-mini); text-align: left; }
.avancado__opcao-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avancado__opcao-peso { flex: none; font-family: var(--mono); font-size: var(--t-micro); color: var(--text-3); }
.avancado__opcao--dentro .avancado__opcao-nome { color: var(--azul-escuro); font-weight: 600; }
.avancado__opcao--fora .avancado__opcao-texto { text-decoration: line-through; color: var(--text-3); }
.avancado__excluir { flex: none; width: 24px; height: 24px; border-radius: var(--r1); color: var(--text-3); font-size: 13px; }
.avancado__excluir:hover, .avancado__excluir[aria-pressed="true"] { color: var(--amber); background: var(--amber-wash); }
.avancado__vazio, .avancado__sobra { padding: var(--e2); font-size: var(--t-micro); line-height: 1.4; }

.avancado__faixa { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.avancado__numero { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 var(--e2); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text); font-size: 13px; font-family: var(--mono); }
.avancado__numero:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }
.avancado__ate { flex: none; font-size: var(--t-mini); color: var(--text-3); }

.avancado__contagem { display: grid; gap: 1px; font-size: var(--t-titulo); font-weight: 600; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.avancado__contagem-nota { font-size: var(--t-mini); font-weight: 400; color: var(--text-2); }
.avancado__largo { width: 100%; justify-content: center; }

.avancado__aviso, .avancado__salvar, .avancado__visoes { margin: var(--e4); }
.avancado__nome { min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text); font-size: 13px; }
.avancado__nome:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }
.avancado__visoes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.avancado__visoes-lista li { display: flex; align-items: center; gap: var(--e2); }
.avancado__visao { flex: 1; text-align: left; }
.avancado__tela { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; margin: 0; }
.avancado__tela .avancado__corpo { display: flex; flex-direction: column; gap: var(--e3); }
.avancado__tela .avancado__rodape { min-width: 0; }
.avancado__tela .botao { min-height: 44px; }
.avancado__tela .avancado__visoes-lista li { min-width: 0; border: 1px solid var(--linha); border-radius: var(--r1); }
.avancado__tela .avancado__visao { min-width: 0; min-height: 44px; padding: var(--e2) var(--e3); overflow-wrap: anywhere; color: var(--text); }
.avancado__tela .avancado__visao:hover { color: var(--azul); background: var(--azul-suave); }
.avancado__tela .avancado__apagar, .avancado__tela .avancado__fechar { flex: none; min-width: 44px; min-height: 44px; }
.avancado__tela .avancado__nome { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; }
.avancado__visoes-erro { margin: 0; color: var(--rust); }
.carteira__visoes-recado { flex: none; margin: 0 0 var(--e3); }
.carteira__visoes-recado[hidden] { display: none; }
.carteira__visao-ativa { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--e2); max-width: 100%; min-width: 0;
  padding-left: var(--e3); border: 1px solid var(--azul); border-radius: var(--r2); background: var(--azul-suave); color: var(--azul); font-size: 13px; }
.carteira__visao-ativa[hidden] { display: none; }
.carteira__visao-nome { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.carteira__visao-modificada { color: var(--text-2); font-size: 12px; }
.carteira__sair-visao { min-height: 44px; padding: var(--e2) var(--e3); color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.carteira__sair-visao:hover { color: var(--azul); }
.avancado__visao[aria-pressed="true"] { color: var(--azul); background: var(--azul-suave); font-weight: 600; }
.avancado__apagar { flex: none; width: 24px; height: 24px; border-radius: var(--r1); color: var(--text-3); }
.avancado__apagar:hover { color: var(--rust); background: var(--rust-wash); }



/* Três áreas lado a lado quando os filtros estão abertos: painel, lista e detalhe. A largura do painel anima
   na própria grade, como a do menu, então a lista e o detalhe nunca descem nem perdem altura. */
.carteira__corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0fr) minmax(340px, 5fr) minmax(0, 7fr);
  gap: 0 var(--e4); transition: grid-template-columns 200ms ease; }
.carteira--filtrando .carteira__corpo { grid-template-columns: var(--filtros-largura, 300px) minmax(300px, 5fr) minmax(0, 7fr); }
@media (prefers-reduced-motion: reduce) { .carteira__corpo, .carteira__corpo > .carteira__mestre { transition: none; } }
/* Com o painel aberto a tela usa a largura inteira: senão o limite de leitura espremeria as três áreas. */
.principal > .surge:has(> .carteira--filtrando) { max-width: none; }
.carteira__mestre { display: flex; flex-direction: column; min-height: 0; }
/* overflow-y auto, nao hidden: no estado normal "cabem" dimensiona para caber e nada rola; com o painel de
   filtros aberto em tela baixa, sobra menos que uma linha, e rolar e melhor que mostrar meia empresa. */
.carteira__lista { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.carteira__lista[aria-busy="true"] { opacity: 0.55; }
.carteira__nada { padding: var(--e4); }
.carteira-item { flex: none; height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e3); padding: 0 var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); cursor: pointer; min-width: 0; }
.carteira-item__corpo { display: grid; align-content: center; gap: 2px; min-width: 0; }
.carteira-item__marca { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }
.carteira-item__canal--empresa { color: var(--text-3); }
.carteira-item:hover { border-color: var(--linha-forte); }
.carteira-item[aria-selected="true"] { border-color: var(--azul-borda); background: var(--carbon-2); }
.carteira-item:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.carteira-item__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); min-width: 0; }
.carteira-item__nome, .carteira-item__decisor, .carteira-item__meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.carteira-item__nome { font-size: 13px; font-weight: 600; color: var(--text); }
.carteira-item__meta { font-size: var(--t-micro); color: var(--text-3); }
.carteira-item__decisor { font-size: var(--t-mini); color: var(--text-2); }
.carteira-item__decisor b { color: var(--text); font-weight: 600; }
.carteira-item__decisor--vazio { color: var(--text-3); }
.carteira-item__canal { margin-left: var(--e2); font-family: var(--mono); font-size: var(--t-micro); color: var(--azul); }

.carteira__detalhe { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--e4); padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); }
.carteira__detalhe[aria-busy="true"] { opacity: 0.6; }
.carteira__detalhe-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); flex-wrap: wrap; }
.carteira__detalhe-id { display: grid; gap: var(--e1); min-width: 0; }
.carteira__empresa { font-size: var(--t-titulo); font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.carteira__operacao { font-size: var(--t-mini); color: var(--text-2); }
.carteira__numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin: 0; padding: var(--e3) 0; border-block: 1px solid var(--linha); }
.carteira__numeros dd { margin: 0; }
.carteira__numeros dd.mono { font-size: var(--t-medio); color: var(--text); }
.carteira__secao { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2); font-size: var(--t-corpo); font-weight: 600; }
.carteira__sem-decisor { display: grid; gap: var(--e1); padding: var(--e3); border: 1px dashed var(--linha-forte); border-radius: var(--r2); font-size: 13px; color: var(--text-2); }
.carteira__sem-decisor b { color: var(--text); }

.decisores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e3); }
.decisor { display: grid; align-content: start; gap: 2px; padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--inset); min-width: 0; }
.decisor--conflito { border-color: var(--falha-borda); }
.decisor__topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e1) var(--e2); }
.decisor__nome { font-weight: 600; color: var(--text); overflow-wrap: break-word; }
.decisor__selos { display: flex; flex-wrap: wrap; gap: var(--e1); }
.decisor__valor { overflow-wrap: anywhere; color: var(--text); }
.decisor__fonte { overflow-wrap: anywhere; }
.decisor .limitado { --fundo-limitado: var(--inset); }
.carteira__licenca { margin-top: var(--e2); }

.estabelecimentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.estabelecimentos li { display: grid; grid-template-columns: 150px minmax(10ch, 1fr) auto minmax(0, 16rem); gap: var(--e3); align-items: baseline; padding: var(--e1) 0; border-bottom: 1px solid var(--linha); font-size: var(--t-mini); color: var(--text-2); }
.estabelecimentos li > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.carteira__progresso { max-width: 640px; }
.carteira__barra { height: 8px; border-radius: var(--r1); background: var(--inset); overflow: hidden; }
.carteira__barra span { display: block; height: 100%; background: var(--azul); transition: width var(--lento) var(--curva); }

@media (max-width: 1100px) {
  .carteira__corpo { grid-template-columns: minmax(0, 0fr) minmax(300px, 1fr) minmax(0, 1fr); }
  .carteira--filtrando { --filtros-largura: 264px; }
  .carteira__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estabelecimentos li { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .carteira { height: auto; min-height: 0; }
  .carteira .topo__meta > * { white-space: normal; }
  .carteira .topo__acoes { max-width: none; justify-content: flex-start; }
  .carteira__corpo { grid-template-columns: 1fr; }
  .carteira--filtrando .carteira__corpo { grid-template-columns: 1fr; }
  .carteira--filtrando .avancado { max-height: 70dvh; }
  .carteira__lista { overflow: visible; }
  .carteira__detalhe { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .carteira__barra span { transition: none; } }

/* ── Lote: seleção, ação principal e progresso ──────────────────────────────────── */
.carteira__selecao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); min-height: 40px; margin-bottom: var(--e2); }
.carteira__selecao .confirmacao { flex: 1 1 100%; max-width: none; }
.carteira__selecao .aviso { flex: 1 1 100%; }
.carteira__marca-pagina { display: inline-flex; align-items: center; gap: var(--e1); font-size: 13px; color: var(--text-2); }
.carteira__marca-pagina input { width: 16px; height: 16px; accent-color: var(--azul); }
.carteira__contagem { font-family: var(--mono); font-size: var(--t-mini); color: var(--text-2); }
.carteira__link { background: none; border: 0; padding: 0; font-size: 13px; cursor: pointer; }
.carteira__investigar { margin-left: auto; text-transform: none; }
.carteira__lote { display: grid; gap: var(--e2); margin-bottom: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-left: 3px solid var(--azul); border-radius: var(--r2); background: var(--carbon); }
.carteira__lote[hidden] { display: none; }
.carteira__lote-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e2); }
.carteira__lote-titulo { font-size: 13px; color: var(--text-2); }
.carteira__lote-titulo b { color: var(--text); }
.carteira__lote-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.carteira__lote-numeros { display: flex; flex-wrap: wrap; gap: var(--e1); }
.canais { list-style: none; margin: 0 0 var(--e1); padding: 0; display: grid; gap: var(--e1); }
.canais li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: 13px; }
.passos-lote { list-style: none; margin: 0 0 var(--e2); padding: 0; display: grid; gap: 2px; }
.passos-lote li { display: grid; grid-template-columns: 170px auto minmax(0, 1fr); align-items: baseline; gap: var(--e2); padding: 2px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-mini); }
.passos-lote__rotulo { color: var(--text); font-weight: 600; }
@media (max-width: 1100px) { .passos-lote li { grid-template-columns: 1fr auto; } .passos-lote li > .limitado { grid-column: 1 / -1; } }

/* ── Janela flutuante: dica com o que está pronto e o que falta ──────────────────────── */
.com-janela { cursor: help; }
.com-janela:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.janela { position: fixed; z-index: 50; top: 0; left: 0; width: max-content; max-width: 300px; padding: var(--e3) var(--e4);
  border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon-2); box-shadow: var(--sombra-3);
  font-size: 13px; line-height: 1.45; color: var(--text-2); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva), visibility 0s linear var(--rapido); }
.janela--aberta { opacity: 1; visibility: visible; transform: none; transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva); }
.janela__titulo { margin-bottom: var(--e2); font-weight: 600; color: var(--text); }
.janela__lista { list-style: none; margin: 0 0 var(--e2); padding: 0; display: grid; gap: var(--e1); }
.janela__item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--e2); }
.janela__marca { font-family: var(--mono); color: var(--text-3); }
.janela__item--feito .janela__marca { color: var(--sage); }
.janela__item--feito span:last-child { color: var(--text); }
.janela__falta { padding-top: var(--e2); border-top: 1px solid var(--linha); }
.janela__falta b { color: var(--text); font-weight: 600; }
.janela__proximo { margin-top: var(--e1); font-size: var(--t-mini); color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .janela, .janela--aberta { transition: none; transform: none; } }

/* ── Integrações: o que fazer quando uma fonte não está disponível ──────────────────── */
.fazer { margin-bottom: var(--e5); border-left: 3px solid var(--amber); }
.fazer--ok { border-left-color: var(--sage); }
.fazer__porque { color: var(--text); line-height: 1.5; }
.fazer__passos { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e2); color: var(--text-2); line-height: 1.5; }
.fazer__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.fazer__rodape .bloco__nota { flex: 1 1 32rem; }
.fazer__acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ── Integrações: cartões por serviço e painel lateral da ordem de pesquisa ─────────
 * Uma tela sem rolagem de página: o topo, o resumo e o aviso ficam fixos e só a lista de serviços rola, se
 * precisar. Cada cartão tem conta, uso e limite do serviço; o painel lateral só abre para a ordem de pesquisa.
 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.principal > .surge:has(> .central) { max-width: 1480px; }
.central { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); height: calc(100dvh - var(--e6) - var(--e7)); min-height: 520px; }
.central--painel { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
.central__conteudo { display: flex; flex-direction: column; gap: var(--e2); min-height: 0; min-width: 0; container-type: inline-size; }
.central__conteudo > .topo { margin-bottom: 0; align-items: flex-start; }
.central__conteudo > .topo h1 { font-size: 24px; }
.central__icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.central__resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.central__cartao { display: flex; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); min-width: 0; }
.central__cartao > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.central__cartao-icone { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r2); background: var(--azul-suave); color: var(--azul); }
.central__cartao-icone--alerta { background: var(--rust-wash); color: var(--rust); }
.central__cartao-rotulo { font-size: var(--t-mini); color: var(--text-2); }
.central__cartao-valor { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.central__cartao .bloco__nota { font-size: var(--t-mini); }
.central__consumo { display: flex; align-items: center; gap: var(--e2); margin-top: 2px; }
.central__consumo .central__barra { flex: 1; margin: 0; }
.central__pct { font-size: var(--t-mini); color: var(--text-2); }
.central__barra { display: block; height: 6px; border-radius: 999px; background: var(--azul-suave); overflow: hidden; }
.central__barra > span { display: block; height: 100%; border-radius: 999px; background: var(--azul); }

.central__atencao { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--atencao-borda); border-radius: var(--r2); background: var(--amber-wash); }
.central__atencao ul { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.central__atencao li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--e3); align-items: baseline; font-size: 13px; line-height: 1.5; color: var(--text); }
.central__atencao li b { font-weight: 600; }
.central__atencao-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); transform: translateY(-1px); }
.central__atencao-fechar { flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r1); background: none; color: var(--text-2); cursor: pointer; font-size: 13px; }
.central__atencao-fechar:hover { background: var(--carbon); color: var(--text); }

.central__lista { display: flex; flex-direction: column; gap: var(--e2); min-height: 0; flex: 1 1 auto; }
.central__lista > h2 { font-size: var(--t-medio); font-weight: 600; }
.central__servicos { list-style: none; margin: 0; padding: 0 2px 2px; display: grid; gap: var(--e2); align-content: start; overflow-y: auto; min-height: 0; }

/* Cartão de um serviço: recolhido, uma linha com o resumo; aberto, conta, uso e limite lado a lado. */
.servico { border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); }
.servico:not(.servico--aberto):hover { border-color: var(--linha-forte); }
.servico--aberto { border-color: var(--azul-borda); box-shadow: 0 0 0 3px rgba(59, 59, 244, 0.06), 0 10px 24px -18px rgba(11, 11, 18, 0.35); }
.servico__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: var(--e4); align-items: center; padding: var(--e3) var(--e3) var(--e3) var(--e4); }
.servico:not(.servico--aberto) .servico__linha { cursor: pointer; }
.servico--aberto .servico__linha { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.7fr) 32px; align-items: start; padding: var(--e4) var(--e3) var(--e4) var(--e4); }
.servico__identidade { display: flex; gap: var(--e3); min-width: 0; }
.servico__monograma { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--azul-suave); color: var(--azul); font-size: 18px; font-weight: 600; }
.servico__nome { display: grid; gap: var(--e1); min-width: 0; align-content: start; }
.servico__nome-linha { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.servico__nome-linha h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.servico__proposito { color: var(--text-2); font-size: 13px; line-height: 1.45; }
.servico__recursos { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.servico__recurso { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--e2); align-items: start; color: var(--text-2); }
.servico__recurso-status { color: var(--text-3); }
.servico__marca { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--linha-forte); font-size: 10px; color: var(--text-3); }
.servico__recurso--sinal .servico__marca { border-color: var(--sinal-borda); background: var(--sage-wash); color: var(--sage); }
.servico__tecnico { justify-self: start; margin-top: var(--e2); font-size: var(--t-mini); }
.servico__resumo { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: flex-end; }
.servico__estado { padding: 2px 10px; border-radius: 999px; background: var(--inset); color: var(--text-2); font-size: 12px; line-height: 18px; white-space: nowrap; }
.servico__estado--ligado { background: var(--azul-suave); color: var(--azul-escuro); }
.servico__cabeca { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r2); background: none; color: var(--text-3); cursor: pointer; }
.servico__cabeca:hover { background: var(--inset); color: var(--text); }
.servico--aberto .servico__cabeca { align-self: center; }
.servico__seta { width: 16px; height: 16px; transition: transform var(--rapido) var(--curva); }
.servico--aberto .servico__seta { transform: rotate(90deg); }

.servico__ajustes { display: grid; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); min-width: 0; }
.servico__ajustes--3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.15fr); }
.servico__ajustes--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.servico__coluna { display: grid; gap: var(--e2); align-content: start; padding: var(--e3) var(--e4); min-width: 0; }
.servico__coluna + .servico__coluna { border-left: 1px solid var(--linha); }
.servico__coluna h4 { font-size: 13px; font-weight: 600; color: var(--text); }
.servico__coluna .bloco__nota { font-size: 12px; line-height: 1.45; }
.servico__form { display: grid; gap: 6px; }
.servico__rotulo { font-size: var(--t-mini); color: var(--text-2); }
.servico__chave { display: flex; flex-wrap: wrap; gap: var(--e2); }
.servico__chave .painel__entrada { flex: 1 1 140px; min-height: 36px; background: var(--carbon); }
.servico__chave .botao { min-height: 36px; padding: 0 var(--e3); font-size: 13px; }
.servico__chave-salva { display: flex; align-items: center; min-height: 36px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text-2); font-size: 13px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.servico__ajuda summary { width: fit-content; cursor: pointer; list-style: none; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.servico__ajuda summary::-webkit-details-marker { display: none; }
.servico__ajuda[open] summary { margin-bottom: var(--e1); }
.servico__problema { font-size: 12px; color: var(--rust); }
.servico__verificar { display: grid; gap: var(--e1); justify-items: start; }
.servico__verificar > .link, .servico__coluna > .link { font-size: 12px; }
.servico__alternar { display: flex; align-items: center; gap: var(--e2); font-size: 14px; cursor: pointer; width: fit-content; }
.servico__alternar .painel__interruptor { margin-top: 0; }
.servico__limite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); }
.servico__limite .servico__alternar { font-size: 13px; }
.servico__mes { display: inline-flex; align-items: center; gap: var(--e2); }
.servico__mes .painel__numero { flex: none; width: 76px; min-height: 36px; background: var(--carbon); }
.servico__dica { font-size: 12px; color: var(--amber); }
.servico__uso { display: grid; gap: 4px; }
.servico__usados { justify-self: end; }
.servico__info { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--e2); padding: var(--e2) var(--e3); border-radius: var(--r2); background: #f4f4ff; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.servico__info-marca { display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--text-3); border-radius: 50%; font-size: 10px; font-weight: 600; color: var(--text-2); }
.servico__estado-caixa { display: grid; gap: 2px; padding: var(--e2) var(--e3); border-radius: var(--r2); background: var(--inset); font-size: 13px; }
.servico__estado-caixa span { font-size: 12px; color: var(--text-2); }
.servico__estado-caixa--sinal { background: var(--sage-wash); }
.servico__estado-caixa--sinal b { color: var(--sage); }
.servico__estado-caixa--atencao { background: var(--amber-wash); }
.servico__estado-caixa--atencao b { color: var(--amber); }
.servico__estado-caixa--falha { background: var(--rust-wash); }
.servico__estado-caixa--falha b { color: var(--rust); }
.servico__rodape { display: grid; gap: var(--e2); padding: 0 var(--e4) var(--e3); }
.servico__rodape:empty, .servico__saida:empty { display: none; }
.servico__detalhes { margin: 0 var(--e4) var(--e4); padding: var(--e3) var(--e4); border: 1px dashed var(--linha-forte); border-radius: var(--r2); background: var(--carbon-2); }
.botao.botao--pequeno { min-height: 32px; padding: 0 var(--e3); font-size: 13px; }

.central__regra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border: 1px dashed var(--linha-forte); border-radius: var(--r3); }
.central__regra label { flex: 1 1 320px; display: grid; gap: 2px; font-size: 13px; }

/* Em largura menor, as colunas do cartão aberto descem para baixo da identidade. */
@container (max-width: 980px) {
  .servico--aberto .servico__linha { grid-template-columns: minmax(0, 1fr) 32px; }
  .servico--aberto .servico__ajustes { grid-column: 1 / -1; grid-row: 2; }
  .servico--aberto .servico__cabeca { grid-column: 2; grid-row: 1; align-self: start; }
}
@container (max-width: 860px) {
  .central__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .servico__ajustes--3, .servico__ajustes--2 { grid-template-columns: 1fr; }
  .servico__coluna + .servico__coluna { border-left: 0; border-top: 1px solid var(--linha); }
  .servico__resumo { display: none; }
}

/* Painel lateral */
.painel { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon); overflow: hidden; animation: surgir var(--rapido) var(--curva) both; }
.painel__topo { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e4); border-bottom: 1px solid var(--linha); }
.painel__topo > div { flex: 1; min-width: 0; }
.painel__topo h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: var(--t-medio); font-weight: 600; }
.painel__fechar { flex: none; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--r2); background: none; color: var(--text-2); cursor: pointer; font-size: 14px; }
.painel__fechar:hover { border-color: var(--linha-forte); color: var(--text); }
.painel__fechar:focus-visible, .painel__aba:focus-visible, .painel__mini:focus-visible { outline: none; box-shadow: var(--foco); }
.painel__abas { display: flex; gap: var(--e1); padding: 0 var(--e3); border-bottom: 1px solid var(--linha); overflow-x: auto; }
.painel__aba { padding: var(--e2) var(--e3); border: 0; border-top: 2px solid transparent; border-bottom: 2px solid transparent; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.painel__aba[aria-selected="true"] { color: var(--text); border-bottom-color: var(--azul); }
.painel__corpo { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: var(--e3); padding: var(--e4); }
.painel__bloco { display: grid; gap: var(--e2); padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon-2); min-width: 0; }
.painel__bloco h3, .painel__avancado h3 { font-size: 13px; font-weight: 600; color: var(--text); }
.painel__bloco p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.painel__bloco p b { color: var(--text); font-weight: 600; }
.painel__form { display: grid; gap: var(--e2); }
.painel__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.painel__entrada { flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--inset); color: var(--text); font-family: var(--mono); font-size: 13px; }
.painel__entrada:focus { outline: none; box-shadow: var(--foco); }
.painel__entrada:disabled { color: var(--text-3); }
.painel__numero { flex: 0 0 96px; text-align: right; }
.painel__remover { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--rust); }
.painel__confirmar { display: grid; gap: var(--e2); padding: var(--e3); border: 1px solid var(--atencao-borda); border-radius: var(--r2); }
.painel__alternar { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; }
.painel__alternar > span { display: grid; gap: 2px; font-size: 13px; }
.painel__interruptor { appearance: none; flex: none; width: 36px; height: 20px; margin-top: 2px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--inset); position: relative; cursor: pointer; transition: background var(--rapido) var(--curva); }
.painel__interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva); }
.painel__interruptor:checked { background: var(--azul-suave); border-color: var(--azul-borda); }
.painel__interruptor:checked::after { transform: translateX(16px); background: var(--azul); }
.painel__interruptor:focus-visible { outline: none; box-shadow: var(--foco); }
.painel__interruptor:disabled { cursor: not-allowed; opacity: 0.6; }
.painel__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.painel__recurso { display: grid; gap: var(--e1); padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon-2); }
.painel__recurso-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.painel__fazer { font-size: 13px; color: var(--text); line-height: 1.45; }
.painel__mes { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--e1) var(--e2); align-items: center; }
.painel__mes .bloco__nota { grid-column: 1 / -1; }
.painel__ordem { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.painel__ordem li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--e2); font-size: 13px; }
.painel__posicao { color: var(--text-3); }
.painel__ordem-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); min-width: 0; overflow-wrap: anywhere; }
.painel__ordem-acoes { display: flex; gap: 2px; }
.painel__mini { width: 26px; height: 26px; border: 1px solid var(--linha-forte); border-radius: var(--r1); background: var(--inset); color: var(--text-2); cursor: pointer; font-size: 12px; }
.painel__mini:hover:not(:disabled) { color: var(--text); border-color: var(--azul-borda); }
.painel__nota { padding: var(--e2) var(--e3); border-left: 2px solid var(--linha-forte); color: var(--text-2); font-size: 13px; }
.painel__saida:empty { display: none; }
.painel__avancado { display: grid; gap: var(--e2); }
.painel__avancado .campo { padding: var(--e2) 0; font-size: 13px; }
.painel__historico { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); font-size: var(--t-mini); color: var(--text-2); }

@media (max-width: 1100px) {
  .central__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .central, .central--painel { display: block; height: auto; min-height: 0; }
  .central__conteudo { display: grid; }
  .central__servicos { overflow: visible; }
  .central__conteudo > .topo { flex-direction: column; align-items: stretch; }
  .painel { position: fixed; inset: 0; z-index: 40; border-radius: 0; }
}
@media (max-width: 640px) {
  .central__resumo { grid-template-columns: 1fr 1fr; gap: var(--e2); }
  .central__cartao { padding: var(--e2) var(--e3); }
  .central__atencao li { grid-template-columns: 16px minmax(0, 1fr); }
}
.central__conteudo > .topo .topo__descricao { font-size: 14px; }
.botao > .central__icone { width: 16px; height: 16px; }

/* Carteira: aviso de que a fonte de pessoas voltou e as pendentes podem ser pesquisadas de novo */
.carteira__retomar { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); padding: var(--e2) var(--e4); border: 1px solid var(--sinal-borda); border-radius: var(--r2); background: var(--carbon); font-size: 13px; color: var(--text-2); }
.carteira__retomar[hidden] { display: none; }
.carteira__retomar > span:nth-child(2) { flex: 1; min-width: 0; }
.carteira__retomar b { color: var(--text); font-weight: 600; }
.carteira__retomar-marca { font-family: var(--mono); color: var(--sage); }
.carteira__retomar .botao { flex: none; }
@media (max-width: 640px) { .carteira__retomar { flex-wrap: wrap; } }

/* Refino da Central: status do recurso na conta, aviso principal e fatos do recurso */
.painel__fatos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--e3); margin: 0; font-size: 13px; }
.painel__fatos dt { color: var(--text-3); }
.painel__fatos dd { margin: 0; color: var(--text); }
.painel__pagas { margin: 0; padding-left: var(--e4); display: grid; gap: 2px; font-size: 13px; color: var(--text-2); }

/* Ausência: conta não conectada. Borda tracejada e texto apagado, sem cor de estado. */
.selo--ausente { border-style: dashed; border-color: var(--text-3); background: transparent; color: var(--text-3); }


/* ══ Tema 4U: componentes ══════════════════════════════════════════════════════════════
 * Camada final do tema claro. Fica depois das regras de estrutura de propósito: aqui só aparência
 * (cor, raio, sombra, tipografia), para a composição de cada tela continuar onde já estava.
 */
body { background: var(--void); font-feature-settings: "cv11", "ss01"; }
.mono, .leitura__valor, .tabela td.num, .medida__valor, .carteira__contagem, .filtro__n, .paginas { font-variant-numeric: tabular-nums; }
.rotulo { font-family: var(--fonte); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
::selection { color: var(--carbon); }

/* Menu lateral: branco, item ativo em azul-suave, marca azul sólida. */
.menu { background: var(--carbon); border-right-color: var(--linha); }
.menu__logo { stroke: var(--carbon); }
.menu__logo rect { fill: var(--azul); stroke: none; }
.menu__logo-centro { fill: var(--carbon); }
.menu__nome { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.menu__meta { font-family: var(--fonte); letter-spacing: 0; }
.menu__grupo-titulo { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); }
.menu__item { border-radius: var(--r2); font-size: 14.5px; color: var(--text-2); }
.menu__item:hover { background: var(--carbon-2); color: var(--text); }
.menu__item[aria-current="page"] { background: var(--azul-suave); color: var(--azul-escuro); font-weight: 600; }
.menu__item[aria-current="page"]::before { display: none; }
.menu__contador { border-color: transparent; background: var(--inset); font-family: var(--fonte); font-weight: 500; }
.menu__rodape { padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon-2); }
.menu__status--ok::before { background: var(--menta); box-shadow: 0 0 0 3px var(--sage-wash); }
.menu__status--alerta::before { background: var(--alerta); box-shadow: 0 0 0 3px var(--amber-wash); }

/* Topo de cada tela: título forte, apoio calmo. */
.topo__trilha { color: var(--text-3); }
.topo h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.topo__descricao { color: var(--text-2); }

/* Botões: frase normal, sem caixa alta; o principal é azul sólido. */
.botao { min-height: 40px; padding: 0 var(--e4); border-color: var(--linha-forte); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1);
  font-family: var(--fonte); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); }
.botao:hover:not(:disabled) { border-color: var(--azul-borda); background: var(--carbon-2); transform: none; }
.botao--principal { border-color: var(--azul); background: var(--azul); color: var(--carbon); box-shadow: 0 1px 2px rgba(37, 37, 184, 0.3), 0 8px 18px -10px rgba(59, 59, 244, 0.6); }
.botao--principal:hover:not(:disabled) { border-color: var(--azul-escuro); background: var(--azul-escuro); }
.botao--custo { border-color: var(--atencao-borda); background: var(--amber-wash); color: var(--amber); }
.botao--custo:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-wash); }
.botao--perigo { border-color: var(--falha-borda); background: var(--carbon); color: var(--rust); }
.botao--perigo:hover:not(:disabled) { border-color: var(--rust); background: var(--rust-wash); }
.botao:disabled { border-color: var(--linha); background: var(--inset); color: var(--text-3); box-shadow: none; }
.link { color: var(--azul); font-weight: 500; }
.link:hover { color: var(--azul-escuro); }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.copiar { border-color: var(--linha-forte); border-radius: var(--r1); background: var(--carbon); font-family: var(--fonte); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Chips: pílula com fundo suave opaco; estado leva ponto de cor, que é o segundo canal além do texto. */
.selo { padding: 2px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--inset); font-family: var(--fonte); font-size: 12px; font-weight: 500;
  letter-spacing: 0; line-height: 18px; color: var(--text-2); }
.selo--sinal, .selo--atencao, .selo--falha { gap: 6px; }
.selo--sinal::before, .selo--atencao::before, .selo--falha::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.selo--sinal { border-color: transparent; background: var(--sage-wash); color: var(--sage); }
.selo--sinal::before { background: #19b47f; }
.selo--atencao { border-color: transparent; background: var(--amber-wash); color: var(--amber); }
.selo--atencao::before { background: var(--alerta); }
.selo--falha { border-color: transparent; background: var(--rust-wash); color: var(--rust); }
.selo--falha::before { background: var(--rust); }
.selo--neutro { background: var(--inset); color: var(--text-2); }
.selo--ausente { border: 1px dashed var(--linha-forte); background: transparent; color: var(--text-3); }

/* Avisos: faixa suave, sem moldura dura. */
.aviso { border-color: var(--atencao-borda); border-radius: var(--r3); background: var(--amber-wash); color: var(--text-2); }
.aviso--falha { border-color: var(--falha-borda); background: var(--rust-wash); }
.aviso--info { border-color: var(--azul-borda); background: var(--azul-suave); }
/* Medido: o branco sobre o laranja-sinal (#ff6a2b) dava 2,86:1, abaixo dos 3:1 que um sinal gráfico
   precisa. O mesmo papel no tom escuro (#a8430c) mede 6,05:1, e a cor continua lendo como atenção. */
.aviso__marca { border: 0; background: var(--amber); color: var(--carbon); font-family: var(--fonte); font-weight: 700; }
.aviso--falha .aviso__marca { background: var(--rust); color: var(--carbon); }
.aviso--info .aviso__marca { background: var(--azul); color: var(--carbon); }

/* Métricas: cartões separados, número grande e firme. */
.leituras { gap: var(--e3); border: 0; background: none; overflow: visible; }
.leitura { padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-1); }
.leitura__valor { font-family: var(--fonte); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.leitura__nota { color: var(--text-3); }
.leituras--compactas .leitura__valor { font-size: 22px; }

/* Tabelas: cabeçalho calmo, linhas com respiro, número alinhado. */
.tabela-caixa { border-color: var(--linha); border-radius: var(--r3); box-shadow: var(--sombra-1); }
.tabela th { background: var(--carbon-2); font-family: var(--fonte); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.tabela td { padding: 14px var(--e4); }
.tabela td.num { font-family: var(--fonte); font-weight: 600; }
.tabela__linha:hover { background: var(--carbon-2); }
.tabela__sub { font-family: var(--fonte); }

/* Superfícies: cartões brancos com cantos de 14 px e sombra mínima. */
.bloco, .mestre__detalhe, .carteira__detalhe, .campos, .form, .gancho-bloco, .sinais, .atalhos { border-color: var(--linha); border-radius: var(--r3); box-shadow: var(--sombra-1); }
.bloco h2, .mestre__detalhe h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.vazio { border-radius: var(--r3); background: var(--carbon); }
.secao__titulo h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }

/* Campos de texto. */
.carteira__busca, .carteira__seletor, .painel__entrada, .form input[type="text"], .form input[type="password"] {
  min-height: 38px; border-color: var(--linha-forte); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); font-family: var(--fonte); }
.carteira__busca:focus-visible, .carteira__seletor:focus-visible, .painel__entrada:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }

/* Filtros: pílulas; o escolhido em azul-suave. */
.filtro { min-height: 34px; border-color: var(--linha); background: var(--carbon); box-shadow: var(--sombra-1); font-weight: 500; color: var(--text-2); }
.filtro__n { padding: 0 6px; border-radius: 999px; background: var(--inset); font-family: var(--fonte); color: var(--text-3); }
.filtro[aria-pressed="true"] { border-color: var(--azul-borda); background: var(--azul-suave); color: var(--azul-escuro); }
.filtro[aria-pressed="true"] .filtro__n { background: var(--carbon); color: var(--azul-escuro); }

/* Paginação. */
.paginas { font-family: var(--fonte); }
.paginas__botao { border-color: var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); }

/* Listas de escolha (Carteira, pessoas): item ativo em azul-suave. */
.carteira-item, .pessoa-item { border-color: var(--linha); border-radius: var(--r2); background: var(--carbon); }
.carteira-item:hover, .pessoa-item:hover { border-color: var(--azul-borda); }
.carteira-item[aria-selected="true"], .pessoa-item[aria-selected="true"] { border-color: var(--azul-borda); background: var(--azul-suave); box-shadow: 0 0 0 1px var(--azul-borda); }
.carteira-item__meta, .carteira-item__canal { font-family: var(--fonte); }
.trilho__item[aria-selected="true"] { background: var(--azul-suave); color: var(--azul-escuro); }

/* Blocos internos (contato, decisor, nós do mapa): fundo de papel, sem borda dura. */
.decisor, .contato-bloco, .intel-no, .intel-entrada, .conta, .lista__item { border-color: var(--linha); background: var(--carbon-2); }
.decisor, .contato-bloco, .intel-no, .intel-entrada { border-radius: var(--r2); }
.intel-no--par { border-color: var(--azul-borda); background: var(--azul-suave); }

/* Janela flutuante e painel lateral: superfície elevada. */
.janela { border-color: var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-3); }
.painel { border-color: var(--linha); border-radius: var(--r3); box-shadow: var(--sombra-2); }
.painel__bloco { border-color: var(--linha); border-radius: var(--r2); background: var(--carbon-2); }
.painel__mini { border-radius: var(--r1); background: var(--carbon); }

/* Central de Integrações: ícone em quadrado azul-suave, monograma de cor da marca. */
.central__cartao, .central__atencao { border-color: var(--linha); border-radius: var(--r3); box-shadow: var(--sombra-1); }
.central__cartao-valor { font-family: var(--fonte); font-weight: 700; letter-spacing: -0.02em; }
.central__atencao { border-color: var(--atencao-borda); background: var(--amber-wash); }
.painel__interruptor { background: var(--linha); border-color: transparent; }
.painel__interruptor::after { background: var(--carbon); box-shadow: var(--sombra-1); }
.painel__interruptor:checked { background: var(--azul); border-color: var(--azul); }
.painel__interruptor:checked::after { background: var(--carbon); }
.intel-passo--done .intel-passo__ponto { border-color: #19b47f; background: #19b47f; }

/* ── Tema 4U: ajudantes compartilhados ───────────────────────────────────────────────── */
.botao__icone, .secao__icone { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.secao__icone { color: var(--azul); }
.monograma { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--azul-suave); color: var(--azul-escuro);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.monograma--p { width: 26px; height: 26px; margin-right: var(--e2); font-size: 11px; vertical-align: middle; }
.monograma--m { width: 34px; height: 34px; font-size: 12.5px; }
.monograma--g { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; background: var(--azul); color: var(--carbon); box-shadow: 0 8px 18px -10px rgba(59, 59, 244, 0.6); }

/* Métrica com ícone: o quadrado azul-suave é a assinatura do tema. */
.leitura--icone { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e4); align-items: start; }
.leitura__icone, .kpi__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-suave); color: var(--azul); }
.leitura__svg, .kpi__svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Carteira no tema 4U ─────────────────────────────────────────────────────────────── */
.carteira-item { grid-template-columns: auto auto minmax(0, 1fr); }
.carteira-item__nome { font-size: 13.5px; }
.carteira__detalhe { gap: var(--e4); padding: var(--e5); }
.carteira__detalhe-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--e4); }
.carteira__detalhe-id { min-width: 0; }
.carteira__empresa { overflow-wrap: anywhere; }
.carteira__detalhe-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); min-width: 0; }
.carteira__detalhe-acoes .botao { max-width: 100%; white-space: normal; text-align: left; }
.carteira__dossie-erro { min-width: 0; }
.carteira__dossie-erro:empty { display: none; }
.carteira__permissao { margin: 0; }
.carteira__empresa { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); }
.kpi { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--e3); padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon-2); min-width: 0; }
.kpi__icone { width: 40px; height: 40px; border-radius: 11px; }
.kpi__svg { width: 20px; height: 20px; }
.kpi__corpo { display: grid; gap: 1px; min-width: 0; }
.kpi__valor { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi__rotulo { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.carteira__secao { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.decisores { gap: var(--e3); }
.decisor { padding: var(--e3) var(--e4); gap: var(--e1); }
.decisor__nome { display: flex; align-items: center; }
.carteira__sem-decisor { border: 1px solid var(--linha); background: var(--carbon-2); border-radius: var(--r2); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .carteira__detalhe-topo { grid-template-columns: auto minmax(0, 1fr); } .carteira__detalhe-topo > .link { grid-column: 1 / -1; } }
.decisor__rank { margin-left: 6px; font-weight: 500; }
.kpis { gap: var(--e2); }
.kpi { grid-template-columns: 34px minmax(0, 1fr); gap: var(--e2); padding: 10px var(--e3); }
.kpi__icone { width: 34px; height: 34px; border-radius: 10px; }
.kpi__svg { width: 18px; height: 18px; }
.kpi__rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carteira .topo__meta { font-size: 12.5px; }
.carteira .topo h1 { font-size: 26px; }
/* Em telas até 1500 px o detalhe da Carteira é estreito para quatro métricas com ícone: o ícone sai e o rótulo fica inteiro. */
@media (max-width: 1500px) {
  .kpi { grid-template-columns: minmax(0, 1fr); padding: 10px var(--e3); }
  .kpi__icone { display: none; }
}
.kpi__rotulo { white-space: normal; overflow: visible; }
.carteira__arquivo { max-width: 26ch; }

/* ── Radar no tema 4U: ranking num cartão, abas e rolagem interna ─────────────────────── */
.principal > .surge:has(> .radar) { max-width: 1480px; }
.radar { display: flex; flex-direction: column; height: calc(100dvh - var(--e6) - var(--e7)); min-height: 520px; }
.radar > .topo { margin-bottom: var(--e4); }
.radar > .leituras { margin-bottom: var(--e4); }
.radar__cartao { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-1); overflow: hidden; }
.radar__cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha); }
.radar__cabeca h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.radar__rolagem { flex: 1; min-height: 0; overflow: auto; }
.radar__rolagem .tabela th { position: sticky; top: 0; z-index: 1; }
.segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r2); background: var(--inset); flex: none; }
.segmento { min-height: 32px; padding: 0 var(--e3); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.segmento[aria-selected="true"] { background: var(--carbon); color: var(--text); box-shadow: var(--sombra-1); }
.segmento:focus-visible { box-shadow: var(--foco); }
.posicao { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--inset); font-weight: 600; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.posicao--topo { background: var(--azul-suave); color: var(--azul-escuro); }
.tabela__identidade { display: flex; align-items: center; gap: var(--e3); }
.encaixe { grid-template-columns: 2.2em minmax(80px, 1fr); }
.encaixe__valor { font-family: var(--fonte); font-weight: 600; }
.encaixe__barra { height: 6px; background: var(--inset); box-shadow: none; }
.barra__preenchida { background: var(--azul); border-radius: 99px; }
@media (max-width: 900px) { .radar { height: auto; } .radar__cabeca { flex-direction: column; align-items: flex-start; } }
.radar .leitura { padding: var(--e3) var(--e4); }
.radar .leitura__valor { font-size: 26px; }
.radar .leitura--icone { grid-template-columns: 40px minmax(0, 1fr); gap: var(--e3); }
.radar .leitura__icone { width: 40px; height: 40px; }

/* Medidor curto: número com barra de 0 a 100 ao lado, para ler confiança de relance na tabela. */
.medidor { display: inline-flex; align-items: center; gap: var(--e2); font-variant-numeric: tabular-nums; }
.medidor__barra { display: inline-block; width: 44px; height: 6px; border-radius: 99px; background: var(--inset); overflow: hidden; }
.medidor__barra > span { display: block; height: 100%; border-radius: 99px; background: var(--azul); }

/* Tela de lista: topo e métricas fixos, a tabela rola por dentro. Usada por Dossiês e Prova de valor. */
.principal > .surge:has(> .tela) { max-width: 1480px; }
.tela { display: flex; flex-direction: column; height: calc(100dvh - var(--e6) - var(--e7)); min-height: 520px; }
.tela > .topo, .tela > .leituras { flex: none; margin-bottom: var(--e4); }
.tela__rolagem { flex: 1; min-height: 0; overflow: auto; }
.tela > .avisos { flex: none; }
/* Recado acima de uma tela de altura fixa: a tela encolhe para caber, em vez de a página rolar e cortar a paginação. */
.principal > .surge:has(> .avisos + :is(.carteira, .radar, .tela)) { display: flex; flex-direction: column; height: calc(100dvh - var(--e6) - var(--e7)); min-height: 520px; }
.principal > .surge:has(> .avisos + :is(.carteira, .radar, .tela)) > :is(.carteira, .radar, .tela) { flex: 1; height: auto; min-height: 0; }
.tela__rolagem .tabela th { position: sticky; top: 0; z-index: 1; }
.tabela td.col-empresa { min-width: 340px; }
/* Em tela estreita a altura deixa de ser fixa, mas a tabela continua dentro da área dela: antes o
   documento ia a 1093 px numa janela de 360 px, e a página inteira deslizava para o lado. A sombra nas
   bordas avisa que há coluna fora da vista, sem depender de cor isolada. */
@media (max-width: 900px) {
  .tela { height: auto; }
  .tela__rolagem, .radar__rolagem { overflow: auto; max-width: 100%; }
  .tela__rolagem, .radar__rolagem, .prova-tabela__cartao .radar__rolagem {
    background:
      linear-gradient(90deg, var(--carbon) 30%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(90deg, rgba(255, 255, 255, 0), var(--carbon) 70%) right center,
      radial-gradient(farthest-side at 0 50%, rgba(11, 11, 18, 0.14), rgba(11, 11, 18, 0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(11, 11, 18, 0.14), rgba(11, 11, 18, 0)) right center;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}
.tabela td { padding: 12px 14px; }
.tabela th { padding: 10px 14px; }
.tabela td.col-empresa { min-width: 250px; }

/* ── Nova busca: entrada principal à esquerda, como funciona à direita ─────────────────── */
.busca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr); gap: var(--e5); align-items: start; }
.busca__principal { display: grid; gap: var(--e4); min-width: 0; }
.busca__principal > .secao { margin-top: 0; }
.busca__form { max-width: none; gap: var(--e4); padding: var(--e5) var(--e6); }
.busca__cabeca { display: flex; align-items: center; gap: var(--e4); }
.busca__cabeca h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.busca__situacao:empty { display: none; }
.busca__situacao { margin-bottom: var(--e4); }
.form label .rotulo { color: var(--text-2); font-weight: 600; }
.opcao { border-color: var(--linha); border-radius: var(--r2); background: var(--carbon-2); }
.opcao input { accent-color: var(--azul); }
.busca__como { gap: var(--e4); padding: var(--e5); background: linear-gradient(180deg, var(--azul-suave), var(--carbon) 55%); }
.busca__como h2 { font-size: 16px; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--e3); align-items: start; }
.passo__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: var(--carbon); font-weight: 700; font-size: 13px; }
.passo__titulo { font-weight: 600; color: var(--text); margin-bottom: 2px; }
@media (max-width: 1100px) { .busca { grid-template-columns: 1fr; } }

/* ── Calibração: a conta da confiança desenhada, fatores em abas ───────────────────────── */
.calib__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--e4); align-items: stretch; margin-bottom: var(--e4); }
.calib__topo > .leituras { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r3); background: linear-gradient(120deg, var(--azul-suave), var(--carbon) 70%); box-shadow: var(--sombra-1); }
.formula__fator { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); font-weight: 600; color: var(--text); }
.formula__fator .kpi__svg { color: var(--azul); }
.formula__fator--total { background: var(--azul); color: var(--carbon); }
.formula__fator--total .kpi__svg { color: var(--carbon); }
.formula__op { font-size: 20px; font-weight: 600; color: var(--text-3); }
.calib__evidencia { color: var(--text); font-weight: 500; }
.medidor--largo .medidor__barra { width: 120px; }
.calib__rodape { padding: var(--e3) var(--e5); border-top: 1px solid var(--linha); }
@media (max-width: 1100px) { .calib__topo { grid-template-columns: 1fr; } }
.central__resumo { grid-template-columns: 1.5fr 1fr 1.15fr 1fr; }
.central__cartao { padding: 10px var(--e4); align-items: center; }
@container (max-width: 860px) { .central__resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1500px) {
  .central__cartao { gap: 10px; padding: 10px var(--e3); }
  .central__cartao-valor { font-size: 1.0625rem; }
}

/* ── Dossiê no tema 4U ───────────────────────────────────────────────────────────────── */
.topo--dossie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e4); }
.topo--dossie__id { min-width: 0; }
.topo--dossie h1 { font-size: 26px; }
/* Cartões de número fora da Carteira mantêm o ícone em qualquer largura. */
.visao .kpi, .intel .kpi { grid-template-columns: 38px minmax(0, 1fr); }
.visao .kpi__icone, .intel .kpi__icone { display: grid; width: 38px; height: 38px; }
.kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pessoa-cabeca { display: flex; align-items: center; gap: var(--e3); }
.monograma--a { width: 48px; height: 48px; font-size: 16px; }
.pessoa-nome { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.bloco--comece { border-color: var(--linha); }
.bloco--acao { border-left: 0; background: linear-gradient(120deg, var(--azul-suave), var(--carbon) 60%); }
.acao__titulo { display: flex; align-items: center; gap: var(--e3); font-size: 16px; font-weight: 650; }
.acao__icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--azul); color: var(--carbon); }
.acao__texto { font-size: 15.5px; font-weight: 500; }
.atalhos { gap: var(--e3); border: 0; background: none; box-shadow: none; overflow: visible; }
.atalho { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--e3); align-items: start; padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-1); }
.atalho:hover { border-color: var(--azul-borda); background: var(--carbon); }
.atalho__icone { width: 38px; height: 38px; }
.atalho__corpo { display: grid; gap: 1px; min-width: 0; }
.atalho__valor { font-family: var(--fonte); font-weight: 700; letter-spacing: -0.02em; }
.atalho__valor { overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 20px; line-height: 1.2; }
/* Menu do dossiê é mais longo: em telas baixas o quadro de status sai, para não aparecer pela metade. */
@media (max-height: 860px) { .menu:has(#menu-global[hidden]) .menu__rodape { display: none; } }
.intel-tese { border-left: 0; background: linear-gradient(135deg, var(--azul-suave), var(--carbon) 55%); }
.intel-tese__texto { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; }
.intel-numero__valor { font-family: var(--fonte); font-weight: 700; letter-spacing: -0.02em; }
.intel-barra { height: 10px; border-radius: 99px; }
.intel-barra__parte--conf, .intel-legenda__item--conf::before { background: #19b47f; }
.intel-barra__parte--inf, .intel-legenda__item--inf::before { background: var(--alerta); }
.intel-legenda__item::before { border-radius: 50%; }
.intel-hip__texto::before { color: var(--azul); font-family: var(--fonte); font-weight: 700; }
.intel-acao { border-left-color: var(--azul); }
.intel-coluna > .rotulo { font-weight: 600; color: var(--text-2); }
.pessoa-item__nome { display: flex; align-items: center; }
.medida__valor { font-family: var(--fonte); font-weight: 700; letter-spacing: -0.02em; }
.barra { height: 8px; background: var(--inset); box-shadow: none; }
.conta { background: var(--carbon-2); }
.conta__total { color: var(--azul-escuro); font-weight: 600; }
/* Abordagem: a pergunta de abertura e o gancho são o que o vendedor leva para a ligação. */
.pergunta { padding: var(--e4); border-radius: var(--r3); background: linear-gradient(135deg, var(--azul-suave), var(--carbon) 70%); border: 1px solid var(--azul-borda); }
.pergunta p { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
.pergunta__titulo { display: inline-flex; align-items: center; gap: var(--e2); font-size: 13px; font-weight: 650; color: var(--azul-escuro); }
.gancho-bloco { background: var(--carbon); }
.gancho-bloco > p:not(.bloco__nota) { font-size: 14.5px; font-weight: 500; color: var(--text); line-height: 1.5; }
.pontos { font-size: 13px; color: var(--text-3); }
.pontos b { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.criterio__barra { display: block; width: min(220px, 60%); height: 6px; margin: 4px 0 6px; border-radius: 99px; background: var(--inset); overflow: hidden; }
.criterio__barra > span { display: block; height: 100%; border-radius: 99px; background: var(--azul); }
.linha-item__titulo { font-size: 13.5px; }
.campo .rotulo { font-weight: 600; color: var(--text-3); }
.campo__valor { font-weight: 500; }
.fontes { display: grid; gap: var(--e4); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fontes .kpi { grid-template-columns: 38px minmax(0, 1fr); }
.fontes .kpi__icone { display: grid; width: 38px; height: 38px; }
.fontes .kpi { background: var(--carbon); box-shadow: var(--sombra-1); border-radius: var(--r3); }
/* Contraste medido: texto de apoio sobre o azul-suave do item escolhido dava 4,38:1; o "!" laranja da marca sobre o
   fundo de atenção dava 2,57:1. Os dois passam a usar o tom mais escuro do mesmo papel. */
.carteira-item[aria-selected="true"] .carteira-item__meta, .pessoa-item[aria-selected="true"] .pessoa-item__cargo { color: var(--text-2); }
/* Pessoas: lista e detalhe cabem na janela; o detalhe longo rola por dentro. */
@media (min-width: 901px) {
  .pessoas .mestre__detalhe { max-height: calc(100dvh - 236px); overflow-y: auto; }
}
.busca__form { padding: var(--e4) var(--e5); gap: var(--e3); }
/* A área principal recebe foco a cada troca de tela, para o leitor de tela; ela não é um controle, então sem anel. */
.principal:focus, .principal:focus-visible { outline: none; box-shadow: none; }

/* Primeira leitura do dossiê: quatro quadros na ordem em que a pergunta aparece na cabeça de quem vende.
   Cada quadro é resumo e porta: o conteúdo inteiro continua na seção para onde o link leva. */
.leitura1 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin-bottom: 0; }
/* Nas grades de 12 colunas do dossiê, a primeira leitura ocupa a linha inteira. */
.intel > .leitura1, .visao > .leitura1 { grid-column: 1 / -1; }
/* Sem "Comece por" e "Próxima ação", a evidência do encaixe e os acessos dividem a linha. Só em tela
   larga: abaixo de 1100 px cada bloco ocupa a linha inteira, e esta regra não pode vencer aquela. */
@media (min-width: 1101px) {
  .visao .bloco--porque { grid-column: span 7; }
  .visao .atalhos { grid-column: span 5; }
}
.leitura1__quadro { display: grid; align-content: start; gap: 6px; padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); }
.leitura1__destaque { font-size: var(--t-medio); font-weight: 600; line-height: 1.25; color: var(--text); }
.leitura1__quadro .selos { gap: var(--e1); }
.leitura1__quadro .link { justify-self: start; font-size: var(--t-mini); }
@media (max-width: 1200px) { .leitura1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .leitura1 { grid-template-columns: 1fr; } }

/* ── Prova de valor: faixa de métricas, tabela à esquerda (3/4) e painel executivo à direita (1/4) ── */
.principal > .surge:has(> .prova) { max-width: 1640px; }
.prova > .topo { margin-bottom: var(--e4); }
.prova__metricas { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--e4); padding: var(--e4) 0;
  border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-1); }
.prova-metrica { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e3); align-items: start; min-width: 0; padding: 0 var(--e4); border-left: 1px solid var(--linha); }
.prova-metrica:first-child { border-left: 0; }
.prova-metrica__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--azul-suave); color: var(--azul); }
.prova-metrica__corpo { display: grid; min-width: 0; }
.prova-metrica__valor { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prova-metrica__rotulo { font-size: 12.5px; color: var(--text-2); }
.prova-metrica__nota { margin-top: var(--e2); font-size: 12px; line-height: 1.35; color: var(--text-3); }

.prova__corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); gap: var(--e4); }
.prova-tabela__cartao { min-height: 0; }
.prova .radar__cabeca { padding: var(--e4) var(--e5); }
.prova .radar__cabeca h2 { font-size: 19px; font-weight: 700; }
.prova-busca { display: flex; align-items: center; gap: var(--e2); flex: none; }
.prova-busca__caixa { position: relative; display: block; }
.prova-busca__icone { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.prova-busca__campo, .prova-ordem { min-height: 38px; border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon); color: var(--text); font: inherit; font-size: 13px; }
.prova-busca__campo { width: 240px; padding: 0 var(--e3) 0 34px; }
.prova-busca__campo::placeholder { color: var(--text-3); }
.prova-ordem { padding: 0 var(--e5) 0 var(--e3); cursor: pointer; }
.prova-busca__campo:focus-visible, .prova-ordem:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }

.prova-tabela th { padding: 10px 8px; white-space: normal; line-height: 1.3; vertical-align: bottom; }
.prova-tabela td { padding: 10px 8px; }
.prova-tabela th:first-child, .prova-tabela td:first-child { padding-left: var(--e5); }
.prova-tabela th:last-child, .prova-tabela td:last-child { padding-right: var(--e5); }
.prova-tabela td.num { font-weight: 500; }
.prova-tabela__n { width: 1%; color: var(--text-3); font-variant-numeric: tabular-nums; }
.prova-tabela td.col-empresa { min-width: 0; width: 30%; }
.prova-tabela__id { display: grid; gap: 3px; min-width: 0; }
.prova-tabela__empresa { display: block; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 650; }
.prova-tabela .tabela__sub { display: flex; align-items: center; gap: var(--e2); white-space: nowrap; }
.prova-tabela__tempo { white-space: nowrap; }
.prova-tabela__dossie { width: 1%; text-align: center; }
.prova-tabela__vazio { padding: var(--e6) var(--e5) !important; text-align: center; color: var(--text-3); }
.prova-estado { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; border-radius: var(--r2); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.prova-estado--ok { background: var(--sage-wash); color: var(--sage); }
.prova-estado--atencao { background: var(--amber-wash); color: var(--amber); }
.prova-estado:hover { box-shadow: inset 0 0 0 1px currentColor; }
.prova-estado__seta { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prova-tabela__rodape { flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--e4); padding: var(--e3) var(--e5); border-top: 1px solid var(--linha); }
.prova-tabela__contagem { font-size: 13px; color: var(--text-2); }
.prova-paginas { display: flex; gap: var(--e2); }
.prova-paginas__botao { min-width: 34px; min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.prova-paginas__botao:hover:not(:disabled) { border-color: var(--azul-borda); color: var(--text); }
.prova-paginas__botao:disabled { background: var(--carbon-2); color: var(--text-3); cursor: default; }
.prova-paginas__botao[aria-current="page"] { border-color: var(--azul); background: var(--azul); color: var(--carbon); font-weight: 600; }
.prova-paginas__botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.prova__painel { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--e3); }
.prova-cartao { padding: var(--e4) var(--e5); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-1); }
.prova-cartao h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.prova-cartao__cabeca { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e3); align-items: center; }
.prova-cartao__cabeca p { font-size: 12.5px; color: var(--text-2); }
.prova-cartao__marca { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--azul-suave); color: var(--azul); }
.prova-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e4); }
.prova-numero { display: grid; gap: 2px; align-content: start; min-width: 0; }
.prova-numero b { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.prova-numero span { font-size: 12px; line-height: 1.3; color: var(--text-2); }
.prova-situacao { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e3); align-items: center; padding: var(--e4) var(--e5); border: 1px solid; border-radius: var(--r3); }
.prova-situacao--ok { border-color: var(--sinal-borda); background: var(--sage-wash); }
.prova-situacao--atencao { border-color: var(--atencao-borda); background: var(--amber-wash); }
.prova-situacao__marca { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--carbon); }
.prova-situacao--ok .prova-situacao__marca { background: var(--sage); }
.prova-situacao--atencao .prova-situacao__marca { background: var(--amber); }
.prova-situacao__marca .kpi__svg { stroke-width: 2.4; }
.prova-situacao__titulo { font-size: 14px; font-weight: 700; color: var(--text); }
.prova-situacao__texto { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.prova-cartao__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); }
.prova-como { padding: 0; border: 0; background: none; color: var(--azul); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.prova-como:hover { text-decoration: underline; text-underline-offset: 3px; }
.prova-como:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.prova-itens { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e3); }
.prova-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--e3); align-items: start; }
.prova-item__icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--azul-suave); color: var(--azul); }
.prova-item__icone .kpi__svg { width: 18px; height: 18px; }
.prova-item__icone--laranja { background: var(--amber-wash); color: var(--amber); }
.prova-item__titulo { font-size: 13.5px; font-weight: 600; color: var(--text); }
.prova-item__texto { margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.prova-passo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--e3); align-items: start; padding: var(--e4) var(--e5); border: 1px solid var(--azul-borda); border-radius: var(--r3); background: var(--azul-suave); }
.prova-passo__marca { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--carbon); color: var(--azul); }
.prova-passo__titulo { font-size: 14px; font-weight: 700; color: var(--text); }
.prova-passo__texto { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.prova-passo__link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--e2); font-size: 12.5px; font-weight: 600; color: var(--azul-escuro); }

.dialogo { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--r3); background: var(--carbon); color: var(--text); box-shadow: var(--sombra-3); }
.dialogo::backdrop { background: rgba(11, 11, 18, 0.32); }
.dialogo__cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.dialogo__cabeca h2 { font-size: 18px; font-weight: 700; }

/* Telas até 1500px: notas da faixa viram dica, cartões do painel mais justos. */
@media (max-width: 1500px) {
  .prova-metrica { grid-template-columns: 32px minmax(0, 1fr); gap: var(--e2); padding: 0 var(--e3); }
  .prova-metrica__icone { width: 32px; height: 32px; border-radius: 9px; }
  .prova-metrica__icone .kpi__svg { width: 17px; height: 17px; }
  .prova-metrica__valor { font-size: 19px; }
  .prova-metrica__rotulo { font-size: 12px; line-height: 1.3; }
  .prova-metrica__nota { display: none; }
  .prova__metricas { padding: var(--e3) 0; }
  .prova-busca__campo { width: 190px; }
  .prova-cartao, .prova-situacao, .prova-passo { padding: var(--e3) var(--e4); }
  .prova-tabela th, .prova-tabela td { padding-inline: 6px; }
  .prova-tabela th:first-child, .prova-tabela td:first-child { padding-left: var(--e4); }
  .prova-tabela th:last-child, .prova-tabela td:last-child { padding-right: var(--e4); }
  .prova-tabela__empresa { max-width: 190px; }
  .prova .monograma--m { width: 30px; height: 30px; font-size: 11.5px; }
}
@media (max-width: 1100px) {
  .prova__metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--e3); }
  .prova__corpo { grid-template-columns: 1fr; }
}
/* Quatro colunas de 76 px no celular faziam ícone, número e legenda disputarem o mesmo espaço, e o
   documento passava da janela. Duas colunas, e uma só no aparelho mais estreito. */
@media (max-width: 700px) {
  .prova__metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e4); }
  .prova-metrica { padding-inline: var(--e3); }
  .prova-metrica:nth-child(odd) { border-left: 0; }
}
@media (max-width: 420px) {
  .prova__metricas { grid-template-columns: 1fr; }
  .prova-metrica { border-left: 0; }
  .prova-metrica__valor { font-size: 20px; }
}

/* Colunas de método: fora da vista por padrão, e no lugar quando o botão pede. Não é esconder dado, é
   abrir pelo que decide onde agir. */
.prova-tabela__metodo { display: none; }
/* Com o método aberto são treze colunas: a tabela passa a ser mais larga que a área e rola na horizontal,
   em vez de encolher a fonte de todo mundo para caber. A largura é fixa e medida para as colunas numéricas
   caberem sem quebrar; max-content faria a tabela ir a 8.900 px por causa dos nomes longos. */
.prova-tabela--metodo { min-width: 1120px; }
.prova-tabela--metodo .prova-tabela__metodo { display: table-cell; }

/* Prova até 1500px de largura: tabela com as 12 colunas cabendo ao lado de um painel de 280px. */
@media (max-width: 1500px) {
  .principal:has(> .surge > .prova) { padding-inline: var(--e5); }
  .prova__corpo { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--e3); }
  .prova .radar__cabeca { flex-wrap: wrap; row-gap: var(--e2); padding: var(--e3) var(--e4); }
  .prova .radar__cabeca h2 { font-size: 17px; }
  .prova-busca__campo { width: 170px; }
  .prova-tabela th { padding: 8px 5px; }
  .prova-tabela td { padding: 8px 5px; }
  .prova-tabela th:first-child, .prova-tabela td:first-child { display: none; }
  .prova-tabela td.col-empresa, .prova-tabela th:nth-child(2) { padding-left: var(--e4); }
  .prova-tabela__longo { display: none; }
  .prova-tabela__empresa { max-width: 150px; font-size: 12px; }
  .prova-tabela .tabela__sub .selo { width: 8px; height: 8px; padding: 0; gap: 0; background: none; font-size: 0; }
  .prova-tabela .tabela__sub .selo::before { width: 7px; height: 7px; }
  .prova-estado { padding: 5px 9px; font-size: 12px; }
  .prova-estado .prova-estado__seta { display: none; }
  .prova-tabela__rodape { padding: var(--e2) var(--e4); }
  .prova-tabela th, .prova-tabela td { padding-inline: 4px; }
  .prova-tabela .monograma { display: none; }
  .prova-estado { padding: 4px 8px; }
}

/* Telas baixas: a faixa e o painel encolhem, as explicações dos itens viram dica. */
@media (max-height: 860px) {
  .prova > .topo { margin-bottom: var(--e3); }
  .prova .topo h1 { font-size: 26px; }
  .prova__metricas { margin-bottom: var(--e3); padding: 10px 0; }
  .prova-metrica__icone { width: 30px; height: 30px; }
  .prova-metrica__valor { font-size: 18px; }
  .prova-metrica__nota { display: none; }
  .prova__painel { gap: var(--e2); }
  .prova-cartao, .prova-situacao, .prova-passo { padding: 10px var(--e4); }
  .prova-cartao__cabeca { grid-template-columns: 34px minmax(0, 1fr); }
  .prova-cartao__marca { width: 34px; height: 34px; border-radius: 10px; }
  .prova-cartao__cabeca p, .prova-item__texto { display: none; }
  .prova-numeros { margin-top: var(--e3); }
  .prova-numero b { font-size: 20px; }
  .prova-situacao, .prova-passo { grid-template-columns: 32px minmax(0, 1fr); }
  .prova-situacao__marca, .prova-passo__marca { width: 32px; height: 32px; }
  .prova-situacao__texto { display: none; }
  .prova-numeros { margin-top: var(--e2); }
  .prova-itens { margin-top: var(--e2); gap: var(--e2); }
  .prova-item { grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
  .prova-item__icone { width: 28px; height: 28px; border-radius: 8px; }
  .prova-item__icone .kpi__svg { width: 15px; height: 15px; }
  .prova-item__titulo { font-size: 12.5px; line-height: 1.35; }
  .prova-passo__texto { font-size: 12px; }
}

/* Prova: cabeça da tabela e paginação sem quebra. */
.prova .radar__cabeca > div:first-child { flex: 1 1 220px; min-width: 0; }
.prova-paginas { flex: none; }
.prova-paginas__botao { white-space: nowrap; }
.prova-cartao__titulo h2, .prova-como { white-space: nowrap; }
@media (max-width: 1500px) {
  .prova-busca__campo { width: 200px; }
  .prova-cartao__titulo h2 { font-size: 15px; }
  .prova-ordem { max-width: 190px; }
}
.prova-significa { flex: 1 0 auto; }

/* Prova: acabamento final contra a referência. */
.prova > .topo { align-items: center; }
.prova-tabela th.prova-tabela__centro { text-align: center; }
@media (min-width: 1501px) { .prova-tabela th:not(.prova-tabela__quebra) { white-space: nowrap; } }
.prova-ordem { appearance: none; -webkit-appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (min-width: 1501px) { .prova-tabela__empresa { max-width: 215px; } }
@media (min-width: 1501px) { .prova-tabela th, .prova-tabela td { padding-inline: 6px; } .prova-tabela th:first-child, .prova-tabela td:first-child { padding-left: var(--e5); } .prova-tabela th:last-child, .prova-tabela td:last-child { padding-right: var(--e5); } }

/* Prova até 1500px: a coluna Empresa ganha espaço e duas linhas; Fora do mapa e Crédito
   passam para a segunda linha de Representa e Tempo, sem esconder nenhum número. */
.prova-tabela__extra { display: none; }
@media (max-width: 1500px) {
  .prova-tabela th:nth-child(6), .prova-tabela td:nth-child(6), .prova-tabela th:nth-child(12), .prova-tabela td:nth-child(12) { display: none; }
  /* Valor secundário da célula: 12,5 px, o mesmo da tabela. Encolher para 11 px era o jeito de fazer
     treze colunas caberem, e isso saiu: a tabela rola na horizontal quando o método está aberto. */
  .prova-tabela__extra { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-3); white-space: nowrap; }
  .prova-tabela th .prova-tabela__extra { font-weight: 400; }
  .prova-tabela th.num, .prova-tabela td.num { width: 1%; white-space: nowrap; }
  .prova-tabela__empresa { max-width: none; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  .prova-tabela td.col-empresa { width: auto; min-width: 200px; }
}

/* ── Equipe e permissões ────────────────────────────────────────────────────────────
 * Mesma linguagem do resto: papel branco, linha fina, azul só para identidade e ação.
 * Dois blocos lado a lado, a equipe à esquerda e a pessoa selecionada à direita, e os resumos no topo.
 * O resumo de consumo é por fonte: unidades diferentes não viram um número só.
 */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.botao--primario { border-color: var(--azul); background: var(--azul); color: #fff; }
.botao--primario:hover:not(:disabled) { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao--primario:disabled { background: var(--inset); border-color: var(--linha); color: var(--text-3); }

.contagem { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--inset); font-size: var(--t-mini); line-height: 20px; text-align: center; color: var(--text-2); }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--e2); border-radius: 999px; font-size: var(--t-mini); line-height: 18px; }
.etiqueta--ok { background: var(--sage-wash); color: var(--sage); }
.etiqueta--ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.etiqueta--bloqueada { background: var(--inset); color: var(--text-3); }

.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul-suave); color: var(--azul-escuro); font-size: var(--t-mini); font-weight: 600; flex: 0 0 auto; }
.avatar--grande { width: 46px; height: 46px; font-size: var(--t-corpo); }

.menu__usuario { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-top: 1px solid var(--linha); }
.menu__usuario-texto { display: grid; min-width: 0; font-size: var(--t-mini); color: var(--text-3); }
.menu__usuario-texto strong { font-size: var(--t-corpo); font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app--menu-recolhido .menu__usuario-texto { display: none; }

/* Os resumos ocupam UMA faixa: dois cartões de número e um de consumo, todos da mesma altura. O consumo é o
   mais largo porque tem uma pastilha por fonte, e cada fonte tem a própria unidade. */
.resumos { display: grid; grid-template-columns: minmax(195px, 245px) minmax(195px, 245px) minmax(360px, 1fr); gap: var(--e3); margin-bottom: var(--e3); align-items: stretch; }
.resumo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); }
.resumo--fontes { display: grid; align-content: start; gap: 6px; }
.resumo__icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r1); background: var(--azul-suave); flex: 0 0 auto; }
.resumo__icone svg { width: 18px; height: 18px; fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.resumo__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); font-size: var(--t-mini); color: var(--text-3); }
.resumo__valor { font-size: var(--t-titulo); line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.resumo__nota { font-size: var(--t-micro); line-height: 1.35; color: var(--text-3); }
.resumo__vazio { font-size: var(--t-corpo); color: var(--text-3); }
/* Dica em vez de linha de texto: o aviso de unidades continua disponível sem gastar uma linha da faixa. */
.resumo__dica { border-bottom: 1px dotted var(--linha-forte); font-size: var(--t-micro); color: var(--text-3); cursor: help; }
/* Duas colunas fixas: com quatro fontes o cartão fecha em dois pares, e nenhuma sobra pendurada. Em tela
   larga cabem as quatro numa linha, e a faixa inteira encolhe de 159 px para perto de 110 px, devolvendo
   altura aos dois painéis de baixo. Os números são fixos de propósito: auto-fit deixaria uma fonte órfã
   nas larguras intermediárias. */
.resumo__fontes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2) var(--e5); }
@media (min-width: 1360px) { .resumo__fontes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2) var(--e4); } }

.pastilha { display: grid; gap: 3px; align-content: start; }
.pastilha__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.pastilha__nome { font-size: var(--t-mini); font-weight: 500; color: var(--text); }
.pastilha__numero { font-size: var(--t-mini); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.pastilha__unidade { color: var(--text-3); }
/* Sem reticências: o motivo de uma fonte estar fora é informação de trabalho, e no celular ninguém tem
   mouse para descobrir o resto da frase. Ela quebra em duas linhas quando precisa. */
.pastilha__nota { font-size: var(--t-micro); line-height: 1.3; color: var(--text-3); }


/* Duas colunas de altura fixa, cada uma com a própria rolagem. A tela inteira deixa de rolar: a lista da
   equipe fica sempre à vista, e o painel da pessoa rola por dentro, sem deixar coluna vazia ao lado. */
/* A vista inteira ocupa a altura da área principal, e é a Equipe que estica. Nada de 100vh na mão: quem tem
   altura definida é .principal, e daqui para baixo tudo se ajusta a ela. */
.principal > .surge:has(> .equipe) { display: flex; flex-direction: column; height: 100%; max-width: 1480px; }
.equipe { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--e3); align-items: stretch; flex: 1 1 auto; min-height: 380px; }
/* min-height: 0 é o que faz a linha de 1fr valer de verdade: sem isso o grid cresce com o conteúdo e a lista
   escapa do bloco, empurrando o rodapé para fora da tela quando há muitos grupos. */
.equipe__lista { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--e3); min-height: 0; padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); overflow: hidden; }
/* Os grupos ficam colados no topo e rolam juntos. Sem isto a lista distribui as linhas pela altura toda e os
   nomes aparecem espalhados, como se houvesse algo entre eles. */
.grupos { display: grid; align-content: start; gap: var(--e4); min-height: 0; margin-inline: calc(var(--e2) * -1); overflow-y: auto; overscroll-behavior: contain; }
.grupo { display: grid; align-content: start; gap: 2px; }
/* O cabeçalho gruda no topo enquanto o grupo rola: com equipe grande, saber se aquele nome é de um
   administrador ou de um vendedor é a única coisa que a lista precisa dizer o tempo todo. */
.grupo__topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--e2); width: 100%; padding: var(--e2); border: 0; border-radius: var(--r1); background: var(--carbon); font: inherit; cursor: pointer; }
.grupo__topo:hover:not(:disabled) { background: var(--carbon-2); }
.grupo__topo:disabled { cursor: default; }
.grupo__topo:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.grupo__titulo { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--text-3); }
.grupo__contagem { font-family: var(--mono); font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--text-3); }
/* A legenda fica colada no grupo que ela explica, e some junto quando o grupo recolhe. No pé do cartão ela
   ficava órfã, a meia tela de distância do que estava explicando. */
.grupo__dica { padding: 0 var(--e2) var(--e1) calc(var(--e2) + 14px + var(--e2)); font-size: var(--t-micro); line-height: 1.35; color: var(--text-3); }
/* A seta aponta para baixo quando aberto e para a direita quando recolhido: o estado se lê sem ler texto. */
.grupo__seta { width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; color: var(--text-3); transition: transform var(--rapido) var(--curva);
  clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 88% 43%, 50% 80%, 12% 43%); }
.grupo--recolhido .grupo__seta { transform: rotate(-90deg); }
.grupo__vazio { padding: 2px var(--e2) var(--e2); font-size: var(--t-mini); color: var(--text-3); }
.equipe__lista-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.equipe__lista-topo h2 { font-size: var(--t-medio); }
.equipe__detalhe { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; min-height: 0; border: 1px solid var(--linha); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); overflow: hidden; }
.equipe__vazio { padding-inline: var(--e2); font-size: var(--t-corpo); color: var(--text-3); }
.equipe__rodape { margin-top: var(--e3); font-size: var(--t-mini); color: var(--text-3); }

/* Uma caixa só para todo campo da tela, igual à da Carteira e à das Integrações: 38 px, raio r2, fundo
   branco, sombra 1, e no foco a borda azul com o anel azul-suave. */
.entrada { width: 100%; min-height: 38px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); font: inherit; font-family: var(--fonte); font-size: var(--t-corpo); color: var(--text); }
.entrada::placeholder { color: var(--text-3); }
.entrada:focus-visible { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave-2); }
.entrada:disabled { background: var(--inset); color: var(--text-3); }
select.entrada { padding-right: var(--e2); cursor: pointer; }

.campo-busca { display: block; }
.campos-modal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e3); }
.campo-form { display: grid; gap: var(--e1); }
.campo-form--curto { max-width: 280px; }

/* Sem o padding de lista que o navegador dá a toda ul: eram 40 px de recuo que jogavam os nomes para a
   direita, longe do cabeçalho do grupo, e impediam a linha selecionada de encostar na borda do cartão. */
.pessoas { display: grid; align-content: start; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pessoa { position: relative; display: flex; align-items: center; gap: var(--e2); width: 100%; padding: 6px var(--e2); border: 0; border-radius: var(--r1); background: none; font: inherit; text-align: left; cursor: pointer; transition: background var(--rapido) var(--curva); }
.pessoa:hover { background: var(--carbon-2); }
.pessoa:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.pessoa .avatar { width: 32px; height: 32px; }
/* Selecionada: um trilho de 2 px e o avatar em azul cheio. Antes o avatar tinha o MESMO fundo da linha
   selecionada e sumia dentro dela, que é o que fazia a linha parecer borrada em vez de escolhida. */
.pessoa--ativa { background: var(--azul-suave); }
.pessoa--ativa::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 0 2px 2px 0; background: var(--azul); }
.pessoa--ativa .avatar { background: var(--azul); color: #fff; }
.pessoa--ativa .pessoa__texto strong { font-weight: 600; }
/* Sobre o azul-suave o cinza fraco cai para 4,4:1. O tom do meio mede 8,6:1 e continua secundário. */
.pessoa--ativa .pessoa__meta { color: var(--text-2); }
.pessoa__texto { display: grid; min-width: 0; }
.pessoa__texto strong { font-size: var(--t-corpo); font-weight: 500; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa__meta { font-size: var(--t-micro); line-height: 1.35; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa__meta--pendente { color: var(--amber); }

.pessoa-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linha); }
.pessoa-topo h2 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-medio); }
.pessoa-topo__meta { font-size: var(--t-mini); color: var(--text-3); }
.pessoa-topo__acoes { margin-left: auto; }

.abas { display: flex; gap: var(--e4); padding: 0 var(--e5); border-bottom: 1px solid var(--linha); }
.aba { display: flex; align-items: center; gap: 6px; padding: 0 0 var(--e2); border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--t-corpo); color: var(--text-3); cursor: pointer; }
.aba--ativa { border-bottom-color: var(--azul); color: var(--azul); }
/* O conteúdo da aba é o que rola, e só ele. O rodapé de pendentes fica fora daqui, numa faixa própria, e
   por isso nunca cobre campo nenhum. A folga maior separa blocos; dentro de um bloco, título, nota e lista
   ficam juntos, como partes da mesma coisa. */
.aba-conteudo { display: grid; align-content: start; gap: var(--e2); padding: var(--e4) var(--e5); overflow-y: auto; overscroll-behavior: contain; }
.aba-conteudo > h3 { margin-top: var(--e4); }

.aba-conteudo > :first-child { margin-top: 0; }
.aba-conteudo h3 { font-size: var(--t-corpo); font-weight: 600; }
.secao__nota { font-size: var(--t-mini); color: var(--text-3); }

.faixa-escopo { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4); border: 1px solid var(--azul-borda); border-radius: var(--r2); background: var(--azul-suave); }
.faixa-escopo strong { font-weight: 600; color: var(--azul-escuro); }
.faixa-escopo p { font-size: var(--t-mini); line-height: 1.45; color: var(--text-2); }
.faixa-escopo__icone { width: 18px; height: 18px; border-radius: 4px; background: var(--azul-borda); flex: 0 0 auto; }

.acoes { display: grid; border: 1px solid var(--linha); border-radius: var(--r2); list-style: none; }
.acao { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e2) var(--e4); border-bottom: 1px solid var(--linha); }
.acao:last-child { border-bottom: 0; }
.acao strong { font-size: var(--t-corpo); font-weight: 500; }
.acao p { font-size: var(--t-mini); color: var(--text-3); }
.acao__bloqueada { display: flex; align-items: center; gap: var(--e2); }

.interruptor { position: relative; width: 44px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--linha-forte); cursor: pointer; transition: background var(--rapido) var(--curva); flex: 0 0 auto; }
.interruptor--ligado { background: var(--azul); }
.interruptor:disabled { opacity: 0.5; cursor: not-allowed; }
.interruptor__bolinha { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--rapido) var(--curva); }
.interruptor--ligado .interruptor__bolinha { transform: translateX(20px); }
.interruptor:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.limites { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4) var(--e5); }
.limite { display: grid; gap: 6px; }
.limite__topo { display: flex; align-items: end; justify-content: space-between; gap: var(--e3); }
.limite__nota { font-size: var(--t-mini); line-height: 1.4; color: var(--text-3); }
/* Contexto da casa, não número desta pessoa: fica um tom abaixo para não competir com o limite dela. */
.limite__nota--fraca { font-size: var(--t-micro); }
.limite__nota--alerta { color: var(--amber); }
.campo__entrada { display: flex; align-items: stretch; }
.campo__entrada .entrada { width: 104px; border-right: 0; border-radius: var(--r2) 0 0 var(--r2); font-variant-numeric: tabular-nums; }
.campo__entrada .entrada:focus-visible { position: relative; z-index: 1; }
.campo__sufixo { display: grid; place-items: center; min-height: 38px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: 0 var(--r2) var(--r2) 0; background: var(--inset); box-shadow: var(--sombra-1); font-size: var(--t-mini); color: var(--text-3); }


.pendentes { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e5); border-top: 1px solid var(--linha); background: var(--carbon-2); }
.pendentes--vazia { color: var(--text-3); }
.pendentes__texto { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-corpo); }
.pendentes__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); }
.pendentes__acoes { display: flex; gap: var(--e2); }

.revisao { display: grid; gap: var(--e2); list-style: none; }
.revisao li { display: grid; gap: 2px; padding: var(--e2) 0; border-bottom: 1px solid var(--linha); }
.revisao li:last-child { border-bottom: 0; }
.revisao strong { font-size: var(--t-corpo); font-weight: 500; }
.revisao span { font-size: var(--t-mini); color: var(--text-3); }
.revisao__consequencias { margin-top: var(--e3); padding: var(--e3); border: 1px solid var(--atencao-borda); border-radius: var(--r1); background: var(--amber-wash); }
.revisao__consequencias strong { font-size: var(--t-mini); color: var(--amber); }
.revisao__consequencias li { font-size: var(--t-mini); color: var(--text-2); list-style: disc; margin-left: var(--e4); }

.empresas__topo { display: flex; align-items: center; gap: var(--e3); }
.empresas__topo .campo-busca { flex: 1; }
.empresas__selecao { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border: 1px solid var(--azul-borda); border-radius: var(--r2); background: var(--azul-suave); font-size: var(--t-mini); }
/* Sem nada marcado a faixa continua no DOM, para poder ser trocada no lugar, mas não ocupa espaço. */
.empresas__selecao--vazia { display: none; }
.empresas__selecao span { margin-right: auto; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); font-size: var(--t-mini); color: var(--text-3); }

.historico { display: grid; gap: var(--e3); list-style: none; }
.historico li { display: grid; grid-template-columns: 130px 1fr; gap: var(--e3); }
.historico__quando { font-size: var(--t-mini); font-variant-numeric: tabular-nums; color: var(--text-3); }
.historico strong { font-size: var(--t-corpo); font-weight: 500; }
.historico p { font-size: var(--t-mini); color: var(--text-2); }

.aprovacoes { padding: var(--e4); margin-bottom: var(--e4); border: 1px solid var(--atencao-borda); border-radius: var(--r2); background: var(--amber-wash); }
.aprovacoes h2 { font-size: var(--t-corpo); color: var(--amber); }
.aprovacoes ul { display: grid; gap: var(--e3); margin-top: var(--e3); list-style: none; }
.aprovacoes li { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }
.aprovacoes strong { font-size: var(--t-corpo); }
.aprovacoes p { font-size: var(--t-mini); color: var(--text-2); }
.aprovacoes__acoes { display: flex; gap: var(--e2); flex: 0 0 auto; }
.aprovacoes__acoes .entrada { width: 150px; }
.aprovacoes--revisao { border-color: var(--linha-forte); background: var(--carbon-2); }
.aprovacoes--revisao h2 { color: var(--text); }
.revisao-lista { display: grid; gap: var(--e3); margin-top: var(--e3); list-style: none; }
.revisao-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--e4); background: rgba(11, 11, 18, 0.45); }
.modal__painel { display: grid; width: min(560px, 100%); max-height: 86vh; border-radius: var(--r3); background: var(--carbon); box-shadow: var(--sombra-3); grid-template-rows: auto 1fr auto; }
.modal__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linha); }
.modal__topo h2 { font-size: var(--t-medio); }
.modal__fechar { width: 32px; height: 32px; border: 0; border-radius: var(--r1); background: none; font-size: 20px; line-height: 1; color: var(--text-3); cursor: pointer; }
.modal__fechar:hover { background: var(--inset); }
.modal__corpo { display: grid; align-content: start; gap: var(--e3); padding: var(--e4) var(--e5); overflow-y: auto; font-size: var(--t-corpo); color: var(--text-2); }
.modal__acoes { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e5); border-top: 1px solid var(--linha); }
.link-convite { background: var(--inset); font-size: var(--t-mini); }

@media (max-width: 1240px) {
  .resumos { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .resumo--fontes { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .resumo__fontes { grid-template-columns: 1fr; }
}

/* Abaixo disto a altura fixa atrapalha mais do que ajuda, porque as duas colunas viram duas faixas empilhadas
   e disputariam a mesma altura. Aqui o esquema é desligado por inteiro: a tela volta a rolar de cima a baixo,
   cada painel cresce com o conteúdo, e o rodapé de pendentes gruda na base da janela. */
@media (max-width: 1100px) {
  .principal > .surge:has(> .equipe) { display: block; height: auto; }
  .equipe { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .equipe__lista, .equipe__detalhe { grid-template-rows: none; overflow: visible; }
  /* Empilhado, a lista cresce com os grupos em vez de abrir uma rolagem curta dentro de si. */
  .grupos { overflow: visible; }
  .equipe__lista { gap: var(--e3); }
  .aba-conteudo { overflow: visible; }
  /* Aqui a barra NÃO gruda: colada na base da janela ela voltaria a passar por cima dos campos, que é
     exatamente o que ela não pode fazer. Fica no fim do painel, como rodapé de formulário. */
  .pendentes { border-radius: 0 0 var(--r2) var(--r2); }
}

@media (max-width: 720px) {
  .resumos { grid-template-columns: 1fr; }
  .pessoa-topo, .abas, .aba-conteudo, .pendentes { padding-left: var(--e4); padding-right: var(--e4); }
  .acao { flex-direction: column; align-items: flex-start; gap: var(--e2); }
  .limite__topo { flex-direction: column; align-items: flex-start; }
  .pessoa-topo { flex-wrap: wrap; }
  .pessoa-topo__acoes { margin-left: 0; width: 100%; }
  .pessoa-topo__acoes .botao { width: 100%; }
  .pendentes { flex-direction: column; align-items: stretch; }
  .pendentes__acoes .botao { flex: 1; }
  .aprovacoes li { flex-direction: column; align-items: flex-start; }
  .historico li { grid-template-columns: 1fr; gap: 2px; }
  .empresas__topo { flex-direction: column; align-items: stretch; }
}
.carteira__destino { max-width: 320px; min-height: 38px; padding: 0 var(--e3); border: 1px solid var(--linha-forte); border-radius: var(--r2); background: var(--carbon); box-shadow: var(--sombra-1); font: inherit; font-size: var(--t-corpo); }

/* ── Alvo de toque ────────────────────────────────────────────────────────────────
 * Em tela de dedo, botão, chip, campo e seletor chegam a 44 px de altura. Abaixo disso o erro de toque
 * cresce, e a Carteira tinha controles de 34 px. Fica no fim do arquivo de propósito: precisa vencer as
 * alturas menores declaradas nos blocos de cada tela, sem subir a especificidade de cada seletor.
 */
@media (max-width: 900px) and (pointer: coarse), (max-width: 640px) {
  .botao, .entrada, select.entrada, .filtro, .paginas__botao, .aba, .segmento,
  .carteira__seletor, .prova-ordem, .prova-busca__caixa { min-height: 44px; }
  .filtro { padding-inline: var(--e3); }
  .carteira__filtros { gap: var(--e2); }
}

/* ── Menu em tela estreita ────────────────────────────────────────────────────────
 * Fechado, o cabeçalho é só identidade e o botão: o conteúdo começa em 90 px em vez de 358 px. Fica no
 * fim do arquivo porque precisa vencer os `display: flex` declarados nos blocos de cada parte do menu.
 */
@media (max-width: 900px) {
  .menu__nav, .menu__usuario, .menu__sair { display: none; }
  .app--menu-aberto .menu__nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--e1); flex: 1 1 100%; }
  .app--menu-aberto .menu__usuario:not([hidden]) { display: flex; flex: 1 1 100%; width: auto; border-top: 1px solid var(--linha); }
  .app--menu-aberto .menu__sair { display: inline-flex; width: auto; }
}

@media (max-width: 640px) {
  .carteira .carteira__detalhe-topo { grid-template-columns: auto minmax(0, 1fr); }
  .carteira .carteira__detalhe-topo > .botao { grid-column: 1 / -1; width: 100%; }
}
.bloqueio-acao { flex-basis: 100%; margin: 4px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }