/* ─────────────────────────────────────────────────────────────────────────
   Painel de risco bancário — dialeto APP do design system da casa
   (sole-capital-design/dialetos/app.md), redesenho de 04/11/2026: barra
   lateral, cantos 4/6 px, controles de 40 px, seções abertas separadas por
   filete, números soltos e listas que levam a algum lugar.
   Só tokens (var(--…)) — nenhum hex: é o que deixa a marca e o tema trocarem
   tudo. Os tokens vêm de /ds/styles.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Cores por PAPEL. Classe do banco: aprovado, com limite, maior risco e sem nota
   (a hachura diz "sem nota" sem depender só da cor). Garantia do FGC: coberto,
   acima do limite, sem FGC (hachura) e sem marca no cadastro. Escolhidas pela
   regra de gráficos do dialeto dashboards (ΔE e contraste em docs/design.md);
   provisório como a paleta inteira de gráficos (em-aberto #8). */
:root{
  --classe-aprovado:var(--chart-primary);
  --classe-com-limite:var(--chart-pair);
  --classe-maior-risco:var(--data-negative);
  --classe-sem-nota:var(--chart-12);
  --hachura:repeating-linear-gradient(135deg,var(--chart-12) 0 3px,var(--badge-neutral-bg) 3px 6px);
  --hachura:repeating-linear-gradient(135deg,var(--chart-12) 0 3px,color-mix(in srgb,var(--chart-12) 32%,var(--surface-canvas)) 3px 6px);
  --borda-alerta:var(--border-alert-negative);
  --borda-alerta:color-mix(in srgb,var(--border-alert-negative) 35%,transparent);
  --fundo-linha-alerta:var(--surface-alert-negative);
  --fundo-linha-alerta:color-mix(in srgb,var(--data-negative) 4%,transparent);
  --side-w:248px;
  --pagina-pad:var(--space-10);
}

html,body{margin:0}
*,*::before,*::after{box-sizing:border-box}
p{margin:0}
ul,ol{margin:0}
.nav-icon{width:16px;height:16px;flex:0 0 auto;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:var(--numeric)}
[hidden]{display:none!important}

/* micro-rótulo: Inter 600 11px, caixa alta, --text-label */
.lbl,.rotulo{display:block;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--text-label)}

/* ── Casca ─────────────────────────────────────────────────────────────── */
/* o fundo da coluna da barra vem da casca: desce até o fim da página, mesmo com a barra fixa no topo */
.shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;background:var(--surface-page)}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--space-6) var(--space-4);
  background:var(--surface-page);display:flex;flex-direction:column;gap:28px}
.side-marca{display:flex;flex-direction:column;gap:10px;padding:var(--space-1) var(--space-3)}
.side-marca:hover{text-decoration:none}
.side-marca img{display:block;width:128px;height:auto}
.side-g{display:flex;flex-direction:column;gap:2px}
.side-gl{padding:0 var(--space-3) var(--space-2)}
.side-i{display:flex;align-items:center;gap:10px;min-height:var(--control-h-page);padding:0 var(--space-3);
  border-radius:var(--radius-ctrl);color:var(--text-paragraph);font-size:var(--size-body-sm);
  font-weight:var(--weight-medium);text-decoration:none;transition:var(--transition-color)}
.side-i .nav-icon{color:var(--text-muted)}
.side-i:hover{background:var(--action-ghost-hover);color:var(--text-heading);text-decoration:none}
.side-i:hover .nav-icon{color:var(--accent-premium)}
.side-i[aria-current="page"]{background:var(--surface-inset);color:var(--action-primary);font-weight:var(--weight-semibold)}
.side-i[aria-current="page"] .nav-icon{color:var(--action-primary)}
/* o número ao lado de Vencimentos: clientes com papel vencendo em até 30 dias */
.side-n{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--badge-external-bg);
  color:var(--badge-external-text);font-size:12px;font-weight:var(--weight-semibold);display:inline-flex;align-items:center;
  justify-content:center;font-variant-numeric:var(--numeric)}
.side-pe{margin-top:auto;border-top:1px solid var(--border-hairline);padding-top:var(--space-4);display:flex;
  flex-direction:column;gap:var(--space-1)}
.quem{display:flex;align-items:center;gap:10px;padding:0 var(--space-3) var(--space-2);min-width:0}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--surface-inset);color:var(--action-primary);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:var(--weight-semibold);flex:none}
.quem-txt{display:flex;flex-direction:column;min-width:0}
.quem-txt strong{font-size:var(--size-caption);font-weight:var(--weight-semibold);color:var(--text-heading);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quem-txt span{font-size:12px;color:var(--text-muted)}

.area{min-width:0;display:flex;flex-direction:column;background:var(--surface-canvas);border-left:1px solid var(--border-hairline)}
.topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);
  padding:var(--space-5) var(--pagina-pad);border-bottom:1px solid var(--border-hairline)}
.topo-tit{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 360px}
.topo h1{font-size:26px;line-height:var(--leading-title);overflow-wrap:anywhere}
.topo-ctx{display:flex;flex-wrap:wrap;gap:6px var(--space-4);font-size:var(--size-caption);color:var(--text-muted)}
.volta{display:inline-flex;align-items:center;gap:6px;font-size:var(--size-caption);font-weight:var(--weight-medium);
  align-self:flex-start}
