/* CLSP Checklist — estilos escopados em .clsp-checklist */

.clsp-checklist{
  --clsp-petrol:#0F3B4C;
  --clsp-teal:#16A394;
  --clsp-amber:#D9932B;
  --clsp-petrol-dk:#082530;
  --clsp-teal-lt:#E4F4F1;
  --clsp-amber-lt:#FBF1DF;
  --clsp-ink:#17272F;
  --clsp-muted:#6E818C;
  --clsp-line:#D9E2E7;
  --clsp-soft:#F3F7F9;
  --clsp-body:"Helvetica Neue",Arial,"Liberation Sans",system-ui,sans-serif;
  --clsp-display:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  font-family:var(--clsp-body);
  color:var(--clsp-ink);
  line-height:1.45;
  box-sizing:border-box;
}
.clsp-checklist *,.clsp-checklist *::before,.clsp-checklist *::after{box-sizing:border-box;}
.clsp-checklist h1,.clsp-checklist h2,.clsp-checklist h3,.clsp-checklist h4,.clsp-checklist p{margin:0;}
.clsp-checklist button{font-family:inherit;cursor:pointer;}
.clsp-checklist :focus-visible{outline:2px solid var(--clsp-teal);outline-offset:2px;}
.clsp-carregando,.clsp-bloqueado{padding:34px;text-align:center;color:var(--clsp-muted);font-size:14px;}

