/* Ativos Elegíveis QUAD Wealth — tema claro, registro product (ver DESIGN.md) */

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Heavy.otf') format('opentype');
  font-weight: 800;
  font-display: swap;
}

:root {
  --bg: oklch(0.975 0.003 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.955 0.004 260);
  --surface-3: oklch(0.93 0.005 260);
  --ink: oklch(0.26 0.012 265);
  --ink-2: oklch(0.44 0.012 265);
  --ink-3: oklch(0.55 0.01 265);
  --line: oklch(0.9 0.004 260);
  --line-forte: oklch(0.82 0.006 260);
  --accent: oklch(0.5 0.19 22);
  --accent-hover: oklch(0.45 0.18 22);
  --accent-tinta: oklch(1 0 0);
  --accent-suave: oklch(0.96 0.02 22);
  --ok: oklch(0.55 0.15 150);
  --ok-texto: oklch(0.44 0.12 150);
  --ok-suave: oklch(0.95 0.03 150);
  --demand: oklch(0.5 0.14 250);
  --demand-texto: oklch(0.42 0.11 250);
  --demand-suave: oklch(0.95 0.02 250);
  --off: oklch(0.55 0.19 25);
  --off-texto: oklch(0.45 0.16 25);
  --off-suave: oklch(0.95 0.02 25);
  --foco: oklch(0.5 0.19 22 / 0.35);
  --sombra-1: 0 1px 2px oklch(0.2 0.01 265 / 0.06), 0 1px 1px oklch(0.2 0.01 265 / 0.04);
  --sombra-2: 0 4px 16px oklch(0.2 0.01 265 / 0.12), 0 2px 4px oklch(0.2 0.01 265 / 0.06);
  --z-menu: 10;
  --z-pegajoso: 15;
  --z-pano: 20;
  --z-drawer: 30;
  --z-toast: 40;
  --raio: 8px;
  --raio-p: 5px;
  --dur: 180ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- topo ---------- */

.topo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  height: 3.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-pegajoso);
}

.marca {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.marca .quad { color: var(--accent); }

.marca .produto {
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 0.375rem;
}

.abas { display: flex; gap: 0.25rem; }

.aba {
  border: 0;
  background: none;
  padding: 0.4rem 0.8rem;
  border-radius: var(--raio-p);
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--curva), color var(--dur) var(--curva);
}

.aba:hover { background: var(--surface-2); color: var(--ink); }

.aba[aria-current="true"] {
  background: var(--ink);
  color: var(--surface);
}

.topo-acoes { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }

/* ---------- controles ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--line-forte);
  background: var(--surface);
  color: var(--ink);
  padding: 0.375rem 0.75rem;
  border-radius: var(--raio-p);
  font-weight: 500;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva);
  white-space: nowrap;
}

.botao:hover { background: var(--surface-2); }
.botao:active { background: var(--surface-3); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }

.botao.primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-tinta);
}

.botao.primario:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.botao.perigo { color: var(--off); border-color: var(--line-forte); }
.botao.perigo:hover { background: var(--off-suave); border-color: var(--off); }

.botao.fantasma { border-color: transparent; background: none; color: var(--ink-2); }
.botao.fantasma:hover { background: var(--surface-2); color: var(--ink); }

:is(button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
}

.segmentado {
  display: inline-flex;
  border: 1px solid var(--line-forte);
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--surface);
}

.segmentado button {
  border: 0;
  background: none;
  padding: 0.35rem 0.6rem;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--dur) var(--curva), color var(--dur) var(--curva);
}

.segmentado button + button { border-left: 1px solid var(--line); }
.segmentado button:hover { background: var(--surface-2); }

.segmentado button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
}

.campo,
select.campo {
  border: 1px solid var(--line-forte);
  border-radius: var(--raio-p);
  padding: 0.375rem 0.6rem;
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}

.campo::placeholder { color: var(--ink-2); }

.campo-busca { position: relative; }

.campo-busca .campo { padding-left: 1.9rem; width: 13.5rem; }

.campo-busca::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  transform: translateY(-58%);
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
  pointer-events: none;
}

.campo-busca::after {
  content: "";
  position: absolute;
  left: 1.28rem;
  top: 58%;
  width: 1.5px;
  height: 0.32rem;
  background: var(--ink-2);
  transform: rotate(-45deg);
  pointer-events: none;
}

/* ---------- vista / toolbar ---------- */