.volta .nav-icon{width:14px;height:14px}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.acoes form{margin:0}
.conteudo{width:100%;max-width:1240px;padding:var(--space-8) var(--pagina-pad) var(--space-16);display:flex;
  flex-direction:column;gap:var(--space-10)}
.conteudo--estreito{max-width:1200px}

/* ── Botões (components/core/Button, dialeto app) ──────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--control-h-page);
  padding:0 var(--space-4);font:var(--weight-medium) var(--size-body-sm)/1 var(--font-body);border-radius:var(--radius-ctrl);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition-color);background:transparent;
  color:var(--text-body);text-decoration:none}
.btn .nav-icon{width:var(--control-icon);height:var(--control-icon)}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--action-primary);color:var(--text-on-action);font-weight:var(--weight-semibold)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-action)}
.btn--primary:active{background:var(--action-primary-press)}
.btn--secondary{background:var(--surface-canvas);color:var(--text-heading);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--surface-dark);border-color:var(--surface-dark);color:var(--text-inverse)}
.btn--ghost{color:var(--text-accent)}
.btn--ghost:hover{background:var(--action-ghost-hover);color:var(--text-accent)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn--largo{width:100%}

/* ── Busca (campo de 40 px com a lupa dentro) ──────────────────────────── */
.busca{position:relative;width:280px;max-width:100%}
.busca--lista{flex:0 1 360px;min-width:220px;width:auto}
.busca-ico{position:absolute;left:12px;top:12px;color:var(--text-muted);display:flex;pointer-events:none}
.busca-in{height:var(--control-h-page);width:100%;padding:0 var(--space-3) 0 38px;border:1px solid var(--border-hairline);
  border-radius:var(--radius-ctrl);background:var(--surface-canvas);color:var(--text-body);
  font:var(--weight-regular) var(--size-body-sm)/1 var(--font-body)}
.busca-in::placeholder{color:var(--text-muted)}
.busca-in:focus,.sel:focus{outline:none;border-color:var(--border-accent);box-shadow:var(--shadow-focus)}
.busca-lista{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;max-height:min(360px,60vh);overflow-y:auto;
  list-style:none;margin:0;padding:var(--space-1);background:var(--surface-raised);border:1px solid var(--border-hairline);
  border-radius:var(--radius-panel);box-shadow:var(--shadow-raised)}
.busca-lista a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 10px;
  border-radius:var(--radius-ctrl);color:var(--text-body);font-size:var(--size-body-sm);text-decoration:none}
.busca-lista a[aria-selected="true"],.busca-lista a:hover{background:var(--surface-inset);color:var(--text-heading)}
.busca-lista .tipo{font-size:12px;color:var(--text-muted)}
.busca-lista .nada{padding:var(--space-2) 10px;font-size:var(--size-caption);color:var(--text-muted)}
.sel{height:var(--control-h-page);padding:0 var(--space-3);border:1px solid var(--border-hairline);border-radius:var(--radius-ctrl);
  background:var(--surface-canvas);color:var(--text-body);font:var(--weight-regular) var(--size-body-sm)/1 var(--font-body)}

/* ── Selos (components/core/Badge) ─────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--space-2);border-radius:var(--radius-ctrl);
  font:var(--weight-semibold) 12px/1 var(--font-body);white-space:nowrap}
.badge--shared{background:var(--badge-shared-bg);color:var(--badge-shared-text)}
.badge--external{background:var(--badge-external-bg);color:var(--badge-external-text)}
.badge--negative{background:var(--surface-alert-negative);color:var(--data-negative)}
.badge--neutral{background:var(--badge-neutral-bg);color:var(--badge-neutral-text)}
.badge--positive{background:var(--surface-alert-positive);color:var(--data-positive)}
.badge--alerta{background:var(--data-negative);color:var(--text-inverse)}
.badge--prazo{background:var(--surface-inset);color:var(--badge-shared-text)}
.selos{display:flex;flex-wrap:wrap;gap:6px}

/* ── Aviso que pede ação (borda inteira, nunca só a da esquerda) ───────── */
.alerta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);
  padding:var(--space-5) var(--space-6);border:1px solid var(--borda-alerta);border-radius:var(--radius-panel);
  background:var(--surface-alert-negative)}
.alerta-txt{display:flex;gap:14px;align-items:flex-start;flex:1 1 420px;min-width:0}
.alerta-ico{color:var(--data-negative);display:flex;padding-top:2px;flex:none}
.alerta-ico .nav-icon{width:20px;height:20px}
.alerta h2{font-size:var(--size-body-lg);line-height:1.4}
.alerta p{margin-top:var(--space-1);font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--text-paragraph)}
.aviso{border:1px solid var(--border-alert-warning);background:var(--surface-alert-warning);border-radius:var(--radius-panel);
  padding:var(--space-3) var(--space-4);color:var(--text-body);font-size:var(--size-body-sm);line-height:var(--leading-body)}
/* Aviso de atenção (vencimentos): o desenho do alerta, no dourado do "fique de olho". O vermelho
   fica para o FGC, que é risco; vencimento é agenda. */
.alerta--atencao{border-color:var(--border-alert-warning);
  border-color:color-mix(in srgb,var(--border-alert-warning) 55%,transparent);background:var(--surface-alert-warning)}
