/* =========================================================================
   Carteira — extrato impresso, em tela.
   Estrutura por fios de 1px; dinheiro em serifa transicional com numerais
   tabulares; cor reservada para sinal (alta/baixa) e ação primária.
   ========================================================================= */

:root {
  --paper: #f7f7f3;
  --raised: #ffffff;
  --sunken: #f1f1ec;
  --ink: #14181c;
  --ink-soft: #565d65;
  --ink-faint: #878d94;
  --rule: #e2e2da;
  --rule-strong: #c8c8bd;
  --pine: #1e4b44;
  --pine-deep: #163833;
  --pine-wash: #e8efec;
  --up: #17654a;
  --down: #a33528;
  --amber: #7d6218;
  --amber-wash: #f6f1e0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shell: 74rem;
  --shell-wide: 120rem;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.3125rem; line-height: 1.25; }
h3 { font-size: 1.0625rem; }
p { margin: 0; }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pine-deep); }

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

.shell { width: min(var(--shell), 100% - 2.5rem); margin-inline: auto; }

/* Texto corrido continua estreito, porque linha longa cansa de ler. Já uma
   tabela de dados quer largura: com o contêiner travado, dar zoom out só
   aumentava a margem e a tabela rolava do mesmo jeito. Assim, sobrando espaço
   na tela — inclusive por zoom out —, mais colunas aparecem sem rolagem. */
.shell-wide { width: min(var(--shell-wide), 100% - 2.5rem); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--pine); color: #fff; padding: .625rem 1rem; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-soft); }

/* ---------------------------------------------------------------- cabeçalho */
.masthead { border-bottom: 1px solid var(--rule); background: var(--raised); }
.masthead-inner {
  display: flex; align-items: center; gap: 1.75rem;
  min-height: 4rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--serif); font-size: 1.1875rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.015em;
}
.mark { width: 1.125rem; height: 1.125rem; color: var(--pine); }

.nav { display: flex; gap: 1.5rem; margin-right: auto; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .9375rem;
  padding: 1.25rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pine); }

.masthead-actions { display: flex; align-items: center; gap: .75rem; }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--pine-wash); color: var(--pine-deep);
  font-size: .8125rem; font-weight: 600; border: 1px solid var(--rule);
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .625rem); z-index: 20;
  min-width: 15rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: 0 12px 28px -18px rgba(20, 24, 28, .45);
  padding: .375rem;
}
.menu-id {
  font-size: .8125rem; color: var(--ink-faint);
  padding: .5rem .625rem; border-bottom: 1px solid var(--rule); margin-bottom: .25rem;
  overflow-wrap: anywhere;
}
.menu-panel a, .menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .625rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: inherit; font-size: .9375rem;
  text-decoration: none; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--sunken); }

/* ------------------------------------------------------------ personificação */
.impersonation {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap;
  background: var(--amber-wash); border-bottom: 1px solid #e4dcc0;
  padding: .5rem 1.25rem; font-size: .875rem; color: var(--amber);
}
.impersonation strong { color: #5f4a10; }

/* -------------------------------------------------------------------- flashes */
.flash-stack { margin-top: 1.25rem; display: grid; gap: .5rem; }
.flash {
  border: 1px solid var(--rule); border-left: 3px solid var(--pine);
  background: var(--raised); border-radius: var(--r-sm);
  padding: .6875rem .875rem; font-size: .9375rem;
}
.flash-error { border-left-color: var(--down); }
.flash-warning { border-left-color: var(--amber); }

/* -------------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  font: inherit; font-size: .9375rem; line-height: 1;
  padding: .625rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--rule-strong); background: var(--raised); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--sunken); color: var(--ink); }
.btn-sm { padding: .4375rem .75rem; font-size: .875rem; }
.btn-primary { background: var(--pine); border-color: var(--pine); color: #fff; }
.btn-primary:hover { background: var(--pine-deep); border-color: var(--pine-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(20, 24, 28, .06); color: inherit; }
.btn-danger { color: var(--down); border-color: #e0c5c0; }
.btn-danger:hover { background: #fbf0ee; }

/* --------------------------------------------------------------- data picker */
.timeline {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
}
.timeline label { font-size: .8125rem; color: var(--ink-soft); display: block; margin-bottom: .3125rem; }
input[type="date"] {
  font: inherit; font-size: .9375rem; color: var(--ink);
  padding: .5rem .625rem; border: 1px solid var(--rule-strong);
  border-radius: var(--r-md); background: var(--raised);
}

/* ================================================================== POSIÇÃO */
.statement { padding: 3rem 0 1rem; }

.statement-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.statement-head p { color: var(--ink-soft); font-size: .9375rem; }

.balance { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.balance-label { font-size: .875rem; color: var(--ink-soft); margin-bottom: .25rem; }
.balance-figure {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0;
}
.balance-note { margin-top: .75rem; color: var(--ink-soft); font-size: .9375rem; max-width: 46ch; }
.balance-note .num { font-size: 1rem; }

.ledger-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule); margin-top: 2rem;
}
.ledger-cell {
  padding: 1.125rem 1.25rem 1.125rem 0;
  border-right: 1px solid var(--rule);
}
.ledger-cell:last-child { border-right: 0; }
.ledger-cell + .ledger-cell { padding-left: 1.25rem; }
.ledger-cell dt { font-size: .8125rem; color: var(--ink-soft); margin-bottom: .25rem; }
.ledger-cell dd { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; }
.ledger-cell small { display: block; font-family: var(--sans); font-size: .8125rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; margin-top: .125rem; }