#vista { padding: 1rem 1.25rem 4rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.toolbar .separa { width: 1px; height: 1.4rem; background: var(--line-forte); }

.toolbar label.rotulo {
  color: var(--ink-2);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.contagem { color: var(--ink-2); font-size: 0.75rem; margin-left: auto; white-space: nowrap; }

.legenda {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  color: var(--ink-2);
  font-size: 0.72rem;
  margin: 0.25rem 0 0.75rem;
}

/* ---------- tabela de ativos ---------- */

.rolagem { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface); box-shadow: var(--sombra-1); }

table.lista {
  width: 100%;
  border-collapse: collapse;
  min-width: 60rem;
}

.lista th, .lista td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.lista thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  font-size: 0.72rem;
  text-transform: none;
  color: var(--ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line-forte);
  white-space: nowrap;
}

.lista tbody tr.linha { cursor: pointer; transition: background var(--dur) var(--curva); }
.lista tbody tr.linha:hover { background: var(--surface-2); }

.lista tr.grupo td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.5rem 0.65rem 0.4rem;
  border-bottom: 1px solid var(--line-forte);
}

.lista tr.grupo .qtd { font-weight: 400; color: var(--ink-2); margin-left: 0.5rem; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

td.direita, th.direita { text-align: right; }

.nome-ativo { font-weight: 600; }

.ident {
  color: var(--ink-2);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.desc { color: var(--ink-2); font-size: 0.75rem; max-width: 26rem; }

.lista td .chip {
  max-width: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.lista td.c-desc { max-width: 19rem; }

.lista .c-desc .desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}

.chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 99px;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
}

.chip.watch { background: var(--accent-suave); border-color: var(--accent); color: var(--accent); }

.dispo { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; font-size: 0.75rem; }

.ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.ponto.sempre { background: var(--ok); }
.ponto.demanda { background: var(--demand); }
.ponto.indisponivel { background: var(--off); }
.ponto.na { background: var(--line-forte); }

.dispo .rotulo-dispo { color: var(--ink-2); }
.dispo.sempre .rotulo-dispo { color: var(--ok-texto); }
.dispo.demanda .rotulo-dispo { color: var(--demand-texto); }
.dispo.indisponivel .rotulo-dispo { color: var(--off-texto); }

.selo-prev {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--demand);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 0.2rem;
}

.botao-mais {
  border: 1px solid var(--line-forte);
  background: var(--surface);
  border-radius: var(--raio-p);
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 700;
}

.botao-mais:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-tinta); }

/* ---------- vazio ---------- */

.vazio {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
}

.vazio strong { display: block; color: var(--ink); font-size: 0.9375rem; margin-bottom: 0.35rem; }

/* ---------- drawer ---------- */

.pano {
  position: fixed;
  inset: 0;
  background: oklch(0.2 0.01 265 / 0.35);
  z-index: var(--z-pano);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--curva);
}

.pano.aberto { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(30rem, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--sombra-2);
  z-index: var(--z-drawer);
  transform: translateX(102%);
  transition: transform 220ms var(--curva);
  display: flex;
  flex-direction: column;
}

.drawer.aberto { transform: translateX(0); }

.drawer-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.drawer-cabeca h2 { font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; }

.drawer-cabeca .fecha { margin-left: auto; }

.drawer-corpo { overflow-y: auto; padding: 1rem 1.25rem 1.5rem; flex: 1; }

.drawer-pe {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.8rem; }

.formulario .cheio { grid-column: 1 / -1; }

.formulario label { display: block; }

.formulario label span.tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.2rem;
}

.formulario .campo, .formulario select.campo { width: 100%; }

.form-secao {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
  margin-top: 0.5rem;
}

/* ---------- diálogo ---------- */

dialog {
  margin: auto;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 1.25rem;
  width: min(24rem, 92vw);
  background: var(--surface);
  color: var(--ink);
}

dialog::backdrop { background: oklch(0.2 0.01 265 / 0.35); }

dialog h3 { font-size: 0.9375rem; margin-bottom: 0.75rem; }

dialog .linha-form { margin-bottom: 0.7rem; }

dialog .linha-form span.tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.2rem;
}