.alerta--atencao .alerta-ico{color:var(--accent-premium-text)}
/* o alerta do FGC e o de vencimento, quando os dois aparecem, ficam juntos no topo */
.avisos{display:flex;flex-direction:column;gap:var(--space-3)}
.aviso--negativo{border-color:var(--border-alert-negative);background:var(--surface-alert-negative)}
.aviso--info{border-color:var(--border-hairline);background:var(--surface-page)}
.aviso strong{font-weight:var(--weight-semibold)}

/* ── Números soltos ────────────────────────────────────────────────────── */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--space-6) var(--space-8)}
.numero{display:flex;flex-direction:column;gap:6px;min-width:0}
.numero-v{font:var(--weight-bold) 30px/var(--leading-tight) var(--font-display);color:var(--text-heading);
  font-variant-numeric:var(--numeric);overflow-wrap:anywhere}
.numero-v.neg{color:var(--data-negative)}
.numero-v--texto{font-size:var(--size-title)}
.numero-c{font-size:var(--size-caption);color:var(--text-muted);line-height:1.45}
/* "Ver os N clientes": abre a tabela do número num popup */
.ver{align-self:flex-start;font:var(--weight-medium) var(--size-caption)/1.4 var(--font-body);color:var(--text-accent);
  background:none;border:0;padding:0;cursor:pointer}
.ver:hover{color:var(--action-primary-hover);text-decoration:underline;text-underline-offset:3px}

/* ── Seções abertas com filete ─────────────────────────────────────────── */
.secao{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.filete{padding-top:var(--space-8);border-top:1px solid var(--border-hairline)}
.secao-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-6)}
.secao-tit{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.secao-tit h2{font-size:20px;line-height:var(--leading-title)}
.secao-sub{font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--text-paragraph);max-width:76ch}
.mais{font-size:var(--size-body-sm);font-weight:var(--weight-medium);align-self:flex-start}
.nota,.sub{font-size:var(--size-caption);color:var(--text-muted);line-height:var(--leading-body)}
.nota-info{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--size-caption);line-height:var(--leading-body);
  color:var(--text-paragraph);max-width:96ch}
.nota-info .nav-icon{width:14px;height:14px;color:var(--text-accent);margin-top:3px}

/* ── Barra por classe do banco ─────────────────────────────────────────── */
.barra{display:flex;gap:2px;height:16px;border-radius:var(--radius-ctrl);overflow:hidden;background:var(--badge-neutral-bg)}
.barra--fina{height:10px;border-radius:2px}
.barra span{min-width:2px}
.c-aprovado{background:var(--classe-aprovado)}
.c-com_limite{background:var(--classe-com-limite)}
.c-maior_risco{background:var(--classe-maior-risco)}
.c-sem_nota{background:var(--hachura)}
/* A barra da Visão geral responde ao clique: cada cor abre os clientes da classe (popup). */
.barra--clicavel{overflow:visible;background:none}
.barra--clicavel button{border:0;padding:0;margin:0;min-width:3px;height:100%;cursor:pointer;border-radius:0;
  transition:filter var(--duration-fast) var(--ease-standard)}
.barra--clicavel button:first-child{border-radius:var(--radius-ctrl) 0 0 var(--radius-ctrl)}
.barra--clicavel button:last-child{border-radius:0 var(--radius-ctrl) var(--radius-ctrl) 0}
.barra--clicavel button:only-child{border-radius:var(--radius-ctrl)}
.barra--clicavel button:hover{filter:brightness(1.12)}
.barra--clicavel button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.legenda-classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--space-3) var(--space-8)}
.leg{display:flex;gap:10px;align-items:flex-start}
.leg-cor{width:10px;height:10px;border-radius:2px;margin-top:5px;flex:none}
.leg strong{display:block;font-size:var(--size-body-sm);font-weight:var(--weight-semibold)}
.leg span.num{display:block;font-size:var(--size-caption);color:var(--text-paragraph)}
button.leg{font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer;padding:var(--space-2) 10px;
  margin:calc(-1 * var(--space-2)) -10px;border-radius:var(--radius-ctrl);transition:var(--transition-color)}
button.leg:hover{background:var(--surface-page)}
.leg-ver{display:block;margin-top:2px;font-size:var(--size-caption);font-weight:var(--weight-medium);color:var(--text-accent)}
button.leg:hover .leg-ver{text-decoration:underline;text-underline-offset:3px}
.legenda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);font-size:12px;color:var(--text-paragraph);
  margin:0;padding:0;list-style:none}
.legenda li{display:flex;align-items:center;gap:6px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.legenda i.limite{width:2px;height:14px;border-radius:1px;background:var(--text-heading)}
.legenda i.t{width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--border-hairline)}
.legenda .nav-icon{width:12px;height:12px}

/* ── Listas que levam a algum lugar ────────────────────────────────────── */
.duas-listas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:var(--space-10) var(--space-12)}
.itens{list-style:none;padding:0;border-bottom:1px solid var(--border-hairline)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--space-4);
  padding:14px var(--space-2);border-top:1px solid var(--border-hairline);color:var(--text-body)}
