/* ═══ v4.0.0 — ícones padronizados, cards por cliente, ciclos ═══════════════ */

/* ── Ícones (registro único em js/icons.js) ───────────────────────────────── */
.ic{display:inline-block;width:1.1em;height:1.1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.ic-fill{fill:currentColor;stroke:none}
.btn .ic,.chip .ic,.pag-btn .ic{width:16px;height:16px}
.btn-sm .ic{width:15px;height:15px}.btn-xs .ic{width:13px;height:13px}
.btn-icon .ic{width:17px;height:17px}
.btn-icon-alert{color:var(--wpp)}                      /* WhatsApp: verde da marca */
.btn-icon-alert .ic{fill:currentColor;stroke:none}
.btn-icon-cycle .ic{stroke:#a78bfa}
.btn-icon-cycle:hover{background:var(--g-violet);border-color:transparent;box-shadow:0 8px 18px rgba(139,92,246,.5)}
.btn-icon-cycle:hover .ic{stroke:#fff}
.btn-icon-tl .ic{stroke:#14b8a6}
.btn-icon-tl:hover{background:linear-gradient(135deg,#14b8a6,#0d9488);border-color:transparent;box-shadow:0 8px 18px rgba(20,184,166,.45)}
.btn-icon-tl:hover .ic{stroke:#fff}
.situ-act-pago .ic{stroke:#16a34a}.situ-act-pend .ic{stroke:#d97706}
.modal-title .ic{width:20px;height:20px;margin-right:8px;vertical-align:-4px}
.mt-ic{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-l{display:inline-flex;align-items:center;gap:10px;min-width:0}
.mt-l .ic{margin-right:0}
.empty-icon .ic{width:42px;height:42px;stroke-width:1.6}
.ic-hero{display:flex;justify-content:center;margin-bottom:12px}.ic-hero .ic{width:44px;height:44px;stroke:var(--ac)}
.log-ic .ic{width:18px;height:18px;stroke:#fff}
#toast .ic{width:18px;height:18px}
.spin,.ic-spin{animation:ic-giro .9s linear infinite}
@keyframes ic-giro{to{transform:rotate(360deg)}}
button:disabled .ic[href]{opacity:.7}
.btn-full{width:100%}
.btn-del-soft{color:var(--re)}
.btn.btn-ghost.btn-del-soft:hover:not(:disabled){border-color:var(--re)}

/* ── Chips rápidos com contagem ───────────────────────────────────────────── */
.chips-rap{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip .cnt{font-weight:800;opacity:.7;font-size:11px}
.chip.sel .cnt{opacity:1}
.chip .cnt-red{background:#e11d48;color:#fff;border-radius:99px;padding:1px 7px;opacity:1;min-width:20px;text-align:center}
.chip .cnt-red.zero{background:var(--surface-3);color:var(--tx3)}
.chip.sel .cnt-red.zero{background:rgba(255,255,255,.25);color:#fff}
.icon-exp.on{background:var(--ac);color:#fff;border-color:transparent}
.icon-exp .ic{width:16px;height:16px}

/* ── Ordenação e tamanho dos cards ────────────────────────────────────────── */
.toolbar-ord{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.toolbar-ord .inp{width:auto;min-width:170px}
.ord-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--tx2)}
.modo-sel{display:inline-flex;margin-left:auto;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.modo-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--tx2);cursor:pointer}
.modo-btn.on{background:var(--ac);color:#fff}
.modo-btn .ic{width:15px;height:15px}

/* ── Card do cliente ──────────────────────────────────────────────────────── */
.c2 .c-main{display:flex;flex-direction:column;gap:2px}
.c-deve{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:2px 9px;border-radius:99px;
  background:rgba(225,29,72,.12);color:var(--re);border:1px solid rgba(225,29,72,.3)}
.c-hist{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.hc{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--font,system-ui);padding:5px 9px 5px 7px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--tx2);cursor:pointer;transition:.15s}
.hc:hover{border-color:var(--ac);color:var(--tx);transform:translateY(-1px)}
.hc i{width:8px;height:8px;border-radius:50%;background:#2e9e6b;display:block}
.hc em{font-style:normal}
.hc-aberto i{background:#e0a100}
.hc-atraso i{background:#d9435a}
.hc-atual{border-color:var(--ac);color:var(--tx)}
.hc-atual.hc-aberto i{box-shadow:0 0 0 3px rgba(224,161,0,.22)}
.hc-mais{border-style:dashed;color:var(--ac);font-weight:800}
.hc-mais .ic{width:12px;height:12px}
.c-tog{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--tx3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.c-tog:hover{color:var(--tx);border-color:var(--line-2)}
.c-tog .ic{width:16px;height:16px;transition:transform .2s}
.c2.is-open .c-tog .ic{transform:rotate(180deg)}
.c2.is-closed .c-hist{display:none}
.c2.is-closed{padding-top:11px;padding-bottom:11px}
.c-row.c2:hover{transform:none}

/* Vários clientes no mesmo telefone */
.grp{border:1.5px dashed var(--line-2);border-radius:18px;padding:10px 10px 1px;margin:4px 0 14px;background:rgba(99,102,241,.03)}
.grp .c-row{margin-bottom:10px}
.grp-h{display:flex;align-items:center;gap:12px;padding:2px 8px 10px}
.grp-h b{display:block;font-size:14px}
.grp-h small{display:block;font-size:12px;color:var(--tx3)}
.grp-av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);border:1.5px solid var(--line);color:var(--tx2)}
.grp-av .ic{width:16px;height:16px}
.grp-tot{margin-left:auto;font:700 13px var(--font-d,system-ui)}

/* ── Janela do ciclo / gerar próximo ciclo ────────────────────────────────── */
.lbl-sm{display:block;font-size:12px;font-weight:700;color:var(--tx2);margin:12px 0 6px}
.lbl-sm span{font-weight:500;color:var(--tx3)}
.p-sm{font-size:13px;color:var(--tx2);line-height:1.6;margin-bottom:14px}
.ciclo-info{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.ciclo-nome{font-weight:700;margin-bottom:6px}
.ciclo-lin{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--tx2)}
.ciclo-lin b{color:var(--tx)}
.ciclo-sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin:18px 0 8px;padding-top:14px;border-top:1px dashed var(--line)}
.tx-ok{color:#16a34a!important}.tx-warn{color:#d97706!important}.tx-err{color:var(--re)!important}
.nc-info{display:flex;gap:11px;align-items:flex-start;background:rgba(99,102,241,.08);border:1.5px solid rgba(99,102,241,.25);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--tx2);line-height:1.5}
.nc-info b{color:var(--tx)}
.nc-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;background:#e0a100}
.nc-dot.ok{background:#2e9e6b}.nc-dot.err{background:#d9435a}
.nc-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.nc-quick .chip{padding:6px 12px;font-size:12px}
.nc-pago{display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 14px;border:1.5px solid var(--ac);border-radius:14px;background:var(--ac-soft)}
.nc-pago .inp{flex:1;min-width:0;max-width:170px;margin-left:auto}
.nc-chk{display:inline-flex;align-items:center;gap:9px;font-weight:700;cursor:pointer}
.nc-chk input{width:18px;height:18px;accent-color:var(--ac)}
.massa-it{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card2);border-radius:8px;cursor:pointer}
.massa-it input{width:16px;height:16px;accent-color:var(--ac)}

/* ── Migração ─────────────────────────────────────────────────────────────── */
.mig-tela{max-width:760px;margin:20px auto;padding:0 4px}
.mig-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0}
.mig-tbl th,.mig-tbl td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
.mig-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}
.mig-ok{color:#16a34a;font-weight:700}.mig-fail{color:var(--re);font-weight:700}
.mig-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.mig-num div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.mig-num b{display:block;font:700 20px var(--font-d,system-ui)}
.mig-num span{font-size:11.5px;color:var(--tx3)}
.mig-banner{display:flex;gap:10px;align-items:flex-start;background:rgba(217,119,6,.1);border:1.5px solid rgba(217,119,6,.35);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--tx2);margin-bottom:14px}
.mig-banner .ic{width:20px;height:20px;stroke:#d97706;margin-top:1px}

/* ── Celular: cards minimizados por padrão ────────────────────────────────── */
@media(max-width:720px){
  .toolbar-ord .inp{flex:1;min-width:0}
  .modo-sel{margin-left:0;width:100%}.modo-btn{flex:1;justify-content:center}
  .c2{flex-wrap:wrap;align-items:flex-start;gap:10px 12px;padding:12px 12px 12px 14px}
  .c2 .c-av{width:40px;height:40px;font-size:14px;border-radius:12px}
  .c2 .c-main{flex:1 1 0;min-width:0}
  .c2 .c-tog{order:2;align-self:center}
  .c2 .c-right{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:8px}
  .c2 .c-right .c-val{align-items:flex-start;min-width:0;margin-right:auto;order:-1}
  .c2.is-closed .c-meta,.c2.is-closed .c-acts{display:none}
  .c2.is-closed .c-right{margin-top:-4px}
  .c2.is-open .c-acts{width:100%;justify-content:space-between;gap:4px;padding-top:6px;border-top:1px dashed var(--line)}
  .c2 .c-nome{font-size:15px}
  .nc-pago{flex-wrap:wrap}.nc-pago .inp{max-width:none;width:100%}
  #toast{left:12px;right:12px;max-width:none}
}

/* ── Lembrete interno: ações após exibir ──────────────────────────────────── */
.lemb-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lemb-acts .btn{flex:0 1 auto}
@media(max-width:720px){.lemb-acts .btn{flex:1 1 100%;justify-content:center}}

.meta-ic .ic,.ic-m{margin-right:5px}

/* ── Botão X das janelas: quadrado neutro, ícone centralizado, sem dica que vaze da janela ── */
.btn-x{flex-shrink:0;width:34px;height:34px;padding:0;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);
  color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;line-height:0}
.btn-x .ic{width:17px;height:17px;margin:0;vertical-align:0;stroke:currentColor}
.btn-x:hover{color:var(--re);border-color:var(--re);background:rgba(225,29,72,.08)}
.btn-x:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Dentro de janelas (rolagem/corte) a dica flutuante é cortada: usa a dica nativa (title) */
.overlay [data-tip]::before,.overlay [data-tip]::after,[data-ov] [data-tip]::before,[data-ov] [data-tip]::after{display:none!important}
/* Títulos de janela: texto longo quebra em vez de empurrar/cortar o botão */
.modal-title{min-width:0}.mt-l>span:last-child{min-width:0;overflow-wrap:anywhere}

/* Rodapé de botões das janelas: nunca ultrapassa a janela; quebra de linha se faltar espaço */
.rodape-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.rodape-btns .btn{flex:1 1 150px!important}
.modal .btn[style*="flex:1"]{min-width:0}
.modal .btn{max-width:100%}
.modal .btn>span{min-width:0}
.rodape-btns .btn{white-space:normal;text-align:center}
.rodape-btns .btn-blue{flex:2 1 220px!important}
@media(max-width:480px){.rodape-btns .btn,.rodape-btns .btn-blue{flex:1 1 100%!important}}