/* =====================================================================
   VISUAL DO CADERNO DE FIADO
   Usa as cores do site (variáveis de _nucleo/estilo.css), então
   funciona nos modos claro e escuro. Classes começam com .cf-
   As cores das faixas de "idade" das dívidas ficam em configuracao.php.
   Sem animação contínua.
   ===================================================================== */

/* ---------- Base ---------- */
.cf { display: grid; gap: 1rem; margin-top: .4rem; --cf-fiado: #E0603A; --cf-pago: #0D9A78; --cf-alerta: #9A5B00; --cf-whats: #128C4A; }
:root[data-theme="dark"] .cf { --cf-fiado: #FF9A73; --cf-pago: #4FD6B0; --cf-alerta: #F5B755; --cf-whats: #1FA855; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf { --cf-fiado: #FF9A73; --cf-pago: #4FD6B0; --cf-alerta: #F5B755; --cf-whats: #1FA855; } }
.cf [hidden] { display: none !important; }
.cf-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cf-duas { display: grid; gap: 1rem; min-width: 0; align-items: start; }
.cf-lado { display: grid; gap: .8rem; min-width: 0; }
.cf-painel { display: grid; gap: 1rem; min-width: 0; }
.cf-cartao { padding: 1.1rem 1rem 1.2rem; min-width: 0; }
.cf-tit { font-size: 1.1rem; font-family: var(--fonte-titulo); font-weight: 800; color: var(--titulo); margin: 0 0 .8rem; display: flex; gap: .45rem; align-items: center; overflow-wrap: anywhere; }
.cf-subtit { font-size: 1rem; margin: 1.3rem 0 .5rem; color: var(--titulo); }
.cf-explica { font-size: .88rem; color: var(--texto-2); line-height: 1.5; margin: .6rem 0 0; }
.cf-opc { font-weight: 500; color: var(--texto-2); }
.cf-dica { display: block; font-size: .8rem; font-weight: 500; color: var(--texto-2); line-height: 1.45; margin: .5rem 0 .6rem; }
.cf-vazio { color: var(--texto-2); font-size: .92rem; margin: .3rem 0; list-style: none; padding: .4rem 0; }
.cf-link { border: 0; background: none; padding: .3rem 0; font: inherit; font-size: .88rem; color: var(--primaria); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cf-perigo, .cf-link.cf-perigo { color: var(--perigo); }
.cf-erro { display: block; font-size: .82rem; font-weight: 700; color: var(--perigo); margin-top: .3rem; }
.cf-pos { color: var(--sucesso); }
.cf-neg { color: var(--perigo); }
.cf-aviso { padding: .7rem .85rem; border-radius: var(--raio-p); background: #FFF6E0; color: #5A4300; }
.cf-privado { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .75rem .9rem; border-radius: var(--raio-p); background: var(--destaque-suave); color: var(--texto); font-size: .9rem; line-height: 1.45; }
.cf-privado .ico { width: 20px; height: 20px; flex: none; color: var(--destaque-texto); margin-top: .05rem; }
.cf-aviso-exemplo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: var(--raio-p); background: var(--primaria-suave); font-size: .9rem; line-height: 1.45; }

/* ---------- Situação (selos) ---------- */
.cf-st { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .74rem; font-weight: 750; line-height: 1.5; white-space: nowrap; background: var(--superficie-2); color: var(--texto-2); }
.cf-st-atrasado { background: rgba(180, 35, 24, .12); color: var(--perigo); }
.cf-st-vence { background: rgba(224, 162, 0, .16); color: var(--cf-alerta); }
.cf-st-emdia { background: var(--primaria-suave); color: var(--primaria); }
.cf-st-credito, .cf-st-quitado { background: rgba(13, 154, 120, .14); color: var(--sucesso); }

/* ---------- Placar ---------- */
.cf-placar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cf-pl { margin: 0; padding: .7rem .7rem .65rem; border-radius: var(--raio-p); background: var(--superficie); border: 1px solid var(--borda); display: grid; gap: .15rem; min-width: 0; align-content: start; }
.cf-pl span { font-size: .74rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.cf-pl strong { font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 800; overflow-wrap: anywhere; line-height: 1.2; color: var(--titulo); }
.cf-pl strong.cf-neg { color: var(--perigo); }
.cf-pl small { font-size: .72rem; color: var(--texto-2); line-height: 1.3; }
.cf-pl-receber { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); }

/* ---------- Avisos ---------- */
.cf-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cf-alertas:empty { display: none; }
.cf-al { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--raio-p); font-size: .9rem; line-height: 1.45; background: var(--superficie); border: 1px solid var(--borda); border-left-width: 4px; }
.cf-al-perigo { border-left-color: var(--perigo); }
.cf-al-aviso { border-left-color: #E0A200; }
.cf-al .cf-link { padding: 0; }

/* ---------- Anotar ---------- */
.cf-anotar { scroll-margin-top: calc(var(--topo-h) + 10px); border-top: 4px solid var(--cf-fiado); }
.cf-anotar.cf-modo-pago { border-top-color: var(--cf-pago); }
.cf-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: 16px; background: var(--superficie-2); margin-bottom: .8rem; }
.cf-tipos button { min-height: 48px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: .98rem; font-weight: 750; color: var(--texto-2); cursor: pointer; }
.cf-tipos [aria-checked="true"] { background: var(--superficie); color: var(--titulo); box-shadow: var(--sombra); }
.cf-campos { display: grid; gap: .8rem; }
.cf-campo { display: grid; gap: .3rem; font-size: .9rem; font-weight: 650; color: var(--titulo); min-width: 0; align-content: start; }
.cf-campo input, .cf-campo select, .cf-campo textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--texto); width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 46px; padding: .6rem .8rem; border: 1.5px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie);
}
.cf-campo textarea { resize: vertical; line-height: 1.45; font-size: .95rem; }
.cf-campo input:focus, .cf-campo select:focus, .cf-campo textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-suave); }
.cf-anotar > .cf-campo { margin-bottom: .2rem; }
.cf-cli-info { margin: .1rem 0 .8rem; font-size: .84rem; color: var(--texto-2); line-height: 1.4; min-height: 1.2em; }
.cf-cli-novo { color: var(--primaria); font-weight: 650; }
.cf-st-txt-atrasado { color: var(--perigo); font-weight: 650; }
.cf-st-txt-vence { color: var(--cf-alerta); font-weight: 650; }
.cf-valor-linha { display: flex; gap: .5rem; align-items: end; margin-bottom: .8rem; }
.cf-valor { flex: 1; }
.cf-valor input { font-size: 1.6rem; font-weight: 800; font-family: var(--fonte-titulo); min-height: 58px; }
.cf-valor-linha .btn { min-height: 58px; white-space: normal; max-width: 50%; }
.cf-marcar { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; color: var(--titulo); cursor: pointer; min-height: 44px; }
.cf-marcar input { width: 20px; height: 20px; accent-color: var(--primaria); flex: none; }
.cf-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; align-items: center; }
.cf-acoes .btn-largo { flex: 1 1 100%; }
.cf-arquivo { position: relative; cursor: pointer; }
.cf-depois { margin-top: .9rem; padding: .7rem .8rem; border-radius: var(--raio-p); background: var(--superficie-2); display: grid; gap: .5rem; }
.cf-depois p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--titulo); font-weight: 600; }
.cf-depois .btn { justify-self: start; }
.btn.cf-whats { background: var(--cf-whats); color: #fff; border-color: var(--cf-whats); }
.btn.cf-whats .ico { width: 18px; height: 18px; }
.btn.cf-whats.cf-feito { background: var(--superficie-2); color: var(--sucesso); border-color: var(--borda); }

/* ---------- Abas ---------- */
.cf-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 16px; background: var(--superficie-2); position: sticky; top: calc(var(--topo-h) + 6px); z-index: 5; }
.cf-abas button { position: relative; min-height: 50px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: .8rem; font-weight: 750; color: var(--texto-2); cursor: pointer; display: grid; justify-items: center; gap: .1rem; padding: .3rem .1rem; line-height: 1.15; }
.cf-abas button > span[aria-hidden] { font-size: 1.05rem; }
.cf-abas [aria-selected="true"] { background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--sombra); }
.cf-conta { position: absolute; top: 4px; right: 8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--perigo); color: #fff; font-size: .7rem; line-height: 20px; text-align: center; }

