/* Checklist da diligência — as regras que viviam no <style> do app, agora
   UMA fonte para o app e para o modal da web (S-93).

   🔴 TOKENS DA WEB. O app define --line2, --agrus etc. no :root; a web não.
   A primeira versão deste arquivo "reservava" o valor com
   `--line2: var(--line2, #…)` — e custom property que referencia a SI MESMA
   é ciclo, fica INVÁLIDA, e toda regra que a usa cai para o valor inicial.
   O print pegou: item cumprido com a caixa vazia, lista sem separador.

   Aqui vai o que o app REALMENTE pinta, só sob .el-checklist (que só a web
   usa; o app pinta dentro de #clList, fora desta classe):
   · --agrus e --agrus-dk seguem a MARCA do inquilino, como no app
     (`.el-campo` em navegacao.css mapeia os dois para --el-primary). Um
     literal aqui deixaria a web verde e o celular na cor da empresa — o
     gate de paridade [12a] mediu exatamente isso em 16/09;
   · o resto são os literais do :root do app, que nenhum tema remapeia;
   · --ink3 e --line NÃO entram: a web já os mapeia para --el-* (.el-web). */
.el-checklist{
  --line2:#EFEDE8; --press:#F3F2EF; --sup:#FFFFFF;
  --agrus:var(--el-primary); --agrus-dk:var(--el-primary); --neutral-sf:#EFEEEA;
  --risk:#BC4636; --risk-sf:#FAEAE7; --risk-bd:#F0CFC8;
}
.cl{list-style:none;margin:0;padding:0}
.cl li{border-bottom:1px solid var(--line2)}
.cl li:last-child{border-bottom:none}
.clitem{
  display:flex;align-items:flex-start;gap:12px;width:100%;
  min-height:60px;padding:13px 2px;background:none;border:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.clitem:active{background:var(--press)}
/* Só na web (no desktop o ponteiro sobre item que não se marca engana). No
   app a regra não existia — o A/B da extração exige estilo idêntico lá. */
.el-checklist .clitem:disabled{cursor:default}
.box{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;margin-top:1px;
  border:2px solid var(--line);background:var(--sup);display:grid;place-items:center;
}
.clitem[aria-pressed="true"] .box{background:var(--agrus);border-color:var(--agrus)}
.clitem[aria-pressed="true"] .box svg{opacity:1}
.box svg{opacity:0}
.cltxt{min-width:0;flex:1 1 auto}
.cltxt .t{display:block;font-size:15px;font-weight:600;letter-spacing:-.1px;line-height:1.35}
.clitem[aria-pressed="true"] .cltxt .t{color:var(--ink2)}
.cltxt .d{display:block;font-size:12.5px;color:var(--ink3);margin-top:3px;line-height:1.35}
/* O chip DENTRO do item tem a forma do app nas duas telas (a web tem um .chip
   próprio, em pílula, para a situação do caso). */
.cl .chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:620;border-radius:6px;padding:4px 8px;background:var(--neutral-sf);color:var(--ink2);border:1px solid var(--line);white-space:nowrap}
.cl .chip.crit{background:var(--risk-sf);color:var(--risk);border-color:var(--risk-bd)}
.cltxt .t .chip{margin-left:6px;vertical-align:1px;font-size:10.5px;padding:2px 7px;font-weight:700}
/* só na web: a caixa de item novo do modal */
.el-checklist .cl-nova{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.el-checklist .cl-nova input,.el-checklist .cl-nova select{min-height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;background:var(--card,#fff);color:var(--ink)}
.el-checklist .cl-nova-linha{display:flex;gap:8px}
.el-checklist .cl-nova-linha select{flex:1}