/* =========================================================================
   INVEST PRO — DESIGN SYSTEM
   Este é o único arquivo de estilo do produto. Toda tela nova DEVE reutilizar
   estes tokens e componentes em vez de criar CSS solto. Ver DESIGN_SYSTEM.md
   na raiz do projeto para as regras completas.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* --- superfícies --- */
  --bg-0:#101012;      /* fundo da página */
  --bg-1:#18181b;      /* nav / superfícies elevadas */
  --bg-2:#1e1e22;      /* cards */
  --bg-3:#28282d;      /* hover / elevado */
  --bg-4:#323238;      /* inputs / controles */

  /* --- bordas --- */
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);

  /* --- texto --- */
  --text-1:#f5f5f7;
  --text-2:#a8a8b3;
  --text-3:#6d6d76;

  /* --- marca / identidade --- */
  --brand:#c9a227;
  --brand-strong:#e0b83a;
  --brand-soft:rgba(201,162,39,.14);

  /* --- semântica financeira --- */
  --pos:#34d399;
  --pos-soft:rgba(52,211,153,.14);
  --neg:#f87171;
  --neg-soft:rgba(248,113,113,.14);
  --info:#5b9bf7;
  --info-soft:rgba(91,155,247,.14);

  /* --- espaçamento --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;

  /* --- raios --- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;

  /* --- sombra --- */
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
  --shadow-pop:0 12px 40px rgba(0,0,0,.45);

  /* --- tipografia --- */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- transição padrão --- */
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
html{background:var(--bg-0);}
html,body{
  max-width:100vw;
  overflow-x:hidden; /* trava de segurança: nenhum elemento (canvas de gráfico, iframe da
  TradingView etc.) pode fazer a página inteira ficar mais larga que a tela e forçar zoom/scroll horizontal */
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg-0);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.5;
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  overscroll-behavior-y:none; /* instalado como app: sem "puxar e revelar fundo" no iOS/Android */
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;touch-action:manipulation;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;}
svg{display:block;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:var(--r-full);}
::-webkit-scrollbar-track{background:transparent;}

/* =========================================================================
   LAYOUT
   ========================================================================= */
.app-shell{min-height:100%;display:flex;flex-direction:column;}

.page{
  max-width:1360px;
  margin:0 auto;
  width:100%;
  padding:var(--sp-7) var(--sp-8) var(--sp-10);
}
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--sp-7);flex-wrap:wrap;gap:var(--sp-4);
}
.page-head h1{font-size:26px;}
.page-head .eyebrow{
  color:var(--text-3);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:var(--sp-2);
}
.grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--sp-6);align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.stack{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0;}
/* item de grid/flex sem isso não deixa encolher abaixo do conteúdo — um
   <canvas> do Chart.js (que tem largura própria) empurra a coluna, a
   coluna empurra a página inteira, e a tela do celular passa a "não
   caber" (efeito relatado: página abre precisando dar zoom pra fora). */
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0;}
@media (max-width:1080px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* =========================================================================
   NAV SUPERIOR
   ========================================================================= */
.nav-top{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:var(--sp-7);
  padding:0 var(--sp-8);height:64px;
  background:rgba(24,24,27,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  /* instalado na tela de início do iPhone, o app roda por baixo do
     notch/Dynamic Island (apple-mobile-web-app-capable=yes) — sem isso a
     barra ficaria por trás do relógio/câmera */
  padding-top:env(safe-area-inset-top,0px);
  height:calc(64px + env(safe-area-inset-top,0px));
}
.brand{display:flex;align-items:center;gap:var(--sp-2);}
.brand-mark{
  width:30px;height:30px;border-radius:9px;overflow:hidden;
  background:#000;
  display:flex;align-items:center;justify-content:center;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;}
.brand-name{font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--text-1);}
.brand-name strong{font-weight:800;color:var(--brand);}

.nav-links{display:flex;align-items:center;gap:var(--sp-2);flex:1;}
.nav-link{
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);
  font-size:13.5px;font-weight:600;color:var(--text-2);
  transition:color .15s var(--ease),background .15s var(--ease);
}
.nav-link:hover,.nav-link:active{color:var(--text-1);background:var(--bg-3);}
.nav-link.active{color:var(--bg-0);background:var(--text-1);}