a.item:hover{background:var(--surface-page);color:var(--text-body);text-decoration:none}
a.item:hover .ir{color:var(--text-accent)}
.ir{color:var(--text-muted);display:flex}
.item-txt{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.item-nome{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-heading);overflow-wrap:anywhere}
.item-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.item-sub{font-size:var(--size-caption);color:var(--text-paragraph);line-height:1.45}
.item-valor{font-size:15px;font-weight:var(--weight-semibold);font-variant-numeric:var(--numeric);white-space:nowrap}
.vazio{padding:var(--space-8) var(--space-2);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vazio strong{font-size:15px;font-weight:var(--weight-semibold)}
.vazio p{font-size:var(--size-body-sm);color:var(--text-paragraph)}

/* ── Como ler (caixa de referência) ────────────────────────────────────── */
.como-ler{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6);background:var(--surface-page);
  border:1px solid var(--border-hairline);border-radius:var(--radius-panel)}
.como-ler h2{font-size:var(--size-body-lg);line-height:var(--leading-title)}
.como-ler-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-5) var(--space-8)}
.como-ler-grade div{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.como-ler p{font-size:var(--size-caption);line-height:var(--leading-body);color:var(--text-paragraph)}
.como-ler .pe{padding-top:var(--space-4);border-top:1px solid var(--border-hairline)}

/* ── Filtros: segmentos com o número dentro ────────────────────────────── */
.ferramentas{display:flex;flex-direction:column;gap:var(--space-4)}
.ferramentas-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6)}
.ordem{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.ordem label{font-size:var(--size-caption);color:var(--text-paragraph)}
.segs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.seg{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-page);padding:0 14px;
  border-radius:var(--radius-ctrl);border:1px solid var(--border-hairline);background:var(--surface-canvas);
  color:var(--text-heading);font:var(--weight-medium) var(--size-body-sm)/1 var(--font-body);text-decoration:none;
  transition:var(--transition-color)}
.seg:hover{border-color:var(--border-strong);background:var(--surface-page);color:var(--text-heading);text-decoration:none}
.seg[aria-current="true"]{background:var(--surface-inset);border-color:var(--border-accent);color:var(--badge-shared-text);
  font-weight:var(--weight-semibold)}
.seg-n{min-width:24px;height:20px;padding:0 6px;border-radius:10px;background:var(--badge-neutral-bg);color:var(--text-paragraph);
  font-size:12px;font-weight:var(--weight-semibold);display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:var(--numeric)}
.seg[aria-current="true"] .seg-n{background:var(--surface-canvas);color:var(--badge-shared-text)}
.ficha-filtro{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 6px 0 var(--space-3);
  border-radius:var(--radius-ctrl);background:var(--surface-inset);color:var(--badge-shared-text);font-size:var(--size-caption);
  font-weight:var(--weight-semibold);align-self:flex-start}
.ficha-filtro a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-ctrl);
  color:var(--badge-shared-text)}
.ficha-filtro a:hover{background:var(--action-ghost-hover)}
.ficha-filtro .nav-icon{width:14px;height:14px}

/* ── Lista de clientes ─────────────────────────────────────────────────── */
.rolagem{overflow-x:auto}
.cab{font-size:12px;font-weight:var(--weight-semibold);color:var(--text-paragraph)}
.r{text-align:right}
.v-neg{color:var(--data-negative)}
.v-zero{color:var(--text-muted);font-weight:var(--weight-regular)!important}
.cli-grade{display:grid;grid-template-columns:minmax(220px,1.8fr) 120px 150px 130px 150px minmax(150px,1fr) 16px;
  align-items:center;gap:var(--space-4)}
.cli-cab{align-items:end;padding:0 var(--space-2) 10px}
.cli{padding:14px var(--space-2);border-top:1px solid var(--border-hairline);color:var(--text-body)}
a.cli:hover{background:var(--surface-page);color:var(--text-body);text-decoration:none}
a.cli:hover .ir{color:var(--text-accent)}
.cli-valor{font-size:var(--size-body-sm);font-weight:var(--weight-semibold);font-variant-numeric:var(--numeric)}
.cli-risco{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cli-risco .pct{font-size:12px;color:var(--text-muted)}
.cli-banker{font-size:12px;color:var(--text-muted)}
.cli-dado{display:none}
.cli-largura{min-width:1020px}
.rk-largura{min-width:880px}
.bk-largura{min-width:600px}
.rodape-lista{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding-top:var(--space-2)}
.rodape-lista span{font-size:var(--size-caption);color:var(--text-muted)}

/* ── Ficha do cliente: ranking dos bancos com a barra do FGC ───────────── */
.rk-grade{display:grid;grid-template-columns:28px minmax(220px,1.2fr) 110px minmax(280px,2fr) 120px;gap:var(--space-5);
  align-items:center}
.rk-cab{padding:0 var(--space-2) 10px}
.ranking{list-style:none;padding:0;border-bottom:1px solid var(--border-hairline)}
.rk{padding:18px var(--space-2);border-top:1px solid var(--border-hairline)}
.rk--alerta{background:var(--fundo-linha-alerta)}
.rk-n{font:var(--weight-bold) var(--size-body)/1 var(--font-display);color:var(--text-paragraph);font-variant-numeric:var(--numeric)}
.rk-n.neg{color:var(--data-negative)}
.rk-banco{display:flex;flex-direction:column;gap:6px;min-width:0}
.rk-banco a{font-size:15px;font-weight:var(--weight-semibold);color:var(--text-heading);overflow-wrap:anywhere}
.rk-banco a:hover{color:var(--action-primary-hover)}
.rk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--text-paragraph)}
.rk-valor{text-align:right;font-size:15px;font-weight:var(--weight-semibold);font-variant-numeric:var(--numeric)}
.rk-fgc{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.rk-fgc-txt{font-size:var(--size-caption);color:var(--text-paragraph);font-variant-numeric:var(--numeric);line-height:1.45}
.rk-fgc-txt strong{color:var(--data-negative);font-weight:var(--weight-semibold)}
.rk-venc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:var(--size-body-sm);
  font-variant-numeric:var(--numeric)}