dialog .campo, dialog select.campo { width: 100%; }

dialog .acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ---------- toasts ---------- */

#toasts {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.toast {
  background: var(--ink);
  color: var(--surface);
  padding: 0.5rem 0.9rem;
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-2);
  font-size: 0.78rem;
  animation: toast-sobe 200ms var(--curva);
}

.toast.erro { background: var(--off); }

@keyframes toast-sobe {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- portfólios ---------- */

.leiaute-portfolios {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1rem;
  align-items: start;
}

.painel-portfolios {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.painel-portfolios .cabeca-painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-2);
}

.item-portfolio {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--curva);
}

.item-portfolio:last-child { border-bottom: 0; }
.item-portfolio:hover { background: var(--surface-2); }

.item-portfolio[aria-current="true"] {
  background: var(--accent-suave);
  box-shadow: inset 2px 0 0 var(--accent);
}

.item-portfolio .nome { font-weight: 600; display: block; }
.item-portfolio .meta { color: var(--ink-2); font-size: 0.72rem; }

.painel-carteira {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: 1rem 1.1rem 1.25rem;
  min-width: 0;
}

.cabeca-carteira {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: flex-end;
  margin-bottom: 0.9rem;
}

.cabeca-carteira .titulo-porto {
  font-size: 1.125rem;
  font-weight: 700;
  border: 1px dashed transparent;
  border-radius: var(--raio-p);
  padding: 0.1rem 0.3rem;
  margin-left: -0.3rem;
  min-width: 8rem;
}

.cabeca-carteira .titulo-porto:hover { border-color: var(--line-forte); }
.cabeca-carteira .titulo-porto:focus { border-color: var(--accent); outline: none; }

.bloco-capital label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.15rem;
}

.bloco-capital .campo { width: 10rem; text-align: right; font-variant-numeric: tabular-nums; }

.resumo-capital {
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  align-items: baseline;
}

.resumo-capital strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 0.9375rem; }

.resumo-capital .alerta { color: var(--off); font-weight: 600; }
.resumo-capital .ok-txt { color: var(--ok); font-weight: 600; }

table.aloc { width: 100%; border-collapse: collapse; min-width: 46rem; }

.aloc th, .aloc td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.aloc thead th {
  font-size: 0.72rem;
  color: var(--ink-2);
  font-weight: 600;
  border-bottom: 1px solid var(--line-forte);
  white-space: nowrap;
}

.aloc tr.grupo-aloc td {
  background: var(--surface-2);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem 0.3rem;
}

.aloc tr.grupo-aloc .num { font-weight: 600; }

.aloc .campo { width: 100%; }
.aloc .campo.valor, .aloc .campo.pct { text-align: right; font-variant-numeric: tabular-nums; }
.aloc td.c-valor { width: 8.5rem; }
.aloc td.c-pct { width: 6.5rem; }
.aloc .campo.pct { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.aloc td.c-trib { width: 5.5rem; }
.aloc td.c-liq { width: 4.5rem; }
.aloc td.c-classe { width: 8.5rem; }
.aloc td.c-classe .campo { font-size: 0.72rem; padding: 0.3rem 0.4rem; color: var(--ink-2); }
.aloc td.c-data { width: 8.6rem; }
.aloc .campo.data { font-size: 0.72rem; padding: 0.3rem 0.35rem; }
.aloc td.c-x { width: 2rem; text-align: center; }

.aloc tfoot td { font-weight: 700; border-top: 2px solid var(--line-forte); border-bottom: 0; padding-top: 0.55rem; }

.remover-aloc {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: var(--raio-p);
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
}

.remover-aloc:hover { background: var(--off-suave); color: var(--off); }

.adiciona-aloc { position: relative; margin-top: 0.75rem; display: flex; gap: 0.5rem; align-items: center; }

.sugestoes {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 0;
  width: min(30rem, 90vw);
  max-height: 18rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  z-index: var(--z-menu);
}

.sugestoes button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.sugestoes button:hover, .sugestoes button.ativo { background: var(--surface-2); }

.sugestoes .meta { color: var(--ink-2); font-size: 0.72rem; }







.delta-pos { color: var(--ok-texto); font-weight: 600; }
.delta-neg { color: var(--off-texto); font-weight: 600; }






.sub-secao { font-size: 0.9375rem; font-weight: 700; margin: 1.5rem 0 0.6rem; }


/* ---------- novos componentes ---------- */

.lista th.ordenavel { cursor: pointer; user-select: none; }
.lista th.ordenavel:hover { color: var(--ink); }

/* a lista rola dentro do próprio contêiner → o thead sticky fica sempre visível */
.rolagem-ativos { max-height: calc(100vh - 12.5rem); overflow: auto; }

.lista td.c-ativo { max-width: 46rem; }
.lista .c-ativo .ident { margin-left: 0.45rem; white-space: nowrap; }
.lista td:has(.dispo) { white-space: nowrap; }

.fav {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--line-forte);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.35rem 0 0;
  vertical-align: -1px;
}

