/* ═══════════════════════════════════════════════════════════════
   FATURAMENTO PLUS — CSS
   Melhorias visuais + responsividade mobile
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. BANNER INTELIGENTE no topo
   ─────────────────────────────────────────────────────────── */
.cp-fat-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-radius:14px;
  margin-bottom:12px;
  border:1px solid;
  font-family:var(--fn);
  position:relative;
  overflow:hidden;
}
.cp-fat-banner::before{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;
  width:4px;
}
.cp-fat-banner-gn{
  background:linear-gradient(90deg, rgba(16,185,129,.10), rgba(16,185,129,.02));
  border-color:rgba(16,185,129,.3);
}
.cp-fat-banner-gn::before{ background:var(--gn); }

.cp-fat-banner-ac{
  background:linear-gradient(90deg, rgba(61,123,255,.10), rgba(61,123,255,.02));
  border-color:rgba(61,123,255,.3);
}
.cp-fat-banner-ac::before{ background:var(--ac); }

.cp-fat-banner-yw{
  background:linear-gradient(90deg, rgba(245,158,11,.10), rgba(245,158,11,.02));
  border-color:rgba(245,158,11,.3);
}
.cp-fat-banner-yw::before{ background:var(--yw); }

.cp-fat-banner-rd{
  background:linear-gradient(90deg, rgba(244,63,94,.10), rgba(244,63,94,.02));
  border-color:rgba(244,63,94,.3);
}
.cp-fat-banner-rd::before{ background:var(--rd); }

.cp-fat-banner-ic{
  font-size:32px;
  flex-shrink:0;
  line-height:1;
}
.cp-fat-banner-tx{
  flex:1;
  min-width:0;
}
.cp-fat-banner-tt{
  font-size:14px;
  font-weight:700;
  color:var(--tx);
  font-family:var(--dp);
  margin-bottom:2px;
}
.cp-fat-banner-sb{
  font-size:12px;
  color:var(--t2);
  line-height:1.4;
}

/* ───────────────────────────────────────────────────────────
   2. BOX "Cobrar todos atrasados em massa"
   ─────────────────────────────────────────────────────────── */
.cp-fat-cobrar-todos{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  margin-bottom:10px;
  background:linear-gradient(90deg, rgba(244,63,94,.08), rgba(244,63,94,.02));
  border:1px solid rgba(244,63,94,.3);
  border-radius:12px;
}
.cp-fat-cobrar-info{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.cp-fat-cobrar-ic{
  font-size:24px;
  flex-shrink:0;
}
.cp-fat-cobrar-tt{
  font-size:13px;
  font-weight:700;
  color:var(--rd);
  margin-bottom:2px;
}
.cp-fat-cobrar-sb{
  font-size:11px;
  color:var(--t2);
}
.cp-fat-cobrar-btn{
  background:var(--rd);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:9px 16px;
  font-family:var(--fn);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:all .15s;
}
.cp-fat-cobrar-btn:hover{
  background:#dc2626;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(244,63,94,.3);
}
.cp-fat-cobrar-btn:active{ transform:translateY(0); }

/* ───────────────────────────────────────────────────────────
   3. BOX "Próximos vencimentos"
   ─────────────────────────────────────────────────────────── */
.cp-fat-vence-box{
  background:rgba(245,158,11,.05);
  border:1px solid rgba(245,158,11,.25);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
}
.cp-fat-vence-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--yw);
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(245,158,11,.15);
}
.cp-fat-vence-tot{
  font-family:ui-monospace, Menlo, monospace;
  color:var(--yw);
}
.cp-fat-vence-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 0;
  font-size:12px;
  border-bottom:1px solid rgba(245,158,11,.10);
}
.cp-fat-vence-item:last-child{ border-bottom:none; }
.cp-fat-vence-nm{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--t2);
}
.cp-fat-vence-rg{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  font-size:11px;
}
.cp-fat-vence-vl{
  font-family:ui-monospace, Menlo, monospace;
  font-weight:700;
  color:var(--tx);
}
.cp-fat-vence-mais{
  font-size:10px;
  color:var(--t3);
  text-align:center;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(245,158,11,.10);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — Header de botões + filtros
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px){
  /* Header com botões: empilha melhor */
  #view-faturamento > div:first-child{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  /* Linha dos botões: scroll horizontal se passar */
  #view-faturamento > div:first-child > div:last-child{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  #view-faturamento > div:first-child > div:last-child > *{
    flex-shrink:0 !important;
  }

  /* Banner mais compacto no mobile */
  .cp-fat-banner{
    padding:12px 14px;
    gap:10px;
  }
  .cp-fat-banner-ic{
    font-size:26px;
  }
  .cp-fat-banner-tt{
    font-size:13px;
  }
  .cp-fat-banner-sb{
    font-size:11px;
  }

  /* Cobrar todos: empilha no mobile */
  .cp-fat-cobrar-todos{
    flex-wrap:wrap;
    gap:10px;
  }
  .cp-fat-cobrar-btn{
    width:100%;
  }

  /* Card do cliente no mobile (fat-group): empilha melhor */
  .fat-head{
    padding:10px 12px !important;
  }
  .fat-head-bot{
    gap:5px !important;
  }
  .fat-head-bot button{
    font-size:10px !important;
    padding:4px 7px !important;
  }
  .fat-tot{
    font-size:13px !important;
  }
  .fat-nm{
    font-size:13px !important;
  }

  /* Linhas de contrato dentro do grupo */
  .fat-row{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .fat-prod{
    font-size:12px !important;
  }
  .fat-sub{
    font-size:10px !important;
  }
  .fat-val{
    font-size:13px !important;
  }
}

