/* ============================================================
   Sistema Rodo Wall — Módulo Checklist — Execução Diário + Home
   (na régua do padrão visual)
   ============================================================ */

/* ---------- Topo da execução ---------- */
.cl-exec-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:16px 20px; margin-bottom:16px;
  border-radius:var(--clradius);
  background:var(--clcard); border:1px solid var(--clborder);
}
.cl-exec-info{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--cltx2); }
.cl-exec-info strong{ color:var(--cltx); font-size:var(--fs-lg); }
.cl-exec-badge{
  font-family:var(--font); font-weight:600; font-size:var(--fs-xs);
  background:var(--claccent-dim); color:var(--claccent);
  padding:4px 11px; border-radius:var(--r-sm);
}
.cl-exec-badge.cl-badge-sec{ background:var(--clcard-h); color:var(--cltx2); border:1px solid var(--clborder); }
.cl-exec-km{ color:var(--cltx2); font-size:var(--fs-sm); }
.cl-exec-timer{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:var(--fs-num); color:var(--claccent);
}

/* ---------- Avisos (placa já em Acompanhamento) ---------- */
.cl-aviso-acomp{
  display:flex; gap:8px; align-items:flex-start;
  font-size:var(--fs-sm); color:var(--cltx2);
  padding:9px 12px; margin-top:8px; margin-bottom:14px;
  background:var(--clorange-dim); border:1px solid var(--clorange);
  border-radius:var(--r-lg);
}
.cl-aviso-acomp .cl-ic{ color:var(--clorange); flex-shrink:0; margin-top:1px; }
.cl-aviso-acomp strong{ color:var(--cltx); }

/* ---------- Campo com busca (placa com datalist) ---------- */
.cl-input-busca-wrap{ position:relative; display:flex; align-items:center; }
.cl-input-busca-wrap .cl-ic{
  position:absolute; left:11px; color:var(--cltx3); pointer-events:none;
}
.cl-input-busca{ padding-left:32px !important; }

/* ---------- Perguntas ---------- */
.cl-q{
  border:1px solid var(--clborder); border-radius:var(--r-lg);
  padding:16px; margin-bottom:12px;
  background:var(--clcard-h); transition:all .2s;
}
.cl-q-alerta{ border-color:var(--clred); background:var(--clred-dim); }
.cl-q-texto{ font-size:var(--fs-md); margin-bottom:12px; color:var(--cltx); line-height:1.45; }
.cl-q-btns{ display:flex; gap:12px; margin-bottom:12px; }
.cl-ans{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px; border-radius:var(--r-lg);
  border:1px solid var(--clborder-b); background:var(--clcard);
  color:var(--cltx2); font-weight:600; font-size:var(--fs-md); cursor:pointer;
  transition:all .15s;
}
.cl-ans:hover{ border-color:var(--claccent); color:var(--claccent); }
.cl-ans-sim-on{ background:var(--clgreen-dim); border-color:var(--clgreen); color:var(--clgreen); }
.cl-ans-nao-on{ background:var(--clred-dim); border-color:var(--clred); color:var(--clred); }
/* Pergunta tipo "data": 1 a 5 calendários + o botão "+" (ver
   clRespostaDatasHtml). Os campos além do primeiro nascem com [hidden] e
   o "+" vai liberando um a um. */
.cl-datas{ display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
.cl-datas-campos{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.cl-data-campo{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:170px; }
.cl-data-inp{ width:100%; }
/* Data já vencida: destaque no campo e o seletor de placa logo abaixo. */
.cl-data-inp.cl-data-venc{ border-color:var(--clred); background:var(--clred-dim); color:var(--clred); font-weight:600; }
.cl-data-placa{ width:100%; font-size:var(--fs-sm); border-color:var(--clred); }
.cl-datas-mais{ flex-shrink:0; padding:10px 16px; font-size:var(--fs-lg); font-weight:600; line-height:1; }
.cl-datas-nota{ width:100%; font-size:var(--fs-xs); color:var(--cltx3); margin-top:-2px; }
.cl-datas-nota strong{ color:var(--cltx2); }
.cl-datas [hidden]{ display:none !important; }
@media (max-width:640px){ .cl-data-campo{ min-width:100%; } }

.cl-q-obs{
  width:100%; padding:10px 12px; border-radius:var(--r-lg);
  border:1px solid var(--clborder-b); background:var(--clcard);
  color:var(--cltx); font-size:var(--fs-sm);
}
.cl-q-obs-req{ border-color:var(--clred); }
/* Seletor rápido "qual veículo está com o problema" (cavalo/carreta) —
   só aparece quando o item está marcado como pendência E há carreta(s)
   no conjunto (com só o cavalo, não há ambiguidade a esclarecer). */
.cl-q-veiculo{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--clborder-b); }
.cl-q-veiculo-lbl{ display:block; font-size:var(--fs-xs); color:var(--cltx2); margin-bottom:6px; }
.cl-q-veiculo-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-q-veiculo-btns .cl-ans{ flex:0 0 auto; padding:6px 12px; font-size:var(--fs-sm); border-radius:var(--r-sm); }

/* ---------- Foto ---------- */
.cl-foto-preview{
  display:block; max-width:100%; max-height:300px;
  border-radius:var(--r-lg); border:1px solid var(--clborder); margin-bottom:12px;
}

/* ---------- Assinatura ---------- */
.cl-sig-wrap{ position:relative; margin-bottom:12px; }
.cl-sig-canvas{
  width:100%; height:190px; touch-action:none;
  background:var(--clcard-h);
  border:1.5px dashed var(--clborder-b); border-radius:var(--r-lg); cursor:crosshair;
}
.cl-sig-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--cltx3); font-size:var(--fs-md); pointer-events:none;
}

/* ---------- Home do motorista (cards grandes como no protótipo) ---------- */
.cl-home-hero{ text-align:center; padding:44px 0 28px; }
.cl-home-titulo{ font-weight:600; font-size:var(--fs-num); }
.cl-home-sub{ color:var(--cltx2); font-size:var(--fs-md); margin-top:8px; }
.cl-home-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:700px; margin:0 auto; }
/* Mesmo cartão da tela de módulos: borda azul no passar o mouse, sem pulo nem degradê */
.cl-home-card{
  position:relative; overflow:hidden; text-align:left;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg); cursor:pointer;
  transition:border-color var(--t), box-shadow var(--t);
}
.cl-home-card:hover{ border-color:var(--accent); box-shadow:var(--sombra-2); }
.cl-home-card-ic{
  width:48px; height:48px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent-text);
  margin-bottom:16px;
}
.cl-home-card-nome{ font-weight:600; font-size:var(--fs-xl); margin-bottom:6px; color:var(--cltx); }
.cl-home-card-desc{ color:var(--cltx2); font-size:var(--fs-sm); margin-bottom:16px; }
.cl-home-card-seta{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--clcard-h); border:1px solid var(--clborder);
  color:var(--cltx2); transition:all .22s;
}
.cl-home-card:hover .cl-home-card-seta{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

@media (max-width:860px){
  .cl-home-cards{ grid-template-columns:1fr; }
  .cl-exec-timer{ font-size:var(--fs-xl); }
  .cl-home-titulo{ font-size:var(--fs-num); }
}