/* ==========================================================================
   PAINEL DE PATRIMÔNIO — prefixo wealth-
   Um painel grande que encena o relatório consolidado: número principal,
   rosca por classe de ativo, barras por instituição e a linha da janela.

   Tokens usados:
     --accent --accent-2   a série dos gráficos e o realce da variação
     --bg                  o fundo do escopo, que dilui a série (ver abaixo)
     --display --sans      números e títulos / interface
     --ease                curva única, em toda transição daqui
     --fg --fg-2 --fg-muted   tinta, herdada do escopo de tom da seção
     --light               os brancos com alfa, sempre via color-mix
     --radius-media        canto do painel e das barras
     --radius-pill         canto das abas e da pílula "ilustrativo"
     --rule --rule-2       as divisórias internas do painel
     --sec-gap             respiro vertical, via .sec-pad do core

   A PALETA DA SÉRIE. Cinco fatias e duas cores de marca: qualquer tentativa
   de esticar sage e tan em cinco passos distintos deixa dois pares quase
   iguais no meio da rosca. A saída é a que todo painel de private banking
   usa — UMA cor, cinco degraus — e o §3 do brief autoriza ("ou por
   opacidade"). Aqui o degrau é color-mix com --bg, e não opacity, por dois
   motivos: opacity criaria camada de composição em cinco elementos que
   nunca mudam, e a bolinha da legenda teria de repetir a mesma conta em
   outro contexto de empilhamento para dar a mesma cor. O último degrau
   troca para --accent-2 justamente onde os passos ficam mais próximos: é o
   par de fatias pequenas (12% e 12%) que precisa da diferença de matiz.

   O PAINEL É .glass COM DESFOQUE ZERO. Da primitiva se quer a borda tênue e
   o brilho radial vindo do topo — que é o desenho de uma superfície de
   aplicativo. O desfoque não: atrás do painel há um fundo opaco de seção,
   não há o que desfocar, e a camada custaria composição de graça. Mesmo
   raciocínio do conteudo/trio-cards-ui-simulada.

   O JS quase não escreve aparência: escreve DADO (dasharray da fatia,
   proporção da barra, offset da linha, número) e uma classe. Duração,
   curva, cor e forma estão todas aqui.
   ========================================================================== */

.wealth{
  /* Canto do painel. Segue o tema: 0 num projeto flat, 16 num arredondado. */
  --wealth-radius:var(--radius-media);

  /* Respiro interno de cada célula da grade. É o mesmo da barra de topo e
     do pé — o painel inteiro respira por esta variável. */
  --wealth-cell-pad:clamp(18px,2vw,28px);

  --wealth-donut:132px;      /* lado da rosca */
  --wealth-spark-h:96px;     /* altura da caixa da linha */
  --wealth-bar-h:8px;        /* espessura da barra de instituição */
  --wealth-bar-radius:var(--radius-media);
  --wealth-inst-name:82px;   /* coluna do nome da instituição */
  --wealth-inst-val:92px;    /* coluna do valor */

  /* Durações das formas crescendo, lidas só pelo CSS. */
  --wealth-grow:.9s;         /* fatia e barra */
  --wealth-draw:1.4s;        /* traçado da linha */

  /* Os dois tempos que o SCRIPT lê, em SEGUNDOS, com parseFloat. Ficam aqui
     porque são ritmo de desenho, não lógica — quem achar a contagem
     apressada mexe numa linha de CSS. Em ms a conta sairia mil vezes maior
     e o painel pareceria travado. */
  --wealth-count-dur:1.1s;   /* contagem do número principal */
  --wealth-ping-hold:2.9s;   /* volta completa do anel de sincronia */

  /* A série: cinco degraus de uma cor só, do maior peso ao menor. */
  --wealth-s1:var(--accent);
  --wealth-s2:color-mix(in srgb,var(--accent) 74%,var(--bg));
  --wealth-s3:color-mix(in srgb,var(--accent) 56%,var(--bg));
  --wealth-s4:color-mix(in srgb,var(--accent) 42%,var(--bg));
  --wealth-s5:color-mix(in srgb,var(--accent-2) 62%,var(--bg));
}


/* ==========================================================================
   O PAINEL
   ========================================================================== */

.wealth-panel{
  --glass-bg:color-mix(in srgb,var(--light) 4%,transparent);
  --glass-line:color-mix(in srgb,var(--light) 9%,transparent);
  --glass-blur:0px;
  margin-top:clamp(40px,4.6vw,64px);
  border-radius:var(--wealth-radius);
  overflow:hidden;
}

/* A região que anuncia a troca de janela para quem não vê a tela. Sai do
   fluxo sem sair da árvore de acessibilidade: display:none e
   visibility:hidden calariam o leitor de tela, que é o único público dela. */
.wealth-live{
  position:absolute;width:1px;height:1px;
  overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);
}


