/* ============================================================
   Orange Invest — Carteira
   Herda o sistema "Peel & Pulp" da landing.
   Peel: a barra lateral e os cabeçalhos escuros.
   Pulp: a área de trabalho, onde os números vivem.
   Assinatura: o Gomo — o marcador radial de alocação que também
   é o semáforo de cada ativo.
   ============================================================ */

:root{
  --ink:#16100A; --ink-soft:#1F1710; --ink-line:rgba(255,163,92,0.16);
  --paper:#FBF3E7; --paper-alt:#F3E7D6; --card:#FFFFFF;
  --orange-700:#E24300; --orange-500:#FF5A1F; --orange-400:#FF7A33;
  --orange-300:#FFA35C; --orange-200:#FFC896;
  --rind-500:#A8C23A; --rind-300:#CFE26B;
  --text-on-ink:#F7ECDD; --text-on-ink-mu:#C9B69E;
  --text-on-paper:#1E1712; --text-muted:#6B5D4E;
  --alta:#2F7D4F; --baixa:#C0341C; --neutro:#8A7A69;
  --radius-lg:22px; --radius-md:14px; --radius-sm:8px;
  --shadow-card:0 18px 40px rgba(30,20,10,0.08);
  --font-display:'Fraunces','Iowan Old Style',ui-serif,Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --sidebar:264px;
}

*{box-sizing:border-box}
/* Qualquer display explícito vence o atributo `hidden`. Já custou dois bugs
   (a prévia do provento e os itens do filtro), então a regra é global. */
[hidden]{display:none !important}
body{
  margin:0; font-family:var(--font-body); background:var(--paper);
  color:var(--text-on-paper); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange-500); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important; animation-duration:.001ms !important}}

/* ---------------------------------------------------- estrutura */
:root{ --sidebar-aberta:264px; --sidebar-fechada:70px; }

.shell{
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100vh;
}
html.menu-colapsado .shell{ --sidebar:var(--sidebar-fechada) }

.sidebar{
  background:var(--ink); border-right:1px solid var(--ink-line);
  padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  transition:padding .18s ease;
}
html.menu-colapsado .sidebar{ padding:18px 10px }

.sidebar-top{display:flex; align-items:center; gap:8px; padding:0 4px 18px}
.sidebar .brand{display:flex; align-items:center; gap:11px; text-decoration:none; min-width:0; flex:1}
.sidebar .brand img{width:34px; height:34px; flex:none; border-radius:50%; background:var(--paper); padding:3px}
.brand-nome{
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  color:var(--text-on-ink); white-space:nowrap;
}
.brand-nome em{font-style:italic; color:var(--orange-400)}

.menu-toggle{
  flex:none; width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--ink-line); border-radius:9px;
  color:var(--text-on-ink-mu); transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.menu-toggle:hover{color:var(--orange-300); background:rgba(255,122,51,.12); border-color:rgba(255,163,92,.34)}

/* -------- sigilo: oculta valores para olhar por perto -------- */
html.sigilo-ativo .stat-value,
html.sigilo-ativo td.num,
html.sigilo-ativo .aloc-val{
  filter:blur(6px); user-select:none; transition:filter .12s ease;
}
/* Passar o mouse espia sem precisar desligar o sigilo de novo. */
html.sigilo-ativo .stat-value:hover,
html.sigilo-ativo td.num:hover,
html.sigilo-ativo .aloc-val:hover{
  filter:none;
}

