/* ==========================================================================
   BI de Engenharia: só o que é exclusivo deste painel. O resto (tokens, cards, paleta das séries,
   verificações, tabelas) vem do ../css/style.css da plataforma.
   ========================================================================== */

/* Cores de situação dos gráficos (criticidade, situação do markup): sempre com rótulo ou legenda ao lado */
:root {
  --eng-bom: #059669; --eng-baixa: #CA8A04; --eng-atencao: #D97706; --eng-serio: #EA580C; --eng-critico: #DC2626;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --eng-bom: #34D399; --eng-baixa: #FACC15; --eng-atencao: #FBBF24; --eng-serio: #FB923C; --eng-critico: #F87171;
  }
}
:root[data-theme="dark"] {
  --eng-bom: #34D399; --eng-baixa: #FACC15; --eng-atencao: #FBBF24; --eng-serio: #FB923C; --eng-critico: #F87171;
}

/* Velocímetros dos KPIs */
.gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gauge-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 10px 12px;
  border-radius: 13px; border: 1px solid var(--line-soft); background: linear-gradient(160deg, var(--surface-2), var(--surface));
  text-align: center;
}
.gauge-card .sigla { font: 700 15px var(--font-display); color: var(--text); }
.gauge-card .nome { font-size: 11.5px; line-height: 1.3; color: var(--text-2); min-height: 30px; }
.gauge-card svg { width: 100%; max-width: 190px; height: auto; margin-top: 2px; }
.gauge-card .valor { font: 700 24px/1.1 var(--font-num); color: var(--text); margin-top: -6px; }
.gauge-card .pill { margin-top: 4px; font-size: 10.5px; padding: 1px 9px; }
.gauge-card .formula { margin-top: 8px; font-size: 10.5px; line-height: 1.35; color: var(--muted); font-family: var(--font); }
.gauge-card.futuro { justify-content: center; border-style: dashed; color: var(--muted); }
.gauge-card.futuro .valor { font-size: 15px; color: var(--muted); margin: 18px 0 6px; }
.gauge-arco { fill: none; stroke-width: 16; }
.gauge-agulha { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.gauge-centro { fill: var(--text); }
.gauge-rotulo { fill: var(--muted); font: 600 10px var(--font-num); }

/* Troca da medida dos gráficos (parâmetros de campo do .pbix) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.seg button {
  border: 0; border-radius: 9px; padding: 6px 12px; background: none; color: var(--text-2);
  font: 600 12.5px var(--font); cursor: pointer; transition: background .15s, color .15s;
}
.seg button:hover { color: var(--brand); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-sm); }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Seleção feita clicando num gráfico (filtra os outros visuais da tela) */
.sel-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-weight: 600;
}
.sel-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.sel-chip button:hover { background: var(--surface); }
.sel-chip .ico { width: 13px; height: 13px; }
.filters .check-row { flex-direction: row; align-items: center; gap: 8px; padding-top: 18px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-2); font-weight: 600; }
.filters .check-row input { width: 16px; height: 16px; accent-color: var(--brand); }
.filters input[type="search"].on { border-color: var(--brand-line); background-color: var(--brand-soft); }

/* Cards de dois valores (relativo e real) */
.ktile .duas { display: flex; flex-direction: column; gap: 1px; margin-top: auto; font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* Markup: velocímetro do TDE ao lado da tabela de documentos */
.grid-tde { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); align-items: start; }
.grid-tde .gauge-card { border: 0; background: none; padding: 0; }

/* Tabelas */
tr.clicavel { cursor: pointer; }
tr.clicavel.sel td { background: var(--brand-soft); }
td details summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 12px; white-space: nowrap; }
td details p { margin: 6px 0 0; white-space: pre-line; font-size: 12px; color: var(--text-2); max-width: 640px; }
.em-construcao { display: grid; place-items: center; min-height: 320px; text-align: center; color: var(--muted); }
.em-construcao strong { display: block; font: 700 28px var(--font-display); color: var(--text-2); margin-bottom: 6px; }

@media (max-width: 1280px) {
  .gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-tde { grid-template-columns: 1fr; }
}