/* ============================================================================
   ds2026.css — Design System 2026 "Mint Fintech"
   ----------------------------------------------------------------------------
   Tokens + primitivos reutilizáveis (ds-*) compartilhados por TODAS as telas.
   Sem build/bundler: cada página linka <link rel="stylesheet" href="/ds2026.css">.
   Princípio (plano DS2026): zero estilo copiado entre páginas — o que repete
   mora aqui. Mudar um componente = 1 arquivo, propaga pro app inteiro.
   v1: light-only. Dark mode (Etapa B5) entra como :root[data-theme=dark] depois.
   ============================================================================ */

:root{
  /* núcleo verde esmeralda */
  --green:#10B981; --green-d:#059669; --green-dd:#047857; --green-l:#E7F7F0; --green-ll:#F1FBF6;
  /* tinta (charcoal esverdeado) */
  --ink:#0E1B16; --ink-2:#1C2B24; --ink-3:#4A5C53; --muted:#8A9A91;
  /* acentos quentes / categóricos */
  --coral:#FF6B5E; --coral-l:#FFEDEB; --coral-d:#E8503F;
  --amber:#F5A623; --amber-l:#FDF1DD; --amber-d:#9A6B00;
  --violet:#7C6CF6; --violet-l:#ECE9FE;
  --sky:#3B9DF6; --sky-l:#E5F1FE;
  /* superfícies */
  --bg:#EFF3F1; --card:#FFFFFF; --line:#E7ECEA; --line-2:#EFF2F1;
  /* raios / sombras */
  --r:22px; --r-sm:14px; --r-xs:10px;
  --sh:0 4px 24px rgba(14,27,22,.05); --sh-h:0 16px 40px rgba(14,27,22,.10);
  --sh-green:0 14px 34px rgba(16,185,129,.30);
  /* fontes (DM Sans + JetBrains Mono já carregadas via <link> nas páginas) */
  --ff:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

/* ── utilitários ── */
.tab-nums{font-variant-numeric:tabular-nums}
.ds-mono{font-family:var(--mono)}

/* atmosfera de fundo padrão (telas autenticadas) */
.ds-bg{
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(700px 420px at -6% 110%, rgba(124,108,246,.06), transparent 60%),
    var(--bg);
}

/* ============================ PRIMITIVOS ds-* ============================== */

/* ── Card base ── */
.ds-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.ds-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.ds-card-h h3{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.ds-card-h .ds-hsub{font-size:12px;color:var(--muted);margin-top:2px}
.ds-link{font-size:12.5px;font-weight:700;color:var(--green-d);cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.ds-link:hover{gap:7px}

/* ── CTA (assinatura de ação: única sombra colorida do DS2026) ── */
.ds-cta{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,#10B981,#059669);color:#fff;border:none;border-radius:13px;padding:12px 20px;font-family:var(--ff);font-size:14px;font-weight:700;cursor:pointer;box-shadow:var(--sh-green);transition:.2s}
.ds-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(16,185,129,.42)}
.ds-cta svg{width:18px;height:18px;stroke-width:2.2}
.ds-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--ink-2);border:1px solid var(--line);border-radius:13px;padding:11px 18px;font-family:var(--ff);font-size:14px;font-weight:700;cursor:pointer;transition:.18s}
.ds-btn-ghost:hover{border-color:var(--green);color:var(--green-d)}

/* ── KPI card ── */
.ds-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 0;box-shadow:var(--sh);position:relative;overflow:hidden;transition:.2s}
.ds-kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-h)}
.ds-kpi-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ds-kpi-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.ds-kpi-ic svg{width:19px;height:19px;stroke-width:2}
.ds-kpi-ic.g{background:var(--green-l);color:var(--green-d)}
.ds-kpi-ic.v{background:var(--violet-l);color:var(--violet)}
.ds-kpi-ic.a{background:var(--amber-l);color:var(--amber)}
.ds-kpi-ic.c{background:var(--coral-l);color:var(--coral-d)}
.ds-kpi-ic.s{background:var(--sky-l);color:var(--sky)}
.ds-kpi-lbl{font-size:12px;font-weight:600;color:var(--ink-3)}
.ds-kpi-num{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-1.2px;line-height:1}
.ds-kpi-num small{font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0}
.ds-kpi-foot{display:flex;align-items:center;gap:7px;margin:9px 0 30px;position:relative;z-index:1}
.ds-kpi-cap{font-size:11px;color:var(--muted)}
.ds-kpi-spark{position:absolute;bottom:0;left:0;right:0;height:30px;opacity:.6;z-index:0;pointer-events:none}

