/* ==========================================================================
   BagInvest — Dashboard & Login
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero de patrimônio (assinatura visual: "pilha de valor")                */
/* ---------------------------------------------------------------------- */
.hero-patrimonio {
  position: relative;
  overflow: hidden;
  padding: var(--espaco-6) var(--espaco-6);
  margin-bottom: var(--espaco-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-6);
  perspective: 1200px;
}

.hero-patrimonio-saudacao {
  font-size: 14px;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-2);
}

.hero-patrimonio-rotulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-2);
}

.hero-patrimonio-valor {
  font-family: var(--fonte-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
}

.hero-patrimonio-variacao {
  font-family: var(--fonte-mono);
  font-size: 15px;
  margin-top: var(--espaco-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* A "pilha de valor": barras que crescem ao carregar, metáfora de
   patrimônio se construindo — usada também na composição da carteira. */
.pilha-valor {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 96px;
  flex-shrink: 0;
  transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateX(4deg);
  transition: transform var(--transicao-lenta);
}
.hero-patrimonio:hover .pilha-valor {
  transform: rotateY(0deg) rotateX(0deg);
}

.pilha-barra {
  width: 14px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--cor-marca-forte), var(--cor-marca));
  box-shadow: 2px 4px 10px -2px rgba(0, 0, 0, 0.35);
  transform-origin: bottom;
  animation: pilha-crescer 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pilha-barra:nth-child(1) { animation-delay: 0ms; }
.pilha-barra:nth-child(2) { animation-delay: 60ms; background: linear-gradient(180deg, var(--cor-positiva), #2BB98A); }
.pilha-barra:nth-child(3) { animation-delay: 120ms; }
.pilha-barra:nth-child(4) { animation-delay: 180ms; background: linear-gradient(180deg, var(--cor-positiva), #2BB98A); }
.pilha-barra:nth-child(5) { animation-delay: 240ms; }
.pilha-barra:nth-child(6) { animation-delay: 300ms; background: linear-gradient(180deg, var(--cor-info), #4C86B8); }

@keyframes pilha-crescer {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pilha-barra { animation: none; }
  .pilha-valor, .hero-patrimonio:hover .pilha-valor { transform: none; }
}

@media (max-width: 640px) {
  .hero-patrimonio { flex-direction: column; align-items: flex-start; gap: var(--espaco-4); }
  .pilha-valor { align-self: flex-end; }
}

/* ---------------------------------------------------------------------- */
/* Contador animado (número sobe até o valor real)                         */
/* ---------------------------------------------------------------------- */
.numero-animado { display: inline-block; }

/* ---------------------------------------------------------------------- */
/* Grid principal do dashboard                                             */
/* ---------------------------------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--espaco-5);
}
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.painel-titulo {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: var(--espaco-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grafico-container {
  height: 280px;
  position: relative;
}

.filtros-periodo {
  display: flex;
  gap: 4px;
  background: var(--cor-fundo-elevado-2);
  padding: 3px;
  border-radius: var(--raio-sm);
}
.filtro-periodo-botao {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  border-radius: 6px;
}
.filtro-periodo-botao.ativo {
  background: var(--cor-fundo-elevado);
  color: var(--cor-marca);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------------- */
/* Composição da carteira                                                  */
/* ---------------------------------------------------------------------- */
.composicao-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-2) 0;
}
.composicao-cor {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.composicao-nome { flex: 1; font-size: 13.5px; }
.composicao-percentual {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--cor-texto-secundario);
}

/* ---------------------------------------------------------------------- */
/* Últimas movimentações (lista compacta)                                  */
/* ---------------------------------------------------------------------- */
.mov-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.mov-item:last-child { border-bottom: none; padding-bottom: 0; }

.mov-icone {
  width: 36px; height: 36px;
  border-radius: var(--raio-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mov-icone svg { width: 16px; height: 16px; }

.mov-info { flex: 1; min-width: 0; }
.mov-tipo { font-size: 13.5px; font-weight: 600; }
.mov-detalhe { font-size: 12px; color: var(--cor-texto-secundario); }
.mov-valor { font-family: var(--fonte-mono); font-size: 13.5px; white-space: nowrap; }

/* ---------------------------------------------------------------------- */
/* Meta / objetivo                                                         */
/* ---------------------------------------------------------------------- */
.meta-card { margin-top: var(--espaco-5); }
.meta-cabecalho {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--espaco-3);
}
.meta-titulo { font-size: 14px; font-weight: 600; }
.meta-percentual { font-family: var(--fonte-mono); color: var(--cor-marca); font-size: 14px; }
.meta-valores {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--cor-texto-secundario);
  margin-top: var(--espaco-2);
  font-family: var(--fonte-mono);
}

/* ==========================================================================
   Login
   ========================================================================== */
body.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(212, 168, 83, 0.08), transparent),
    var(--cor-fundo);
  padding: var(--espaco-4);
}

.login-caixa {
  width: 100%;
  max-width: 380px;
}

.login-marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-6);
  justify-content: center;
}

.login-marca-icone {
  width: 44px; height: 44px;
  border-radius: var(--raio-md);
  background: linear-gradient(155deg, var(--cor-marca-forte), var(--cor-marca));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: 20px;
  color: #16202F;
  box-shadow: var(--sombra-marca);
}

.login-marca-nome {
  font-family: var(--fonte-display);
  font-size: 24px;
  font-weight: 600;
}

.login-card {
  padding: var(--espaco-6);
}

.login-titulo {
  font-size: 21px;
  margin-bottom: var(--espaco-1);
}
.login-subtitulo {
  font-size: 13.5px;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-5);
}

.login-opcoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 13px;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-5);
}

.login-erro {
  background: var(--cor-negativa-fraca);
  color: var(--cor-negativa);
  border-radius: var(--raio-sm);
  padding: var(--espaco-3);
  font-size: 13px;
  margin-bottom: var(--espaco-4);
  display: none;
}
.login-erro.visivel { display: block; }

.login-rodape {
  text-align: center;
  margin-top: var(--espaco-5);
  font-size: 12.5px;
  color: var(--cor-texto-terciario);
}