@import url("/analytics-blocos.css");
/* #753 Disparos (cliente e agência). Só tokens (var(--ds-*), var(--ink), var(--line)…): nada de cor literal,
   para a tela seguir o tema do cliente. Tudo sob .disparos (a folha carrega no app inteiro). */
.disparos h2 small, .disparos .sussurro { color: var(--muted); font-weight: 400; font-size: var(--ds-fs-sm); }
.disparos h2 { margin: var(--ds-s6) 0 var(--ds-s2); }
.disparos .link { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  text-align: left; min-height: 32px; }
.disparos .link:hover { color: var(--ds-accent); text-decoration: underline; }
.disparos .link:focus-visible, .disparos button:focus-visible, .disparos input:focus-visible, .disparos select:focus-visible {
  outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.disparos .disparos-toast { display: flex; gap: var(--ds-s2); align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-left: 3px solid var(--ds-accent); border-radius: var(--ds-r-sm);
  padding: var(--ds-s2) var(--ds-s3); background: var(--panel); }
.disparos .disparos-toast button { background: none; border: 0; color: var(--muted); cursor: pointer; min-height: 32px; }

/* carteira */
.disparos .disparos-carteira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s2); }
.disparos .disparos-canal { border: 1px solid var(--line); border-radius: var(--ds-r); padding: var(--ds-s3); background: var(--panel);
  display: flex; flex-direction: column; gap: var(--ds-s1); min-height: 120px; }
.disparos .disparos-canal header { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-s2); }
.disparos .disparos-canal .valor { font-size: var(--ds-fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.disparos .disparos-canal small { color: var(--muted); font-variant-numeric: tabular-nums; }
.disparos .disparos-canal.baixo { border-color: var(--ds-warn, var(--line)); }
.disparos .disparos-canal .alerta { margin: 0; font-size: var(--ds-fs-sm); color: var(--muted); }
.disparos .disparos-canal .btn { margin-top: auto; min-height: 44px; }
.disparos .esqueleto { background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r); }
.disparos .disparos-linha.esqueleto { height: 48px; margin-top: var(--ds-s2); }
@media (prefers-reduced-motion: no-preference) {
  .disparos .esqueleto { animation: disparos-shimmer 1.4s ease-in-out infinite; }
}
@keyframes disparos-shimmer { 50% { opacity: .55; } }

/* campanhas */
.disparos .disparos-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-s3); flex-wrap: wrap; }
.disparos .disparos-titulo .btn { min-height: 44px; }
.disparos .disparos-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-s2); margin: var(--ds-s3) 0; }
.disparos .disparos-acoes { display: inline-flex; gap: var(--ds-s1); flex-wrap: wrap; }
.disparos .disparos-acoes .btn { min-height: 44px; }
.disparos .ds-tabela td { vertical-align: middle; }
.disparos .ds-tabela td .btn { min-height: 36px; padding: 4px 10px; }
.disparos .ds-tabela .link { display: inline; }
.disparos .disparos-vazio { border: 1px dashed var(--line); border-radius: var(--ds-r); padding: var(--ds-s6); text-align: center; }
.disparos .disparos-vazio .btn { min-height: 44px; }
.disparos td.texto span { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* formulários (recarga e editor) */
.disparos .disparos-form { border: 1px solid var(--line); border-radius: var(--ds-r); background: var(--panel); padding: var(--ds-s4);
  margin: var(--ds-s3) 0; }
.disparos .disparos-form.recarga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s3); }
.disparos .disparos-form .grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s3); }
.disparos .disparos-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ds-fs-sm); color: var(--muted); min-width: 0; }
.disparos .disparos-form label.largo { grid-column: span 2; }
.disparos .disparos-form input, .disparos .disparos-form select { min-height: 40px; font: inherit; color: var(--ink); background: var(--bg, var(--panel));
  border: 1px solid var(--line); border-radius: var(--ds-r-sm); padding: 0 var(--ds-s2); max-width: 100%; }
.disparos .disparos-form .chip { flex-direction: row; align-items: center; gap: 6px; min-height: 40px; color: var(--ink); }
.disparos .disparos-form .chip input { min-height: 0; }
.disparos .disparos-form fieldset.dias { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ds-s2); grid-column: span 2; }
.disparos .disparos-form fieldset.dias legend { font-size: var(--ds-fs-sm); color: var(--muted); }
.disparos .disparos-form .acoes { display: flex; gap: var(--ds-s2); grid-column: 1 / -1; margin-top: var(--ds-s3); }
.disparos .disparos-form .acoes .btn { min-height: 44px; }
.disparos .disparos-form .erro { color: var(--ink-err, var(--ink)); grid-column: 1 / -1; }
.disparos .disparos-previa { margin-top: var(--ds-s4); border-top: 1px solid var(--line); padding-top: var(--ds-s3); }
.disparos .disparos-previa ol { margin: 0; padding-left: var(--ds-s4); display: grid; gap: var(--ds-s2); }
.disparos .disparos-previa li p { margin: 4px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.disparos .disparos-previa .assunto { font-size: var(--ds-fs-sm); color: var(--muted); }

/* detalhe */
.disparos .disparos-funil { list-style: none; padding: 0; margin: var(--ds-s3) 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-s2); }
.disparos .disparos-funil li { border: 1px solid var(--line); border-radius: var(--ds-r); padding: var(--ds-s3); background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.disparos .disparos-funil li span { color: var(--muted); font-size: var(--ds-fs-sm); }
.disparos .disparos-funil li strong { font-size: var(--ds-fs-xl); font-variant-numeric: tabular-nums; }
.disparos .disparos-funil li small { color: var(--muted); font-variant-numeric: tabular-nums; }
.disparos .disparos-custos { font-variant-numeric: tabular-nums; }
.disparos .disparos-paginas { display: flex; gap: var(--ds-s2); align-items: center; justify-content: flex-end; margin: var(--ds-s2) 0; }
.disparos .disparos-paginas .btn { min-height: 44px; }
.disparos .disparos-ciclos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ds-s2); }
.disparos .disparos-ciclos li { display: flex; flex-wrap: wrap; gap: var(--ds-s3); align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: var(--ds-r-sm); padding: var(--ds-s2) var(--ds-s3); }
.disparos .disparos-ciclos .btn { min-height: 44px; }

/* agência */
.disparos .disparos-clientes td .ds-badge { margin-right: 4px; }

@media (max-width: 900px) {
  .disparos .disparos-carteira, .disparos .disparos-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disparos .disparos-form .grade, .disparos .disparos-form.recarga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .disparos .disparos-funil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .disparos .disparos-carteira, .disparos .disparos-kpis, .disparos .disparos-form .grade, .disparos .disparos-form.recarga,
  .disparos .disparos-funil { grid-template-columns: minmax(0, 1fr); }
  .disparos .disparos-form label.largo, .disparos .disparos-form fieldset.dias { grid-column: auto; }
  .disparos td.texto span { max-width: 100%; white-space: normal; }
  .disparos .analytics-cabeca { flex-direction: column; align-items: flex-start; }
}
.disparos .ds-tabela td:not(.num) { text-align: left; }

/* #100 recarga: escolher checkout (cartão/Pix) ou registro manual */
.disparos .disparos-form fieldset.recarga-modo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ds-s3); grid-column: 1 / -1; }
.disparos .disparos-form fieldset.recarga-modo legend { font-size: var(--ds-fs-sm); color: var(--muted); }
.disparos .disparos-form fieldset.recarga-modo label { flex-direction: row; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); }
.disparos .disparos-form fieldset.recarga-modo input { min-height: 0; }