.fav:hover { color: oklch(0.72 0.13 85); }
.fav.ativo { color: oklch(0.72 0.15 85); }

.filtro-fav[aria-pressed="true"] {
  background: oklch(0.95 0.06 85);
  border: 1px solid oklch(0.72 0.15 85);
  color: oklch(0.5 0.12 75);
}

tr.grupo { cursor: pointer; user-select: none; }
tr.grupo:hover td { background: var(--surface-3); }

.chevron {
  display: inline-block;
  width: 1.1em;
  color: var(--ink-2);
}

.cadeado { font-size: 0.85rem; }
.cadeado.na { color: var(--ink-3); font-size: 0.8125rem; }
.cadeado.fechado { filter: none; }

/* ---------- aba Classes ---------- */

.nota-classes {
  color: var(--ink-2);
  font-size: 0.78rem;
  max-width: 72ch;
  margin: -0.25rem 0 1rem;
}

.lista-classes {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.classe-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.classe-cabeca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  user-select: none;
}

.classe-cabeca:hover { background: var(--surface-2); }
.classe-item.aberta .classe-cabeca { background: var(--surface-2); border-bottom: 1px solid var(--line); }

.classe-nome {
  font-weight: 700;
  border: 1px dashed transparent;
  border-radius: var(--raio-p);
  padding: 0.05rem 0.3rem;
  cursor: text;
  user-select: text;
}

.classe-nome:hover, .sub-nome:hover { border-color: var(--line-forte); }
.classe-nome:focus, .sub-nome:focus { border-color: var(--accent); outline: none; background: var(--surface); }

.meta-classe { color: var(--ink-2); font-size: 0.72rem; margin-left: auto; white-space: nowrap; }

.acoes-classe {
  display: inline-flex;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity var(--dur) var(--curva);
}

.classe-cabeca:hover .acoes-classe,
.classe-cabeca:focus .acoes-classe,
.classe-cabeca:focus-within .acoes-classe { opacity: 1; }

.acoes-classe button {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: var(--raio-p);
}

.acoes-classe button:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.acoes-classe button:disabled { opacity: 0.3; cursor: default; }
.acoes-classe .excluir-classe:hover { color: var(--off); background: var(--off-suave); }

@media (prefers-reduced-motion: no-preference) {
  .classe-item.aberta .lista-sub { animation: abre-sub 160ms var(--curva); }
}

@keyframes abre-sub {
  from { opacity: 0; transform: translateY(-0.2rem); }
  to { opacity: 1; transform: none; }
}

.lista-sub { list-style: none; }

.lista-sub li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
}

.lista-sub li:last-child { border-bottom: 0; }

.sub-nome {
  border: 1px dashed transparent;
  border-radius: var(--raio-p);
  padding: 0.05rem 0.3rem;
}

.lista-sub .sem-sub { color: var(--ink-3); font-style: italic; }

.excluir-sub {
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--raio-p);
  width: 1.3rem;
  height: 1.3rem;
  line-height: 1;
}

.excluir-sub:hover { background: var(--off-suave); color: var(--off); }

.add-sub { gap: 0.4rem; }
.add-sub .campo { flex: 1; padding: 0.25rem 0.5rem; font-size: 0.75rem; }

/* ---------- portfólios em % / movimentações ---------- */

.chip-tipo {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.02rem 0.4rem;
}

.alerta-aloc {
  color: oklch(0.55 0.13 75);
  font-size: 0.9rem;
  cursor: help;
}

