/* ════════════════════════════════════════════════════════════════
   CAMPAÑAS WHATSAPP — Premium UI System
   NeumaticOS SaaS v8 · Desacoplado · Themeable
   Mismo patrón que meta-ads.css: tokens propios derivados de las
   variables globales del tema activo, sin tocar clases compartidas
   fuera de #page-campanas.
════════════════════════════════════════════════════════════════ */

#page-campanas {
  --cp-accent:     var(--p2, #a678ff);
  --cp-accent2:    var(--p3, #6b30e0);
  --cp-accent-dim: color-mix(in srgb, var(--p2, #a678ff) 14%, transparent);

  /* Superficies con más separación entre fondo de página / tarjeta / campo */
  --cp-surface-1:  var(--bg3, #111118);              /* tarjetas / paneles */
  --cp-surface-2:  rgba(255,255,255,0.055);            /* campos (input/select) */
  --cp-surface-2h: rgba(255,255,255,0.085);            /* campos hover/focus */
  --cp-surface-3:  var(--bg4, #161622);               /* superficies destacadas (stat cards, header) */

  --cp-border:     rgba(255,255,255,0.14);
  --cp-border-h:   rgba(255,255,255,0.24);
  --cp-border-accent: color-mix(in srgb, var(--p2, #a678ff) 55%, transparent);

  --cp-text:       var(--text1, #fff);
  --cp-text-dim:   var(--text2, #d0d0e4);
  --cp-text-mute:  var(--text3, #a0a0b8);

  --cp-green:      var(--green2, #4ade80);
  --cp-amber:      var(--amber2, #f59e0b);
  --cp-red:        var(--red2, #f87171);

  --cp-r:  10px;
  --cp-r2: 14px;
}

/* ── Field surfaces — mismo campo, más contraste ─────────────────
   No tocamos .form-input/.form-select globales (afectaría a todo
   el resto de la app); overrideamos solo dentro del módulo. */
#page-campanas .form-input,
#page-campanas .form-select {
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
#page-campanas .form-input:hover,
#page-campanas .form-select:hover {
  border-color: var(--cp-border-h);
  background: var(--cp-surface-2h);
}
#page-campanas .form-input:focus,
#page-campanas .form-select:focus {
  border-color: var(--cp-accent);
  background: var(--cp-surface-2h);
}
#page-campanas .form-label {
  font-size: 10.5px;
  color: var(--cp-text-mute);
  margin-bottom: 6px;
}
#page-campanas .btn-secondary {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--cp-border-h);
  color: var(--cp-text-dim);
}
#page-campanas .btn-secondary:hover {
  border-color: var(--cp-accent);
  color: var(--cp-text);
  background: var(--cp-accent-dim);
}

/* ── Panels: fondo sólido en vez de transparente sobre casi-negro ── */
#page-campanas .panel {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
}

/* ── Empty state, algo más liviano ───────────────────────────────*/
#page-campanas .empty-state { background: var(--cp-surface-1); border-radius: var(--cp-r2); }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD DE MÉTRICAS (vista lista)
══════════════════════════════════════════════════════════════ */
.camp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.camp-stat-card {
  background: var(--cp-surface-3);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.camp-stat-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--cp-stat-color, var(--cp-accent));
  opacity: .8;
}
.camp-stat-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  color: var(--cp-text-mute); text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.camp-stat-value {
  font-size: 26px; font-weight: 800; color: var(--cp-text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.camp-stat-sub {
  font-size: 10px; color: var(--cp-text-mute);
}

/* ══════════════════════════════════════════════════════════════
   STEPPER
══════════════════════════════════════════════════════════════ */
.camp-stepper {
  display: flex;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2) var(--cp-r2) 0 0;
  padding: 4px;
  gap: 4px;
  margin-bottom: 16px;
}
.camp-stab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 8px;
  font-family: var(--outfit);
  font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
  color: var(--cp-text-mute);
  background: transparent;
  border: none; border-radius: var(--cp-r);
  cursor: pointer;
  transition: .15s;
}
.camp-stab:hover { color: var(--cp-text-dim); background: rgba(255,255,255,0.04); }
.camp-stab.active { color: var(--cp-text); background: var(--cp-accent-dim); }
.camp-stab.done { color: var(--cp-text-dim); }
.camp-stab-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--cp-text-mute);
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  transition: .15s; border: 1px solid var(--cp-border);
}
.camp-stab.active .camp-stab-n {
  background: var(--pg, var(--cp-accent)); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 3px var(--cp-accent-dim);
}
.camp-stab.done .camp-stab-n {
  background: var(--cp-green); color: #06210f; border-color: transparent;
}
.camp-stab-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.camp-stab-hint { font-family: var(--mono); font-size: 8px; color: var(--cp-text-mute); font-weight: 500; letter-spacing: .03em; }
.camp-stab.active .camp-stab-hint { color: var(--cp-accent); }

@media (max-width: 900px) {
  .camp-stab-label .camp-stab-hint { display: none; }
  .camp-stab { font-size: 10px; padding: 10px 4px; }
}

/* ══════════════════════════════════════════════════════════════
   SOURCE SELECTOR (Step 1) — cards en vez de tabs planas
══════════════════════════════════════════════════════════════ */
.camp-source-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .camp-source-grid { grid-template-columns: repeat(3, 1fr); } }

.camp-src-tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  font-family: var(--outfit); font-size: 11px; font-weight: 600;
  color: var(--cp-text-dim);
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  cursor: pointer;
  transition: .15s;
  text-align: center;
}
.camp-src-tab .camp-src-icon { font-size: 20px; line-height: 1; }
.camp-src-tab:hover { border-color: var(--cp-border-h); background: var(--cp-surface-2h); color: var(--cp-text); }
.camp-src-tab.active {
  border-color: var(--cp-border-accent);
  background: var(--cp-accent-dim);
  color: var(--cp-text);
  box-shadow: 0 0 0 1px var(--cp-border-accent), 0 6px 18px rgba(130,72,255,0.14);
}

/* ── Filter fields — grid con "tarjeta" contenedora en vez de flotar sobre el fondo ── */
.camp-filter-card {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 16px;
  margin-bottom: 16px;
}

/* ── Resultado de audiencia — pieza destacada ─────────────────── */
.camp-audience-result {
  background: var(--cp-surface-3);
  border: 1px solid var(--cp-border-accent);
  border-radius: var(--cp-r2);
  padding: 14px 22px;
  gap: 24px; align-items: center;
  box-shadow: 0 0 0 1px rgba(130,72,255,0.06), 0 8px 24px rgba(130,72,255,0.10);
}
.camp-audience-count { font-size: 32px; font-weight: 800; color: var(--cp-accent); line-height: 1; }
.camp-audience-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: var(--cp-text-mute); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   MANUAL PICKER
══════════════════════════════════════════════════════════════ */
.camp-manual-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cp-border);
  cursor: pointer; transition: .1s; font-size: 11.5px;
}
.camp-manual-item:last-child { border-bottom: none; }
.camp-manual-item:hover { background: var(--cp-surface-2); }
.camp-manual-item.selected { background: var(--cp-accent-dim); }

