/* ═══════════════════════════════════════════════
   GOING NORTH — investimentos.css
   Estilos exclusivos da página de investimentos.
   ═══════════════════════════════════════════════ */

/* ── Hero da página de investimentos ── */
.inv-hero {
  background: linear-gradient(135deg, var(--nav-bg) 0%, #003d2a 50%, #002b1e 100%);
  padding: 36px 32px 48px;
  position: relative;
  overflow: hidden;
}
.inv-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(26,171,94,.18) 0%, transparent 65%);
  pointer-events: none;
}
.inv-hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(13,148,136,.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner   { max-width: 1340px; margin: 0 auto; }
.hero-top     { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; }
.hero-top h1  { font-family: var(--font-d); font-size: 1.7rem; font-weight: 700; color: #fff; }
.hero-top p   { color: rgba(255,255,255,.55); font-size: .88rem; margin-top: 4px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Botões do hero */
.btn-primary        { background: var(--green); color: #fff; border: none; padding: 11px 22px; border-radius: 10px; font-size: .88rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .2s; font-family: var(--font-b); }
.btn-primary:hover  { background: var(--green-h); transform: translateY(-1px); box-shadow: 0 4px 16px var(--green-glow); }
.btn-ghost-light         { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.15); padding: 10px 18px; border-radius: 10px; font-size: .84rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all .2s; font-family: var(--font-b); }
.btn-ghost-light:hover   { background: rgba(255,255,255,.14); color: #fff; }
.visibility-btn          { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; padding: 4px; transition: color .2s; }
.visibility-btn:hover    { color: #fff; }

/* Cards de métricas no hero */
.hero-cards         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hcard              { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); border-radius: var(--r-lg); padding: 20px 24px; backdrop-filter: blur(4px); transition: background .2s; }
.hcard:hover        { background: rgba(255,255,255,.09); }
.hcard-label        { font-size: .78rem; color: rgba(255,255,255,.5); font-weight: 500; display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.hcard-val          { font-family: var(--font-d); font-size: 1.6rem; font-weight: 700; color: #fff; }
.hcard-val.green    { color: #4ade80; }
.hcard-val.red      { color: #f87171; }
.hcard-change       { font-size: .78rem; margin-top: 6px; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: 5px; }
.hcard-change.up    { color: #4ade80; }
.hcard-change.dn    { color: #f87171; }

/* ── Ticker de cotações ── */
.ticker-wrap { background: #001a1a; border-bottom: 1px solid rgba(26,171,94,.15); overflow: hidden; height: 36px; display: flex; align-items: center; position: relative; }
.ticker-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, #001a1a, transparent); z-index: 2; pointer-events: none; }
.ticker-wrap::after  { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(270deg, #001a1a, transparent); z-index: 2; pointer-events: none; }
.ticker-track        { display: flex; align-items: center; animation: tickerScroll 60s linear infinite; white-space: nowrap; }
.ticker-track:hover  { animation-play-state: paused; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-item   { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; border-right: 1px solid rgba(255,255,255,.07); font-size: .76rem; }
.ticker-name   { font-weight: 700; color: rgba(255,255,255,.6); font-family: var(--font-d); letter-spacing: .03em; font-size: .72rem; }
.ticker-price  { font-weight: 700; color: #fff; font-family: var(--font-d); }
.ticker-chg    { font-weight: 700; font-size: .71rem; }
.ticker-chg.up  { color: #4ade80; }
.ticker-chg.dn  { color: #f87171; }
.ticker-chg.neu { color: rgba(255,255,255,.4); }
.ticker-dot     { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ticker-dot.up  { background: #4ade80; }
.ticker-dot.dn  { background: #f87171; }
.ticker-dot.neu { background: rgba(255,255,255,.3); }

/* ── Layout principal ── */
.main { padding: 32px; max-width: 1340px; margin: 0 auto; }

/* ── Tabs ── */
.tabs        { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px; margin-bottom: 28px; width: fit-content; box-shadow: var(--shadow); }
.tab         { padding: 8px 22px; border-radius: 9px; font-size: .85rem; font-weight: 500; cursor: pointer; border: none; background: transparent; color: var(--text3); transition: all .2s; font-family: var(--font-b); }
.tab.active  { background: var(--nav-bg); color: #fff; font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Card genérico ── */
.card        { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.card-head   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.card-title  { font-family: var(--font-d); font-size: .95rem; font-weight: 700; color: var(--text); }
.card-sub    { font-size: .78rem; color: var(--text3); margin-top: 2px; }
.two-col     { display: grid; grid-template-columns: 1fr 1fr;       gap: 20px; margin-bottom: 20px; }
.three-col   { display: grid; grid-template-columns: 1fr 1fr 1fr;   gap: 20px; margin-bottom: 20px; }
.chart-wrap  { position: relative; height: 220px; }

/* ── Lista de ativos ── */
.inv-item              { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border2); margin-bottom: 10px; transition: background .15s; cursor: pointer; }
.inv-item:hover        { background: #eef5f1; }
.inv-icon              { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.inv-info              { flex: 1; min-width: 0; }
.inv-name              { font-size: .9rem; font-weight: 600; color: var(--text); }
.inv-meta              { font-size: .76rem; color: var(--text3); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.inv-values            { text-align: right; }
.inv-current           { font-family: var(--font-d); font-size: .95rem; font-weight: 700; color: var(--text); }
.inv-gain              { font-size: .76rem; margin-top: 3px; font-weight: 600; }
.inv-gain.pos          { color: var(--green); }
.inv-gain.neg          { color: var(--red); }
.inv-bar-wrap          { width: 80px; height: 4px; background: var(--border); border-radius: 20px; overflow: hidden; margin-top: 5px; margin-left: auto; }
.inv-bar               { height: 100%; border-radius: 20px; background: var(--green); }

/* Badges de classe de ativo */
.badge             { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: .7rem; font-weight: 600; }
.badge-rf          { background: rgba(26,171,94,.12);   color: var(--green); }
.badge-rv          { background: rgba(59,130,246,.12);  color: var(--blue); }
.badge-crypto      { background: rgba(245,158,11,.12);  color: #d97706; }
.badge-fi          { background: rgba(124,58,237,.12);  color: var(--purple); }

/* Ações que aparecem no hover do ativo */
.inv-actions              { display: flex; gap: 6px; opacity: 0; transition: opacity .2s; }
.inv-item:hover .inv-actions { opacity: 1; }
.inv-action-btn           { background: none; border: 1.5px solid var(--border); border-radius: 7px; padding: 4px 10px; font-size: .74rem; cursor: pointer; font-family: var(--font-b); color: var(--text2); transition: all .2s; }
.inv-action-btn:hover           { border-color: var(--green); color: var(--green); }
.inv-action-btn.danger:hover    { border-color: var(--red); color: var(--red); }

/* ── Estado vazio ── */
.empty-state       { text-align: center; padding: 56px 20px; color: var(--text3); }
.empty-state svg   { opacity: .2; margin-bottom: 14px; }
.empty-state p     { font-size: .92rem; font-weight: 600; color: var(--text2); }
.empty-state span  { font-size: .82rem; margin-top: 6px; display: block; }

/* ── Cards de produtos de investimento ── */
.products-grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.product-card        { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.product-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-banner      { height: 130px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
/* Esferas decorativas no banner */
.product-banner::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
.product-banner::after  { content: ''; position: absolute; bottom: -20px; left: -20px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.06); }
.product-banner svg     { position: relative; z-index: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.2)); }
.product-body        { background: var(--surface); padding: 18px 20px; }
.product-name        { font-family: var(--font-d); font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.product-desc        { font-size: .8rem; color: var(--text3); margin-bottom: 14px; line-height: 1.5; }
.product-footer      { display: flex; align-items: center; justify-content: space-between; }
.product-rate        { font-size: .8rem; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.product-cta         { font-size: .8rem; color: var(--green); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: gap .2s; }
.product-cta:hover   { gap: 7px; }

/* ── Simulador de investimentos ── */
.sim-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sim-form         { display: flex; flex-direction: column; gap: 16px; }
.form-group       { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .8rem; font-weight: 600; color: var(--text2); }
.form-control     { padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 9px; font-size: .87rem; font-family: var(--font-b); color: var(--text); background: #fff; outline: none; transition: border .2s; }
.form-control:focus   { border-color: var(--green); }
select.form-control   { cursor: pointer; }

/* Range/slider customizado */
.range-wrap   { display: flex; flex-direction: column; gap: 8px; }
.range-input  { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; background: var(--border); outline: none; cursor: pointer; }
.range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green); cursor: pointer; box-shadow: 0 0 0 3px rgba(26,171,94,.2); }
.range-labels { display: flex; justify-content: space-between; font-size: .74rem; color: var(--text3); }

/* Painel de resultado do simulador */
.sim-result           { background: var(--surface2); border-radius: var(--r-lg); padding: 24px; border: 1px solid var(--border2); }
.sim-result-title     { font-family: var(--font-d); font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.sim-stat             { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border2); }
.sim-stat:last-child  { border-bottom: none; }
.sim-stat-label       { font-size: .82rem; color: var(--text3); }
.sim-stat-val         { font-family: var(--font-d); font-size: .92rem; font-weight: 700; color: var(--text); }
.sim-stat-val.green   { color: var(--green); }
.sim-chart-wrap       { height: 160px; margin-top: 16px; }

/* ── Cards de corretoras/plataformas ── */
.platform-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.platform-card         { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; text-align: center; box-shadow: var(--shadow); transition: all .2s; cursor: pointer; }
.platform-card:hover   { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--green); }
.platform-logo         { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.4rem; }
.platform-name         { font-family: var(--font-d); font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.platform-desc         { font-size: .76rem; color: var(--text3); line-height: 1.5; margin-bottom: 14px; }
.platform-status       { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.ps-available          { background: var(--green-light); color: var(--green); }
.ps-soon               { background: rgba(0,0,0,.05); color: var(--text3); }

/* ── Caixa informativa ── */
.info-box          { background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.18); border-radius: var(--r-md); padding: 16px 18px; display: flex; gap: 12px; margin-top: 16px; }
.info-box svg      { flex-shrink: 0; color: var(--blue); margin-top: 1px; }
.info-box-text     { font-size: .83rem; color: var(--text2); line-height: 1.6; }
.info-box-text a   { color: var(--green); font-weight: 600; }

/* ── Modal ── */
.modal-overlay       { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.modal-overlay.open  { display: flex; }
.modal               { background: #fff; border-radius: var(--r-xl); padding: 32px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.18); animation: slideUp .25s ease; }
@keyframes slideUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin      { to { transform: rotate(360deg); } }
.modal h3            { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; color: var(--text); }
.form-row            { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions        { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-cancel          { padding: 10px 20px; border-radius: 9px; border: 1.5px solid var(--border); background: transparent; font-size: .86rem; cursor: pointer; color: var(--text2); font-family: var(--font-b); transition: all .2s; }
.btn-cancel:hover    { background: var(--bg); }
.btn-ghost           { background: transparent; color: var(--green); border: 1.5px solid var(--green); padding: 9px 18px; border-radius: 10px; font-size: .84rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all .2s; font-family: var(--font-b); }
.btn-ghost:hover     { background: var(--green-light); }

/* ── Toast de feedback ── */
.toast      { position: fixed; bottom: 28px; right: 28px; background: var(--nav-bg); color: #fff; padding: 13px 20px; border-radius: 12px; font-size: .86rem; font-weight: 500; box-shadow: var(--shadow-md); z-index: 9999; transform: translateY(80px); opacity: 0; transition: all .3s; display: flex; align-items: center; gap: 10px; max-width: 320px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-icon { color: var(--green); }

/* ── Legenda do gráfico donut ── */
.donut-legend { display: flex; flex-direction: column; gap: 9px; }
.legend-item  { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.legend-dot   { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-name  { color: var(--text2); flex: 1; }
.legend-val   { font-weight: 600; color: var(--text); font-family: var(--font-d); }

/* ── Lista com scroll ── */
.scroll-list { max-height: 380px; overflow-y: auto; padding-right: 2px; }

/* ── Tabela de alocação ── */
.alloc-table { width: 100%; border-collapse: collapse; }
.alloc-table th { font-size: .74rem; font-weight: 600; color: var(--text3); text-align: left; padding: 8px 12px; border-bottom: 1.5px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
.alloc-table td { font-size: .83rem; padding: 11px 12px; border-bottom: 1px solid var(--border2); color: var(--text); }
.alloc-table tr:last-child td { border-bottom: none; }
.alloc-table tr:hover td      { background: var(--surface2); }
/* Barra de percentual em linha da tabela */
.perc-bar  { width: 80px; height: 5px; background: var(--border); border-radius: 20px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 8px; }
.perc-fill { height: 100%; border-radius: 20px; }

/* ── Responsivo ── */
@media (max-width: 1100px) {
  .hero-cards     { grid-template-columns: 1fr 1fr; }
  .products-grid  { grid-template-columns: 1fr 1fr; }
  .platform-grid  { grid-template-columns: 1fr 1fr; }
  .three-col      { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .tabs           { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab            { white-space: nowrap; padding: 7px 14px; font-size: .8rem; }
  .page-head      { flex-direction: column; align-items: flex-start; gap: 12px; }
  .modal-box      { width: 96%; padding: 24px 18px; max-height: 92dvh; overflow-y: auto; }
  .alloc-table    { font-size: .8rem; }
  .inv-donut-wrap { flex-direction: column; }
}

@media (max-width: 700px) {
  .hero-cards     { grid-template-columns: 1fr; }
  .two-col        { grid-template-columns: 1fr; }
  .products-grid  { grid-template-columns: 1fr; }
  .platform-grid  { grid-template-columns: 1fr; }
  .sim-grid       { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }
  .main           { padding: 12px; }
  .inv-hero       { padding: 20px 12px 32px; }
  .navbar         { padding: 0 16px; }
  .nav-links      { display: none; }
  .ticker-bar     { font-size: .75rem; }
  .inv-card       { padding: 16px; }
}