/* Mobile menor (≤640px) */
@media (max-width: 640px){
  /* Próximos vencimentos: empilha valor + dias */
  .cp-fat-vence-item{
    flex-wrap:wrap;
    gap:4px;
  }
  .cp-fat-vence-nm{
    flex:1 1 100%;
  }
  .cp-fat-vence-rg{
    flex:1 1 auto;
    font-size:10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MELHORIA 4: Top devedores
   ═══════════════════════════════════════════════════════════════ */
.cp-fat-top-devedores{
  background:linear-gradient(135deg, rgba(244,63,94,.05), rgba(244,63,94,.02));
  border:1px solid rgba(244,63,94,.25);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:10px;
}
.cp-fat-top-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:var(--rd);
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(244,63,94,.15);
}
.cp-fat-top-soma{
  font-family:ui-monospace, Menlo, monospace;
  font-size:11px;
  color:var(--rd);
}
.cp-fat-top-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s;
  border-bottom:1px solid rgba(244,63,94,.08);
}
.cp-fat-top-item:hover{
  background:rgba(244,63,94,.05);
}
.cp-fat-top-item:last-child{ border-bottom:none; }
.cp-fat-top-medal{
  font-size:20px;
  flex-shrink:0;
  line-height:1;
}
.cp-fat-top-info{
  flex:1;
  min-width:0;
  overflow:hidden;
}
.cp-fat-top-nm{
  font-size:13px;
  font-weight:600;
  color:var(--tx);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cp-fat-top-sub{
  font-size:11px;
  color:var(--t3);
  margin-top:2px;
}
.cp-fat-top-vl{
  font-family:ui-monospace, Menlo, monospace;
  font-size:13px;
  font-weight:700;
  color:var(--rd);
  flex-shrink:0;
}
.cp-fat-top-arrow{
  color:var(--t3);
  font-size:18px;
  flex-shrink:0;
  font-weight:700;
}

/* Highlight quando clicar e ir pro card do cliente */
.cp-fat-highlight{
  animation:cp-fat-pulse 2.5s ease-out;
}
@keyframes cp-fat-pulse{
  0%   { box-shadow:0 0 0 0 rgba(244,63,94,.6); }
  30%  { box-shadow:0 0 0 6px rgba(244,63,94,.15); }
  100% { box-shadow:0 0 0 0 rgba(244,63,94,0); }
}

/* ═══════════════════════════════════════════════════════════════
   MELHORIA 5: Tag de comportamento
   ═══════════════════════════════════════════════════════════════ */
.cp-fat-tag-comp{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  border-radius:10px;
  font-size:10px;
  font-weight:700;
  margin-left:8px;
  border:1px solid;
  white-space:nowrap;
  flex-shrink:0;
  cursor:help;
}
.cp-fat-tag-gn{
  background:rgba(16,185,129,.10);
  color:var(--gn);
  border-color:rgba(16,185,129,.3);
}
.cp-fat-tag-yw{
  background:rgba(245,158,11,.10);
  color:var(--yw);
  border-color:rgba(245,158,11,.3);
}
.cp-fat-tag-rd{
  background:rgba(244,63,94,.10);
  color:var(--rd);
  border-color:rgba(244,63,94,.3);
}
.cp-fat-tag-cn{
  background:rgba(6,182,212,.10);
  color:var(--cn);
  border-color:rgba(6,182,212,.3);
}

/* ═══════════════════════════════════════════════════════════════
   MELHORIA 6: Comparativo vs mês anterior (faixa visível)
   ═══════════════════════════════════════════════════════════════ */
.cp-fat-vs-anterior{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding:8px 14px;
  margin-bottom:10px;
  background:var(--s2);
  border:1px solid var(--bd);
  border-radius:10px;
  font-size:11px;
}
.cp-fat-vs-lb{
  font-weight:700;
  color:var(--t2);
  font-size:11px;
}
.cp-fat-vs-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--t2);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — empilha tags e top devedores
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .cp-fat-top-medal{ font-size:18px; }
  .cp-fat-top-nm{ font-size:12px; }
  .cp-fat-top-vl{ font-size:12px; }
  .cp-fat-top-sub{ font-size:10px; }

  .cp-fat-vs-anterior{
    gap:10px;
    padding:8px 10px;
    font-size:10px;
  }

  .cp-fat-tag-comp{
    font-size:9px;
    padding:2px 6px;
    margin-left:4px;
  }
}