.rk-rot{display:none}
.trilho{position:relative;height:12px;border-radius:2px;background:var(--badge-neutral-bg)}
.trilho-barra{position:absolute;left:0;top:0;bottom:0;display:flex;gap:2px;border-radius:2px;overflow:hidden}
.trilho-barra span{min-width:2px}
.marca{position:absolute;top:-5px;width:2px;height:22px;margin-left:-1px;background:var(--text-heading);border-radius:1px}
.f-coberto{background:var(--chart-primary)}
.f-acima{background:var(--chart-pair)}
.f-semfgc{background:var(--hachura)}
.f-semmarca{background:var(--text-paragraph)}

/* ── Vencimentos: um cliente por linha, os papéis e o que olhar ao lado ── */
.vc-largura{min-width:960px}
.vc-grade{display:grid;grid-template-columns:minmax(200px,1.2fr) 160px 110px minmax(320px,2.4fr) 16px;gap:var(--space-4);
  align-items:start}
.vc-cab{align-items:end;padding:0 var(--space-2) 10px}
.vc-banker{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);
  padding:var(--space-6) var(--space-2) var(--space-3)}
.vc-banker h3{display:flex;align-items:center;gap:var(--space-2);font-size:var(--size-body-lg);line-height:var(--leading-title)}
.vc-banker > span{font-size:var(--size-caption);color:var(--text-muted)}
.vc-itens{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--border-hairline)}
.vc{padding:14px var(--space-2);border-top:1px solid var(--border-hairline);color:var(--text-body)}
a.vc:hover{background:var(--surface-page);color:var(--text-body);text-decoration:none}
a.vc:hover .ir{color:var(--text-accent)}
.vc > .ir{align-self:center}
.vc-quando{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:var(--size-body-sm)}
.vc-valor{text-align:right;font-size:var(--size-body-sm);font-weight:var(--weight-semibold)}
.vc-papeis{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.vc-papel{display:flex;flex-direction:column;gap:2px;font-size:var(--size-caption);line-height:1.45;color:var(--text-paragraph)}
.vc-papel strong{color:var(--text-heading);font-weight:var(--weight-semibold)}
.vc-acao.neg{color:var(--data-negative);font-weight:var(--weight-semibold)}

/* ── Tabela leve (papéis) e tabela densa (bankers, metodologia) ────────── */
.tab{width:100%;border-collapse:collapse;font-size:var(--size-body-sm)}
.tab th{font-size:12px;font-weight:var(--weight-semibold);color:var(--text-paragraph);text-align:left;padding:0 var(--space-3) 10px;
  white-space:nowrap;vertical-align:bottom}
.tab td{padding:14px var(--space-3);border-top:1px solid var(--border-hairline);vertical-align:middle}
.tab tbody tr:last-child td{border-bottom:1px solid var(--border-hairline)}
.tab tbody tr:hover td{background:var(--surface-page)}
.tab .r{text-align:right}
.tab .forte{font-weight:var(--weight-semibold)}
.tab .nowrap{white-space:nowrap}
.tab .menor{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.tabela-wrap{overflow:auto;border:1px solid var(--border-hairline);border-radius:var(--radius-panel);max-height:72vh;
  background:var(--surface-canvas)}
.tabela-wrap.livre{max-height:none}
.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--size-caption);font-variant-numeric:var(--numeric)}
.tabela th{position:sticky;top:0;z-index:1;background:var(--surface-page);text-align:right;vertical-align:bottom;
  font:var(--weight-semibold) 12px/1.35 var(--font-body);color:var(--text-paragraph);padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border-strong)}
.tabela td{padding:10px var(--space-3);border-bottom:1px solid var(--border-hairline);text-align:right;vertical-align:top;
  color:var(--text-body)}
