/* Painel de métricas: números, rankings e gráficos SVG.
   Reaproveita variáveis de base.css e componentes de telas.css/topo.css. */

.pagina-painel select{
  padding:7px 8px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--radius);
}
.filtro-datas input[type="date"]{
  padding:6px 8px;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:var(--radius);
}

/* ---------- números ---------- */
.grade-numeros{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;
}
.num-cartao{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
}
.num-cartao.num-aviso{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.num-valor{font:700 26px/1.1 var(--font-display)}
.num-aviso .num-valor{color:var(--danger)}
.num-rotulo{font-size:12.5px;color:var(--ink-soft)}

/* ---------- grade de cartões (rankings + gráficos) ---------- */
.grade-painel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;
}

/* ---------- rankings ---------- */
.lista-ranking{display:flex;flex-direction:column;gap:8px}
.linha-ranking{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:8px}
.rk-nome{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-barra{height:8px;border-radius:4px;background:var(--paper);overflow:hidden}
.rk-preenchimento{display:block;height:100%;background:var(--accent);border-radius:4px}
.rk-total{font-size:13px;text-align:right;color:var(--ink-soft)}

/* ---------- gráficos ---------- */
.painel-grafico{gap:10px}
.grafico-svg{width:100%;height:auto;overflow:visible}
.grafico-svg .eixo{stroke:var(--line-strong);stroke-width:1}
.grafico-svg .rotulo-eixo{font-size:9px;fill:var(--ink-soft)}
.linha-criado{stroke:var(--accent);stroke-width:2}
.linha-concluido{stroke:var(--p-baixa);stroke-width:2}
.legenda{display:flex;gap:14px;font-size:12.5px}
.leg{position:relative;padding-left:16px;color:var(--ink-soft)}
.leg::before{content:"";position:absolute;left:0;top:50%;width:10px;height:2px;transform:translateY(-50%)}
.leg-criado::before{background:var(--accent)}
.leg-concluido::before{background:var(--p-baixa)}

.pizza-linha{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.grafico-pizza{width:120px;height:120px;flex:none}
.pizza-legenda{display:flex;flex-direction:column;gap:5px;font-size:13px}
.leg-item{display:flex;align-items:center;gap:6px}
.leg-cor{width:10px;height:10px;border-radius:2px;flex:none}

.grafico-calor{width:100%;height:auto}
.grafico-calor .rotulo-eixo{font-size:8px}