.nav-burger{
  display:none;flex-shrink:0;width:40px;height:40px;border-radius:var(--r-full);
  border:1px solid transparent;background:transparent;color:var(--text-1);
  align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s var(--ease);
}
.nav-burger:hover,.nav-burger:active{background:var(--bg-3);}

.nav-right{display:flex;align-items:center;gap:var(--sp-2);}
.icon-btn{
  position:relative;width:36px;height:36px;border-radius:var(--r-full);
  border:1px solid transparent;background:transparent;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.icon-btn:hover,.icon-btn:active{background:var(--bg-3);color:var(--text-1);}
.icon-btn .dot{
  position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--brand);border:2px solid var(--bg-1);
}
.avatar-btn{
  width:36px;height:36px;border-radius:50%;background:var(--bg-4);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-1);
  border:1px solid var(--border-strong);
}

/* =========================================================================
   BOTÕES  (única fonte de verdade para botões do produto)
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:40px;padding:0 var(--sp-5);border-radius:var(--r-full);
  font-size:13.5px;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:filter .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease);
  white-space:nowrap;
}
.btn:active{filter:brightness(.92);}
.btn-primary{background:var(--text-1);color:var(--bg-0);}
.btn-primary:hover{background:#fff;}
.btn-brand{background:linear-gradient(155deg,var(--brand-strong),var(--brand));color:#1a1406;}
.btn-brand:hover{filter:brightness(1.06);}
.btn-secondary{background:var(--bg-3);color:var(--text-1);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--bg-4);}
.btn-ghost{background:transparent;color:var(--text-2);}
.btn-ghost:hover{color:var(--text-1);background:var(--bg-3);}
.btn-danger{background:var(--neg-soft);color:var(--neg);}
.btn-danger:hover{background:rgba(248,113,113,.22);}
.btn-sm{height:32px;padding:0 var(--sp-4);font-size:12.5px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* =========================================================================
   PÍLULAS / SEGMENTED CONTROL  (filtros de período, dropdowns curtos)
   ========================================================================= */
.pill-group{
  display:inline-flex;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-full);padding:3px;gap:2px;
}
.pill{
  border:none;background:transparent;color:var(--text-2);cursor:pointer;
  padding:6px 14px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.pill.active{background:var(--bg-4);color:var(--text-1);}
.pill:hover:not(.active),.pill:active:not(.active){color:var(--text-1);}

.dropdown-pill{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--border-strong);
  background:var(--bg-2);color:var(--text-1);font-size:13px;font-weight:600;cursor:pointer;
}

/* =========================================================================
   CARDS
   ========================================================================= */
.card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-card);
}
.card-flush{padding:0;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5);gap:var(--sp-3);}
.card-title{font-size:15px;font-weight:700;}
.card-sub{color:var(--text-3);font-size:12.5px;margin-top:2px;}
.card-link{font-size:12.5px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:4px;}
.card-link:hover{color:var(--text-1);}

/* =========================================================================
   STAT TILES
   ========================================================================= */
.stat-tile{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-5);
}
.stat-label{color:var(--text-3);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.stat-value{font-size:22px;font-weight:800;margin-top:var(--sp-2);letter-spacing:-.01em;}
.stat-delta{display:inline-flex;align-items:center;gap:3px;margin-top:var(--sp-2);font-size:12.5px;font-weight:700;}

/* =========================================================================
   BADGES / CHIPS
   ========================================================================= */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-full);
  font-size:12px;font-weight:700;
}
.badge-pos{background:var(--pos-soft);color:var(--pos);}
.badge-neg{background:var(--neg-soft);color:var(--neg);}
.badge-neutral{background:var(--bg-4);color:var(--text-2);}
.badge-info{background:var(--info-soft);color:var(--info);}
.badge-brand{background:var(--brand-soft);color:var(--brand-strong);}

