/* GDA Redação 1.7.0 — gráficos e tabelas dos posts e termos no visual da Tabela FIPE (cartão, faixa azul→verde,
   números em Saira Semi Condensed, animação quando aparecem na tela). Os estilos embutidos continuam como reserva
   (feed, e-mail, AMP); aqui eles são sobrepostos. Segue o modo escuro do tema (data-theme="dark"). */
.gda-grafico,.gda-tabela-card{
  --gdr-azul:#3666af;--gdr-azul-fo:#1f3f73;--gdr-azul-cl:#e8eef8;--gdr-verde:#67b553;
  --gdr-card:#fff;--gdr-fg:#14213a;--gdr-sub:#5a6680;--gdr-linha:#dfe5ef;--gdr-zebra:#f7f9fd;--gdr-hover:#eef3fb;
  --gdr-num:"Saira Semi Condensed","Arial Narrow",sans-serif;
}
[data-theme="dark"] .gda-grafico,[data-theme="dark"] .gda-tabela-card{
  --gdr-azul:#6f9be0;--gdr-azul-fo:#a9c4ef;--gdr-azul-cl:#1a2a44;--gdr-verde:#7cc76a;
  --gdr-card:#131c2e;--gdr-fg:#e6ecf7;--gdr-sub:#97a3bb;--gdr-linha:#24304a;--gdr-zebra:#162036;--gdr-hover:#1a2a44;
}

/* ---------- cartão (gráfico e tabela) ---------- */
.gda-grafico,.gda-tabela-card{position:relative;overflow:hidden!important;background:var(--gdr-card)!important;border:1px solid var(--gdr-linha)!important;
  border-radius:18px!important;box-shadow:0 16px 36px -22px rgba(31,63,115,.45)!important;margin:30px 0!important}
.gda-grafico::before,.gda-tabela-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:1;
  background:linear-gradient(90deg,var(--gdr-azul),var(--gdr-verde))}
.gda-grafico{padding:24px 22px 14px!important}
.gda-grafico>p:first-child{font:700 21px/1.2 var(--gdr-num)!important;color:var(--gdr-azul-fo)!important;margin:0 0 6px!important;letter-spacing:.01em}
.gda-grafico>p:first-child>span{background:var(--gdr-verde)!important;width:12px!important;height:12px!important;border-radius:4px!important}
.gda-grafico figcaption{color:var(--gdr-sub)!important;font-size:12.5px!important;border-top:1px dashed var(--gdr-linha);padding-top:8px;margin-top:10px!important}
.gda-grafico svg text{font-family:inherit}
.gda-grafico svg text[font-weight="800"],.gda-grafico svg text[font-weight="700"]{font-family:var(--gdr-num);font-weight:700;letter-spacing:.01em}
.gda-grafico svg text[fill="#1d2330"]{fill:var(--gdr-fg)}
.gda-grafico svg text[fill="#5b6472"]{fill:var(--gdr-sub)}
.gda-grafico svg rect[fill="#e8edf5"],.gda-grafico svg circle[stroke="#e8edf5"],.gda-grafico svg path[stroke="#e8edf5"],.gda-grafico svg line[stroke="#e8edf5"]{fill:var(--gdr-azul-cl);stroke:var(--gdr-azul-cl)}
.gda-grafico svg rect[fill="#e8edf5"]{stroke:none}
[data-theme="dark"] .gda-grafico svg circle[fill="#fff"]{fill:var(--gdr-card)}

/* ---------- tabela ---------- */
.gda-tabela-card>div{padding-top:5px}
.gda-tabela-card table.gda-tabela{display:table!important;width:100%!important;background:transparent!important;font-size:15.5px!important;border-collapse:collapse!important}
.gda-tabela-card thead,.gda-tabela-card th{background:var(--gdr-azul-cl)!important}
.gda-tabela-card th{color:var(--gdr-azul-fo)!important;font:700 13.5px/1.3 var(--gdr-num)!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  padding:13px 16px!important;border-bottom:2px solid var(--gdr-azul)!important;white-space:nowrap}
.gda-tabela-card tr{background:transparent!important}
.gda-tabela-card td{padding:13px 16px!important;border-bottom:1px solid var(--gdr-linha)!important;color:var(--gdr-fg);background:var(--gdr-card)!important;transition:background .2s}
.gda-tabela-card tbody tr:nth-child(even) td{background:var(--gdr-zebra)!important}
.gda-tabela-card tbody tr:hover td{background:var(--gdr-hover)!important}
.gda-tabela-card tbody tr:last-child td{border-bottom:0!important}
.gda-tabela-card td[style*="color:#3666af"]{font:700 18px/1.2 var(--gdr-num)!important;color:var(--gdr-azul)!important;letter-spacing:.01em}
.gda-tabela-card td[style*="font-weight:700"]:first-child{color:var(--gdr-fg)!important}
.gda-tabela-card td a{color:var(--gdr-azul);font-weight:600}
/* tabela larga no celular: rola de lado, com aviso discreto */
.gda-tabela-card>div{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gda-tabela-card.gdr-rola::after{content:"Arraste para o lado →";position:absolute;right:12px;bottom:8px;font-size:11.5px;color:var(--gdr-sub);background:var(--gdr-card);padding:2px 8px;border-radius:999px;border:1px solid var(--gdr-linha);pointer-events:none}
.gda-tabela-card.gdr-rola{padding-bottom:30px}

/* ---------- animação: só com JS (a classe gdr-js entra no <html>) e quando o bloco aparece ---------- */
@media (prefers-reduced-motion:no-preference){
  .gdr-js .gda-tabela-card:not(.gdr-vivo) tbody tr{opacity:0;transform:translateY(10px)}
  .gdr-js .gda-tabela-card.gdr-vivo tbody tr{animation:gdr-sobe .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--gdr-i,0) * 70ms + 120ms)}
  .gdr-js .gda-grafico:not(.gdr-vivo),.gdr-js .gda-tabela-card:not(.gdr-vivo){opacity:.0001;transform:translateY(14px)}
  .gdr-js .gda-grafico.gdr-vivo,.gdr-js .gda-tabela-card.gdr-vivo{animation:gdr-sobe .6s cubic-bezier(.2,.8,.2,1) both}
  .gdr-js .gda-grafico.gdr-vivo::before,.gdr-js .gda-tabela-card.gdr-vivo::before{animation:gdr-faixa 1s cubic-bezier(.65,0,.35,1) .1s both;transform-origin:left}
}
@keyframes gdr-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gdr-faixa{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:600px){
  .gda-grafico{padding:20px 14px 12px!important}
  .gda-grafico>p:first-child{font-size:19px!important}
  .gda-tabela-card th,.gda-tabela-card td{padding:11px 12px!important}
}