/* ==========================================================================
   BARRA DE TOPO
   Identidade à esquerda, janela à direita — a divisão de uma barra de
   aplicativo. As abas só aparecem com .is-live, a classe que o script
   carimba: sem JavaScript o lugar delas é do rótulo estático.
   ========================================================================== */

.wealth-bar{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:12px 16px;
  padding:14px var(--wealth-cell-pad);
  border-bottom:1px solid var(--rule);
}

.wealth-app{display:flex;align-items:center;gap:10px;min-width:0}

.wealth-app-mark{
  flex:0 0 28px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-2);border-radius:var(--radius-media);
  color:var(--accent);
}
.wealth-app-glyph{width:15px;height:15px}

.wealth-app-name{
  font-family:var(--display);font-weight:700;
  font-size:13px;line-height:1;letter-spacing:.01em;
  color:var(--fg);
}

/* A pílula do core, um ponto menor: aqui ela é rótulo de estado dentro de
   uma barra de 28px de altura, não classificação de card. */
.wealth-app-tag{font-size:9.5px;padding:4px 9px;letter-spacing:.14em}

.wealth-tabs{
  display:none;gap:2px;padding:3px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--fg) 7%,transparent);
}
.wealth-panel.is-live .wealth-tabs{display:flex}

.wealth-tab{
  height:26px;padding-inline:13px;
  border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--fg-muted);
  font-family:var(--sans);font-weight:400;
  font-size:12px;line-height:1;letter-spacing:normal;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.wealth-tab:hover{color:var(--fg-2)}
.wealth-tab.is-on{
  background:color-mix(in srgb,var(--fg) 13%,transparent);
  color:var(--fg);
}

.wealth-static{font-size:12px;line-height:1;letter-spacing:normal;color:var(--fg-muted)}
.wealth-panel.is-live .wealth-static{display:none}


/* ==========================================================================
   A GRADE DE QUATRO PEÇAS
   Doze colunas: número (5) ao lado da linha da janela (7), porque a linha é
   a continuação visual do número; embaixo, as duas leituras de composição,
   metade a metade. As células NÃO têm vão entre si: quem separa é uma
   divisória de 1px, como num painel de verdade. Vão entre células daria
   cartões flutuando dentro de um cartão.
   ========================================================================== */

.wealth-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-areas:
    "total total total total total spark spark spark spark spark spark spark"
    "mix   mix   mix   mix   mix   mix   inst  inst  inst  inst  inst  inst";
}

/* min-width:0 em toda célula: sem ele, uma linha longa de valor impede a
   coluna de encolher e a grade estoura para fora do painel. */
.wealth-cell{padding:var(--wealth-cell-pad);min-width:0}
.wealth-cell-total{grid-area:total;display:flex;flex-direction:column}
.wealth-cell-spark{grid-area:spark;border-left:1px solid var(--rule)}
.wealth-cell-mix{grid-area:mix;border-top:1px solid var(--rule)}
.wealth-cell-inst{grid-area:inst;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}

.wealth-cell-title{
  font-family:var(--sans);font-weight:400;
  font-size:11px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}

.wealth-cell-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:6px 14px;
}


/* ==========================================================================
   1. PATRIMÔNIO CONSOLIDADO
   ========================================================================== */

/* baseline alinha "R$", o número e "mi" pela linha de base, e não pelo
   centro: é o que faz os três lerem como uma cifra só. */
.wealth-total{
  display:flex;align-items:baseline;gap:8px;
  margin-top:16px;
  font-family:var(--display);font-weight:700;
  line-height:1;letter-spacing:-.03em;
  color:var(--fg);
}
.wealth-total-cur{font-size:clamp(17px,1.5vw,21px);color:var(--fg-2)}

/* tabular-nums é o que impede o número de tremer durante a contagem: sem
   ele cada dígito tem largura própria e a cifra inteira dança. Fonte sem a
   tabela de figuras tabulares ignora e nada quebra. */
.wealth-total-num{
  font-size:clamp(38px,4.4vw,60px);
  font-variant-numeric:tabular-nums;
}
.wealth-total-suf{font-size:clamp(15px,1.3vw,19px);color:var(--fg-2)}

.wealth-delta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin-top:16px;
}
.wealth-delta-val{
  font-family:var(--display);font-weight:700;
  font-size:15px;line-height:1;letter-spacing:normal;
  color:var(--accent);
}
.wealth-delta-lab{font-size:13.5px;line-height:1.4;letter-spacing:normal;color:var(--fg-2)}

/* margin-top:auto empurra o fechamento para o pé da célula: o número fica
   com silêncio em volta, que é o que o faz pesar. */
.wealth-close{
  margin-top:auto;padding-top:14px;
  font-size:12.5px;line-height:1.4;letter-spacing:normal;
  color:var(--fg-muted);
}