/* ══════════════════════════════════════════════════════════════
   STEP 2 — MENSAJE
══════════════════════════════════════════════════════════════ */
.camp-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 980px) { .camp-editor-grid { grid-template-columns: 1fr; } }

.camp-editor-col {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 16px;
}

.camp-var-chip {
  padding: 4px 10px;
  border: 1px solid var(--cp-border-accent);
  border-radius: 12px;
  background: var(--cp-accent-dim);
  color: var(--cp-accent);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  cursor: pointer; transition: .15s;
}
.camp-var-chip:hover { background: color-mix(in srgb, var(--cp-accent) 26%, transparent); border-color: var(--cp-accent); }

.camp-attach-zone {
  border: 2px dashed var(--cp-border-h);
  border-radius: var(--cp-r2);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  min-height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cp-surface-2);
}
.camp-attach-zone:hover { border-color: var(--cp-accent); background: var(--cp-accent-dim); }
.camp-attach-zone.has-file { border-style: solid; border-color: var(--cp-accent); background: var(--cp-accent-dim); }

.camp-wa-preview {
  background: #0b141a;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 16px;
  min-height: 200px;
}

/* ══════════════════════════════════════════════════════════════
   STEP 3 — CONFIGURACIÓN
══════════════════════════════════════════════════════════════ */
.camp-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 980px) { .camp-config-grid { grid-template-columns: 1fr; } }

