/* Sistema visual "canvas + overlay" para replicar o layout do Power BI.
   O fundo de cada página é a imagem original do relatório (cartões, títulos,
   ícones já desenhados); sobrepomos apenas os valores e gráficos dinâmicos,
   posicionados em % sobre um canvas de proporção fixa (5120×2880 = 16:9). */

:root {
  --navy: #1b2a44;
  --navy2: #223154;
  --verde: #8faa9d;      /* sage green dos gráficos */
  --verde-claro: #cdd9d2;
  --verde-esc: #6d8b7d;
  --texto: #3a4256;
  --rotulo: #8a92a6;     /* labels cinza */
  --vermelho: #d1495b;
  --amarelo: #e6b800;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #eef0f3; font-family: 'Segoe UI', system-ui, Arial, sans-serif; color: var(--texto); }

.palco { width: 100%; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 0; }

/* Canvas com proporção fixa; tudo lá dentro escala com a largura (cqw). */
.canvas {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 5120 / 2880;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  container-type: inline-size;
}

/* Overlay base — posição/dimensão em % via style inline. */
.ov { position: absolute; display: flex; align-items: center; overflow: visible; }
.ov.center { justify-content: center; text-align: center; }
.ov.right { justify-content: flex-end; text-align: right; }
.ov.col { flex-direction: column; align-items: flex-start; justify-content: center; }

/* Tipografia em unidades de container (1cqw = 1% da largura do canvas). */
.num-xl { font-size: 3.0cqw; font-weight: 700; color: var(--texto); line-height: 1; }
.num-lg { font-size: 2.4cqw; font-weight: 700; color: var(--texto); line-height: 1; }
.num-md { font-size: 1.7cqw; font-weight: 700; color: var(--texto); line-height: 1; }
.num-sm { font-size: 1.25cqw; font-weight: 700; color: var(--texto); line-height: 1; }
.val { font-weight: 700; color: var(--texto); }
.hex-val { font-size: 1.5cqw; font-weight: 700; color: #fff; }

/* Barra de progresso (produtividade/disp/qual) sobre a linha do fundo. */
.prog { position: absolute; height: 0.75cqw; background: var(--verde); border-radius: 0.4cqw; }
.prog-bg { position: absolute; height: 0.75cqw; background: var(--verde-claro); border-radius: 0.4cqw; }

/* Contentor de gráfico ECharts posicionado. */
.grafico { position: absolute; }

.status-icon { font-size: 1.8cqw; }

/* filtros sobre a área desenhada */
.filtro { position: absolute; display: flex; gap: 0.6cqw; align-items: center; }
.filtro.col { flex-direction: column; align-items: flex-start; gap: 0.3cqw; }
.filtro select, .filtro input[type="date"] { font-size: 1.0cqw; padding: 0.2cqw 0.4cqw; border: 1px solid #cfd5df; border-radius: 0.3cqw; background: #fff; color: var(--texto); font-family: inherit; }
.filtro label { font-size: 1.0cqw; color: var(--rotulo); }
.filtro-tit { font-size: 1.05cqw; color: var(--texto); font-weight: 600; }

.carregando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4cqw; color: var(--rotulo); background: rgba(255,255,255,.6); z-index: 50; }
.carregando.oculto { display: none; }