.nav-group{margin-bottom:16px}
.nav-group h6{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-300); margin:0 0 8px; padding:0 10px; font-weight:600; white-space:nowrap;
}
.sidebar nav{display:flex; flex-direction:column; gap:2px}
.sidebar nav a, .sidebar nav .nav-item-btn{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
  color:var(--text-on-ink-mu); text-decoration:none; font-size:.92rem; font-weight:500;
  white-space:nowrap; transition:background .18s ease, color .18s ease;
}
.sidebar nav .nav-item-btn{
  width:100%; border:none; background:transparent; cursor:pointer;
  font-family:inherit; text-align:left;
}
.sidebar nav a svg, .sidebar nav .nav-item-btn svg{flex:none}
.sidebar nav a span, .sidebar nav .nav-item-btn span{overflow:hidden; text-overflow:ellipsis}
.sidebar nav a:hover, .sidebar nav .nav-item-btn:hover{background:rgba(255,122,51,.12); color:var(--text-on-ink)}
.sidebar nav a.is-active{background:var(--orange-700); color:#fff; font-weight:600}
.sidebar nav .nav-item-btn[aria-pressed="true"]{background:var(--orange-700); color:#fff; font-weight:600}

/* -------- estado colapsado: só ícones -------- */
html.menu-colapsado .brand-nome,
html.menu-colapsado .nav-group h6,
html.menu-colapsado .sidebar nav a span,
html.menu-colapsado .sidebar nav .nav-item-btn span{
  display:none;
}
html.menu-colapsado .sidebar-top{flex-direction:column; gap:12px; padding:0 0 16px}
html.menu-colapsado .sidebar .brand{justify-content:center}
html.menu-colapsado .sidebar nav a, html.menu-colapsado .sidebar nav .nav-item-btn{justify-content:center; padding:11px 0}
html.menu-colapsado .nav-group{
  margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--ink-line);
}
html.menu-colapsado .nav-group:last-child{border-bottom:none}

.main{padding:30px 34px 60px; max-width:1400px; min-width:0; overflow-x:hidden}

.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-700); font-weight:600; display:block; margin-bottom:4px;
}
h1{font-family:var(--font-display); font-size:2rem; margin:0; letter-spacing:-.02em; font-weight:600}
h2{font-family:var(--font-display); font-size:1.3rem; margin:0 0 14px; font-weight:600; letter-spacing:-.01em}
.sub{color:var(--text-muted); font-size:.92rem; margin:6px 0 0}

/* ---------------------------------------------------- cartões */
.grid{display:grid; gap:16px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.card{background:var(--card); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-card)}
.card--ink{background:var(--ink); color:var(--text-on-ink)}
.card--ink .stat-label{color:var(--orange-300)}
.card--ink .stat-value{color:var(--text-on-ink)}

.stat-label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); font-weight:600; display:block; margin-bottom:6px;
}
.stat-value{font-family:var(--font-mono); font-size:1.6rem; font-weight:600; letter-spacing:-.02em; display:block}
.stat-foot{font-size:.82rem; color:var(--text-muted); margin-top:5px; display:block}
.pos{color:var(--alta)} .neg{color:var(--baixa)}
.card--ink .pos{color:var(--rind-300)} .card--ink .neg{color:var(--orange-300)}