.role-tag{
  padding:3px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
}
.role-admin{background:var(--brand-soft);color:var(--brand-strong);}
.role-gestor{background:var(--info-soft);color:var(--info);}
.role-trader{background:var(--pos-soft);color:var(--pos);}
.role-viewer{background:var(--bg-4);color:var(--text-2);}

/* =========================================================================
   LISTAS DE ATIVOS
   ========================================================================= */
.asset-row{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);transition:background .15s var(--ease);
}
.asset-row:last-child{border-bottom:none;}
.asset-row:hover,.asset-row:active{background:var(--bg-3);}
.ticker-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:#0d0d0f;
  background-size:cover;background-position:center;
}
/* ícone padrão dos ativos/ações — ver assets/img/trend-up.svg e trend-down.svg.
   Usar sempre um dos dois em vez de iniciais coloridas para representar ações/ativos. */
.ticker-avatar.trend-up{
  background-image:url('../img/trend-up.svg');
  box-shadow:0 0 10px rgba(52,211,153,.35);
  color:transparent;
}
.ticker-avatar.trend-down{
  background-image:url('../img/trend-down.svg');
  box-shadow:0 0 10px rgba(248,113,113,.35);
  color:transparent;
}
.ticker-avatar-sm{width:28px;height:28px;font-size:10px;}
.asset-info{flex:1;min-width:0;}
.asset-ticker{font-weight:700;font-size:13.5px;}
.asset-name{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.asset-price{text-align:right;}
.asset-price .value{font-weight:700;font-size:13.5px;}
.asset-price .delta{font-size:12px;font-weight:700;}

/* linha/preço cujo fetch de cotação falhou — mantém o último valor conhecido,
   só sinaliza visualmente que ele pode estar desatualizado. */
[data-symbol].quote-stale{opacity:.55;}
.feed-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--pos);}

/* =========================================================================
   TABELAS
   ========================================================================= */
.table-wrap{overflow-x:auto;}
.table-scroll{max-height:70vh;overflow-y:auto;}
.table-scroll thead th{position:sticky;top:0;background:var(--bg-2);z-index:1;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{
  text-align:left;color:var(--text-3);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover,tbody tr:active{background:var(--bg-3);}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text-2);}
.input,.select,textarea{
  background:var(--bg-4);border:1px solid var(--border-strong);color:var(--text-1);
  border-radius:var(--r-sm);padding:10px 12px;font-family:inherit;
  outline:none;transition:border-color .15s var(--ease);
  /* 16px, não 13.5px: abaixo de 16px o Safari do iPhone dá zoom sozinho ao
     focar o campo — um dos maiores motivos de um site parecer site, não
     app, no iOS. Prioridade sobre a escala tipográfica do resto da tela. */
  font-size:16px;
}
.input:focus,.select:focus,textarea:focus{border-color:var(--brand);}
.input::placeholder{color:var(--text-3);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}

/* =========================================================================
   GRÁFICO
   ========================================================================= */
.chart-wrap{position:relative;height:280px;min-width:0;width:100%;}
.chart-wrap canvas{max-width:100%;}
.chart-legend{display:flex;gap:var(--sp-5);margin-top:var(--sp-4);flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);}
.legend-dot{width:8px;height:8px;border-radius:50%;}

/* =========================================================================
   MODAL / OVERLAY
   ========================================================================= */
.overlay{
  position:fixed;inset:0;background:rgba(8,8,10,.6);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:var(--sp-6);
}
.overlay.open{display:flex;}
.modal{
  width:100%;max-width:520px;background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:var(--sp-7);box-shadow:var(--shadow-pop);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5);}

/* =========================================================================
   PROGRESS / METAS
   ========================================================================= */
.progress-track{height:8px;border-radius:var(--r-full);background:var(--bg-4);overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--brand),var(--brand-strong));}

/* =========================================================================
   UTILITÁRIOS
   ========================================================================= */
