/* Estilos do painel. Só variáveis do tema.css: nada de cor fixa, para valer em claro e escuro. */
main { max-width: 1240px; margin: 0 auto; padding: 10px 12px 24px; }
.barra-app h1 { color: var(--barra-t); }
.barra-app .sub { color: var(--barra-t); opacity: .75; }
.barra-app button svg { width: 18px; height: 18px; display: block; }
.barra-app button { padding: 0 8px; }
.barra-app .aberto { color: var(--esc); opacity: 1; font-weight: 600; }
select[hidden] { display: none; }

svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.kpi { background: var(--sup); border: 1px solid var(--l); border-radius: 3px; padding: 8px 12px; box-shadow: var(--sombra); }
.kpi .rot { color: var(--m); font-size: .88em; }
.kpi .val { font-size: 22px; font-weight: 600; line-height: 1.25; }
.kpi .nota { color: var(--m); font-size: .85em; }
.kpi.s-down .val { color: var(--ruim); }
.kpi.s-deg .val { color: var(--esc); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 5px; border: 1px solid currentColor; border-radius: 11px; font-size: .9em; font-weight: 600; white-space: nowrap; }
.chip svg.ic { width: 14px; height: 14px; }
.s-ok { color: var(--ok); }
.s-deg { color: var(--esc); }
.s-down { color: var(--ruim); }
.s-sem { color: var(--m); }

.alertas { border-left: 4px solid var(--esc); }
.alertas.erro { border-left-color: var(--ruim); background: var(--ruim-bg); }
.alertas ul { list-style: none; margin: 0; padding: 0; }
.alertas li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.alertas li.erro { color: var(--ruim); }
.alertas li.aviso { color: var(--esc); }
.alertas a { color: inherit; font-weight: 600; }

.duas { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; align-items: start; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }
.cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cab h2 { margin: 0; }
.cab .esp { flex: 1; }

table.lista td { vertical-align: middle; }
table.lista tbody tr { cursor: pointer; }
table.lista tbody tr:hover { background: var(--a-sel); }
table.lista td.num, table.lista th.num { text-align: right; white-space: nowrap; }
.nome a { font-weight: 600; }
.mini { width: 190px; min-width: 120px; }
@media (max-width: 760px) { .some { display: none; } }

.faixa svg { display: block; width: 100%; height: 20px; }
.faixa rect.f-ok { fill: var(--ok); }
.faixa rect.f-deg { fill: var(--esc); }
.faixa rect.f-down { fill: var(--ruim); }
.faixa rect.f-sem { fill: var(--l); }
.faixa.grande svg { height: 30px; }
.eixo-faixa { display: flex; justify-content: space-between; color: var(--m); font-size: .85em; margin-top: 2px; }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; color: var(--m); font-size: .88em; margin-top: 6px; }
.legenda span { display: inline-flex; align-items: center; gap: 4px; }
.legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legenda i.f-ok { background: var(--ok); }
.legenda i.f-deg { background: var(--esc); }
.legenda i.f-down { background: var(--ruim); }
.legenda i.f-sem { background: var(--l); }

.grafico svg { display: block; width: 100%; height: auto; }
.grafico .grade line { stroke: var(--l); stroke-width: 1; }
.grafico text { fill: var(--m); font-size: 11px; font-family: inherit; }
.grafico .l-med { fill: none; stroke: var(--a); stroke-width: 2; stroke-linejoin: round; }
.grafico .l-max { fill: none; stroke: var(--a); stroke-width: 1; opacity: .4; }
.grafico .ponto { fill: var(--a); }
.grafico .banda-down { fill: var(--ruim); opacity: .2; }
.grafico .banda-deg { fill: var(--esc); opacity: .2; }
.grafico .limite { stroke: var(--esc); stroke-width: 1; stroke-dasharray: 4 3; }
.grafico rect.alvo { fill: transparent; }
.grafico rect.alvo:hover { fill: var(--a-sel); opacity: .5; }

.spark { display: block; width: 100%; height: 34px; margin-top: 2px; }
.spark path { fill: none; stroke: var(--a); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.vazio { color: var(--m); padding: 6px 0; }
code.sql { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; word-break: break-word; }
.subtitulo { margin: 12px 0 4px; color: var(--m); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 760px) { .duas-colunas { grid-template-columns: 1fr; } }
table.sem-clique tbody tr { cursor: default; }
table.sem-clique tbody tr:hover { background: transparent; }
.uso svg { display: block; width: 100%; height: 10px; border-radius: 2px; }
.uso rect.fundo { fill: var(--l); }
.uso rect.ok { fill: var(--ok); }
.uso rect.deg { fill: var(--esc); }
.uso rect.down { fill: var(--ruim); }
.grafico .b-ok { fill: var(--a); opacity: .65; }
.grafico .b-e4 { fill: var(--esc); }
.grafico .b-e5 { fill: var(--ruim); }
.mono { font-variant-numeric: tabular-nums; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rodape { color: var(--m); font-size: .85em; margin-top: 4px; }
#erro.on { display: block; }