/* ════════════════════════════════════════════════════════════════════════════
   ADS FINANCEIRO — COMPONENTS  v1
   Componentes partilhados entre 2 ou mais paineis.
   Carga: tokens.css → base.css → components.css → <style> inline de cada painel.
   Os estilos inline sempre tomam precedencia via cascade.
════════════════════════════════════════════════════════════════════════════ */


/* ── BOTÕES ──────────────────────────────────────────────────────────────────
   Presentes como classes em: index.html, painel_cobranca.html
   executivo / credito / cfo usam botoes com Tailwind ou style="" inline.

   Divergencias index ↔ cobranca (cobranca sobrescreve no seu <style> inline):
     padding   → .625rem (index)  vs  .5625rem (cobranca)
     font      → Montserrat       vs  Space Grotesk
     disabled  → opacity .5       vs  opacity .4
   Canonical aqui: valores do index.html.                                   */

.btn-primary {
  padding: .625rem 1.25rem;
  background: linear-gradient(135deg, var(--ads-green), var(--ads-green-light));
  border: none;
  border-radius: var(--r);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8125rem;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.btn-primary:hover    { opacity: .9; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  padding: .625rem 1.25rem;
  background: transparent;
  border: 1px solid var(--faint);
  border-radius: var(--r);
  color: var(--muted);
  font-size: .8125rem;
  cursor: pointer;
  transition: all .2s;
}
.btn-secondary:hover { border-color: var(--dim); color: var(--text-2); }


/* ── TOAST ───────────────────────────────────────────────────────────────────
   Presente em todos os 5 arquivos. Variacoes mapeadas:

   ID / seletor:
     index.html              → #toast-global
     executivo / credito /
     cobranca / cfo          → #toast

   Padrao de visibilidade:
     index / cobranca / cfo  → inicia oculto (opacity:0), exibe com .show
     executivo / credito     → inicia visivel, oculta com .toast-hidden

   Nomes de classe de cor:
     executivo / credito     → .toast-success  .toast-error  .toast-info
     index / cobranca / cfo  → .success  .error  .info

   Components.css cobre AMBAS as convencoes; os inline sobrescrevem.       */

#toast,
#toast-global {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  padding: .75rem 1.25rem;
  border-radius: var(--r);
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  transition: opacity .3s ease, transform .3s ease;
  display: flex;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
}

/* Visivel — convencao index / cobranca / cfo */
#toast.show,
#toast-global.show         { opacity: 1; transform: translateY(0); }

/* Oculto explicito — convencao executivo / credito */
#toast.toast-hidden,
#toast-global.toast-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* Cor: sucesso */
#toast.success,       #toast-global.success,
#toast.toast-success, #toast-global.toast-success {
  background: #0f2818;
  border-color: rgba(141, 198, 63, .26);
  color: var(--ads-green-light);
}
/* Cor: erro */
#toast.error,       #toast-global.error,
#toast.toast-error, #toast-global.toast-error {
  background: #2a0a0a;
  border-color: rgba(248, 113, 113, .26);
  color: #fca5a5;
}
/* Cor: info */
#toast.info,       #toast-global.info,
#toast.toast-info, #toast-global.toast-info {
  background: #0c1a2e;
  border-color: rgba(56, 189, 248, .26);
  color: #7dd3fc;
}

/* Mobile — cada arquivo sobrescreve com offset de bottom-nav proprio */
@media (max-width: 640px) {
  #toast,
  #toast-global {
    bottom: 1rem;
    right: .75rem;
    left: .75rem;
    max-width: none;
  }
}


/* ── MODAL ───────────────────────────────────────────────────────────────────
   Classes genericas presentes em: index.html, painel_cobranca.html
   executivo → #modal-mapeamento / #modal-box      (IDs especificos)
   credito   → .prosp-modal-overlay / .colmap-*    (namespaced)
   cfo       → #modal-metas                        (ID especifico)

   Divergencias index ↔ cobranca (cobranca sobrescreve inline):
     .modal-overlay  backdrop: blur(8px) vs blur(12px)
     .modal-box      width: min(95vw,520px) vs min(96vw,700px)
     .modal-body     padding: 1.5rem vs 1.25rem 1.5rem
     .modal-label    margin-bottom: 6px vs 5px
     .modal-input    font: Inter vs Space Grotesk, Inter
   Canonical aqui: valores do index.html.                                   */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(2, 6, 23, .85);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.aberto { display: flex; animation: fadeIn .25s ease; }

.modal-box {
  background: var(--bg-card);
  border: 1px solid rgba(141, 198, 63, .2);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
  width: min(95vw, 520px);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  animation: fadeUp .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-box.largo { width: min(95vw, 720px); }

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  flex-shrink: 0;
}
.modal-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.modal-input {
  width: 100%;
  padding: .625rem .875rem;
  background: rgba(2, 6, 23, .6);
  border: 1px solid var(--border);
  border-radius: .625rem;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: .8125rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.modal-input:focus {
  border-color: var(--ads-green);
  box-shadow: 0 0 0 2px rgba(141, 198, 63, .12);
}

/* Mobile: modal vira sheet ancorada na base */
@media (max-width: 640px) {
  .modal-overlay.aberto { align-items: flex-end; }
  .modal-box {
    max-height: 96dvh;
    border-radius: 1rem 1rem .5rem .5rem;
    align-self: flex-end;
    margin: 0;
    width: 100%;
  }
}


/* ── BADGE / PILL ────────────────────────────────────────────────────────────
   Padrao estrutural identico em todos os arquivos, mas com nomes diferentes:
     index.html  → .stat-pill
     cobranca    → .risco-badge  .alcada-badge  .status-badge
     executivo   → .filtro-chip  .badge-obrig   .badge-opc
     cfo         → .fonte-badge
     credito     → classes Tailwind inline

   .badge-pill e a base canonica para o redesign.
   Os nomes existentes permanecem nos <style> inline ate a migracao.        */

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: .03em;
}

/* Variantes semanticas usando tokens de cor */
.badge-green { background: rgba(141,198,63,.12); color: var(--ads-green-light); border-color: rgba(141,198,63,.3); }
.badge-blue  { background: rgba(56,189,248,.12);  color: #7dd3fc;                border-color: rgba(56,189,248,.3);  }
.badge-amber { background: rgba(251,191,36,.12);  color: var(--clr-warning);     border-color: rgba(251,191,36,.3);  }
.badge-red   { background: rgba(239,68,68,.12);   color: var(--clr-danger);      border-color: rgba(239,68,68,.3);   }
.badge-gray  { background: rgba(100,116,139,.12); color: var(--muted);           border-color: var(--border-hover);  }