/* Tela comoFunciona (web/telas/comoFunciona.js). Classes desta tela usam o prefixo "cf-" (ex.: .cf-grupo). O que é comum fica em web/app.css. */

/* Os 6 passos */
.cf-passos{list-style:none;margin:0 0 24px;padding:0;background:#fff;border:1px solid var(--border);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;max-width:880px}
.cf-passo + .cf-passo{border-top:1px solid var(--line)}
.cf-passo-c{display:flex;align-items:flex-start;gap:14px;padding:15px 18px 15px 14px;color:inherit;text-decoration:none;border-left:4px solid transparent}
a.cf-passo-c:hover{background:var(--hover)}
.cf-passo.sua .cf-passo-c{border-left-color:var(--tiffany)}
.cf-passo.trabalho .cf-passo-c{background:var(--tiffany-claro)}
.cf-passo.trabalho a.cf-passo-c:hover{background:#D6F6F6}
.cf-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:650;font-size:13px;background:var(--line);color:var(--primaria);font-variant-numeric:tabular-nums}
.cf-passo.sua .cf-num{background:var(--primaria);color:#fff}
.cf-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cf-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-titulo{font-size:15px;font-weight:650;color:var(--primaria);letter-spacing:-.005em;margin-right:2px}
.cf-sua{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primaria)}
.cf-corpo p{color:var(--texto);font-size:13.5px;line-height:1.55;max-width:72ch}
.cf-corpo p.cf-extra{color:var(--gray);font-size:12.5px}
.cf-hoje{color:var(--gray);font-size:12.5px}
.cf-hoje b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.cf-motivo{align-self:flex-start;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-soft);border-radius:var(--raio-sm);padding:2px 8px}
.cf-seta{flex-shrink:0;align-self:center;color:var(--gray-light);font-size:20px;line-height:1}
a.cf-passo-c:hover .cf-seta{color:var(--primaria)}
.cf-so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Faixas da nota (cores de faixa só aqui, na ficha e no ranking) */
.cf-faixas{list-style:none;margin:2px 0 2px;padding:0;display:grid;grid-template-columns:repeat(3,max-content);gap:6px 18px;font-size:13px;color:var(--texto)}
.cf-faixas li{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cf-faixas li.cf-abaixo{grid-column:span 3}
.cf-faixas li.cf-abaixo + li.cf-abaixo{padding-left:94px}
.cf-abaixo-t{width:87px;color:var(--gray)}
.cf-faixa{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px 2px 7px;border-radius:99px;background:#EEF1F2;color:var(--ink);white-space:nowrap}
.cf-faixa i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cf-pref i{background:var(--f-pref)}
.cf-homol i{background:var(--f-homol)}
.cf-obs i{background:var(--f-obs)}
.cf-alerta i{background:var(--f-alerta)}

/* Recolhidos: "Como a nota é calculada" e o glossário */
.cf-recolhido{max-width:880px;background:#fff;border:1px solid var(--border);border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:12px}
.cf-recolhido summary{cursor:pointer;list-style:none;padding:13px 18px;font-weight:600;color:var(--primaria);display:flex;align-items:center;gap:8px}
.cf-recolhido summary::-webkit-details-marker{display:none}
.cf-recolhido summary::before{content:"▸";color:var(--gray);transition:transform .12s;display:inline-block}
.cf-recolhido[open] summary::before{transform:rotate(90deg)}
.cf-recolhido summary:hover{background:var(--hover);border-radius:var(--raio)}
.cf-rec-corpo{padding:2px 18px 16px 38px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--texto)}
.cf-cadeia{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-weight:500;color:var(--ink)}
.cf-cadeia li{display:flex;align-items:center}
.cf-sep{color:var(--gray-light);margin:0 8px}
.cf-def{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:8px 18px;margin:4px 0 0}
.cf-def dt{font-weight:600;color:var(--ink)}
.cf-def dd{margin:0;color:var(--texto);line-height:1.5}
.cf-pesos{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:3px 18px;font-size:12.5px;color:var(--gray)}
.cf-pesos li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--line);padding:2px 0}
.cf-pesos b{font-weight:600;color:var(--texto);font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:640px){
  .cf-passo-c{padding:13px 12px 13px 10px;gap:10px}
  .cf-faixas{grid-template-columns:1fr}
  .cf-faixas li.cf-abaixo{grid-column:auto}
  .cf-faixas li.cf-abaixo + li.cf-abaixo{padding-left:0}
  .cf-abaixo-t{width:100%}
  .cf-rec-corpo{padding:2px 14px 14px}
  .cf-def{grid-template-columns:1fr;gap:2px}
  .cf-def dd{margin-bottom:8px}
}