/* PMO 360 — prestação de contas pública (pmo360/publico/prestacao-contas.php).
   Barras que crescem (CSS puro, sem lib) + imagem de destaque à direita da
   meta. Reduced-motion: barras já nascem no tamanho final. */

/* Gráfico de barras horizontais (distribuição por status) */
.pmo-barras{display:grid; gap:10px; margin-top:12px}
.pmo-barra{display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr) auto; align-items:center; gap:10px; font-size:.86rem}
.pmo-barra-trilha{height:12px; border-radius:999px; background:var(--border); overflow:hidden}
.pmo-barra-valor{height:100%; border-radius:999px; width:var(--pct,0%); transform-origin:left; animation:pmo-crescer .9s ease-out both}
.pmo-barra-valor--verde{background:var(--green-500,#22c55e)}
.pmo-barra-valor--amarelo{background:var(--amber-500,#f59e0b)}
.pmo-barra-valor--vermelho{background:var(--red-500,#ef4444)}
.pmo-barra-valor--sem_dado{background:var(--text-500,#64748b)}
.pmo-barra-valor--azul{background:var(--blue-600,#2563eb)}
@keyframes pmo-crescer{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* Barra de avanço dentro de cada meta */
.pmo-avanco{margin-top:8px}
.pmo-avanco .pmo-barra-trilha{height:8px}

/* Card da meta: texto à esquerda, imagem à direita; no mobile a imagem desce */
.pmo-meta{display:flex; gap:16px; align-items:flex-start}
.pmo-meta-corpo{flex:1 1 320px; min-width:0}
.pmo-meta-imagem{flex:0 0 220px; max-width:220px}
.pmo-meta-imagem img{width:100%; height:150px; object-fit:cover; border-radius:10px; display:block}
@media (max-width:640px){
  .pmo-meta{flex-direction:column}
  .pmo-meta-imagem{flex-basis:auto; max-width:100%; width:100%}
  .pmo-meta-imagem img{height:180px}
}

@media (prefers-reduced-motion: reduce){
  .pmo-barra-valor{animation:none; transform:none}
}

/* Linha donut + dados da meta (card de prestação de contas) */
.pmo-meta-linha{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.pmo-donut-wrap{position:relative; width:64px; height:64px; flex:0 0 auto}
.pmo-donut-svg{width:64px; height:64px; transform:rotate(-90deg)}
.pmo-donut-legenda{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.pmo-donut-valor{font-size:.78rem; font-weight:800; color:var(--text-900)}
.pmo-donut-vazio{width:64px; height:64px; flex:0 0 auto; border-radius:50%; border:4px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-500); font-size:.62rem; text-align:center; line-height:1.1}
.pmo-meta-info{flex:1 1 260px; min-width:220px}
.pmo-tendencia-svg{width:100%; max-width:320px; height:48px}