/* ── Delta pill ── */
.ds-delta{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}
.ds-delta.pos{background:var(--green-l);color:var(--green-d)}
.ds-delta.neg{background:var(--coral-l);color:var(--coral-d)}
.ds-delta.flat{background:var(--bg);color:var(--muted)}

/* ── Verdict badge (3 estados canônicos) ── */
.ds-vbadge{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:6px 12px;border-radius:99px;white-space:nowrap}
.ds-vbadge.buy{background:var(--green-l);color:var(--green-dd)}
.ds-vbadge.hold{background:var(--amber-l);color:var(--amber-d)}
.ds-vbadge.sell{background:var(--coral-l);color:var(--coral-d)}
.ds-vbadge.neutral{background:var(--bg);color:var(--muted)}

/* ── Segmented control (período/abas) ── */
.ds-seg{display:inline-flex;background:var(--bg);border-radius:10px;padding:3px;gap:2px}
.ds-seg button{border:none;background:none;font-family:var(--ff);font-size:12px;font-weight:700;color:var(--muted);padding:6px 13px;border-radius:8px;cursor:pointer;transition:.18s}
.ds-seg button.on{background:var(--card);color:var(--green-d);box-shadow:0 2px 6px rgba(14,27,22,.08)}

/* ── Progress bar ── */
.ds-bar{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.ds-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#10B981,#34D399)}

/* ── Score ring ── */
.ds-ring{position:relative;flex-shrink:0}
.ds-ring svg{display:block}
.ds-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ds-ring-num b{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--ink)}
.ds-ring-num span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:1px}

/* ── Featured card (destaque escuro: ring + verdict + stats) ── */
.ds-feat{background:linear-gradient(150deg,#0E1B16 0%,#10342A 60%,#0E1B16 100%);border-radius:var(--r);padding:22px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh)}
.ds-feat::before{content:'';position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.45),transparent 65%)}
.ds-feat::after{content:'';position:absolute;left:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(124,108,246,.28),transparent 65%)}
.ds-feat > *{position:relative}
.ds-feat .ds-ring-num b{color:#fff}
.ds-feat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ds-feat-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:11px 12px}
.ds-feat-stat .k{font-size:10px;color:#9FB0A9;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.ds-feat-stat .v{font-family:var(--mono);font-size:15px;font-weight:700}
.ds-feat-stat .v.up{color:#5EEAB0}.ds-feat-stat .v.dn{color:#FF9A8F}

/* ── List row (ativo: mark + nome + tipo + score + verdict) ── */
.ds-list-row{display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:14px;padding:12px;border-radius:14px;cursor:pointer;transition:.16s}
.ds-list-row:hover{background:var(--green-ll)}
.ds-row-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:11px;color:#fff;letter-spacing:.3px}
.ds-row-name{min-width:0}
.ds-row-name b{font-size:14px;font-weight:700;color:var(--ink);display:block}
.ds-row-name span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;margin-top:1px}
.ds-tipo{font-size:10px;font-weight:700;background:var(--bg);color:var(--ink-3);padding:1px 8px;border-radius:99px}
.ds-row-score{text-align:right}
.ds-row-score b{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}
.ds-row-score span{font-size:10px;color:var(--muted);display:block}

/* ── Tone helpers de texto ── */
.ds-pos{color:var(--green-d)} .ds-neg{color:var(--coral-d)} .ds-flat{color:var(--muted)}

/* ── Divisor de seção (rótulo uppercase) ── */
.ds-section-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:6px 2px 0;display:flex;align-items:center;gap:9px}
.ds-section-label::after{content:'';flex:1;height:1px;background:var(--line)}
.ds-section-label.warn{color:var(--amber-d)} .ds-section-label.danger{color:var(--coral-d)}

/* ── Tabela (comparativo / dividendos / conclusão) ── */
.ds-table{width:100%;border-collapse:collapse;font-size:13px}
.ds-table thead th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line)}
.ds-table tbody td{padding:12px 14px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.ds-table tbody tr:last-child td{border-bottom:none}
.ds-table tbody tr:hover{background:var(--green-ll)}
.ds-t-strong{font-weight:700;color:var(--ink)}
.ds-t-mono{font-family:var(--mono);font-weight:700;color:var(--ink)}
.ds-t-muted{color:var(--muted)}

/* ── Status pill (melhor/pior/neutro) ── */
.ds-pill{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px}
.ds-pill.melhor{background:var(--green-l);color:var(--green-dd)}
.ds-pill.pior{background:var(--coral-l);color:var(--coral-d)}
.ds-pill.neutro{background:var(--bg);color:var(--muted)}

/* ── Accent card (conclusão / insight final) ── */
.ds-accent{background:linear-gradient(135deg,var(--green-l),var(--green-ll));border:1px solid #C8EEDD;border-radius:var(--r-sm);padding:18px 20px;position:relative}
.ds-accent-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--green-d);padding:4px 10px;border-radius:99px;margin-bottom:10px}
.ds-accent em{font-style:normal;font-size:14px;color:var(--ink-2);line-height:1.6;font-weight:500}