.tabela .t{text-align:left}
.tabela .quebra{white-space:normal;min-width:240px;max-width:440px}
.tabela tbody tr:hover td{background:var(--surface-page)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela td.vazia{text-align:center;color:var(--text-muted);padding:var(--space-6)}
.tab th[data-ordem],.tabela th[data-ordem]{cursor:pointer;user-select:none}
.tab th[data-ordem]:hover,.tabela th[data-ordem]:hover{color:var(--text-accent)}
/* seta de ordenação desenhada em CSS */
.tab th[aria-sort]::after,.tabela th[aria-sort]::after{content:"";display:inline-block;margin-left:var(--space-1);
  border:4px solid transparent;vertical-align:middle}
.tab th[aria-sort="ascending"]::after,.tabela th[aria-sort="ascending"]::after{border-bottom-color:currentColor;margin-bottom:4px}
.tab th[aria-sort="descending"]::after,.tabela th[aria-sort="descending"]::after{border-top-color:currentColor;margin-top:4px}

/* ── Bancos: mapa Sole × Nord ──────────────────────────────────────────── */
.mapa{width:100%;min-width:720px;border-collapse:separate;border-spacing:4px;table-layout:fixed}
.mapa th{font-size:12px;font-weight:var(--weight-semibold);color:var(--text-paragraph);padding:var(--space-1) 6px}
.mapa thead th{text-align:center}
.mapa thead th:first-child{text-align:left}
.mapa tbody th{text-align:left;white-space:nowrap}
.mapa col.lin{width:120px}
.cel{height:64px;padding:0;border-radius:var(--radius-ctrl);vertical-align:top;position:relative}
.cel a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);height:100%;min-height:64px;
  padding:var(--space-2) 10px;border-radius:var(--radius-ctrl);color:var(--text-heading);text-decoration:none;
  outline-offset:-2px}
.cel a:hover{box-shadow:inset 0 0 0 1px var(--border-strong);text-decoration:none;color:var(--text-heading)}
.cel a[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--border-accent)}
.cn{font-size:var(--size-body);font-weight:var(--weight-semibold);font-variant-numeric:var(--numeric)}
.cv{background:var(--surface-canvas);border-radius:var(--radius-ctrl);padding:2px 6px;font-size:12px;
  font-weight:var(--weight-semibold);color:var(--text-heading);box-shadow:var(--shadow-card);white-space:nowrap;
  font-variant-numeric:var(--numeric)}
.dv{position:absolute;top:var(--space-2);right:var(--space-2);color:var(--text-paragraph);display:flex;pointer-events:none}
.dv .nav-icon{width:12px;height:12px}
.t-aprovado{background:var(--badge-shared-bg)}
.t-com_limite{background:var(--badge-external-bg)}
.t-maior_risco{background:var(--surface-alert-negative)}
.t-sem_nota{background:var(--badge-neutral-bg)}

/* ── Bancos: lista + banco escolhido ───────────────────────────────────── */
.bancos-duas{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:flex-start}
.bancos-lista{flex:999 1 560px;min-width:0}
.bk-grade{display:grid;grid-template-columns:minmax(150px,1.4fr) 112px 96px 120px 120px;gap:14px;align-items:center}
.bk-cab{padding:0 10px 10px}
.bk{padding:var(--space-3) 10px;border-top:1px solid var(--border-hairline);color:var(--text-heading)}
a.bk:hover{background:var(--surface-page);color:var(--text-heading);text-decoration:none}
a.bk[aria-current="true"]{background:var(--surface-inset)}
.bk-nome{font-size:var(--size-body-sm);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.bk-txt{font-size:var(--size-caption);font-variant-numeric:var(--numeric)}
.bk-cart{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.bk-cart .v{font-size:var(--size-body-sm);font-weight:var(--weight-semibold);font-variant-numeric:var(--numeric)}
.bk-cart .c{font-size:12px;color:var(--text-muted)}
.bk-meta{display:none}
.detalhe{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6);
  border:1px solid var(--border-hairline);border-radius:var(--radius-panel);background:var(--surface-card);
  box-shadow:var(--shadow-card);scroll-margin-top:var(--space-4)}
.detalhe h2{font-size:var(--size-title);line-height:var(--leading-title);overflow-wrap:anywhere}
.det-topo{display:flex;flex-direction:column;gap:10px}
.det-topo p{font-size:var(--size-body-sm);line-height:var(--leading-body);color:var(--text-paragraph)}
.det-bloco{display:flex;flex-direction:column;gap:10px;padding-top:var(--space-4);border-top:1px solid var(--border-hairline)}
.det-bloco h3{font:var(--weight-semibold) var(--size-caption)/1.4 var(--font-body);color:var(--text-heading)}
.det-grade{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,1fr);gap:10px var(--space-3);font-size:var(--size-body-sm)}
.det-grade .rot{font-size:var(--size-caption);color:var(--text-muted)}
.det-grade .forte{font-weight:var(--weight-semibold)}
.det-alertas{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.det-alertas li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--size-caption);line-height:1.5;
  color:var(--text-paragraph)}
.det-alertas .nav-icon{width:14px;height:14px;color:var(--data-negative);margin-top:2px}
.opiniao{font-size:var(--size-caption);line-height:var(--leading-body);color:var(--text-paragraph);padding:var(--space-3) 14px;
  background:var(--surface-page);border-radius:var(--radius-ctrl);white-space:pre-line}
.det-pequeno{font-size:12px;color:var(--text-muted);line-height:1.5}
.det-valor{font:var(--weight-bold) 24px/var(--leading-tight) var(--font-display);font-variant-numeric:var(--numeric)}
.det-fgc{font-size:var(--size-caption);color:var(--text-paragraph)}
.det-fgc.neg{color:var(--data-negative);font-weight:var(--weight-semibold)}
.detalhe > .btn{align-self:flex-start}

/* ── Popup da tabela do clique (o padrão do smart brain) ───────────────
   Clicar num gráfico, num número ou em "Ver os clientes" abre por cima da tela
   a tabela dos clientes daquele ponto; fecha no ×, no Esc e no clique fora. */