.nota-pct { color: var(--ink-3); font-size: 0.72rem; margin-left: 0.5rem; }

.aloc td.c-alerta { width: 1.6rem; text-align: center; }
.aloc td.c-valor-out { white-space: nowrap; }

.qtd-mov {
  font-weight: 400;
  color: var(--ink-2);
  font-size: 0.78rem;
  margin-left: 0.3rem;
}

.tabela-mov { min-width: 40rem; }
.tabela-mov td { font-size: 0.78rem; }
.tabela-mov .mov-dil { color: var(--ink-2); }
.tabela-mov .mov-obs { color: var(--ink-2); max-width: 14rem; }

.vazio-mov { color: var(--ink-2); font-size: 0.78rem; max-width: 64ch; }

#dlg-mov { width: min(28rem, 94vw); }

.par-campos { display: flex; gap: 0.6rem; }
.par-campos .campo { min-width: 0; }

.busca-mov { position: relative; }

.sugestoes-mov {
  bottom: auto;
  top: calc(100% + 0.25rem);
  width: 100%;
  max-height: 13rem;
}

.escolhido { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.escolhido .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.aviso-escolhido { color: oklch(0.5 0.13 75); font-size: 0.72rem; width: 100%; }

.nota-dlg { color: var(--ink-2); font-size: 0.75rem; margin: -0.25rem 0 0.75rem; }

.cabeca-modelos { border-top: 1px solid var(--line-forte); margin-top: 0.25rem; }

.toast-acao {
  border: 1px solid oklch(1 0 0 / 0.4);
  background: none;
  color: inherit;
  border-radius: var(--raio-p);
  padding: 0.1rem 0.55rem;
  margin-left: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.toast-acao:hover { background: oklch(1 0 0 / 0.15); }





/* ---------- proposta (impressão) ---------- */

#proposta { display: none; }

@media print {
  body.imprimindo > *:not(#proposta) { display: none !important; }

  body.imprimindo #proposta {
    display: block;
    font-family: 'Nexa', -apple-system, 'Segoe UI', sans-serif;
    color: #131a27;
    font-size: 10pt;
    line-height: 1.45;
  }

  body.imprimindo { background: #fff; }

  @page { size: A4; margin: 16mm 14mm; }

  #proposta .p-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 2.5pt solid #131a27;
    padding-bottom: 10pt;
    margin-bottom: 14pt;
  }

  #proposta .p-marca {
    display: flex;
    align-items: center;
    gap: 6pt;
    font-weight: 800;
    font-size: 13pt;
    letter-spacing: 0.06em;
  }

  #proposta .p-marca b { color: #d22a33; }

  #proposta .p-logo { width: 22pt; height: auto; }

  #proposta .p-titulo { text-align: right; }

  #proposta h1 {
    font-size: 17pt;
    font-weight: 800;
    color: #131a27;
    margin: 0;
  }

  #proposta .p-cliente { font-size: 12pt; font-weight: 700; color: #d22a33; }
  #proposta .p-data { font-size: 9pt; color: #555; }

  #proposta .p-resumo {
    display: flex;
    gap: 18pt;
    flex-wrap: wrap;
    background: #f4f5f7;
    border-radius: 4pt;
    padding: 8pt 12pt;
    margin-bottom: 14pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #proposta .p-resumo span { display: block; font-size: 7.5pt; color: #555; }
  #proposta .p-resumo strong { font-size: 11pt; font-variant-numeric: tabular-nums; }

  #proposta h2 {
    font-size: 11.5pt;
    font-weight: 700;
    color: #d22a33;
    margin: 14pt 0 6pt;
  }

  #proposta .p-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
  }

  #proposta .p-tabela th, #proposta .p-tabela td {
    text-align: left;
    padding: 3.5pt 5pt;
    border-bottom: 0.5pt solid #d5d7db;
    vertical-align: top;
  }

  #proposta .p-tabela th:nth-child(n+3), #proposta .p-tabela td:nth-child(n+3) { text-align: right; }
  #proposta .p-comp th:nth-child(n+2), #proposta .p-comp td:nth-child(n+2) { text-align: right; }

  #proposta .p-tabela thead th {
    border-bottom: 1pt solid #131a27;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #131a27;
  }

  #proposta .p-tabela tfoot td {
    border-top: 1pt solid #131a27;
    border-bottom: 0;
    font-weight: 700;
  }

  #proposta tr.p-grupo td {
    background: #eef0f3;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #proposta tr { break-inside: avoid; }

  #proposta .p-ident { display: block; font-size: 7pt; color: #777; }
  #proposta .p-conv { color: #555; font-weight: 400; }
  #proposta .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  #proposta .p-pos { color: #008f44; }
  #proposta .p-neg { color: #d22a33; }

  #proposta .p-rodape {
    margin-top: 18pt;
    padding-top: 8pt;
    border-top: 0.5pt solid #d5d7db;
    font-size: 7pt;
    color: #6b6b6b;
  }
}

