/* ============================================================
   PORTFOLIO DASHBOARD — Main Styles
   ============================================================ */

/* ── Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--texto);
  background: var(--fundo);
  min-height: 100vh;
  padding: var(--sp-6);
  max-width: var(--bp-lg);
  margin: 0 auto;
}

/* ── Header ────────────────────────────────────────────────── */
.cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--borda-fina);
  margin-bottom: var(--sp-8);
}

.cabecalho__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.cabecalho__icone {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.cabecalho__titulo {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.cabecalho__data {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  font-family: var(--ff-mono);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  margin-bottom: var(--sp-10);
}

.hero__rotulo {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}

.hero__valor {
  font-family: var(--ff-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
}

.hero__variacao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.hero__variacao--positivo {
  background: var(--positivo-bg);
  color: var(--positivo);
}

.hero__variacao--negativo {
  background: var(--negativo-bg);
  color: var(--negativo);
}

.hero__seta {
  font-size: var(--fs-md);
}

.hero__periodo {
  color: var(--texto-suave);
}

/* ── Stats Row ─────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.stat-card {
  background: var(--superficie);
  border: 1px solid var(--borda-fina);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stat-card__rotulo {
  font-size: var(--fs-xs);
  color: var(--texto-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-card__valor {
  font-family: var(--ff-mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.stat-card__valor--destaque {
  font-size: var(--fs-base);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
}

/* ── Chart ─────────────────────────────────────────────────── */
.grafico {
  margin-bottom: var(--sp-10);
}

.grafico__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.grafico__titulo {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.grafico__botoes {
  display: flex;
  gap: var(--sp-1);
  background: var(--superficie);
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
}

.grafico__botao {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.grafico__botao:hover {
  background: var(--superficie-alt);
  color: var(--texto);
}

.grafico__botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grafico__botao[aria-selected="true"] {
  background: var(--accent-dim);
  color: var(--texto);
}

.grafico__container {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda-fina);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  overflow: hidden;
}

#graficoCanvas {
  width: 100%;
  height: 280px;
  display: block;
}

.grafico__tooltip {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

.grafico__tooltip-data {
  font-size: var(--fs-xs);
  color: var(--texto-muted);
}

.grafico__tooltip-valor {
  font-family: var(--ff-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* ── Asset Table ───────────────────────────────────────────── */
.ativos {
  margin-bottom: var(--sp-10);
}

.secao__titulo {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-6);
}

.ativos__tabela {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--superficie);
  border: 1px solid var(--borda-fina);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ativo-linha {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto 100px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--superficie);
  transition: background var(--dur-fast) var(--ease-out);
}

.ativo-linha:not(:last-child) {
  border-bottom: 1px solid var(--borda-fina);
}

.ativo-linha:hover {
  background: var(--superficie-alt);
}

.ativo-linha__icone {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--texto);
}

.ativo-linha__nome {
  font-weight: var(--fw-medium);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ativo-linha__ticker {
  font-size: var(--fs-xs);
  color: var(--texto-muted);
  font-family: var(--ff-mono);
}

.ativo-linha__valor,
.ativo-linha__lucro {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  text-align: right;
}

.ativo-linha__percent {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  text-align: right;
}

.ativo-linha__lucro--positivo {
  color: var(--positivo);
}

.ativo-linha__lucro--negativo {
  color: var(--negativo);
}

.ativo-linha__barra {
  height: 6px;
  background: var(--borda);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.ativo-linha__barra-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ── Trades ────────────────────────────────────────────────── */
.operacoes {
  margin-bottom: var(--sp-10);
}

.operacoes__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--superficie);
  border: 1px solid var(--borda-fina);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.operacao-linha {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--superficie);
  transition: background var(--dur-fast) var(--ease-out);
}

.operacao-linha:not(:last-child) {
  border-bottom: 1px solid var(--borda-fina);
}

.operacao-linha:hover {
  background: var(--superficie-alt);
}

.operacao-linha__badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  min-width: 48px;
  text-align: center;
}

.operacao-linha__badge--compra {
  background: var(--positivo-bg);
  color: var(--positivo);
}

.operacao-linha__badge--venda {
  background: var(--negativo-bg);
  color: var(--negativo);
}

.operacao-linha__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.operacao-linha__ativo {
  font-weight: var(--fw-medium);
}

.operacao-linha__data {
  font-size: var(--fs-xs);
  color: var(--texto-muted);
}

.operacao-linha__qtd {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--texto-suave);
  text-align: right;
}

.operacao-linha__preco {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: right;
  min-width: 100px;
}

/* ── Footer ────────────────────────────────────────────────── */
.rodape {
  text-align: center;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--borda-fina);
  font-size: var(--fs-xs);
  color: var(--texto-muted);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 48rem) {
  body {
    padding: var(--sp-4);
  }

  .hero__valor {
    font-size: var(--fs-xl);
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .ativo-linha {
    grid-template-columns: 36px 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .ativo-linha__percent,
  .ativo-linha__barra {
    display: none;
  }

  .operacao-linha {
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .operacao-linha__qtd {
    display: none;
  }
}

@media (max-width: 36rem) {
  .hero__valor {
    font-size: var(--fs-lg);
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .stat-card {
    padding: var(--sp-4);
  }

  .stat-card__valor {
    font-size: var(--fs-md);
  }

  .grafico__cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }

  #graficoCanvas {
    height: 200px;
  }
}

/* ── Accessibility ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fundo);
}

::-webkit-scrollbar-thumb {
  background: var(--borda);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--texto-muted);
}