/* ============================================================
   Sistema Rodo Wall — Módulo Checklist — Frota ao vivo, gráficos,
   configuração, detalhe, conferência e relatório
   ------------------------------------------------------------
   Tabela, indicadores, abas, janela, filtros e campos agora vêm
   de css/comum/padrao.css. Aqui fica só o que é do módulo.
   ============================================================ */

/* ---------- Faixa FROTA AO VIVO (topo do painel) ---------- */
.cl-live{
  display:flex; align-items:stretch; gap:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-bottom:16px;
  overflow-x:auto;
}
.cl-live-tag{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px; flex-shrink:0;
  background:var(--accent); color:var(--on-accent);
  font-weight:600; font-size:var(--fs-sm);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.cl-live-item{
  display:flex; flex-direction:column; justify-content:center;
  padding:10px 18px; flex-shrink:0;
  border-left:1px solid var(--border);
}
.cl-live-lbl{ font-size:var(--fs-xs); font-weight:500; color:var(--text2); }
.cl-live-val{ font-weight:600; font-size:var(--fs-lg); color:var(--text); font-variant-numeric:tabular-nums; }
.cl-live-val.cl-lv-green{ color:var(--green); }
.cl-live-val.cl-lv-red{ color:var(--red); }
.cl-live-val.cl-lv-accent{ color:var(--accent-text); }

/* ---------- Linha do tempo do PREVER ---------- */
/* Mora aqui porque o módulo PREVER reaproveita a casca visual do
   Checklist (classes .cl-*), como o Chamados já faz. */
.prev-timeline{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border);
}
.prev-tl-item{
  display:flex; gap:9px; align-items:flex-start;
  flex:1 1 190px; min-width:180px; opacity:.45;
}
.prev-tl-feito, .prev-tl-agora{ opacity:1; }
.prev-tl-marca{
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:600;
  border:2px solid var(--border2); color:var(--text3);
}
.prev-tl-feito .prev-tl-marca{ border-color:var(--green); background:var(--green-dim); color:var(--green); }
.prev-tl-agora .prev-tl-marca{ border-color:var(--accent); background:var(--accent-dim); color:var(--accent-text); }
.prev-tl-titulo{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.prev-tl-agora .prev-tl-titulo{ color:var(--accent-text); }
.prev-tl-desc{ font-size:var(--fs-xs); color:var(--text3); line-height:1.35; margin-top:1px; }
.prev-tl-data{ font-size:var(--fs-xs); color:var(--text3); margin-top:3px; font-variant-numeric:tabular-nums; }

/* ---------- Gráficos ---------- */
.cl-graficos{ display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-bottom:16px; }
.cl-grafico-card{
  padding:20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg);
  /* min-width:0 é essencial aqui: por padrão um item de grid nunca fica
     mais estreito que seu conteúdo (min-width:auto), e o <canvas> do
     Chart.js tem uma largura própria — sem isso, o card "empurrava" a
     coluna do grid e a PÁGINA INTEIRA ganhava scroll horizontal em tela
     estreita (não só o gráfico, o app todo: menu, cabeçalho, tudo). */
  min-width:0;
}
.cl-grafico-titulo{ font-weight:600; font-size:var(--fs-lg); margin-bottom:16px; color:var(--text); }
.cl-grafico-wrap{ position:relative; height:230px; width:100%; }