/* ---------------------------------------------------- o Gomo (assinatura) */
.gomo{
  --p:0; width:34px; height:34px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(var(--gomo-cor,var(--orange-500)) calc(var(--p)*1%), rgba(107,93,78,.16) 0);
  display:inline-grid; place-items:center;
}
.gomo::after{
  content:''; width:64%; height:64%; border-radius:50%; background:var(--card);
}
.gomo span{
  position:absolute; z-index:1; font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  color:var(--text-on-paper);
}
.gomo--sm{width:26px; height:26px}
.card--aderencia{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* botão de informação que explica um número da tela — o balãozinho já vem
   colorido (i-info-balao no sprite), então o botão só posiciona e dá o
   alvo de clique; sem círculo/borda por cima, o SVG já é o selo inteiro. */
.info-btn{
  appearance:none; -webkit-appearance:none; padding:0; margin-left:4px; border:none;
  background:none; box-shadow:none; cursor:pointer; display:inline-flex; align-items:center;
  vertical-align:-5px; color:var(--orange-500); transition:transform .15s ease, color .15s ease;
}
.info-btn:hover, .info-btn:focus-visible{transform:scale(1.15); color:var(--orange-700)}
.modal-corpo p{margin:0 0 12px}
.modal-corpo p:last-child{margin-bottom:0}
.card--aderencia .gomo{width:66px; height:66px}
.card--aderencia .gomo span{font-size:.78rem}
.gomo--mudo span{display:none}
.gomo--sm span{font-size:.52rem}
.sidebar .gomo::after{background:var(--ink)}
.sidebar .gomo span{color:var(--text-on-ink)}

/* ---------------------------------------------------- semáforo */
.sem{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700;
  padding:4px 11px 4px 8px; border-radius:999px; white-space:nowrap;
  font-family:var(--font-mono); letter-spacing:.04em;
}
.sem::before{content:''; width:9px; height:9px; border-radius:50%; background:currentColor}
.sem--COMPRAR{background:rgba(168,194,58,.18); color:#4E6B12}
.sem--MANTER{background:rgba(107,93,78,.13); color:var(--text-muted)}
.sem--REDUZIR{background:rgba(226,67,0,.14); color:var(--orange-700)}

/* ---------------------------------------------------- tabelas */
.table-wrap{background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.9rem}
thead th{
  background:var(--ink); color:var(--orange-200); text-align:left; padding:12px 14px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; white-space:nowrap; position:sticky; top:0;
}
tbody td{padding:11px 14px; border-bottom:1px solid rgba(107,93,78,.1); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--paper-alt)}
td.num, th.num{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.ticker{font-family:var(--font-mono); font-weight:700; letter-spacing:.02em}
.ticker small{display:block; font-family:var(--font-body); font-weight:400; font-size:.74rem; color:var(--text-muted); letter-spacing:0}

tfoot td{padding:12px 14px; font-family:var(--font-mono); font-weight:700; background:var(--paper-alt)}

/* ---------------------------------------------------- formulários */
.form-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
label{display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); margin-bottom:5px}
input, select, textarea{
  width:100%; padding:10px 12px; border:1.5px solid rgba(107,93,78,.22); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.94rem; background:#fff; color:var(--text-on-paper);
}
input[type=number]{font-family:var(--font-mono)}
input:focus, select:focus, textarea:focus{border-color:var(--orange-500); outline:none}
.hint{font-size:.76rem; color:var(--text-muted); margin-top:5px}

.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  background:var(--orange-500); color:#1a0c02; font-weight:800; font-size:.9rem;
  padding:11px 20px; border-radius:999px; text-decoration:none; font-family:var(--font-body);
  box-shadow:0 8px 20px rgba(255,90,31,.28); transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,90,31,.4)}
.btn--ghost{background:transparent; color:var(--orange-700); box-shadow:none; border:1.5px solid var(--orange-300)}
.btn--ghost:hover{background:rgba(255,122,51,.1); transform:none; box-shadow:none}
.btn--sm{padding:7px 14px; font-size:.82rem}