/* ============================ CASCO (shell) =============================== */
/* Sidebar + topbar + main reutilizáveis por todas as telas-PoC (evita
   duplicar o casco em cada arquivo). No app real o sidebar vem do _nav.js. */
.ds-shell{display:flex;min-height:100vh}
.ds-sb{width:252px;flex-shrink:0;padding:24px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.ds-sb-logo{display:flex;align-items:center;gap:11px;padding:4px 8px}
.ds-sb-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#10B981,#047857);display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;box-shadow:var(--sh-green)}
.ds-sb-logo b{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
.ds-sb-logo span{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.4px;margin-top:-2px}
.ds-sb-search{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--muted);box-shadow:var(--sh)}
.ds-sb-search input{border:none;outline:none;background:none;font-family:var(--ff);font-size:13px;color:var(--ink-2);width:100%}
.ds-sb-search kbd{font-family:var(--mono);font-size:10px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}
.ds-sb-grp{display:flex;flex-direction:column;gap:3px}
.ds-sb-grp-t{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;padding:6px 12px 4px}
.ds-sb-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--ink-3);font-size:13.5px;font-weight:600;cursor:pointer;transition:.18s;text-decoration:none}
.ds-sb-item svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.9}
.ds-sb-item:hover{background:var(--card);color:var(--ink)}
.ds-sb-item.on{background:linear-gradient(135deg,#10B981,#059669);color:#fff;box-shadow:var(--sh-green)}
.ds-sb-item.on svg{stroke:#fff}
.ds-sb-badge{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;background:var(--coral);color:#fff;border-radius:99px;padding:1px 7px}
.ds-sb-item.on .ds-sb-badge{background:rgba(255,255,255,.25)}
.ds-sb-up{margin-top:auto;background:linear-gradient(150deg,#1C2B24,#0E1B16);border-radius:var(--r);padding:18px;color:#fff;position:relative;overflow:hidden}
.ds-sb-up::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.5),transparent 70%)}
.ds-sb-up-tier{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#7DE9C3;margin-bottom:8px;position:relative}
.ds-sb-up h4{font-size:15px;font-weight:800;letter-spacing:-.3px;position:relative}
.ds-sb-up p{font-size:12px;color:#A9B8B1;margin:5px 0 13px;position:relative}
.ds-sb-up-btn{display:block;text-align:center;background:#10B981;color:#fff;border:none;border-radius:11px;padding:10px;font-family:var(--ff);font-size:13px;font-weight:700;cursor:pointer;position:relative;transition:.2s}
.ds-sb-up-btn:hover{background:#13c98d;transform:translateY(-1px)}
.ds-main{flex:1;min-width:0;padding:24px 30px 40px}
.ds-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.ds-crumb{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:6px}
.ds-crumb b{color:var(--ink-3)}
.ds-top h1{font-size:27px;font-weight:800;color:var(--ink);letter-spacing:-.9px}
.ds-top .ds-sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.ds-top .ds-sub b{color:var(--green-d);font-weight:700}
.ds-top-r{display:flex;align-items:center;gap:10px}
.ds-icobtn{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-3);cursor:pointer;box-shadow:var(--sh);transition:.18s;position:relative}
.ds-icobtn:hover{color:var(--green-d);border-color:var(--green);transform:translateY(-2px)}
.ds-icobtn svg{width:19px;height:19px;stroke-width:1.9}
.ds-icobtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:2px solid var(--card)}
.ds-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#FF6B5E,#E8503F);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 16px rgba(255,107,94,.35)}

/* ============================ MOBILE (≤479px) ============================= */
/* Mobile como módulo de primeira classe: grids colapsam, touch targets ≥44px */
@media(max-width:479px){
  .ds-card-h{padding:16px 16px 0}
  .ds-list-row{grid-template-columns:38px 1fr auto;gap:10px}
  .ds-list-row .ds-row-score{display:none}
  .ds-kpi-num{font-size:26px}
  .ds-cta,.ds-btn-ghost{padding:13px 18px} /* alvo de toque confortável */
  .ds-seg{width:100%;overflow-x:auto}
  .ds-sb{display:none}
  .ds-main{padding:18px 16px 80px}
  .ds-top h1{font-size:22px}
}