/* ============================================================
   Sistema Rodo Wall — TORRE DE CONTROLE — Dashboard
   ------------------------------------------------------------
   SÓ o que não existe no shell compartilhado. Abas, KPIs,
   gráficos, tabelas e pills continuam vindo das classes .cl-*
   (css/checklist/03-checklist-listas.css) — este arquivo não
   redefine nada delas.
   ============================================================ */

/* Grid de KPIs com quantidade diferente de 4 (o .cl-kpis é fixo em 4). */
.tr-kpis-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }

/* Ranking com barra de proporção — usado nos "veículos que mais
   precisam de atenção", motivos de recusa e veículos com mais pleitos. */
.tr-rank-item{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--clborder); }
.tr-rank-item:last-child{ border-bottom:none; }
.tr-rank-pos{
  flex-shrink:0; min-width:26px; height:22px; padding:0 6px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--clfd); font-size:11.5px; font-weight:700;
  background:var(--clbg2); color:var(--cltx2);
}
.tr-rank-corpo{ flex:1; min-width:0; }
.tr-rank-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.tr-rank-nome{ font-size:12.5px; color:var(--cltx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-rank-valor{ flex-shrink:0; font-family:var(--clfd); font-size:12px; font-weight:700; color:var(--cltx2); }
.tr-barra{ height:6px; border-radius:3px; background:var(--clbg2); overflow:hidden; }
.tr-barra-fill{ height:100%; border-radius:3px; transition:width .25s ease; }
.tr-barra-fill.verde{ background:var(--clgreen); }
.tr-barra-fill.laranja{ background:var(--clorange); }
.tr-barra-fill.vermelho{ background:var(--clred); }
.tr-barra-fill.azul{ background:var(--claccent); }

/* Cards compactos de saúde por tecnologia (donut pequeno + contagem). */
.tr-tec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.tr-tec-card{
  background:var(--clcard); border:1px solid var(--clborder);
  border-radius:12px; padding:14px;
}
.tr-tec-nome{ font-size:13px; font-weight:600; color:var(--cltx); margin-bottom:10px; }
.tr-tec-corpo{ display:flex; align-items:center; gap:12px; }
.tr-tec-donut{ position:relative; width:74px; height:74px; flex-shrink:0; }
.tr-tec-donut-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--clfd); font-size:14px; font-weight:700; color:var(--cltx);
  pointer-events:none;
}
.tr-tec-legenda{ flex:1; min-width:0; font-size:11.5px; }
.tr-tec-linha{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:1.5px 0; }
.tr-tec-linha span:first-child{ display:flex; align-items:center; gap:6px; color:var(--cltx2); }
.tr-tec-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.tr-tec-rodape{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:8px; border-top:1px solid var(--clborder);
  font-size:11px; color:var(--cltx3);
}
.tr-tec-pct{ font-family:var(--clfd); font-weight:700; }

/* Barra de filtros recolhível. */
.tr-filtro-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; user-select:none;
}
.tr-filtro-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px; }
.tr-filtro-grid .cl-field{ margin-bottom:0; }
.tr-filtro-grid label{ font-size:9.5px; }

/* Nota explicativa (ex.: como o score é calculado). */
.tr-nota{
  border:1px dashed var(--clborder-b); border-radius:10px;
  padding:12px 14px; margin-bottom:18px;
  font-size:11.5px; line-height:1.6; color:var(--cltx3);
}
.tr-nota strong{ color:var(--cltx2); }

/* Legenda à direita do título de uma seção. */
.tr-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.tr-sec-nota{ font-size:11px; color:var(--cltx3); font-family:var(--clfd); }

@media (max-width:1100px){
  .tr-tec-grid{ grid-template-columns:repeat(2,1fr); }
  .tr-filtro-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .tr-kpis-3{ grid-template-columns:1fr; }
  .tr-tec-grid{ grid-template-columns:1fr; }
  .tr-filtro-grid{ grid-template-columns:repeat(2,1fr); }
}