/* cabeçalho */
.clsp-checklist .cx-top{
  background:linear-gradient(115deg,var(--clsp-petrol-dk) 0%,var(--clsp-petrol) 55%,#14556B 100%);
  color:#fff;padding:30px 32px 26px;position:relative;overflow:hidden;border-radius:6px 6px 0 0;
}
.clsp-checklist .cx-top::after{
  content:"";position:absolute;right:-60px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:rgba(22,163,148,.16);
}
.clsp-checklist .cx-brand{font-family:var(--clsp-display);font-weight:700;font-size:20px;}
.clsp-checklist .cx-brand span{font-weight:300;color:var(--clsp-teal);}
.clsp-checklist .cx-kicker{font-size:9.5px;letter-spacing:.32em;color:#9FC4CF;margin-top:3px;font-weight:700;}
.clsp-checklist .cx-title{font-family:var(--clsp-display);font-weight:500;font-size:30px;line-height:1.15;margin-top:20px;position:relative;z-index:1;color:#fff;}
.clsp-checklist .cx-sub{color:#BBD3DB;font-size:13.5px;margin-top:6px;position:relative;z-index:1;}

/* trilha das fases */
.clsp-checklist .cx-rail{
  position:sticky;top:0;z-index:30;background:var(--clsp-petrol);
  border-top:2px solid var(--clsp-teal);padding:14px 32px 16px;color:#fff;
}
.clsp-checklist .cx-railtop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.clsp-checklist .cx-count{font-family:var(--clsp-display);font-weight:500;font-size:19px;}
.clsp-checklist .cx-count b{color:var(--clsp-teal);font-weight:700;}
.clsp-checklist .cx-legend{font-size:11.5px;color:#B7CED6;margin-left:auto;}
.clsp-checklist .cx-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 12px;vertical-align:-1px;}
.clsp-checklist .cx-track{display:flex;gap:3px;margin-top:12px;}
.clsp-checklist .cx-seg{
  flex:1;min-width:0;background:rgba(255,255,255,.12);border-radius:3px;padding:6px 4px 5px;
  text-align:center;border:0;color:#9FC4CF;font-size:10px;font-weight:700;letter-spacing:.06em;
  position:relative;overflow:hidden;transition:color .18s;
}
.clsp-checklist .cx-seg .cx-fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--clsp-teal);transition:width .3s ease,left .3s ease;}
.clsp-checklist .cx-seg .cx-fill.doing{background:var(--clsp-amber);}
.clsp-checklist .cx-seg span{position:relative;z-index:1;}
.clsp-checklist .cx-seg:hover,.clsp-checklist .cx-seg[data-state="done"]{color:#fff;}

/* barra de ações */
.clsp-checklist .cx-actions{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:12px 32px;background:var(--clsp-soft);border-bottom:1px solid var(--clsp-line);
}
.clsp-checklist .cx-filters{display:flex;gap:4px;background:#fff;border:1px solid var(--clsp-line);border-radius:5px;padding:3px;}
.clsp-checklist .cx-filters button{border:0;background:transparent;color:var(--clsp-muted);font-size:12px;font-weight:700;padding:6px 11px;border-radius:3px;}
.clsp-checklist .cx-filters button[aria-pressed="true"]{background:var(--clsp-petrol);color:#fff;}
.clsp-checklist .cx-btn{
  border:1px solid var(--clsp-line);background:#fff;color:var(--clsp-petrol);
  font-size:12px;font-weight:700;padding:8px 13px;border-radius:5px;
  display:inline-flex;align-items:center;gap:6px;line-height:1.2;
}
.clsp-checklist a.cx-btn{text-decoration:none;}
.clsp-checklist .cx-btn:hover{border-color:var(--clsp-teal);color:var(--clsp-teal);}
.clsp-checklist .cx-btn.primary{background:var(--clsp-teal);border-color:var(--clsp-teal);color:#fff;}
.clsp-checklist .cx-btn.primary:hover{filter:brightness(.94);color:#fff;}
.clsp-checklist .cx-btn.on{background:var(--clsp-amber);border-color:var(--clsp-amber);color:#fff;}
.clsp-checklist .cx-btn.ghost{color:var(--clsp-muted);}
.clsp-checklist .cx-btn.mini{padding:4px 8px;font-size:11px;border-radius:4px;}
.clsp-checklist .cx-status{margin-left:auto;font-size:11.5px;color:var(--clsp-muted);text-align:right;}
.clsp-checklist .cx-status b{color:var(--clsp-teal);}
.clsp-checklist .cx-status.erro b{color:#B23B3B;}

.clsp-checklist .cx-flash{
  padding:11px 32px;font-size:12.5px;display:none;
  background:var(--clsp-amber-lt);border-bottom:1px solid #EBD8B4;color:#7A5610;
}
.clsp-checklist .cx-flash.show{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

/* corpo */
.clsp-checklist .cx-pane{padding:24px 32px 30px;}
.clsp-checklist .cx-secttl{font-family:var(--clsp-display);font-weight:500;font-size:16px;color:var(--clsp-petrol);margin:28px 0 12px;}
.clsp-checklist .cx-ident{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--clsp-line);
  border:1px solid var(--clsp-line);border-radius:5px;overflow:hidden;
}
.clsp-checklist .cx-ident label{display:block;background:var(--clsp-soft);padding:11px 13px 12px;margin:0;}
.clsp-checklist .cx-ident span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;color:var(--clsp-muted);text-transform:uppercase;}
.clsp-checklist .cx-ident input{
  width:100%;border:0;border-bottom:1px solid var(--clsp-line);background:transparent;
  font:600 14px/1.4 var(--clsp-body);color:var(--clsp-ink);padding:5px 0 4px;margin-top:5px;border-radius:0;
}
.clsp-checklist .cx-ident input:focus{border-bottom-color:var(--clsp-teal);outline:none;}

/* fases */
.clsp-checklist .cx-phase{margin-top:30px;}
.clsp-checklist .cx-phase.hidden{display:none;}
.clsp-checklist .cx-phasehead{display:flex;gap:12px;align-items:flex-start;}
.clsp-checklist .cx-num{
  flex:0 0 34px;height:34px;background:var(--clsp-petrol);color:#fff;border-radius:4px;
  font-family:var(--clsp-display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;
}
.clsp-checklist .cx-phasettl{font-family:var(--clsp-display);font-weight:500;font-size:15px;color:var(--clsp-petrol);letter-spacing:.02em;text-transform:uppercase;line-height:1.25;}
.clsp-checklist .cx-phasesub{font-size:12px;color:var(--clsp-muted);margin-top:2px;}
.clsp-checklist .cx-phasetag{margin-left:auto;font-size:10px;font-weight:700;color:var(--clsp-muted);letter-spacing:.08em;white-space:nowrap;padding-top:5px;}
.clsp-checklist .cx-phasetools{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap;}

/* item */
.clsp-checklist .cx-item{
  display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--clsp-line);
  border-left:3px solid var(--clsp-line);border-radius:4px;padding:12px 14px;margin-top:8px;
  transition:background .18s,border-color .18s;
}
.clsp-checklist .cx-item.hidden{display:none;}
.clsp-checklist .cx-item[data-status="done"]{background:var(--clsp-teal-lt);border-left-color:var(--clsp-teal);}
.clsp-checklist .cx-item[data-status="doing"]{background:var(--clsp-amber-lt);border-left-color:var(--clsp-amber);}
.clsp-checklist .cx-mark{
  flex:0 0 22px;height:22px;margin-top:1px;border-radius:4px;border:1.5px solid #AFC0C9;
  background:#fff;display:flex;align-items:center;justify-content:center;padding:0;
}
.clsp-checklist .cx-item[data-status="done"] .cx-mark{background:var(--clsp-teal);border-color:var(--clsp-teal);}
.clsp-checklist .cx-item[data-status="doing"] .cx-mark{background:var(--clsp-amber-lt);border-color:var(--clsp-amber);}
.clsp-checklist .cx-mark svg{display:none;}
.clsp-checklist .cx-item[data-status="done"] .cx-mark .ck{display:block;}
.clsp-checklist .cx-item[data-status="doing"] .cx-mark .dt{display:block;}
.clsp-checklist .cx-mark .dt circle{fill:var(--clsp-amber);}
.clsp-checklist .cx-mark[disabled]{opacity:.55;cursor:not-allowed;}
.clsp-checklist .cx-body{flex:1;min-width:0;}
.clsp-checklist .cx-itemhead{display:flex;gap:12px;align-items:baseline;}
.clsp-checklist .cx-itemttl{font-size:14px;font-weight:700;color:var(--clsp-ink);line-height:1.3;}
.clsp-checklist .cx-item[data-status="done"] .cx-itemttl{text-decoration:line-through;text-decoration-color:rgba(23,39,47,.35);}
.clsp-checklist .cx-tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:var(--clsp-muted);text-align:right;white-space:nowrap;}
.clsp-checklist .cx-tag em{font-style:normal;color:var(--clsp-amber);}
.clsp-checklist .cx-desc{font-size:12.5px;color:var(--clsp-muted);margin-top:4px;}
.clsp-checklist .cx-by{font-size:10.5px;color:var(--clsp-muted);margin-top:6px;font-style:italic;}
.clsp-checklist .cx-fields{display:grid;grid-template-columns:150px 1fr 1.6fr;gap:10px;margin-top:10px;}
.clsp-checklist .cx-fields label{display:block;margin:0;}
.clsp-checklist .cx-fields span{display:block;font-size:9px;font-weight:700;letter-spacing:.09em;color:var(--clsp-muted);text-transform:uppercase;}
.clsp-checklist .cx-fields input{
  width:100%;border:0;border-bottom:1px solid var(--clsp-line);background:transparent;border-radius:0;
  font:400 12.5px/1.4 var(--clsp-body);color:var(--clsp-ink);padding:3px 0;margin-top:2px;
}
.clsp-checklist .cx-fields input:focus{border-bottom-color:var(--clsp-teal);outline:none;}
.clsp-checklist input[disabled]{color:var(--clsp-muted);}

/* modo edição de estrutura */
.clsp-checklist.editando .cx-item{border-style:dashed;}
.clsp-checklist .cx-edit{display:none;}
.clsp-checklist.editando .cx-edit{display:block;}
.clsp-checklist.editando .cx-view{display:none;}
.clsp-checklist .cx-edit input[type="text"],.clsp-checklist .cx-edit textarea{
  width:100%;border:1px solid var(--clsp-line);border-radius:4px;background:#fff;
  font:400 13px/1.4 var(--clsp-body);color:var(--clsp-ink);padding:6px 8px;margin-top:4px;
}
.clsp-checklist .cx-edit label{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  color:var(--clsp-muted);text-transform:uppercase;margin:0 0 6px;}
.clsp-checklist .cx-edit .linha{display:grid;grid-template-columns:1fr 200px;gap:10px;}
.clsp-checklist .cx-edit .check{display:flex;align-items:center;gap:6px;font-size:12px;
  text-transform:none;letter-spacing:0;color:var(--clsp-ink);font-weight:400;margin-top:8px;}
.clsp-checklist .cx-tools{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;}
.clsp-checklist .cx-addbar{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.clsp-checklist .cx-danger{color:#B23B3B;border-color:#E7C6C6;}
.clsp-checklist .cx-danger:hover{background:#B23B3B;border-color:#B23B3B;color:#fff;}

/* pendências e histórico */
.clsp-checklist table.cx-pend{width:100%;border-collapse:collapse;font-size:12.5px;margin:0;}
.clsp-checklist .cx-pend th{background:var(--clsp-petrol);color:#fff;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;text-align:left;padding:8px 10px;font-weight:700;border:0;}
.clsp-checklist .cx-pend td{border:1px solid var(--clsp-line);padding:0;}
.clsp-checklist .cx-pend tr:nth-child(even) td{background:var(--clsp-soft);}
.clsp-checklist .cx-pend input{width:100%;border:0;background:transparent;font:400 12.5px/1.4 var(--clsp-body);padding:8px 10px;color:var(--clsp-ink);border-radius:0;}
.clsp-checklist .cx-pend input:focus{outline:none;background:#fff;box-shadow:inset 0 -2px 0 var(--clsp-teal);}
.clsp-checklist .cx-hist{font-size:12px;color:var(--clsp-muted);border-top:1px solid var(--clsp-line);margin-top:8px;}
.clsp-checklist .cx-hist div{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--clsp-line);flex-wrap:wrap;}
.clsp-checklist .cx-hist b{color:var(--clsp-ink);font-weight:700;}

.clsp-checklist .cx-note{
  background:var(--clsp-soft);border:1px solid var(--clsp-line);border-left:3px solid var(--clsp-teal);
  border-radius:4px;padding:13px 15px;font-size:12px;color:var(--clsp-muted);margin-top:26px;
}
.clsp-checklist .cx-note b{color:var(--clsp-ink);}
.clsp-checklist .cx-empty{padding:26px;text-align:center;color:var(--clsp-muted);font-size:13px;display:none;}

@media (max-width:820px){
  .clsp-checklist .cx-top,.clsp-checklist .cx-rail,.clsp-checklist .cx-actions,
  .clsp-checklist .cx-pane,.clsp-checklist .cx-flash{padding-left:18px;padding-right:18px;}
  .clsp-checklist .cx-ident{grid-template-columns:1fr;}
  .clsp-checklist .cx-fields{grid-template-columns:1fr;gap:8px;}
  .clsp-checklist .cx-edit .linha{grid-template-columns:1fr;}
  .clsp-checklist .cx-track{flex-wrap:wrap;}
  .clsp-checklist .cx-seg{flex:0 0 calc(20% - 3px);}
  .clsp-checklist .cx-tag,.clsp-checklist .cx-phasetag{display:none;}
  .clsp-checklist .cx-status{margin-left:0;width:100%;text-align:left;}
}
@media (prefers-reduced-motion:reduce){.clsp-checklist *{transition:none!important;}}

@media print{
  @page{size:A4;margin:12mm 10mm 14mm;}
  body *{visibility:hidden;}
  .clsp-checklist,.clsp-checklist *{visibility:visible;}
  .clsp-checklist{position:absolute;left:0;top:0;width:100%;max-width:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .clsp-checklist .cx-actions,.clsp-checklist .cx-flash,.clsp-checklist .cx-empty,
  .clsp-checklist .cx-tools,.clsp-checklist .cx-addbar,.clsp-checklist .cx-phasetools{display:none!important;}
  .clsp-checklist .cx-top{border-radius:0;padding:18px 14px 16px;}
  .clsp-checklist .cx-title{font-size:22px;}
  .clsp-checklist .cx-rail{position:static;padding:10px 14px 12px;}
  .clsp-checklist .cx-seg{font-size:8px;}
  .clsp-checklist .cx-pane{padding:14px;}
  .clsp-checklist .cx-phasehead{break-after:avoid;}
  .clsp-checklist .cx-item{break-inside:avoid;margin-top:5px;padding:9px 11px;}
  .clsp-checklist .cx-itemttl{font-size:12px;text-decoration:none;}
  .clsp-checklist .cx-desc{font-size:10.5px;}
  .clsp-checklist .cx-fields input,.clsp-checklist .cx-ident input{border-bottom:1px solid #aab8bf;}
}