/* ---------------------------------------------------- abas de visão */
.views{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.views a{
  padding:8px 16px; border-radius:999px; text-decoration:none; font-size:.88rem; font-weight:600;
  background:var(--paper-alt); color:var(--text-muted); transition:background .16s, color .16s;
}
.views a:hover{background:var(--orange-200); color:var(--text-on-paper)}
.views a.is-active{background:var(--ink); color:var(--orange-200)}

.toggle-moeda{margin-left:auto; display:flex; gap:4px; background:var(--paper-alt); padding:4px; border-radius:999px}
.toggle-moeda a{padding:6px 14px; font-size:.82rem; border-radius:999px; background:transparent}
.toggle-moeda a.is-active{background:var(--orange-500); color:#1a0c02}

/* ---------------------------------------------------- barra de alocação */
.aloc-row{display:grid; grid-template-columns:150px 1fr 96px; gap:12px; align-items:center; margin-bottom:11px}
.aloc-nome{font-size:.86rem; font-weight:600}
.aloc-bar{height:22px; background:var(--paper-alt); border-radius:999px; position:relative; overflow:hidden}
.aloc-bar i{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--fill,var(--orange-500))}
.aloc-bar b{
  position:absolute; top:0; bottom:0; width:2px; background:var(--ink); opacity:.55;
}
.aloc-val{font-family:var(--font-mono); font-size:.82rem; text-align:right}

.legenda{font-size:.78rem; color:var(--text-muted); margin-top:10px; display:flex; gap:16px; flex-wrap:wrap}

/* ---------------------------------------------------- avisos */
.aviso{
  background:rgba(255,200,150,.32); border-left:4px solid var(--orange-500);
  padding:13px 16px; border-radius:0 var(--radius-md) var(--radius-md) 0; font-size:.88rem; margin-bottom:20px;
}
.vazio{text-align:center; padding:54px 20px; color:var(--text-muted)}
.vazio h3{font-family:var(--font-display); color:var(--text-on-paper); margin:0 0 8px}

/* ---------------------------------------------------- conta (canto superior direito)
   Antes vivia dentro do menu lateral (grupo "Conta"); virou um widget fixo
   pra ficar visível em qualquer tela, sem depender do menu estar aberto. */
.conta-flutuante{position:fixed; top:18px; right:26px; z-index:40}
.conta-toggle{
  display:flex; align-items:center; gap:9px; border:1px solid rgba(30,20,10,.12);
  background:var(--card); border-radius:999px; padding:6px 14px 6px 6px; cursor:pointer;
  box-shadow:0 10px 26px rgba(30,20,10,.10); font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.conta-toggle:hover{border-color:var(--orange-300)}
.conta-avatar{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--orange-500); color:#fff; font-weight:700; font-size:.82rem;
}
.conta-nome{font-weight:600; font-size:.86rem; color:var(--text-on-paper); white-space:nowrap}
.conta-toggle svg{color:var(--text-muted); transition:transform .15s ease; flex:none}
.conta-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.conta-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--card); border-radius:var(--radius-md); border:1px solid rgba(30,20,10,.10);
  box-shadow:0 20px 48px rgba(30,20,10,.18); padding:6px; display:flex; flex-direction:column;
}
.conta-menu a, .conta-menu button{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  border:none; background:transparent; text-align:left; cursor:pointer; width:100%;
  font-family:var(--font-body); font-size:.86rem; font-weight:600; color:var(--text-on-paper);
  text-decoration:none;
}
.conta-menu a:hover, .conta-menu button:hover{background:var(--paper-alt)}
.conta-menu svg{color:var(--text-muted); flex:none}
@media (max-width:900px){
  .conta-flutuante{top:12px; right:14px}
  .conta-nome{display:none}
  .conta-toggle{padding:6px}
}

/* ---------------------------------------------------- responsivo */
@media (max-width:900px){
  .shell, html.menu-colapsado .shell{grid-template-columns:1fr}
  .sidebar, html.menu-colapsado .sidebar{
    position:static; height:auto; padding:14px 16px;
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  }
  .sidebar-top, html.menu-colapsado .sidebar-top{padding:0; flex-direction:row}
  .menu-toggle{display:none}
  .nav-group, html.menu-colapsado .nav-group{margin:0; padding:0; border:none}
  .nav-group h6{display:none}
  .sidebar nav{flex-direction:row; flex-wrap:wrap; gap:4px}
  html.menu-colapsado .brand-nome,
  html.menu-colapsado .sidebar nav a span,
  html.menu-colapsado .sidebar nav .nav-item-btn span{display:inline}
  html.menu-colapsado .sidebar nav a, html.menu-colapsado .sidebar nav .nav-item-btn{justify-content:flex-start; padding:9px 11px}
  .main{padding:22px 18px 50px}
  .aloc-row{grid-template-columns:110px 1fr 80px}
}

/* ---------------------------------------------------- modal */
.modal{
  border:none; padding:0; max-width:560px; width:calc(100% - 40px);
  border-radius:var(--radius-lg); background:var(--card); color:var(--text-on-paper);
  box-shadow:0 30px 70px rgba(30,20,10,.28);
}
.modal::backdrop{background:rgba(22,16,10,.55); backdrop-filter:blur(2px)}