body.com-pop{overflow:hidden}
.pop-fundo{position:fixed;inset:0;z-index:100;background:var(--surface-overlay);display:flex;align-items:center;
  justify-content:center;padding:var(--space-6)}
.pop{position:relative;width:min(1120px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:var(--surface-raised);border-radius:var(--radius-panel);box-shadow:var(--shadow-overlay);outline:none}
.pop-x{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;width:36px;height:36px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--border-hairline);border-radius:var(--radius-ctrl);
  background:var(--surface-raised);color:var(--text-muted);cursor:pointer;transition:var(--transition-color)}
.pop-x:hover{background:var(--surface-page);color:var(--text-heading)}
.pop-x .nav-icon{width:18px;height:18px}
.pop-conteudo{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.pop-cab{padding:var(--space-5) 72px var(--space-4) var(--space-6);border-bottom:1px solid var(--border-hairline)}
.pop-cab h2{font-size:var(--size-body-lg);line-height:var(--leading-title)}
.pop-sub{margin-top:var(--space-1);font-size:var(--size-caption);line-height:var(--leading-body);color:var(--text-paragraph)}
.pop-corpo{overflow:auto;min-height:0;flex:1 1 auto;padding:0 var(--space-6)}
.pop-corpo .vazio{padding:var(--space-8) 0}
.pop-tab{min-width:640px}
.pop-tab thead th{position:sticky;top:0;z-index:1;background:var(--surface-raised);padding-top:var(--space-4);
  box-shadow:inset 0 -1px 0 var(--border-hairline)}
.pop-tab td{padding:10px var(--space-3)}
.pop-tab td.num{white-space:nowrap}
.pop-tab tbody tr:last-child td{border-bottom:0}
.pop-tab tfoot td{position:sticky;bottom:0;background:var(--surface-page);font-weight:var(--weight-semibold);
  border-top:1px solid var(--border-strong);color:var(--text-heading)}
.pop-tab a{color:var(--text-heading);font-weight:var(--weight-semibold)}
.pop-tab a:hover{color:var(--action-primary-hover)}
tr[data-href]{cursor:pointer}
.pop-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-hairline)}
.pop-pe .nota{flex:1 1 320px}
.pop-acoes{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pop-carregando{padding:var(--space-12) var(--space-6);font-size:var(--size-body-sm);color:var(--text-muted)}
.pop-carregando a{font-weight:var(--weight-semibold)}

/* ── Bankers e metodologia ─────────────────────────────────────────────── */
.grafico{width:100%;min-height:260px}
.duas{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-6);align-items:start}
.lateral{border-left:1px solid var(--border-hairline);padding-left:var(--space-6);display:flex;flex-direction:column;
  gap:var(--space-4);min-width:0}
.ficha{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0;font-size:var(--size-caption)}
.ficha dt{color:var(--text-muted)}
.ficha dd{margin:0;color:var(--text-body);font-variant-numeric:var(--numeric);overflow-wrap:anywhere}
.lista-metodo{margin:0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);
  color:var(--text-paragraph);font-size:var(--size-body-sm);max-width:var(--measure-text);line-height:var(--leading-body)}
.lista-metodo strong{color:var(--text-heading);font-weight:var(--weight-semibold)}