.toggle-figure {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: inline-flex; align-items: baseline; gap: .5rem;
  border-bottom: 1px dashed var(--rule-strong);
}
.toggle-figure:hover { border-bottom-color: var(--ink-soft); }
.toggle-hint { font-family: var(--sans); font-size: .75rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- seções */
.section { padding: 2.5rem 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: .625rem; margin-bottom: 1.25rem;
}
.section-head p { color: var(--ink-soft); font-size: .875rem; }

.split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 62rem) { .split { grid-template-columns: 1fr; } }

/* barras de composição */
.allocation { display: grid; gap: 1rem; }
.allocation-row { display: grid; gap: .375rem; }
.allocation-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9375rem; }
.allocation-top strong { font-weight: 500; }
.allocation-value { font-family: var(--serif); font-size: 1.0625rem; }
.track { height: .5rem; background: var(--sunken); border-radius: 999px; overflow: hidden; }
.track span { display: block; height: 100%; background: var(--pine); border-radius: 999px; width: 0; }
.track span[data-tone="2"] { background: #4c7c6f; }
.track span[data-tone="3"] { background: #7fa397; }
.track span[data-tone="4"] { background: #a9c2b9; }
.track span[data-tone="5"] { background: #c8d6d0; }
.track span[data-tone="6"] { background: #7d6218; }
.track span[data-tone="7"] { background: #b19246; }
.track span[data-tone="8"] { background: #a33528; }
.track span[data-tone="9"] { background: #c4746a; }

/* =================================================================== TABELAS */
.table-wrap {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
thead th {
  text-align: left; font-weight: 500; font-size: .8125rem; color: var(--ink-soft);
  padding: .75rem .875rem; border-bottom: 1px solid var(--rule-strong);
  background: var(--raised); white-space: nowrap; position: sticky; top: 0;
}
tbody td { padding: .8125rem .875rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.numeric { text-align: right; font-family: var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.numeric { font-family: var(--sans); }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--ink); }
th[data-sort]::after { content: "↕"; margin-left: .375rem; opacity: .3; font-size: .75rem; }
th[data-sort][aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
th[data-sort][aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* linha agregada expansível */
.position-row > td { background: var(--raised); }
.position-row.is-open > td { background: var(--sunken); }
.disclosure {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.disclosure .chevron {
  width: .5rem; height: .5rem; border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint); transform: rotate(-45deg);
  transition: transform .18s ease; flex: none;
}
.position-row.is-open .chevron { transform: rotate(45deg); }
.ticker { font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.sub { display: block; font-size: .78125rem; color: var(--ink-faint); font-family: var(--sans); font-weight: 400; }

.entries-row > td { padding: 0; background: var(--sunken); }
.entries { padding: .25rem 0 .75rem 2.25rem; }
.entries table { font-size: .875rem; }
.entries thead th { background: transparent; border-bottom: 1px solid var(--rule); position: static; }
.entries tbody td { border-bottom: 1px dotted var(--rule); }
.entries tbody tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-block; padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; border: 1px solid var(--rule-strong); color: var(--ink-soft);
  white-space: nowrap;
}
.pill-fixed { background: var(--pine-wash); border-color: #cfdfd9; color: var(--pine-deep); }
.pill-soon { background: #f6ece9; border-color: #e5c9c3; color: var(--down); }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filters select {
  font: inherit; font-size: .9375rem; padding: .5rem .625rem;
  border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--raised); color: var(--ink);
}
.filters label { display: block; font-size: .8125rem; color: var(--ink-soft); margin-bottom: .3125rem; }

/* ==================================================================== VAZIO */
.empty {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
  background: var(--raised); padding: 2.5rem 2rem; text-align: center;
}
.empty h2 { margin-bottom: .5rem; }
.empty p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 1.25rem; }

.notice {
  border: 1px solid #e4dcc0; background: var(--amber-wash); color: var(--amber);
  border-radius: var(--r-sm); padding: .625rem .875rem; font-size: .875rem;
}

/* ================================================================ FORMULÁRIO */
.form-page { padding: 2.5rem 0 4rem; }
.form-card {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 1.75rem;
}
.fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
.fieldset:last-of-type { margin-bottom: 1rem; }
.fieldset legend {
  font-family: var(--serif); font-size: 1.0625rem; font-weight: 600;
  padding: 0 0 .625rem; margin-bottom: 1rem; width: 100%;
  border-bottom: 1px solid var(--rule);
}
.grid { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.field { display: grid; gap: .375rem; align-content: start; }
.field label { font-size: .875rem; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field select, .field textarea {
  font: inherit; font-size: .9375rem; color: var(--ink); width: 100%;
  padding: .5625rem .6875rem; background: var(--raised);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
}
.field input:focus, .field select:focus { border-color: var(--pine); }
.field .help { font-size: .8125rem; color: var(--ink-faint); }
.field .error { font-size: .8125rem; color: var(--down); }
.field.has-error input, .field.has-error select { border-color: var(--down); }
.check { display: flex; align-items: flex-start; gap: .5rem; }
.check input { margin-top: .25rem; accent-color: var(--pine); }
.check label { color: var(--ink); font-size: .9375rem; }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; padding-top: .5rem; }
.form-actions .spacer { margin-left: auto; }
[hidden] { display: none !important; }

/* =================================================================== ACESSO */
.gate {
  min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 56rem) { .gate { grid-template-columns: 1fr; } }

.gate-aside {
  background: var(--pine-deep); color: #e9efec;
  padding: 3.5rem clamp(2rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
}
@media (max-width: 56rem) { .gate-aside { display: none; } }
.gate-aside .wordmark { color: #fff; }
.gate-aside .mark { color: #8fc4b0; }
.gate-quote { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.25; letter-spacing: -0.02em; max-width: 20ch; color: #fff; }
.gate-aside dl { display: grid; gap: 1.25rem; margin: 0; }
.gate-aside dt { font-size: .8125rem; color: #9db8ae; margin-bottom: .125rem; }
.gate-aside dd { margin: 0; font-size: .9375rem; color: #dfeae5; max-width: 34ch; }

.gate-main {
  display: grid; place-items: center; padding: 3rem 1.5rem;
}
.gate-form { width: min(24rem, 100%); }
.gate-form h1 { font-size: 1.875rem; margin-bottom: .375rem; }
.gate-form > p { color: var(--ink-soft); margin-bottom: 1.75rem; }
.gate-form .field + .field { margin-top: 1rem; }
.gate-form .btn { width: 100%; margin-top: 1.5rem; padding-block: .75rem; }
.gate-alt { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-soft); text-align: center; }
.form-error {
  border: 1px solid #e0c5c0; background: #fbf0ee; color: var(--down);
  border-radius: var(--r-sm); padding: .625rem .75rem; font-size: .875rem; margin-bottom: 1.25rem;
}

/* ================================================================= GRÁFICOS */
.charts {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  /* Cada cartão fica com a altura que precisa; esticar todos até o mais alto
     deixa vazios grandes embaixo dos menores. */
  align-items: start;
}
.chart-card {
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 1.25rem 1.375rem 1.375rem;
}
.chart-card h3 { margin-bottom: .125rem; }
.chart-card .chart-sub { font-size: .8125rem; color: var(--ink-faint); margin-bottom: 1rem; }
.chart-body { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.chart-body svg { flex: none; }
/* A legenda precisa de largura para o nome caber numa linha. Quando não
   sobra espaço ao lado da rosca, ela quebra para baixo e usa o cartão todo. */
.legend {
  display: grid; gap: .4375rem; font-size: .8125rem;
  flex: 1 1 13rem; min-width: 13rem;
}
.legend-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: .5rem;
}
.swatch { width: .625rem; height: .625rem; border-radius: 2px; flex: none; margin-top: .25rem; }
/* Nome de categoria nunca é cortado: "ETF Nacional · renda fixa" e
   "ETF Nacional · renda variável" viram a mesma coisa com reticências. */
.legend-name { color: var(--ink-soft); overflow-wrap: anywhere; }
.legend-share { font-family: var(--serif); color: var(--ink); }
.chart-empty { color: var(--ink-faint); font-size: .875rem; padding: 1.5rem 0; }

/* ==================================================================== RODAPÉ */
.footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.75rem 0 2.5rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer p { font-size: .8125rem; color: var(--ink-faint); }

/* ================================================================ LISTA ADMIN */
.people { display: grid; gap: .5rem; }
.person {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--raised); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: .875rem 1rem;
}
.person .who { margin-right: auto; }
.person .who strong { font-weight: 500; }
.person .who span { display: block; font-size: .8125rem; color: var(--ink-faint); }

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

@media (max-width: 46rem) {
  .nav { gap: 1rem; font-size: .875rem; overflow-x: auto; }
  .nav a { padding: 1rem 0; }
  .masthead-inner { gap: 1rem; }
  .ledger-cell, .ledger-cell + .ledger-cell { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ledger-strip { border-top: 1px solid var(--rule); }
}

@media print {
  .masthead, .footer, .timeline, .btn, .filters { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------------- ajustes finos de tabela */
#positions-table td:first-child,
#positions-table th:first-child { min-width: 15rem; }
#positions-table td:nth-child(2),
#analysis-table td:nth-child(4) { white-space: nowrap; }

.table-dense td, .table-dense th { white-space: nowrap; }
.table-dense td:first-child { min-width: 10rem; white-space: normal; }

tfoot td {
  border-top: 1px solid var(--rule-strong); background: var(--raised);
  padding: .8125rem .875rem;
}
tfoot strong { font-weight: 600; }
tfoot .numeric { font-family: var(--serif); }

.subhead { margin-top: 2rem; }
.subhead h3 { font-size: 1rem; }
.allocation + .subhead { margin-top: 2.25rem; }

/* -------------------------------------------------- aviso com ação embutida */
.callout {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: var(--raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--pine); border-radius: var(--r-md);
  padding: 1.125rem 1.25rem; margin: 1.75rem 0 0;
}
.callout h3 { font-size: 1rem; margin-bottom: .1875rem; }
.callout p { font-size: .875rem; color: var(--ink-soft); max-width: 58ch; }
.callout form { flex: none; }
.callout-quiet { border-left-color: var(--amber); }

/* ---------------------------------------------------- autocompletar simples */
.field { position: relative; }
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin: .25rem 0 0; padding: .25rem; list-style: none;
  background: var(--raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px -18px rgba(20, 24, 28, .5);
  max-height: 14rem; overflow-y: auto;
}
.suggest li {
  padding: .4375rem .625rem; border-radius: var(--r-sm);
  font-size: .875rem; cursor: pointer;
}
.suggest li:hover, .suggest li.is-active { background: var(--pine-wash); }

/* ------------------------------------------------------ saídas do lançamento */
.danger-zone {
  margin-top: 2rem; background: var(--raised);
  border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1.5rem 1.75rem;
}
.danger-zone h2 { font-size: 1.125rem; }
.danger-zone > p { font-size: .875rem; margin-bottom: 1.25rem; }
.danger-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.danger-row p { font-size: .875rem; max-width: 56ch; margin-top: .125rem; }
.danger-row form { flex: none; }

/* ----------------------------------------------------------- linha arquivada */
.archived-row td { color: var(--ink-faint); background: var(--sunken); }
.archived-row .ticker { color: var(--ink-soft); }
.pill-archived { background: var(--sunken); border-color: var(--rule-strong); }

/* --------------------------------------------------------- saldo em dólar */
.balance-usd {
  margin-top: .5rem; font-size: .875rem; color: var(--ink-soft);
}
.balance-usd .num { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink); }

.cur-tag {
  display: inline-block; margin-left: .3125rem; font-family: var(--sans);
  font-size: .6875rem; color: var(--ink-faint); vertical-align: .05em;
}

/* ------------------------------------------- barras empilhadas por prazo */
.chart-wide { grid-column: 1 / -1; }
.chart-body-block { display: block; }
.legend-inline {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: .75rem; min-width: 0;
}
.legend-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8125rem; color: var(--ink-soft);
}

/* Papel fixo ao rolar a tabela larga na horizontal */
#positions-table td:first-child,
#positions-table th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--raised); border-right: 1px solid var(--rule);
}
#positions-table thead th:first-child { z-index: 3; }
#positions-table .position-row.is-open td:first-child { background: var(--sunken); }
#positions-table tfoot td:first-child { background: var(--raised); }

/* ------------------------------------------ aviso de coleta em andamento */
.live-bar {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: .625rem;
  background: var(--ink); color: #f2f4f3;
  padding: .625rem 1rem; border-radius: 999px;
  font-size: .875rem; box-shadow: 0 14px 34px -18px rgba(20, 24, 28, .75);
  max-width: calc(100% - 2rem);
}
.live-bar.is-done { background: var(--pine-deep); }
.live-bar.is-idle { background: var(--amber); }
.live-bar.is-leaving { opacity: 0; transition: opacity .35s ease; }

.live-spinner {
  width: .875rem; height: .875rem; flex: none;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff; border-radius: 50%;
  animation: live-spin .7s linear infinite;
}
@keyframes live-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .live-spinner { animation: none; border-top-color: rgba(255, 255, 255, .8); }
}

/* ------------------------------------------- cotação a caminho, por papel */
.fetching {
  display: inline-flex; align-items: center; gap: .375rem;
  font-family: var(--sans); font-size: .8125rem; color: var(--ink-faint);
  white-space: nowrap;
}
.fetching-dot {
  width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--pine); flex: none;
  animation: fetch-pulse 1.1s ease-in-out infinite;
}
@keyframes fetch-pulse {
  0%, 100% { opacity: .25; transform: scale(.75); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fetching-dot { animation: none; opacity: .7; }
}

/* =========================================================================
   Celular: tabelas viram fichas.
   Uma tabela de 12 colunas não cabe em 390px, e rolar na horizontal esconde
   justamente os números. Cada linha vira uma ficha com rótulo à esquerda e
   valor à direita — a mesma informação, na vertical.
   ========================================================================= */
@media (max-width: 52rem) {
  .table-wrap { border: 0; background: none; overflow-x: visible; }

  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tfoot,
  .table-wrap tr,
  .table-wrap td { display: block; width: auto; }

  .table-wrap thead { display: none; }

  .table-wrap tbody tr:not(.entries-row) {
    background: var(--raised); border: 1px solid var(--rule);
    border-radius: var(--r-md); padding: .25rem .875rem .5rem;
    margin-bottom: .625rem;
  }

  .table-wrap tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .4375rem 0; border-bottom: 1px solid var(--rule);
    text-align: left;
  }
  .table-wrap tbody td:last-child { border-bottom: 0; }

  .table-wrap tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--sans); font-size: .8125rem; color: var(--ink-soft);
    font-weight: 400; flex: none;
  }

  /* A primeira célula é o título da ficha: sem rótulo, largura toda. */
  .table-wrap tbody td:first-child {
    display: block; padding: .625rem 0 .5rem;
    border-bottom: 1px solid var(--rule-strong);
  }
  .table-wrap tbody td:first-child::before { content: none; }

  .table-wrap .numeric { text-align: right; white-space: normal; }
  /* No corpo da ficha o detalhe fica ao lado do número; no título da ficha
     ele desce para a linha de baixo. */
  .table-wrap tbody td .sub { display: inline; margin-left: .375rem; }
  .table-wrap tbody td:first-child .sub { display: block; margin-left: 0; }
  .table-wrap tbody td:first-child .disclosure { width: 100%; align-items: flex-start; }
  .table-wrap tbody td:first-child .chevron { margin-top: .375rem; }

  /* A primeira coluna deixa de ser fixa: não há rolagem horizontal. */
  #positions-table td:first-child,
  #positions-table th:first-child { position: static; border-right: 0; }

  /* Lançamentos individuais, dentro da ficha. */
  .entries-row > td { padding: 0; background: none; }
  .entries { padding: 0 0 .5rem; }
  .entries table, .entries tbody, .entries tr, .entries td { display: block; }
  .entries thead { display: none; }
  .entries tbody tr {
    border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
    padding: .25rem .625rem; margin-top: .5rem; background: var(--raised);
  }
  .entries tbody td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .3125rem 0; border-bottom: 1px dotted var(--rule);
  }
  .entries tbody td::before {
    content: attr(data-label); color: var(--ink-faint); font-size: .78125rem;
  }

  .table-wrap tfoot tr {
    background: var(--sunken); border: 1px solid var(--rule-strong);
    border-radius: var(--r-md); padding: .25rem .875rem .5rem;
  }
  .table-wrap tfoot td:empty { display: none; }
  .table-wrap tfoot td:first-child { border-bottom: 1px solid var(--rule-strong); }

  /* A tabela da análise tem 16 colunas: continua rolando, com aviso. */
  #analysis-table { display: table; }
  #analysis-table thead { display: table-header-group; }
  #analysis-table tbody { display: table-row-group; }
  #analysis-table tfoot { display: table-footer-group; }
  #analysis-table tr { display: table-row; }
  #analysis-table td, #analysis-table th { display: table-cell; }
  #analysis-table td::before { content: none; }
  .table-wrap:has(#analysis-table) {
    overflow-x: auto; border: 1px solid var(--rule);
    background: var(--raised); border-radius: var(--r-md);
  }
}

/* Cabeçalho e filtros em telas estreitas */
@media (max-width: 46rem) {
  .shell, .shell-wide { width: min(var(--shell), 100% - 1.75rem); }
  .masthead-inner { flex-wrap: wrap; gap: .5rem 1rem; padding-block: .625rem; }
  .wordmark { order: 1; }
  .masthead-actions { order: 2; margin-left: auto; }
  .nav {
    order: 3; width: 100%; margin: 0; gap: 1.25rem;
    border-top: 1px solid var(--rule);
  }
  .nav a { padding: .625rem 0; font-size: .9375rem; }

  .statement { padding: 1.75rem 0 .5rem; }
  .statement-head { gap: 1rem; }
  .timeline, .filters { width: 100%; }
  .filters > div { flex: 1 1 9rem; }
  .filters .btn, .timeline .btn { flex: none; }
  input[type="date"], .filters select { width: 100%; }

  .section { padding: 1.75rem 0; }
  .form-card { padding: 1.125rem; }
  .danger-zone { padding: 1.125rem; }
  .danger-row { align-items: flex-start; }
  .callout { flex-direction: column; align-items: flex-start; gap: .875rem; }
  .callout form, .callout .btn { width: 100%; }
  .chart-body { justify-content: center; }
  .live-bar { left: 1rem; right: 1rem; transform: none; justify-content: center; }
}

.callout h3 .fetching-dot { display: inline-block; margin-right: .4375rem; }

/* ==================================================== metas de alocação */
.verdict {
  display: inline-block; margin-top: .3125rem;
  padding: .0625rem .4375rem; border-radius: 999px;
  font-family: var(--sans); font-size: .6875rem; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
}
.verdict-buy    { background: var(--pine-wash); color: var(--pine-deep); border-color: #cfdfd9; }
.verdict-reduce { background: #f6ece9; color: var(--down); border-color: #e5c9c3; }
.verdict-hold   { background: var(--sunken); color: var(--ink-soft); border-color: var(--rule-strong); }
.verdict-none   { background: transparent; color: var(--ink-faint); border-color: var(--rule); }

.verdict-panel {
  background: var(--raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--pine); border-radius: var(--r-md);
  padding: 1.25rem 1.375rem; margin-bottom: 1.5rem;
}
.verdict-panel.is-aligned { border-left-color: var(--rule-strong); }
.verdict-panel h2 { font-size: 1.0625rem; margin-bottom: .1875rem; }
.verdict-panel > p { font-size: .875rem; }

.buy-list { list-style: none; margin: 1rem 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.buy-list li {
  display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto;
  align-items: baseline; gap: .75rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.buy-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.buy-name { font-family: var(--serif); font-size: 1rem; font-weight: 600; }
.buy-gap { font-size: .8125rem; color: var(--ink-soft); }
.buy-amount { font-size: 1.0625rem; }

.tree-label { display: block; }
/* A árvore da calculadora tem um nível a mais que a de metas, por causa do
   desdobramento do ETF. Faltando uma classe, a linha volta para a margem e
   parece estar no topo da hierarquia. */
.indent-0 { padding-left: 0; }
.indent-1 { padding-left: 1.25rem; }
.indent-2 { padding-left: 2.5rem; }
.indent-3 { padding-left: 3.75rem; }
.indent-4 { padding-left: 5rem; }

.target-row.level-1 td { background: var(--sunken); }
.target-row.level-1 .tree-label { font-family: var(--serif); font-weight: 600; }
.target-row.level-3 .tree-label,
.target-row.level-4 .tree-label { color: var(--ink-soft); }

/* Um fio ligando a linha ao grupo que a contém, para a profundidade ficar
   legível mesmo quando o recuo é pequeno. */
.tree-label[class*="indent-"]:not(.indent-0) { position: relative; }
.indent-1::before, .indent-2::before,
.indent-3::before, .indent-4::before {
  content: ""; position: absolute; top: -.4rem; bottom: -.4rem;
  border-left: 1px solid var(--rule);
}
.indent-1::before { left: .375rem; }
.indent-2::before { left: 1.625rem; }
.indent-3::before { left: 2.875rem; }
.indent-4::before { left: 4.125rem; }

.weight-input {
  font: inherit; font-size: .875rem; width: 5.5rem; text-align: right;
  padding: .3125rem .5rem; border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); background: var(--raised); color: var(--ink);
}
.weight-input:focus { border-color: var(--pine); }

@media (max-width: 52rem) {
  .indent-1, .indent-2, .indent-3, .indent-4 { padding-left: 0; }
  .indent-1::before, .indent-2::before,
  .indent-3::before, .indent-4::before { display: none; }
  .target-row.level-2 td:first-child::after { content: " · tipo"; color: var(--ink-faint); font-size: .75rem; }
  .target-row.level-3 td:first-child::after { content: " · papel"; color: var(--ink-faint); font-size: .75rem; }
  .target-row.level-4 td:first-child::after { content: " · papel"; color: var(--ink-faint); font-size: .75rem; }
  .weight-input { width: 6.5rem; }
  .buy-list li { grid-template-columns: 1fr auto; }
  .buy-gap { grid-column: 1 / -1; }
}

/* ------------------------------------------ legenda da escala de desvio */
.color-key {
  display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap;
  background: var(--raised); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: .75rem 1rem; margin-bottom: 1.25rem;
  font-size: .8125rem; color: var(--ink-soft);
}
.color-key ul {
  display: flex; gap: 1rem; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.color-key li { display: inline-flex; align-items: center; gap: .375rem; }
.key-dot { width: .75rem; height: .75rem; border-radius: 2px; flex: none; }
.key-below { background: rgb(27, 107, 74); }
.key-on    { background: rgb(201, 162, 39); }
.key-above { background: rgb(163, 53, 40); }

.legend-target {
  display: block; font-size: .6875rem; color: var(--ink-faint);
}

/* =========================================================================
   Modo privado: o olho do cabeçalho borra os valores.
   Só números e dinheiro entram no borrão — rótulos, papéis e navegação
   continuam legíveis, senão a tela vira uma mancha e perde a utilidade.
   ========================================================================= */
.icon-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border: 1px solid var(--rule); border-radius: 50%;
  background: var(--raised); color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); background: var(--sunken); }
.icon-btn svg { width: 1.0625rem; height: 1.0625rem; }
.icon-btn .eye-closed { display: none; }
body.is-private .icon-btn { color: var(--pine-deep); border-color: #cfdfd9; background: var(--pine-wash); }
body.is-private .icon-btn .eye-open { display: none; }
body.is-private .icon-btn .eye-closed { display: block; }

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

body.is-private .balance-figure,
body.is-private .balance-usd,
body.is-private .balance-note .num,
body.is-private .ledger-cell dd,
body.is-private .allocation-value,
body.is-private .track,
body.is-private td.numeric,
body.is-private tfoot td,
body.is-private .legend-share,
body.is-private .legend-target,
body.is-private .buy-amount,
body.is-private .buy-gap,
body.is-private .verdict-panel h2,
body.is-private .chart-body svg text,
body.is-private .statement-head p .num,
body.is-private [data-private] {
  filter: blur(7px);
  transition: filter .12s ease;
  user-select: none;
  pointer-events: none;
}

/* Fatia de rosca fica cinza: a proporção some junto com o número. */
body.is-private .chart-body svg path,
body.is-private .chart-body svg rect,
body.is-private .swatch,
body.is-private .key-dot {
  filter: grayscale(1) opacity(.35);
}

@media (prefers-reduced-motion: reduce) {
  body.is-private [data-private] { transition: none; }
}

@media print {
  body.is-private * { filter: none !important; }
}

/* ------------------------------------------------ navegação pela análise */
.crumbs {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; font-size: .875rem;
}
.crumb {
  display: inline-flex; flex-direction: column; line-height: 1.2;
  padding: .3125rem .625rem; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: var(--raised);
  color: var(--ink); text-decoration: none;
}
.crumb small { font-size: .6875rem; color: var(--ink-faint); }
.crumb:hover { background: var(--sunken); color: var(--ink); }
.crumb.is-current { background: var(--pine-wash); border-color: #cfdfd9; color: var(--pine-deep); }
.crumb.is-current small { color: #6d8d83; }
.crumb-sep { color: var(--ink-faint); }

.drill-hint { font-size: .8125rem; color: var(--ink-faint); margin-bottom: 1rem; }

.slice-link { cursor: pointer; }
.slice-link:hover path { opacity: .82; }
.legend-item.is-link { text-decoration: none; color: inherit; cursor: pointer; }
.legend-item.is-link:hover .legend-name { color: var(--ink); text-decoration: underline; }
a.ticker { color: var(--ink); text-decoration: none; }
a.ticker:hover { color: var(--pine); text-decoration: underline; }

/* ------------------------------------------------- calculadora de aporte */
#calculator-table .check { align-items: center; gap: .5rem; }
#calculator-table .check label { cursor: pointer; }
#calculator-table .check .sub { display: inline; margin-left: .375rem; }
#calculator-table input[type="checkbox"] { margin-top: 0; }

/* Espaçador entre o aviso e a árvore da calculadora */
.section-head-spacer { height: .25rem; }

/* Botão em trabalho, enquanto a requisição vai à rede */
.btn-spinner {
  width: .8125rem; height: .8125rem; flex: none; margin-right: .4375rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: live-spin .7s linear infinite;
}
.btn:disabled { opacity: .85; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; border-top-color: rgba(255, 255, 255, .9); }
}

/* Percentual clicável: alterna entre porcentagem e valor */
.legend-share {
  font-family: var(--serif); color: var(--ink);
  background: none; border: 0; padding: 0; margin: 0;
  font-size: .8125rem; cursor: pointer; white-space: nowrap;
  border-bottom: 1px dashed var(--rule-strong);
}
.legend-share:hover { border-bottom-color: var(--ink-soft); }
.legend-name.is-link { cursor: pointer; }
.legend-name.is-link:hover { color: var(--ink); text-decoration: underline; }
.legend[data-unit="abs"] .legend-share { font-size: .78125rem; }

/* O botão de alternância guarda os dois percentuais; só o rótulo navega. */
.legend-share {
  display: flex; flex-direction: column; align-items: flex-end; gap: .0625rem;
  text-align: right;
}
.legend-now { font-family: var(--serif); }
.legend-item .legend-target { display: block; }

/* -------------------------------- composição: ETF aberto em subcategorias */
.allocation-row[data-level="1"] { padding-left: 1rem; }
.allocation-row[data-level="2"] { padding-left: 2rem; }
.allocation-row[data-level="1"] .allocation-top strong,
.allocation-row[data-level="2"] .allocation-top strong {
  font-weight: 400; color: var(--ink-soft);
}
.allocation-row[data-level="1"] .allocation-value,
.allocation-row[data-level="2"] .allocation-value { font-size: .9375rem; }
.allocation-row[data-level="1"] .track,
.allocation-row[data-level="2"] .track { height: .3125rem; }

/* Um fio vertical liga o filho ao tipo que o contém. */
.allocation-row[data-level="1"],
.allocation-row[data-level="2"] { position: relative; }
.allocation-row[data-level="1"]::before,
.allocation-row[data-level="2"]::before {
  content: ""; position: absolute; left: .375rem; top: 0; bottom: 0;
  border-left: 1px solid var(--rule);
}
.allocation-row[data-level="2"]::before { left: 1.375rem; }

.of-parent { color: var(--ink-faint); font-family: var(--sans); font-size: .75rem; }

/* Tipo que se subdivide vira um botão de abrir e fechar */
.allocation-toggle {
  display: inline-flex; align-items: center; gap: .4375rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.allocation-toggle .chevron {
  width: .4375rem; height: .4375rem; flex: none;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.allocation-toggle[aria-expanded="true"] .chevron { transform: rotate(45deg); }
.allocation-toggle:hover .chevron { border-color: var(--ink); }

/* Resumo abaixo da curva de liquidez */
.liquidity-note {
  margin-top: .75rem; font-size: .875rem; color: var(--ink-soft);
}
.liquidity-note .num { font-family: var(--serif); color: var(--ink); }

/* ---------------------------------------- categorias na listagem de ativos */
.group-row td {
  background: var(--sunken); border-bottom: 1px solid var(--rule-strong);
  padding-top: .625rem; padding-bottom: .625rem;
}
.group-name {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
}
.group-row .sub { display: inline; margin-left: .5rem; }
.group-row.level-1 .group-name { font-size: .9375rem; font-weight: 500; color: var(--ink-soft); }
.group-row.level-1 td { background: var(--raised); }
.group-body + .group-body .group-row td { border-top: 1px solid var(--rule); }

@media (max-width: 52rem) {
  .table-wrap tbody.group-body { display: block; }
  .table-wrap .group-row {
    background: none; border: 0; border-radius: 0;
    padding: 1rem 0 .375rem; margin: 0;
  }
  .table-wrap .group-row td { background: none; border-bottom: 0; padding: 0; }
  .table-wrap .group-row td:first-child { border-bottom: 1px solid var(--rule-strong); }
  .table-wrap .group-row td[data-label] { display: flex; padding: .25rem 0; }
  .table-wrap .group-row td:empty { display: none; }
}

/* ------------------------------ categoria expansível na listagem de ativos */
.group-toggle {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.group-toggle .chevron {
  width: .4375rem; height: .4375rem; flex: none; align-self: center;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .18s ease;
}
.group-toggle[aria-expanded="false"] .chevron { transform: rotate(-45deg); }
.group-toggle:hover .chevron { border-color: var(--ink); }

/* Os papéis de uma subcategoria ficam recuados em relação a ela, e um fio
   vertical marca a que grupo pertencem. */
/* A hierarquia é marcada por margem num elemento interno, nunca pelo padding
   da célula: padding é ajustado por outras regras — a compactação em telas
   médias, por exemplo — e como aquelas usam seletor de ID, venciam estas e a
   indentação sumia sem deixar rastro.

   A escada é de um degrau por nível, uniforme: um papel dentro de "Ação" fica
   no mesmo recuo de "ETF Internacional" dentro de "ETF", porque estão na mesma
   profundidade da árvore. */
.group-body .position-row td:first-child .disclosure { margin-left: 1.25rem; }
.group-body[data-level="1"] .group-row .group-toggle { margin-left: 1.25rem; }
.group-body[data-level="1"] .position-row td:first-child .disclosure {
  margin-left: 2.5rem;
}

.group-body .position-row td:first-child .disclosure,
.group-body[data-level="1"] .group-row .group-toggle { position: relative; }
.group-body .position-row td:first-child .disclosure::before,
.group-body[data-level="1"] .group-row .group-toggle::before {
  content: ""; position: absolute; left: -.75rem; top: -.5rem; bottom: -.5rem;
  border-left: 1px solid var(--rule);
}
.entries-row > td { padding-left: 1.25rem; }
.group-body[data-level="1"] .entries-row > td { padding-left: 2.5rem; }

@media (max-width: 52rem) {
  /* Em ficha, a linha já é um bloco separado: o recuo só rouba largura. */
  .group-body .position-row td:first-child .disclosure,
  .group-body[data-level="1"] .group-row .group-toggle,
  .group-body[data-level="1"] .position-row td:first-child .disclosure {
    margin-left: 0;
  }
  .group-body .position-row td:first-child .disclosure::before,
  .group-body[data-level="1"] .group-row .group-toggle::before { display: none; }
  .entries-row > td,
  .group-body[data-level="1"] .entries-row > td { padding-left: 0; }
}

/* ------------------------------------------------- filtro pelo cabeçalho */
thead th[data-filter] { position: relative; padding-right: 2rem; }

.filter-toggle {
  position: absolute; right: .4375rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.125rem; height: 1.125rem;
  padding: 0; border: 0; border-radius: 3px;
  background: none; color: var(--ink-faint); cursor: pointer;
}
.filter-toggle svg { width: .6875rem; height: .6875rem; }
.filter-toggle:hover { color: var(--ink); background: var(--sunken); }
.filter-toggle.is-active { color: var(--pine); background: var(--pine-wash); }

.filter-panel {
  position: absolute; z-index: 30; right: 0; top: calc(100% + .25rem);
  min-width: 11rem; max-width: 20rem; max-height: 17rem; overflow-y: auto;
  display: grid; gap: 1px; padding: .25rem;
  background: var(--raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-md); box-shadow: 0 6px 20px rgba(20, 24, 28, .12);
}
.filter-option {
  text-align: left; font: inherit; font-weight: 400; font-size: .8125rem;
  padding: .375rem .5rem; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.filter-option:hover { background: var(--sunken); }
.filter-option.is-on { background: var(--pine-wash); color: var(--pine-deep); font-weight: 600; }
.filter-option.is-on::after { content: " ✓"; }

.filter-chips {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .75rem; font-size: .8125rem;
}
.filter-chip {
  font: inherit; padding: .1875rem .5rem; cursor: pointer;
  border: 1px solid #cfdfd9; border-radius: 999px;
  background: var(--pine-wash); color: var(--pine-deep);
}
.filter-chip:hover { background: #dfeae6; }
.filter-count { color: var(--ink-faint); }
.filter-clear {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-soft); text-decoration: underline;
}
.filter-clear:hover { color: var(--ink); }

/* Valor bruto alternável entre real e dólar */
.currency-swap {
  font: inherit; font-family: var(--serif); color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px dashed var(--rule-strong);
}
.currency-swap:hover { border-bottom-color: var(--ink-soft); }

/* Barra de ferramentas acima da tabela de ativos */
.table-tools {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: .75rem;
}
.table-tools .filter-chips { margin-bottom: 0; }


/* A coluna do papel não pode empurrar a tabela sozinha: o subtítulo quebra
   linha em vez de esticar tudo. */
#positions-table td:first-child { max-width: 17rem; }
#positions-table td:first-child .sub { white-space: normal; }

/* Onze colunas em tela de notebook: com o respiro padrão a tabela transborda
   por poucos pixels e passa a rolar por nada. Abaixo de ~100rem ela se aperta
   um pouco; sobrando espaço, volta ao respiro normal. */
@media (min-width: 52rem) and (max-width: 100rem) {
  /* Só as colunas seguintes se apertam. Mexer no padding da primeira apagaria
     a indentação, porque este seletor tem ID e vence o dela. */
  #positions-table th,
  #positions-table td + td { padding-left: .5rem; padding-right: .5rem; }
  #positions-table td:first-child { padding-right: .5rem; max-width: 15rem; }
  #positions-table thead th[data-filter] { padding-right: 1.625rem; }
}

/* Valor e botão lado a lado na calculadora */
.calc-row {
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap;
}
.calc-row .field { flex: 1 1 14rem; margin: 0; }
.calc-row .btn { flex: none; }
.calc-error {
  margin-top: .625rem; padding: .5rem .75rem;
  background: #fdf3f1; border: 1px solid #e6c4bd; border-radius: var(--r-sm);
}

/* Linha que já é a compra: sem seta, mas alinhada com quem tem. */
.leaf-name {
  display: inline-flex; flex-direction: column; gap: .125rem;
  padding-left: 1.1875rem;
}
.group-body .position-row td:first-child .leaf-name { margin-left: 1.25rem; }
.group-body[data-level="1"] .position-row td:first-child .leaf-name { margin-left: 2.5rem; }
.group-body .position-row td:first-child .leaf-name,
.group-body[data-level="1"] .position-row td:first-child .leaf-name {
  position: relative;
}
.group-body .position-row td:first-child .leaf-name::before,
.group-body[data-level="1"] .position-row td:first-child .leaf-name::before {
  content: ""; position: absolute; left: -.75rem; top: -.5rem; bottom: -.5rem;
  border-left: 1px solid var(--rule);
}
@media (max-width: 52rem) {
  .group-body .position-row td:first-child .leaf-name,
  .group-body[data-level="1"] .position-row td:first-child .leaf-name {
    margin-left: 0; padding-left: 0;
  }
  .group-body .position-row td:first-child .leaf-name::before { display: none; }
}

/* ------------------------------------------------ ações destrutivas */
.danger-zone { display: grid; gap: 1px; background: var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.danger-zone form { background: var(--raised); }
.danger-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1rem 1.125rem; flex-wrap: wrap;
}
.danger-row .help { margin: .25rem 0 0; max-width: 42rem; }
.btn-danger {
  border-color: #d9b3ac; color: var(--fall); background: #fdf6f4; flex: none;
}
.btn-danger:hover:not([disabled]) { background: #f8e7e2; border-color: #c99387; }
.btn-danger[disabled] { opacity: .5; cursor: not-allowed; }