/* ---------- Lista de clientes ---------- */
.cf-filtros { display: grid; gap: .6rem; }
@media (min-width: 480px) { .cf-filtros { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.cf-lista, .cf-cobrar, .cf-extrato { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.cf-cli { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); font: inherit; color: var(--texto); text-align: left; cursor: pointer; min-height: 56px; }
.cf-cli:hover { border-color: var(--primaria); }
.cf-cli-atrasado { border-left-color: var(--perigo); }
.cf-cli-vence { border-left-color: #E0A200; }
.cf-cli-emdia { border-left-color: var(--primaria); }
.cf-cli-quitado, .cf-cli-credito { border-left-color: var(--sucesso); }
.cf-cli-nome { display: grid; gap: .2rem; min-width: 0; }
.cf-cli-nome strong { font-size: .98rem; color: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-cli-nome small { font-size: .76rem; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cf-cli-valor { font-weight: 800; font-family: var(--fonte-titulo); font-size: 1rem; white-space: nowrap; color: var(--titulo); }
.cf-detalhe { margin-top: 1rem; }
.cf-detalhe > summary { cursor: pointer; font-weight: 750; color: var(--primaria); min-height: 44px; display: flex; align-items: center; }
.cf-detalhe[open] > summary { margin-bottom: .6rem; }

/* ---------- Ficha do cliente ---------- */
.cf-ficha { scroll-margin-top: calc(var(--topo-h) + 70px); }
.cf-voltar { margin-bottom: .5rem; text-decoration: none; }
.cf-ficha-topo { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.cf-ficha-topo .cf-tit { margin: 0; font-size: 1.3rem; }
.cf-ficha-topo .cf-explica { margin-top: .2rem; }
.cf-f-saldo { margin: .9rem 0 .4rem; display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; color: var(--texto-2); font-weight: 700; }
.cf-f-saldo strong { font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1.1; }
.cf-f-info { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--texto-2); line-height: 1.55; }
.cf-cobranca { margin-top: 1rem; padding: .9rem; border-radius: var(--raio-p); background: var(--superficie-2); display: grid; gap: .6rem; }
.cf-cobranca .cf-subtit { margin: 0; }
.cf-cobranca .cf-acoes { margin-top: 0; }
.cf-mov { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); font: inherit; color: var(--texto); text-align: left; cursor: pointer; min-height: 52px; }
.cf-mov:hover { border-color: var(--primaria); }
.cf-mov-data { font-size: .8rem; font-weight: 800; color: var(--texto-2); }
.cf-mov-desc { display: grid; min-width: 0; }
.cf-mov-desc strong { font-size: .92rem; color: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-mov-desc small, .cf-mov-valor small { font-size: .74rem; color: var(--texto-2); }
.cf-mov-valor { display: grid; justify-items: end; white-space: nowrap; }
.cf-mov-fiado .cf-mov-valor b { color: var(--cf-fiado); }
.cf-mov-pago .cf-mov-valor b { color: var(--sucesso); }

/* ---------- Cobrar ---------- */
.cf-cob { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .6rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); }
.cf-cob-atrasado { border-left-color: var(--perigo); }
.cf-cob-vence { border-left-color: #E0A200; }
.cf-cob-emdia { border-left-color: var(--primaria); }
.cf-cob-nome { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; display: grid; gap: .2rem; min-width: 0; color: var(--texto); }
.cf-cob-nome strong { color: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-cob-nome small { font-size: .76rem; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cf-cob-valor { font-weight: 800; font-family: var(--fonte-titulo); white-space: nowrap; color: var(--titulo); }
.cf-cob .cf-whats { grid-column: 1 / -1; justify-content: center; }

/* ---------- Resumo ---------- */
.cf-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cf-numeros p { margin: 0; padding: .6rem; border-radius: var(--raio-p); background: var(--superficie-2); display: grid; gap: .1rem; }
.cf-numeros span { font-size: .72rem; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
.cf-numeros strong { font-family: var(--fonte-titulo); font-size: 1.05rem; overflow-wrap: anywhere; }
.cf-numeros .cf-explica { grid-column: 1 / -1; background: none; padding: 0; display: block; }
.cf-faixas { display: grid; gap: .8rem; }
.cf-faixa p { display: flex; justify-content: space-between; gap: .6rem; margin: 0 0 .3rem; font-size: .92rem; color: var(--titulo); }
.cf-faixa small { font-size: .76rem; color: var(--texto-2); }
.cf-barra { height: 10px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.cf-barra i { display: block; height: 100%; }
.cf-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; align-items: end; height: 150px; padding: .3rem 0; border-bottom: 1px solid var(--borda); }
.cf-mes { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: .25rem; min-width: 0; }
.cf-mes-barras { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 100%; }
.cf-mes-barras i { width: 40%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; }
.cf-b-fiado { background: var(--cf-fiado); }
.cf-b-pago { background: var(--cf-pago); }
.cf-mes span { font-size: .7rem; color: var(--texto-2); text-align: center; }
.cf-legenda { display: flex; justify-content: center; align-items: center; gap: .35rem .5rem; font-size: .8rem; color: var(--texto-2); margin: .5rem 0 .6rem; }
.cf-leg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cf-leg-fiado { background: var(--cf-fiado); }
.cf-leg-pago { background: var(--cf-pago); margin-left: .6rem; }
.cf-top { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.cf-top li { font-size: .92rem; }
.cf-top .cf-link { padding: 0; }

/* ---------- Tabelas ---------- */
.cf-tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cf-tabela caption { text-align: left; font-weight: 750; color: var(--titulo); padding: .4rem 0; }
.cf-tabela th, .cf-tabela td { padding: .45rem .5rem; border-bottom: 1px solid var(--borda); text-align: right; white-space: nowrap; }
.cf-tabela th:first-child, .cf-tabela td:first-child { text-align: left; }
.cf-tabela thead th { font-size: .76rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.cf-tabela tfoot th, .cf-tabela tfoot td { font-weight: 800; border-bottom: 0; }
.cf-tabela-p { font-size: .82rem; }

/* ---------- Páginas de caso: calculadora, modelos e exemplo ---------- */
.cf-mini { display: grid; gap: .8rem; }
.cf-mini-saida { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cf-mini-saida li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .7rem; border-radius: var(--raio-p); background: var(--superficie-2); align-items: baseline; }
.cf-mini-saida strong { font-family: var(--fonte-titulo); font-size: 1.1rem; white-space: nowrap; }
.cf-mini-total { box-shadow: inset 0 0 0 1.5px var(--primaria); }
.cf-modelos { display: grid; gap: .8rem; margin-bottom: 1rem; }
.cf-modelo { padding: 1rem; }
.cf-modelo h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cf-modelo-txt { margin: 0 0 .7rem; padding: .7rem .8rem; border-radius: var(--raio-p); background: var(--superficie-2); font-size: .92rem; line-height: 1.55; }
.cf-exemplo { margin: 0 0 1rem; display: grid; gap: .8rem; }
.cf-exemplo figcaption { font-size: .85rem; color: var(--texto-2); }
.cf-ex-caixas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cf-ex-caixas p { margin: 0; padding: .6rem; border-radius: var(--raio-p); background: var(--superficie-2); display: grid; }
.cf-ex-caixas span { font-size: .72rem; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
.cf-ex-caixas strong { font-size: .98rem; overflow-wrap: anywhere; }
.cf-casos { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cf-caso { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--superficie); color: var(--titulo); text-decoration: none; }
.cf-caso:hover { border-color: var(--primaria); }
.cf-caso .ico { width: 18px; height: 18px; flex: none; }

/* ---------- Botão flutuante do celular ---------- */
.cf-flutuante { position: fixed; z-index: 40; right: 16px; bottom: calc(var(--barra-h) + 14px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-forte); border-radius: 999px; }
.cf-flutuante .ico { width: 18px; height: 18px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  .cf-campos { grid-template-columns: 1fr 1fr; }
  .cf-largo { grid-column: 1 / -1; }
  .cf-pl strong { font-size: 1.3rem; }
  .cf-abas button { font-size: .9rem; display: flex; justify-content: center; gap: .4rem; align-items: center; }
  .cf-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cf-cob { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cf-cob .cf-whats { grid-column: auto; }
  .cf-modelos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) { .cf-flutuante { bottom: 20px; } }
@media (min-width: 1000px) {
  .cf-duas { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .cf-anotar { position: sticky; top: calc(var(--topo-h) + 12px); }
  .cf-flutuante { display: none; }
}
@media print { .cf-flutuante, .cf-anotar, .cf-abas, .cf-arquivos, .cf-cobranca { display: none; } }