/* ---------- responsivo ---------- */

@media (max-width: 900px) {
  .leiaute-portfolios { grid-template-columns: 1fr; }
  .campo-busca .campo { width: 100%; }
  #vista { padding: 0.75rem 0.75rem 4rem; }
}

@media (max-width: 700px) {
  .topo { flex-wrap: wrap; height: auto; padding: 0.5rem 0.75rem; gap: 0.4rem 0.9rem; }
  .marca .produto { display: none; }
  .topo-acoes { margin-left: 0; }
}

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


/* ---------- ícones / botão de tema ---------- */

.botao.icone-so { padding: 0.375rem 0.5rem; }
.botao.icone-so svg { display: block; }

.fav svg { vertical-align: -2px; }
.filtro-fav svg { vertical-align: -2px; margin-right: 0.15rem; }
.cadeado svg { vertical-align: -2px; }
.cadeado.fechado { color: var(--off-texto); }
.cadeado.aberto { color: var(--ink-3); }
.alerta-aloc { color: oklch(0.55 0.13 75); cursor: help; }
.alerta-aloc svg { vertical-align: -2px; }

.chip-gestora { background: var(--surface-3); border-color: var(--line-forte); color: var(--ink-2); }

.aloc td.c-pm { width: 7rem; }
.aloc .campo.pm { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- liquidez agregada ---------- */

.liquidez-bloco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: baseline;
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--raio-p);
  font-size: 0.75rem;
  color: var(--ink-2);
}

.liq-titulo { font-weight: 700; color: var(--ink); font-size: 0.72rem; }
.liq-item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.liq-sem b { color: var(--off-texto); }

/* ---------- lote (aplicar em vários portfólios) ---------- */

.lote-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  max-height: 7rem;
  overflow-y: auto;
  font-size: 0.78rem;
}

.lote-item { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

/* ---------- segmentado mini (evolução) ---------- */

.seg-mini { vertical-align: middle; margin: 0 0.5rem; }
.seg-mini button { padding: 0.15rem 0.5rem; font-size: 0.7rem; }
.sub-secao .botao { vertical-align: middle; }
.sub-secao .qtd-mov { vertical-align: middle; }

/* ---------- dashboard (Início) ---------- */

.grade-inicio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.8rem;
  align-items: start;
  max-width: 88rem;
}

.bloco-inicio {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: 0.85rem 1rem 1rem;
}