/* ── Login e erro ──────────────────────────────────────────────────────── */
.entrada{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.entrada-marca{background:var(--action-primary);color:var(--text-on-action);padding:var(--space-12);display:flex;
  flex-direction:column;justify-content:space-between;gap:var(--space-8)}
.entrada-marca img{display:block;height:40px;width:auto;align-self:flex-start}
.entrada-marca .fio{width:48px;height:2px;background:var(--accent-premium);margin-bottom:var(--space-5)}
.entrada-marca h1{color:var(--text-on-action);font:var(--weight-display) var(--size-display-sm)/var(--leading-display) var(--font-display);
  max-width:22ch}
.entrada-marca p{margin:var(--space-3) 0 0;max-width:42ch;line-height:var(--leading-body);opacity:.88}
.entrada-marca .pe{font-size:var(--size-caption);opacity:.88;margin:0}
.entrada-form{display:flex;align-items:center;justify-content:center;padding:var(--space-8)}
.entrada-form form{width:100%;max-width:380px;display:grid;gap:var(--space-4)}
.entrada-form h2{font:var(--weight-display) var(--size-title)/var(--leading-title) var(--font-display)}
.campo{display:grid;gap:var(--space-2)}
.in{height:var(--control-h-page);width:100%;padding:0 var(--space-3);border:1px solid var(--border-hairline);
  border-radius:var(--radius-ctrl);background:var(--surface-canvas);color:var(--text-body);
  font:var(--weight-regular) var(--size-body-sm)/1 var(--font-body);outline:none}
.in:focus{border-color:var(--border-accent);box-shadow:var(--shadow-focus)}
.erro-pagina{max-width:640px;margin:15vh auto;padding:0 var(--space-6);display:grid;gap:var(--space-4)}
.erro-pagina img{height:30px;width:auto;justify-self:start}
.erro-pagina p{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ── Telas menores ─────────────────────────────────────────────────────── */
@media (max-width:1100px){
  :root{--pagina-pad:var(--space-6)}
  .duas{grid-template-columns:1fr}
  .lateral{border-left:0;padding-left:0;border-top:1px solid var(--border-hairline);padding-top:var(--space-4)}
}

@media (max-width:900px){
  :root{--pagina-pad:var(--space-4)}
  .shell{display:block}
  .side{position:static;height:auto;overflow:visible;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-2);
    padding:var(--space-3) var(--space-4);border-right:0;border-bottom:1px solid var(--border-hairline)}
  .side-marca{flex-direction:row;align-items:center;gap:var(--space-3);padding:0;margin-right:auto}
  .side-marca img{width:104px}
  .side-g{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:var(--space-1);order:3;width:100%;scrollbar-width:none}
  .side-g + .side-g{width:auto;flex:1 1 auto}
  .side-gl{display:none}
  .side-i{min-height:36px;padding:0 10px;white-space:nowrap}
  .side-pe{margin:0;border:0;padding:0;flex-direction:row;align-items:center;gap:var(--space-1);order:2}
  .side-pe .quem{display:none}
  .side-pe .side-i span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .area{border-left:0}
  .topo{padding-top:var(--space-4);padding-bottom:var(--space-4)}
  .topo h1{font-size:var(--size-title)}
  .acoes,.busca{width:100%}
  .acoes .btn{flex:1 1 auto}
  .conteudo{padding-top:var(--space-6);gap:var(--space-8)}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4)}
  .numero-v{font-size:24px}
  .mapa{min-width:600px}
  .mapa col.lin{width:92px}
  .cel a{padding:6px var(--space-2)}
  .cv{font-size:11px;padding:1px var(--space-1)}
  .alerta{padding:var(--space-4)}
  .alerta .btn{width:100%}

  /* clientes: cada linha vira um cartão de duas linhas */
  .cli-cab{display:none}
  .cli-largura,.rk-largura,.bk-largura{min-width:0}
  .rolagem.cli-lista,.rolagem.rk-lista,.bancos-lista.rolagem{overflow:visible}
  .cli-grade{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome ir" "dados dados" "barra barra" "sit sit";
    gap:10px var(--space-3)}
  .cli-grade > .cli-nome{grid-area:nome}
  .cli-grade > .ir{grid-area:ir}
  .cli-grade > .cli-barra{grid-area:barra}
  .cli-grade > .cli-sit{grid-area:sit}
  .cli-grade > .cli-col{display:none}
  .cli-dado{display:flex;grid-area:dados;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font-size:var(--size-caption);
    color:var(--text-paragraph)}
  .cli-dado b{font-weight:var(--weight-semibold);color:var(--text-heading)}
  .cli-dado b.v-neg{color:var(--data-negative)}

  /* ficha do cliente: ranking em cartões */
  .rk-cab{display:none}
  .rk-grade{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"n banco valor" ". fgc fgc" ". venc venc";
    gap:var(--space-3)}
  .rk-grade > .rk-n{grid-area:n;align-self:start;padding-top:2px}
  .rk-grade > .rk-banco{grid-area:banco}
  .rk-grade > .rk-valor{grid-area:valor;align-self:start}
  .rk-grade > .rk-fgc{grid-area:fgc}
  .rk-grade > .rk-venc{grid-area:venc;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--size-caption)}
  .rk-rot{display:inline;color:var(--text-muted)}

  /* vencimentos: cada cliente vira um cartão (nome, data e valor, os papéis embaixo) */
  .vc-cab{display:none}
  .vc-largura{min-width:0}
  .rolagem.vc-lista{overflow:visible}
  .vc-grade{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome ir" "quando valor" "papeis papeis";
    gap:10px var(--space-3)}
  .vc-grade > .vc-nome{grid-area:nome}
  .vc-grade > .ir{grid-area:ir;align-self:start}
  .vc-grade > .vc-quando{grid-area:quando;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;
    font-size:var(--size-caption)}
  .vc-grade > .vc-valor{grid-area:valor;align-self:center}
  .vc-grade > .vc-papeis{grid-area:papeis}
  .vc-banker{padding-top:var(--space-5)}

  /* bancos: Sole e Nord descem para baixo do nome */
  .bk-cab{display:none}
  .bk-grade{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome cart" "meta cart"}
  .bk-grade > .bk-nome{grid-area:nome}
  .bk-grade > .bk-cart{grid-area:cart}
  .bk-grade > .bk-col{display:none}
  .bk-meta{display:flex;grid-area:meta;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--text-paragraph)}
  .detalhe{padding:var(--space-5)}
  .entrada{grid-template-columns:1fr}
  .entrada-marca{padding:var(--space-8) var(--space-6)}

  /* o popup vira a tela inteira no celular */
  .pop-fundo{padding:0;align-items:stretch}
  .pop{width:100%;max-height:none;height:100%;border-radius:0}
  .pop-cab{padding:var(--space-4) 64px var(--space-3) var(--space-4)}
  .pop-corpo{padding:0 var(--space-4)}
  .pop-pe{padding:var(--space-3) var(--space-4)}
  .pop-pe .btn{flex:1 1 auto}
}

@media print{
  .side,.acoes,.ferramentas,.rodape-lista .btn{display:none}
  .shell{display:block}
  .tabela-wrap{max-height:none;overflow:visible}
  .conteudo{max-width:none}
}