/* ---------- Config perguntas ---------- */
.cl-cfg-item{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.cl-cfg-inativo{ opacity:.5; }
.cl-cfg-num{ color:var(--text3); font-size:var(--fs-xs); width:24px; flex-shrink:0; text-align:center; font-variant-numeric:tabular-nums; }
.cl-cfg-txt{ flex:1; }
.cl-cfg-cat{ font-size:var(--fs-xs); color:var(--accent-text); background:var(--accent-dim); padding:3px 10px; border-radius:var(--r-full); white-space:nowrap; font-weight:500; }
.cl-cfg-add{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.cl-cfg-add .cl-input{ flex:1; min-width:180px; }

/* ---------- Modal de detalhes (partes do módulo) ---------- */
.cl-modal-meta{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; font-size:var(--fs-sm); color:var(--text2); }
.cl-modal-meta strong{ color:var(--text); }
.cl-modal-acoes{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.cl-det-q{ padding:9px 0; border-bottom:1px solid var(--border); }
/* Criticidade: vermelho = pendência num item marcado "crítico" em Cadastrar
   Checklist; laranja = pendência normal; sem classe = OK (verde no texto). */
.cl-det-q-nao{ background:var(--red-dim); border-radius:var(--r-sm); padding:9px; border-bottom:none; }
.cl-det-q-laranja{ background:var(--orange-dim); border-radius:var(--r-sm); padding:9px; border-bottom:none; }
.cl-det-q-txt{ font-size:var(--fs-sm); color:var(--text); }
.cl-det-q-resp{ font-size:var(--fs-xs); font-weight:600; color:var(--green); margin-top:2px; }
.cl-det-q-nao .cl-det-q-resp{ color:var(--red); }
.cl-det-q-laranja .cl-det-q-resp{ color:var(--orange); }
.cl-det-q-obs{ font-size:var(--fs-xs); color:var(--text2); margin-top:4px; font-style:italic; }
.cl-det-q-aviso{ display:flex; gap:7px; align-items:flex-start; font-size:var(--fs-xs); color:var(--text2); margin-top:6px; padding:7px 9px; background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-sm); }
.cl-det-q-aviso strong{ color:var(--text); }

/* ---------- Bloco de conferência no modal ---------- */
.cl-det-conf{
  margin:12px 0 16px; padding:16px;
  border-radius:var(--r-sm);
  background:var(--green-dim);
  border:1px solid var(--green);
}
.cl-det-conf-titulo{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:var(--fs-md); margin-bottom:12px; }
.cl-det-conf-linha{ font-size:var(--fs-xs); color:var(--text2); margin-bottom:5px; }
.cl-det-conf-linha strong{ color:var(--text); }

/* ---------- Conferência ---------- */
.cl-conf-status{ display:flex; gap:12px; }
.cl-conf-st{ flex:1; }
.cl-btn.cl-conf-st-on-ok{ background:var(--green-dim); border-color:var(--green); color:var(--green); }
.cl-btn.cl-conf-st-on-pend{ background:var(--orange-dim); border-color:var(--orange); color:var(--orange); }
.cl-btn.cl-conf-st-on-nok{ background:var(--red-dim); border-color:var(--red); color:var(--red); }

/* ---------- Categorias do mensal ---------- */
.cl-mcat{ margin-bottom:16px; }
.cl-mcat-titulo{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:var(--fs-md);
  color:var(--accent-text); margin:12px 0 8px;
  padding-bottom:5px; border-bottom:1px solid var(--border);
}

/* ---------- Relatório (drill-down) ---------- */
.cl-rel-detalhe{ padding:6px 0 10px; }
.cl-rel-item{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 12px; margin-bottom:6px; border-radius:var(--r-sm);
  background:var(--surface2); border:1px solid var(--border);
  font-size:var(--fs-xs); color:var(--text2);
}
.cl-rel-item .cl-td-acoes{ margin-left:auto; }

@media (max-width:860px){
  /* !important necessário aqui: telas do Dashboard da Torre fixam a
     proporção das colunas (ex.: "1fr 1.4fr") via style inline no card
     (js/torre/torre-dashboard.js), que normalmente vence qualquer regra
     de classe — inclusive esta média query, deixando os dois gráficos
     espremidos lado a lado em vez de empilhar em tela estreita. */
  .cl-graficos{ grid-template-columns:1fr !important; }
}

/* ---------- Padrão dos modais de M.C./Concessionária ---------- */
.cl-resp-banner{
  display:flex; align-items:center; gap:12px;
  background:var(--accent-dim); border-radius:var(--r-sm); padding:12px 16px; margin:14px 0 16px;
}
.cl-resp-banner .cl-ic{ color:var(--accent-text); }
.cl-resp-banner-lbl{ font-size:var(--fs-xs); font-weight:500; color:var(--accent-text); }
.cl-resp-banner-nome{ font-weight:600; color:var(--text); font-size:var(--fs-md); }
/* Subseções dentro do cartão de UMA pergunta, no editor de tipo (Cadastrar
   Checklist) — divisor leve (sem caixa própria) pra separar "tipo/setor",
   "quando é pendência" e "prioridade" sem empilhar caixa dentro de caixa
   dentro de caixa (a pergunta já está dentro do cartão da categoria).
   Reorganização de 15/08/2026 — antes tudo ficava num bloco só, incluindo
   duas UIs diferentes fazendo a mesma coisa (ver checklist-tipos.js). */
.cl-perg-subsec{ border-top:1px solid var(--border); margin-top:10px; padding-top:10px; }
.cl-perg-subsec:first-of-type{ border-top:none; margin-top:8px; padding-top:0; }
.cl-perg-subsec-lbl{ font-size:var(--fs-xs); font-weight:600; color:var(--text2); margin-bottom:8px; }
.cl-lbl-verde{ font-size:var(--fs-xs); font-weight:600; color:var(--green); }
.cl-lbl-vermelho{ font-size:var(--fs-xs); font-weight:600; color:var(--red); }
.cl-notas-vazio{ text-align:center; color:var(--text3); font-size:var(--fs-sm); padding:8px 0; }

/* ---------- Histórico mensal: linha destacada quando há pendências ---------- */
.cl-table tbody tr.cl-row-pend{
  background:var(--orange-dim);
  box-shadow:inset 3px 0 0 var(--orange);
}

/* Barra de filtro compacta e lista de caixas em linha (contêineres; as
   opções em si — .cl-filtro-opt, .cl-chk-item — vêm do padrão). */
.cl-filtro-barra{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cl-chk-lista{ display:flex; flex-wrap:wrap; gap:8px; }