.bloco-inicio h3 {
  font-size: 0.9375rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bloco-largo { grid-column: 1 / -1; }

.numeros-inicio { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.numeros-inicio strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.numeros-inicio span { color: var(--ink-2); font-size: 0.75rem; }

.lista-inicio { list-style: none; }

.ev-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.8125rem;
}

.ev-item:last-child { border-bottom: 0; }
.ev-item:hover { background: var(--surface-2); }

.ev-ico { flex: 0 0 auto; display: inline-flex; }
.ev-abriu { color: var(--ok-texto); }
.ev-fechou { color: var(--off-texto); }
.ev-fav { color: oklch(0.72 0.15 85); }
.ev-novo { font-weight: 700; color: var(--accent); width: 14px; text-align: center; }
.ev-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-data { margin-left: auto; color: var(--ink-3); font-size: 0.72rem; white-space: nowrap; }

.tr-resumo { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.tr-resumo span { display: block; color: var(--ink-2); font-size: 0.72rem; }
.tr-resumo strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.tr-filtro { font-size: 0.75rem; padding: 0.25rem 0.5rem; font-weight: 400; }

/* ---------- paleta (Cmd+K) ---------- */

.paleta { width: min(34rem, 92vw); padding: 0.75rem; }
.paleta .campo { width: 100%; font-size: 0.9375rem; padding: 0.55rem 0.75rem; }
.paleta-resultados { position: static; margin-top: 0.5rem; box-shadow: none; border: 0; max-height: 20rem; width: 100%; }
.paleta-resultados:empty { display: none; }
.paleta-resultados button.ativo { background: var(--accent-suave); }

/* ---------- impressão do cardápio ---------- */

@media print {
  #proposta .p-cardapio { font-size: 7pt; }
  #proposta .p-cardapio th, #proposta .p-cardapio td { padding: 2.5pt 3.5pt; }
  #proposta .p-cardapio th:nth-child(-n+5), #proposta .p-cardapio td:nth-child(-n+5) { text-align: left; }
}

/* ---------- tema escuro ---------- */

:root[data-tema="escuro"] {
  --bg: oklch(0.185 0.012 265);
  --surface: oklch(0.225 0.012 265);
  --surface-2: oklch(0.265 0.013 265);
  --surface-3: oklch(0.31 0.014 265);
  --ink: oklch(0.93 0.006 260);
  --ink-2: oklch(0.73 0.01 260);
  --ink-3: oklch(0.58 0.01 260);
  --line: oklch(0.31 0.012 265);
  --line-forte: oklch(0.42 0.012 265);
  --accent: oklch(0.62 0.17 22);
  --accent-hover: oklch(0.68 0.17 22);
  --accent-tinta: oklch(0.15 0.01 265);
  --accent-suave: oklch(0.3 0.05 22);
  --ok: oklch(0.68 0.14 150);
  --ok-texto: oklch(0.75 0.13 150);
  --ok-suave: oklch(0.3 0.05 150);
  --demand: oklch(0.68 0.13 250);
  --demand-texto: oklch(0.75 0.11 250);
  --demand-suave: oklch(0.3 0.04 250);
  --off: oklch(0.66 0.18 25);
  --off-texto: oklch(0.74 0.15 25);
  --off-suave: oklch(0.3 0.05 25);
  --foco: oklch(0.62 0.17 22 / 0.45);
  --sombra-1: 0 1px 2px oklch(0 0 0 / 0.35);
  --sombra-2: 0 6px 20px oklch(0 0 0 / 0.5);
}

:root[data-tema="escuro"] .aba[aria-current="true"] { background: var(--ink); color: oklch(0.18 0.01 265); }
:root[data-tema="escuro"] .segmentado button[aria-pressed="true"] { background: var(--ink); color: oklch(0.18 0.01 265); }
:root[data-tema="escuro"] .toast { background: oklch(0.9 0.006 260); color: oklch(0.2 0.01 265); }
:root[data-tema="escuro"] .marca .quad { color: oklch(0.68 0.18 22); }
:root[data-tema="escuro"] .filtro-fav[aria-pressed="true"] {
  background: oklch(0.32 0.06 85);
  border-color: oklch(0.6 0.12 85);
  color: oklch(0.85 0.1 85);
}
:root[data-tema="escuro"] .fav.ativo, :root[data-tema="escuro"] .ev-fav { color: oklch(0.8 0.14 85); }
:root[data-tema="escuro"] .alerta-aloc { color: oklch(0.75 0.12 75); }
:root[data-tema="escuro"] .aviso-escolhido { color: oklch(0.75 0.12 75); }
:root[data-tema="escuro"] .item-portfolio[aria-current="true"] { background: var(--accent-suave); }

.tr-sub { display: block; font-style: normal; color: var(--ink-3); font-size: 0.68rem; }

.tr-multi { color: var(--ink-3); cursor: help; }


/* ---------- revisão 2026-08-08: filtros, evolução, cnpj, paginação ---------- */

.filtros-envelope { position: relative; }

.filtros-badge {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-tinta);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.popover-filtros {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: var(--z-menu);
  background: var(--surface);
  border: 1px solid var(--line-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 14rem;
}

.popover-filtros label .tag {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.15rem;
}

.popover-filtros .campo { width: 100%; }
.popover-filtros .linha-watch { padding-top: 0.15rem; }

.campo.campo-invalido {
  border-color: var(--off);
  background: var(--off-suave);
}

.dica-tecla {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 0.62rem;
  color: var(--ink-3);
  border: 1px solid var(--line-forte);
  border-radius: 3px;
  padding: 0 0.28rem;
  pointer-events: none;
  background: var(--surface);
}

.evo-delta { font-size: 0.55rem; vertical-align: 1px; cursor: help; }

.th-snap { position: relative; white-space: nowrap; }

.x-snap {
  opacity: 0;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.7rem;
  vertical-align: 1px;
  transition: opacity var(--dur) var(--curva);
}

.th-snap:hover .x-snap, .x-snap:focus-visible { opacity: 1; }

.mostrar-mais { margin-top: 0.4rem; }

.tr-acoes { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }

.alerta-sugestao {
  font-size: 0.68rem;
  color: oklch(0.5 0.13 75);
  margin-left: 0.3rem;
}

.alerta-sugestao svg { width: 11px; height: 11px; vertical-align: -1px; }

.ev-removido { font-weight: 700; color: var(--ink-3); width: 14px; text-align: center; }

:root[data-tema="escuro"] .alerta-sugestao { color: oklch(0.75 0.12 75); }
:root[data-tema="escuro"] .dica-tecla { background: var(--surface-2); }


/* ---------- liquidez como posição visível ---------- */

.aloc tr.linha-liquidez td {
  color: var(--ink-2);
  font-style: italic;
  border-top: 0;
  padding-top: 0.2rem;
}

/* ---------- sidebar de portfólios: filtro ---------- */

.filtro-portfolios { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
.filtro-portfolios .campo { width: 100%; font-size: 0.78rem; padding: 0.3rem 0.5rem; }

/* ---------- toolbar: menu "mais" ---------- */

.popover-mais { display: flex; flex-direction: column; gap: 0.25rem; min-width: 14rem; }
.popover-mais .botao { justify-content: flex-start; }

/* ---------- evolução: navegação da janela ---------- */

.evo-nav { display: inline-flex; align-items: center; gap: 0.2rem; vertical-align: middle; margin-left: 0.4rem; }
.evo-nav .botao { padding: 0.1rem 0.5rem; font-size: 0.85rem; }

/* ---------- ativos reserva ---------- */

.chip.reserva { background: var(--surface-3); border-color: var(--line-forte); color: var(--ink-2); }
.reserva-ocultos { color: var(--ink-3); }

/* ---------- fechamento de mês na Evolução ---------- */

.snap-mensal {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--demand-texto);
  background: var(--demand-suave);
  border-radius: 3px;
  padding: 0 0.3rem;
  vertical-align: middle;
}

/* ---------- modelos vinculados ---------- */

.chip.chip-vinculo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--demand-suave);
  border-color: var(--demand);
  color: var(--demand-texto);
  vertical-align: middle;
}

.faixa-vinculo {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--demand);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--demand-suave);
  color: var(--ink);
  font-size: 0.8rem;
}