/* ==========================================================================
   2. ROSCA POR CLASSE DE ATIVO
   O <svg> é decorativo e leva aria-hidden no markup; a lista ao lado é a
   informação. Cor da fatia e cor da bolinha saem da MESMA variável, pela
   mesma posição — não há como a legenda desencontrar do desenho.
   ========================================================================== */

.wealth-mix{
  display:flex;align-items:center;
  gap:clamp(16px,2.2vw,30px);
  margin-top:20px;
}

.wealth-donut{
  flex:0 0 var(--wealth-donut);
  width:var(--wealth-donut);height:var(--wealth-donut);
}

/* O anel de trás. Sem ele, os vãos de 2.4 unidades entre as fatias leem
   como buracos na rosca em vez de separação. */
.wealth-donut-track{
  stroke:color-mix(in srgb,var(--fg) 8%,transparent);
  stroke-width:13;
}

/* A transição é de stroke-dasharray, e não de dashoffset: com dasharray
   fixo o offset só GIRA a fatia — o comprimento do traço é a única coisa
   que a faz crescer do próprio começo. */
.wealth-arc{
  stroke-width:13;stroke-linecap:butt;
  transition:stroke-dasharray var(--wealth-grow) var(--ease);
}
.wealth-arc:nth-child(1){stroke:var(--wealth-s1)}
.wealth-arc:nth-child(2){stroke:var(--wealth-s2);transition-delay:.06s}
.wealth-arc:nth-child(3){stroke:var(--wealth-s3);transition-delay:.12s}
.wealth-arc:nth-child(4){stroke:var(--wealth-s4);transition-delay:.18s}
.wealth-arc:nth-child(5){stroke:var(--wealth-s5);transition-delay:.24s}

.wealth-mix-list{flex:1 1 0;min-width:0;display:grid;gap:10px}

.wealth-mix-item{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) 34px auto;
  align-items:center;gap:10px;
  font-size:13.5px;line-height:1.3;letter-spacing:normal;
}
.wealth-mix-dot{width:9px;height:9px;border-radius:50%}
.wealth-mix-item:nth-child(1) .wealth-mix-dot{background:var(--wealth-s1)}
.wealth-mix-item:nth-child(2) .wealth-mix-dot{background:var(--wealth-s2)}
.wealth-mix-item:nth-child(3) .wealth-mix-dot{background:var(--wealth-s3)}
.wealth-mix-item:nth-child(4) .wealth-mix-dot{background:var(--wealth-s4)}
.wealth-mix-item:nth-child(5) .wealth-mix-dot{background:var(--wealth-s5)}

