/* Sala Indicadores · só o que a sala acrescenta ao auditoria.css (que serve também a ela) e ao projeto.css. Tudo vale só dentro de #tela-indicadores e usa as
   variáveis da marca e as cores de situação já aprovadas (status.css). Nada de cor escrita direto. */
#tela-indicadores .ind-cartoes { display:grid; grid-template-columns:repeat(auto-fill, minmax(480px, 1fr)); gap:20px; margin:24px 0; }
#tela-indicadores .ind-cartao { margin:0; padding:24px; }
#tela-indicadores .ind-cartao h2 { margin:0; font-size:20px; }
#tela-indicadores .ind-grande { margin:8px 0 4px; font-family:var(--zenk-fonte-titulo); font-size:40px; font-weight:700; line-height:1.1; }
#tela-indicadores .ind-titulo-secao { margin:36px 0 12px; }
#tela-indicadores .ind-detalhe { margin-top:8px; }
#tela-indicadores .ind-detalhe summary { width:max-content; max-width:100%; padding:4px 0; cursor:pointer; font-size:14px; font-weight:600; }
#tela-indicadores .ind-meses { margin:0 0 20px; }
#tela-indicadores .ind-lancamentos { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px 28px; }
#tela-indicadores .ind-lancamento { display:grid; gap:6px; align-content:start; }

/* O gráfico: uma linha só, a meta e a faixa de atenção como referência, a tendência tracejada */
#tela-indicadores .ind-grafico { display:block; width:100%; height:auto; margin:12px 0 4px; }
#tela-indicadores .ind-grafico-texto { font-family:var(--zenk-fonte-texto); font-size:9px; fill:var(--texto-suave); }
#tela-indicadores .ind-ref { stroke:var(--borda-suave); stroke-width:1; }
#tela-indicadores .ind-grade { stroke-width:0.75; opacity:.7; }
#tela-indicadores .ind-ref-meta { stroke:var(--texto-suave); stroke-width:1.5; }
#tela-indicadores .ind-ref-atencao { stroke:var(--texto-suave); stroke-dasharray:3 3; opacity:.8; }
#tela-indicadores .ind-linha { fill:none; stroke:var(--texto); stroke-width:2; stroke-linejoin:round; }
#tela-indicadores .ind-tendencia { stroke:var(--texto-suave); stroke-width:1.5; stroke-dasharray:5 4; }
#tela-indicadores .ind-ponto { stroke:var(--cartao); stroke-width:2; fill:var(--texto); }
#tela-indicadores .ind-ponto-ok { fill:var(--situacao-ok); }
#tela-indicadores .ind-ponto-atencao { fill:var(--situacao-atencao); }
#tela-indicadores .ind-ponto-fora { fill:var(--situacao-vencido); }
#tela-indicadores .ind-ponto-provisorio { fill:var(--cartao); stroke:var(--texto); stroke-width:1.5; }

/* Quadro da obra: um desenho por indicador (SVG feito pelo script) e a linha do tempo. O nível é o realizado, o traço pontilhado é o esperado
   até hoje, e a cor é a da situação (sempre com o texto da situação ao lado). */
#tela-indicadores .canteiro { margin:24px 0 8px; padding:22px 24px 24px; }
#tela-indicadores .canteiro h2 { margin-bottom:6px; font-size:18px; }
#tela-indicadores .canteiro > .ajuda { max-width:75ch; margin:0 0 18px; }
#tela-indicadores .linha-tempo { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:26px; }
#tela-indicadores .linha-tempo-faixa { flex:1 1 260px; min-width:0; }
#tela-indicadores .linha-tempo input[type=range] { display:block; width:100%; margin:0; accent-color:var(--texto); }
#tela-indicadores .linha-tempo-extremos { display:flex; justify-content:space-between; color:var(--texto-suave); font-size:12px; }
#tela-indicadores .linha-tempo-mes { min-width:13ch; font-size:16px; font-weight:700; }
/* Os 7 desenhos na mesma linha; em tela estreita a linha rola para o lado em vez de quebrar. */
#tela-indicadores .canteiro-grade { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(110px, 1fr); gap:10px; overflow-x:auto; padding-bottom:6px; }
#tela-indicadores .desenho { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border:0; border-top:5px solid var(--texto); border-radius:var(--raio-m); background:var(--fundo-app); color:var(--texto); font:inherit; text-align:center; cursor:pointer; }
#tela-indicadores .desenho:hover { background:var(--fundo-hover); }
#tela-indicadores .desenho:focus-visible { outline:2px solid var(--texto); outline-offset:2px; }
#tela-indicadores .des-nome { font-size:14px; }
#tela-indicadores .des-pct { font-size:20px; font-weight:700; line-height:1.1; }
#tela-indicadores .des-situacao { min-height:22px; }
#tela-indicadores .des-situacao .etiqueta { font-size:11px; padding:2px 6px; }
#tela-indicadores .des-detalhe { color:var(--texto-suave); font-size:11px; line-height:1.3; }
#tela-indicadores .des-svg { display:block; width:100%; max-width:84px; height:auto; margin:0 auto 6px; }
#tela-indicadores .des-ok { --cor-nivel:var(--situacao-ok); }
#tela-indicadores .des-atencao { --cor-nivel:var(--situacao-atencao); }
#tela-indicadores .des-fora { --cor-nivel:var(--situacao-vencido); }
#tela-indicadores .des-sem { --cor-nivel:var(--contorno); }
#tela-indicadores .des-nivel { fill:var(--cor-nivel); }
#tela-indicadores .des-arco { fill:none; stroke:var(--cor-nivel); stroke-width:5; }
#tela-indicadores .des-traco { fill:none; stroke:var(--texto); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
#tela-indicadores .des-fino { fill:none; stroke:var(--texto); stroke-width:.75; }
#tela-indicadores .des-cheio { fill:var(--texto); stroke:none; }
#tela-indicadores .des-vazio { fill:none; }
#tela-indicadores .des-luz { stroke:var(--texto); stroke-width:.75; }
#tela-indicadores .des-nivel.des-traco { stroke:var(--texto); stroke-width:1.5; }
#tela-indicadores .des-esperado { fill:none; stroke:var(--texto); stroke-width:1.5; stroke-dasharray:4 3; }
#tela-indicadores .des-esperado-forte { stroke:var(--texto); stroke-width:3; }
#tela-indicadores .des-texto { fill:var(--texto-suave); font-family:var(--zenk-fonte-texto); font-size:11px; }
#tela-indicadores .des-oculto { display:none; }

@media (max-width: 720px) {
  #tela-indicadores .ind-cartoes { grid-template-columns:1fr; }
  #tela-indicadores .ind-grande { font-size:32px; }
}