.faixa-vinculo .faixa-ico { color: var(--demand-texto); margin-top: 0.15rem; flex: none; }
.faixa-vinculo .faixa-texto { flex: 1; min-width: 0; }
.faixa-vinculo .faixa-nota { display: block; color: var(--ink-2); font-size: 0.72rem; margin-top: 0.15rem; }
.faixa-vinculo .botao { flex: none; align-self: center; }
.faixa-vinculo.faixa-modelo { border-color: var(--accent); background: var(--accent-suave); }
.faixa-vinculo.faixa-modelo .faixa-ico { color: var(--accent); }

.link-porto {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aloc tr.vinculada td { background: color-mix(in oklab, var(--demand-suave) 45%, transparent); }
.aloc tr.vinculada .campo[readonly], .aloc tr.vinculada .campo:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
  cursor: not-allowed;
}
.aloc tr.vinculada .campo.pct[readonly] { color: var(--ink); font-weight: 700; }
.trava-vinc { color: var(--demand-texto); display: inline-flex; padding: 0.2rem 0.35rem; }

/* ---------- CNPJ único + versões extras ---------- */

.bloco-cnpjs > .tag { display: block; margin-bottom: 0.25rem; }
.linha-cnpj { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 1.6rem; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; }
.linha-cnpj .remover-aloc { justify-self: center; }
#b-mais-cnpj { padding-left: 0.4rem; padding-right: 0.5rem; }