.camp-config-col {
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 16px;
}
.camp-config-title {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; color: var(--cp-text-mute); text-transform: uppercase;
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}

.camp-instance-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r);
  background: var(--cp-surface-2);
  cursor: pointer;
  transition: .15s;
}
.camp-instance-item:hover { border-color: var(--cp-border-h); }
.camp-instance-item:has(input:checked) { border-color: var(--cp-border-accent); background: var(--cp-accent-dim); }
.camp-instance-item input:disabled { cursor: not-allowed; }
.camp-instance-item.disabled { opacity: .55; }

.camp-provider-badge {
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 3px;
}
.camp-provider-badge.cloud_api { background: rgba(34,211,238,0.14); color: var(--cyan2, #22d3ee); border: 1px solid rgba(34,211,238,0.30); }
.camp-provider-badge.baileys   { background: rgba(245,158,11,0.14); color: var(--cp-amber); border: 1px solid rgba(245,158,11,0.30); }

.camp-delay-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r);
  cursor: pointer;
  font-size: 11.5px;
  background: var(--cp-surface-2);
  transition: .15s;
}
.camp-delay-opt:hover { border-color: var(--cp-border-h); }
.camp-delay-opt:has(input:checked) { border-color: var(--cp-border-accent); background: var(--cp-accent-dim); }

.camp-note {
  border-radius: var(--cp-r);
  padding: 10px 12px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.6;
  display: flex; gap: 8px; align-items: flex-start;
}
.camp-note.amber { background: var(--adim); border: 1px solid var(--amber); color: var(--cp-amber); }
.camp-note.cyan  { background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.35); color: var(--cyan2, #22d3ee); }

/* ══════════════════════════════════════════════════════════════
   STEP 4 — REVISAR
══════════════════════════════════════════════════════════════ */
.camp-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 980px) { .camp-review-grid { grid-template-columns: 1fr; } }

.camp-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r);
  font-size: 12px;
}
.camp-summary-row b { color: var(--cp-text); }

/* ══════════════════════════════════════════════════════════════
   NAV FOOTER
══════════════════════════════════════════════════════════════ */
.camp-nav-footer {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--cp-surface-1);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-r2);
  padding: 14px 18px;
}
.camp-step-dots { display: flex; align-items: center; gap: 8px; }
.camp-step-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--cp-border);
  transition: .2s;
}
.camp-step-dot.active { background: var(--cp-accent); border-color: var(--cp-accent); box-shadow: 0 0 0 4px var(--cp-accent-dim); }
.camp-step-dot.done { background: var(--cp-green); border-color: var(--cp-green); }

/* ══════════════════════════════════════════════════════════════
   HISTORIAL
══════════════════════════════════════════════════════════════ */
.camp-hist-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 12px;
  align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--cp-border); font-size: 11.5px;
  transition: background .15s;
}
.camp-hist-row:hover { background: rgba(255,255,255,0.02); }
.camp-hist-row:last-child { border-bottom: none; }

.camp-status-pill {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.camp-status-pill.draft     { background: rgba(160,160,184,0.14); color: var(--cp-text-mute); }
.camp-status-pill.scheduled { background: rgba(34,211,238,0.14); color: var(--cyan2, #22d3ee); }
.camp-status-pill.sending   { background: var(--cp-accent-dim); color: var(--cp-accent); }
.camp-status-pill.paused    { background: var(--adim); color: var(--cp-amber); }
.camp-status-pill.completed { background: var(--gdim); color: var(--cp-green); }
.camp-status-pill.cancelled,
.camp-status-pill.error     { background: var(--rdim); color: var(--cp-red); }