.text-pos{color:var(--pos);}
.text-neg{color:var(--neg);}
.text-muted{color:var(--text-3);}
.text-sub{color:var(--text-2);}
.mono{font-variant-numeric:tabular-nums;}
.flex{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.gap-2{gap:var(--sp-2);}
.gap-3{gap:var(--sp-3);}
.gap-4{gap:var(--sp-4);}
.divider{height:1px;background:var(--border);border:none;margin:var(--sp-5) 0;}
.empty-state{
  text-align:center;color:var(--text-3);padding:var(--sp-8) var(--sp-5);font-size:13px;
}

/* =========================================================================
   AVISO "INSTALAR APP"  (ver assets/js/pwa-install.js, roda em toda página)
   ========================================================================= */
.pwa-install-banner{
  position:fixed;left:12px;right:12px;z-index:90; /* abaixo do overlay/modal (100) — nunca cobre um modal aberto */
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  max-width:420px;margin:0 auto;
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  box-shadow:var(--shadow-pop);
  animation:pwaBannerIn .25s var(--ease);
}
@keyframes pwaBannerIn{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.pwa-install-mark{width:32px;height:32px;border-radius:9px;overflow:hidden;flex-shrink:0;background:#000;}
.pwa-install-mark img{width:100%;height:100%;object-fit:cover;}
.pwa-install-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-2);line-height:1.4;}
.pwa-install-text strong{color:var(--text-1);font-size:13px;}
.pwa-install-close{flex-shrink:0;width:30px;height:30px;}

/* =========================================================================
   RESPONSIVO  (celular — o app precisa parecer nativo em iOS/Android, não
   uma versão espremida do site de mesa)
   ========================================================================= */
@media (max-width:860px){
  /* menu principal vira hambúrguer — 6 links + marca + ícones não cabem
     numa tela de celular numa linha só */
  .nav-top{flex-wrap:wrap;padding:0 var(--sp-4);padding-top:env(safe-area-inset-top,0px);height:auto;min-height:calc(56px + env(safe-area-inset-top,0px));}
  .nav-burger{display:flex;margin-left:auto;order:1;}
  .nav-right{order:2;}
  .nav-links{
    display:none;order:3;width:100%;flex:none;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:var(--sp-2) 0 var(--sp-4);
    border-top:1px solid var(--border);margin-top:var(--sp-2);
  }
  .nav-top.nav-open .nav-links{display:flex;}
  .nav-link{padding:12px 14px;border-radius:var(--r-sm);}
  .nav-link.active{border-radius:var(--r-sm);}
}

@media (max-width:640px){
  .page{padding:var(--sp-5) var(--sp-4) var(--sp-9);}
  .page-head{margin-bottom:var(--sp-5);}
  .page-head h1{font-size:21px;}
  .card{padding:var(--sp-5);}
  .modal{padding:var(--sp-5);}
  .form-grid{grid-template-columns:1fr;}
  .chart-wrap{height:220px;}
  .stat-value{font-size:19px;}
  /* alvos de toque um pouco maiores que no desktop — mais fácil de acertar
     com o dedo, sensação de app de verdade em vez de site apertado */
  .icon-btn,.avatar-btn{width:40px;height:40px;}
  .btn{height:44px;}
  .btn-sm{height:36px;}
  /* linhas de tabela raramente cabem inteiras — cada uma já rola sozinha
     (.table-wrap), aqui só reduz a folga interna pra caber mais sem
     apertar o texto */
  thead th,tbody td{padding:var(--sp-3) var(--sp-4);}

  /* barra de filtros da tela Ativos (busca + 2 selects têm largura fixa
     inline, pensada pra desktop) — empilha em coluna cheia no celular */
  #assetSearchInput,#assetTypeFilter,#assetSortSelect{width:100% !important;}

  /* gráfico da TradingView (tela de detalhe do ativo) — 460px é proporção
     de desktop, sobra pouca tela pra ver o resto no celular */
  #tvChartContainer{height:320px !important;}
}

@media (max-width:420px){
  .page-head .eyebrow{font-size:11px;}
  .stat-value{font-size:18px;}
}