.modal-topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px 16px; border-bottom:1px solid rgba(107,93,78,.14);
}
.modal-topo .eyebrow{margin-bottom:2px}
.modal-fechar{
  flex:none; width:32px; height:32px; border:none; background:transparent; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--text-muted); border-radius:8px;
  transition:background .16s ease, color .16s ease;
}
.modal-fechar:hover{background:var(--paper-alt); color:var(--text-on-paper)}

.modal-corpo{padding:18px 24px; max-height:52vh; overflow-y:auto}

.lista-setores{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.lista-setores li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:var(--radius-sm); font-size:.92rem;
}
.lista-setores li:nth-child(odd){background:var(--paper)}
.lista-setores .uso{
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted);
  background:var(--paper-alt); padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.btn-excluir{
  border:none; background:transparent; cursor:pointer; padding:3px 8px; border-radius:999px;
  font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--text-muted);
  transition:background .16s ease, color .16s ease;
}
.btn-excluir:hover{background:rgba(226,67,0,.12); color:var(--orange-700)}

.modal-rodape{
  display:flex; gap:10px; padding:16px 24px 20px;
  border-top:1px solid rgba(107,93,78,.14); background:var(--paper-alt);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.modal-rodape input{flex:1}
.modal-rodape .btn{flex:none}

@media (max-width:520px){
  .modal-rodape{flex-direction:column}
  .modal-rodape .btn{width:100%; justify-content:center}
}

/* ações no fim da linha da tabela */
.acoes-linha{display:flex; gap:6px; justify-content:flex-end}
td.acoes{text-align:right}

/* paginação de listas longas dentro de um card (ex.: aportes e resgates) */
.paginacao{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px}
.paginacao-info{font-size:.78rem; color:var(--text-muted); font-family:var(--font-mono)}
.paginacao .is-disabled{opacity:.4; pointer-events:none}

/* menu de ações por linha — mesmo padrão do menu de conta (.conta-toggle/
   .conta-menu), só que uma instância por linha da tabela em vez de uma
   por página. O botão fica em vez dos antigos 2-3 botões soltos. */
.menu-linha{position:relative; display:inline-block}
.menu-gatilho{
  width:34px; height:34px; padding:0; justify-content:center; border-radius:999px;
  background:transparent; color:var(--text-muted); border:1.5px solid rgba(107,93,78,.22);
  font-size:1.15rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.menu-gatilho:hover{background:var(--paper-alt); color:var(--text-on-paper)}
.menu-gatilho[aria-expanded="true"]{background:var(--ink); color:var(--orange-200); border-color:var(--ink)}
.menu-opcoes{
  /* fixed, não absolute: posição calculada em JS na abertura (ver base.html)
     pra escapar do overflow-x:auto da tabela sem cortar em linhas perto da
     borda. top/bottom/right vêm inline, calculados ali. */
  position:fixed; z-index:60; min-width:190px;
  background:var(--card); border-radius:var(--radius-md); border:1px solid rgba(30,20,10,.10);
  box-shadow:0 20px 48px rgba(30,20,10,.18); padding:6px; display:flex; flex-direction:column;
  text-align:left; white-space:nowrap;
}
.menu-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  border:none; background:transparent; text-align:left; cursor:pointer; width:100%;
  font-family:var(--font-body); font-size:.86rem; font-weight:600; color:var(--text-on-paper);
  text-decoration:none;
}
.menu-item:hover{background:var(--paper-alt)}
.menu-item svg{color:var(--text-muted); flex:none}
.menu-item--perigo:hover, .menu-item--realce:hover{background:rgba(226,67,0,.12); color:var(--orange-700)}
.menu-item--perigo:hover svg, .menu-item--realce:hover svg{color:var(--orange-700)}
.menu-divisor{height:1px; background:rgba(107,93,78,.12); margin:5px 4px}
.modal-rodape--fim{justify-content:flex-end; gap:8px}
.modal-rodape--fim .btn{flex:none}
.modal .form-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* situação do ativo: acompanhar não é o mesmo que ter */
.situacao{
  display:inline-block; font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  padding:3px 10px; border-radius:999px; letter-spacing:.04em; white-space:nowrap;
}
.situacao--CARTEIRA{background:rgba(168,194,58,.2); color:#4E6B12}
.situacao--ESTUDO{background:rgba(255,163,92,.22); color:var(--orange-700)}
.situacao--ENCERRADO{background:rgba(107,93,78,.14); color:var(--text-muted)}

/* idade da avaliação: nota velha ainda pesa na carteira */
.idade{
  display:inline-block; font-family:var(--font-mono); font-size:.74rem;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.idade--ok{background:rgba(107,93,78,.1); color:var(--text-muted)}
.idade--vencida{background:rgba(226,67,0,.13); color:var(--orange-700); font-weight:600}
.idade--sem{background:rgba(255,163,92,.22); color:var(--orange-700); font-weight:600}
/* Nota direta não é pendência: informa o método, sem chamar atenção. */
.idade--direta{background:rgba(168,194,58,.20); color:#4d5c15}

/* filtro de categoria acima da tabela */
.filtro-categoria{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:.86rem;
}
.filtro-categoria label{margin:0; white-space:nowrap}
.filtro-categoria select{width:auto; min-width:230px; padding:8px 12px}

/* nome comprido de FII não pode empurrar a tabela */
.nome-longo{
  max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:help; font-weight:600;
}
.nome-longo small{
  display:block; font-weight:400; font-size:.74rem; color:var(--text-muted);
}

/* renda fixa: rentabilidade e liquidez são texto técnico curto */
.mono-peq{font-family:var(--font-mono); font-size:.8rem}

/* Card é item de grid: sem min-width:0 ele cresce com o conteúdo em vez de
   encolher, e a tabela larga vaza por cima do card vizinho. */
.grid > *{min-width:0}

/* Tabela dentro de card rola sozinha, sem empurrar o card. */
.rolagem-h{overflow-x:auto; max-width:100%}

/* come-cotas não é resgate: o dinheiro não voltou para você */
.sem--comecotas{background:rgba(107,93,78,.16); color:var(--text-muted)}

/* cabeçalho de card com ação à direita */
.card-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}

/* ------------------------------------------------- anel das quatro classes
   Vive sobre a superfície escura (--ink), como na landing: é lá que a paleta
   foi validada para contraste e separação em daltonismo. */
.anel{display:flex; justify-content:center; align-items:center}
.anel-svg{width:100%; max-width:400px; height:auto}
.anel--sm .anel-svg{max-width:190px}
.anel-rot{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em;
  fill:var(--text-on-ink); text-transform:uppercase;
}
.anel-rot--val{font-size:9.5px; fill:var(--text-on-ink-mu); letter-spacing:0}
.anel-centro-n{font-family:var(--font-mono); font-size:11px; fill:var(--text-on-ink-mu); letter-spacing:.06em}
.anel-centro-s{font-family:var(--font-display); font-size:13px; font-style:italic; fill:var(--text-on-ink)}

.chip-cor{
  display:inline-block; width:10px; height:10px; border-radius:3px;
  margin-right:9px; vertical-align:baseline;
}
.tab-classes .linha-zerada{opacity:.45}

/* No card escuro a tabela precisa herdar a tinta clara. */
.card--ink .tab-classes,
.card--ink .tab-classes td,
.card--ink .tab-classes th{color:var(--text-on-ink); border-color:var(--ink-line)}
.card--ink .tab-classes thead th{color:var(--text-on-ink-mu)}
/* O hover global pinta a linha com --paper-alt (claro). No card escuro isso
   apaga o texto: fundo claro sobre tinta clara. Aqui o realce é o inverso —
   clareia levemente o próprio escuro e mantém a tinta. */
.card--ink .tab-classes tbody tr:hover{background:rgba(255,163,92,0.10)}
.card--ink .tab-classes tbody tr:hover td{color:var(--text-on-ink)}
.card--ink .tab-classes tbody tr.linha-zerada:hover{background:rgba(255,163,92,0.06)}
/* O tfoot claro do tema padrão some no card escuro. */
.card--ink .tab-classes tfoot tr,
.card--ink .tab-classes tfoot td{
  background:rgba(255,163,92,0.08); color:var(--text-on-ink);
}

/* Campo de cor: o input nativo é feio e minúsculo por padrão. */
.cor-campo{display:flex; align-items:center; gap:10px}
.cor-campo input[type=color]{
  width:46px; height:32px; padding:2px; border:1px solid var(--ink-line);
  border-radius:var(--radius-sm); background:var(--card); cursor:pointer;
}
.cor-campo code{font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted)}

/* Prévia do provento: o número antes de gravar. */
.previa{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:14px; padding:14px 16px; margin-bottom:12px;
  background:var(--paper-alt); border-radius:var(--radius-md);
}
.previa > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.previa strong{font-family:var(--font-mono); font-size:1.02rem}
.previa-rot{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ------------------------------------------- filtro abrangência + categoria */
.filtro-lista{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  margin-bottom:16px;
}
.filtro-campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.filtro-campo label{margin:0}
.filtro-campo--botoes{flex-direction:row; gap:8px; align-items:center}

/* Dropdown de múltipla escolha em <details>: fecha com Esc, anda de teclado
   e não precisa de biblioteca. */
.multi{position:relative; min-width:250px}
.multi > summary{
  list-style:none; cursor:pointer; user-select:none; position:relative;
  padding:10px 34px 10px 14px; border:1px solid var(--ink-line);
  border-radius:var(--radius-sm); background:var(--card);
  font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.multi > summary::-webkit-details-marker{display:none}
.multi > summary::after{
  content:''; position:absolute; right:13px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted);
  transform:translateY(-70%) rotate(45deg);
}
.multi[open] > summary{border-color:var(--orange-500)}
.multi-corpo{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:100%;
  max-height:320px; overflow-y:auto; padding:8px;
  background:var(--card); border:1px solid var(--ink-line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.multi-acoes{
  display:flex; gap:14px; padding:4px 8px 8px;
  border-bottom:1px solid var(--ink-line); margin-bottom:6px;
}
.btn-link{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-body); font-size:.78rem; color:var(--orange-700);
  text-decoration:underline; text-underline-offset:3px;
}
.multi-item{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:7px 8px; border-radius:var(--radius-sm); cursor:pointer;
  white-space:nowrap; font-weight:400;
}
.multi-item:hover{background:var(--paper-alt)}
.multi-item input[type=checkbox]{width:auto; flex:0 0 auto; margin:0}
.multi-item small{display:block; font-size:.72rem; color:var(--text-muted)}
.multi-vazio{margin:6px 8px; font-size:.82rem; color:var(--text-muted)}

/* Título da abrangência com a ação de excluir à direita. */
.titulo-com-acao{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.lista-simples{margin:0 0 12px; padding-left:20px}
.lista-simples li{margin:3px 0; font-size:.88rem}

/* Barra de período enxuta (Compra e venda).
   A tela já tem o formulário de lançamento no topo — o recorte da lista tem de
   pesar pouco, senão compete com ele. Atalhos viram links-pílula pequenos, em
   vez dos botões cheios que ocupavam uma faixa inteira. */
.filtro-lista--enxuto{gap:12px; margin-bottom:12px; align-items:flex-end}
.filtro-lista--enxuto input[type=date]{padding:6px 9px; font-size:.86rem}
.filtro-lista--enxuto label{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted)}

.atalhos-periodo{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-bottom:2px}
.atalhos-periodo a{
  font-size:.75rem; line-height:1; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(30,20,10,.14); color:var(--text-muted);
  text-decoration:none; white-space:nowrap;
}
.atalhos-periodo a:hover{
  border-color:var(--orange-300); color:var(--orange-700); background:rgba(255,122,51,.08);
}