.wealth-mix-name{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wealth-mix-pct{text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
.wealth-mix-val{
  text-align:right;color:var(--fg-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}


/* ==========================================================================
   3. POR INSTITUIÇÃO
   Nome e valor são texto; a barra é enfeite e sai da árvore de
   acessibilidade no markup.
   ========================================================================== */

.wealth-inst-list{margin-top:20px;display:grid;gap:14px}

.wealth-inst{
  display:grid;
  grid-template-columns:var(--wealth-inst-name) minmax(0,1fr) var(--wealth-inst-val);
  align-items:center;gap:14px;
  font-size:13.5px;line-height:1.3;letter-spacing:normal;
}
.wealth-inst-name{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wealth-inst-val{
  text-align:right;color:var(--fg);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.wealth-inst-track{
  height:var(--wealth-bar-h);
  border-radius:var(--wealth-bar-radius);
  background:color-mix(in srgb,var(--fg) 8%,transparent);
  overflow:hidden;
}

/* scaleX com origem à esquerda, e não width: a barra cresce numa
   propriedade de composição, sem custar layout a cada quadro da transição.
   O preço é que o canto direito do preenchimento é achatado junto — por
   isso --wealth-bar-radius acompanha o tema em vez de ser pílula fixa. */
.wealth-inst-fill{
  display:block;height:100%;
  border-radius:inherit;
  background:color-mix(in srgb,var(--accent) 80%,transparent);
  transform:scaleX(var(--wealth-w,0));transform-origin:left center;
  transition:transform var(--wealth-grow) var(--ease);
}
.wealth-inst:nth-child(2) .wealth-inst-fill{transition-delay:.05s}
.wealth-inst:nth-child(3) .wealth-inst-fill{transition-delay:.1s}
.wealth-inst:nth-child(4) .wealth-inst-fill{transition-delay:.15s}
.wealth-inst:nth-child(5) .wealth-inst-fill{transition-delay:.2s}


/* ==========================================================================
   4. LINHA DA JANELA
   O SVG estica sem manter proporção, para a linha ocupar a célula inteira
   em qualquer largura; vector-effect segura a espessura do traço, que sob
   escala não uniforme engordaria na horizontal.
   ========================================================================== */

.wealth-spark-end{font-size:12.5px;line-height:1.3;letter-spacing:normal;color:var(--fg-muted)}
.wealth-spark-end-val{font-weight:400;color:var(--fg-2);font-variant-numeric:tabular-nums}

.wealth-spark{
  position:relative;
  margin-top:18px;height:var(--wealth-spark-h);
}
/* A base do gráfico. Uma linha só, no tom de divisória do escopo: o
   suficiente para a curva ter chão sem virar grade. */
.wealth-spark::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--rule);
}
.wealth-spark-svg{display:block;width:100%;height:100%}

.wealth-spark-line{
  stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
  transition:stroke-dashoffset var(--wealth-draw) var(--ease);
}

/* O ponto do fim é HTML, não <circle>: sob preserveAspectRatio="none" um
   círculo do SVG viraria elipse. Aqui ele é redondo em qualquer largura.
   O x é constante por construção — o último ponto da série sempre encosta
   na margem direita do viewBox —, e só o y viaja em --wealth-spark-y. */
.wealth-spark-dot{
  position:absolute;left:calc(100% - 4px);top:var(--wealth-spark-y,50%);
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
}

.wealth-spark-read{
  margin-top:14px;
  font-size:12.5px;line-height:1.4;letter-spacing:normal;
  color:var(--fg-muted);
}
.wealth-spark-num{font-weight:400;color:var(--fg-2);font-variant-numeric:tabular-nums}


/* ==========================================================================
   PÉ DO PAINEL — sincronia viva e ressalva
   ========================================================================== */

.wealth-foot{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
  gap:10px 24px;
  padding:14px var(--wealth-cell-pad);
  border-top:1px solid var(--rule);
}

.wealth-sync{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;line-height:1.3;letter-spacing:normal;
  color:var(--fg-2);white-space:nowrap;
}
.wealth-sync-dot{
  position:relative;flex:0 0 8px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}

/* O ÚNICO detalhe vivo do painel. O script escreve um número de 0 a 1 em
   --wealth-ping; a aparência é decidida aqui. Sem script (ou com movimento
   reduzido, quando o laço nem chega a ser criado) o valor fica no 0 do
   fallback e o anel vira um halo parado — estado honesto, não defeito. */
.wealth-sync-ping{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--accent);
  transform:scale(calc(1 + var(--wealth-ping,0) * 2.1));
  opacity:calc((1 - var(--wealth-ping,0)) * .5);
}

/* A ressalva de compliance. Fica no painel que ela cobre, visível, e não em
   letra miúda no rodapé da página. */
/* Tipografia pela primitiva .nota do core. --nota-max:none porque a ressalva
   divide o pé do painel com o indicador de sincronia e é alinhada à DIREITA:
   um teto de medida encolheria a caixa e desencostaria o texto da borda. */
.wealth-nota{
  flex:1 1 340px;
  --nota-max:none;
  text-align:right;
}


/* ---------------------------------------------------------------- movimento reduzido */
/* Duas camadas, e as duas precisam existir. O script não liga o laço e
   pinta os valores finais de uma vez; estas regras garantem que a pintura
   não venha com transição atrás — inclusive na troca de janela, que
   continua funcionando por clique (aba que ignora o clique é defeito, não
   acessibilidade). */
@media(prefers-reduced-motion:reduce){
  .wealth-arc,.wealth-inst-fill,.wealth-spark-line,.wealth-tab{transition:none}
}

/* A mesma suspensão, agora sob comando do script: .is-still marca o quadro
   em que os valores são escritos sem que ninguém veja o caminho — o estado
   zero da entrada e a pintura direta com movimento reduzido. */
.wealth.is-still .wealth-arc,
.wealth.is-still .wealth-inst-fill,
.wealth.is-still .wealth-spark-line{transition:none}


/* ---------------------------------------------------------------- mobile */

/* A grade de doze colunas precisa de ~900 de painel útil para a rosca e a
   lista caberem lado a lado dentro da metade esquerda. Abaixo disso as
   quatro peças viram quatro faixas, na mesma ordem de leitura. */
@media(max-width:960px){
  .wealth-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"total" "spark" "mix" "inst";
  }
  .wealth-cell-spark,.wealth-cell-inst{border-left:0}
  .wealth-cell-spark{border-top:1px solid var(--rule)}
  .wealth-close{margin-top:14px;padding-top:0}
}

@media(max-width:640px){
  .wealth{--wealth-donut:120px;--wealth-spark-h:78px;--wealth-inst-val:84px}
  /* Rosca e lista lado a lado em 350px de largura espremeriam o nome da
     classe até a elipse. Empilhadas, a rosca centraliza e a lista fica com
     a linha inteira. */
  .wealth-mix{flex-direction:column;align-items:stretch;gap:20px}
  .wealth-donut{align-self:center}
  .wealth-nota{text-align:left}
}