/*
 * Metabot module CSS — componentes específicos del módulo.
 * Importa tokens del design system global (metavoz-theme-v2.css).
 * NO duplica variables CSS — solo añade clases nuevas del módulo.
 * v1 — 2026-04-14
 */

/* ── PAGE SHELL ────────────────────────────────────────────────────── */
.mb-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--mv-s-7) var(--mv-s-6);
}

.mb-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--mv-s-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
  margin-bottom: var(--mv-s-4);
}
.mb-breadcrumbs a { color: var(--mv-text-secondary); }
.mb-breadcrumbs__sep { color: var(--mv-text-tertiary); }
.mb-breadcrumbs__current { color: var(--mv-text-primary); font-weight: 500; }

/* ── PAGE HEADER ───────────────────────────────────────────────────── */
.mb-page-header {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-s-4);
  flex-wrap: wrap;
  margin-bottom: var(--mv-s-6);
}
.mb-page-header__stack { flex: 1; min-width: 280px; }
.mb-page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-s-2);
  font-size: var(--mv-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mv-p-600);
  font-weight: 700;
  margin-bottom: var(--mv-s-2);
}
.mb-page-header h1 {
  font-size: var(--mv-display-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mv-text-primary);
  margin: 0;
  line-height: 1.1;
}
.mb-page-header__subtitle {
  font-size: var(--mv-text-md);
  color: var(--mv-text-secondary);
  margin: var(--mv-s-2) 0 0;
}
.mb-page-header__actions {
  display: flex;
  gap: var(--mv-s-2);
  flex-wrap: wrap;
  align-items: flex-start;
  padding-top: var(--mv-s-7);
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.mb-btn {
  --_pad-x: var(--mv-s-4);
  --_pad-y: 10px;
  --_fs: var(--mv-text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--mv-s-2);
  padding: var(--_pad-y) var(--_pad-x);
  font-size: var(--_fs);
  font-weight: 500;
  border-radius: var(--mv-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--mv-d-fast) var(--mv-e-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
.mb-btn:hover { text-decoration: none; }
.mb-btn:active { transform: translateY(1px); }
.mb-btn--xs { --_pad-x: 10px; --_pad-y: 6px; --_fs: var(--mv-text-2xs); }
.mb-btn--sm { --_pad-x: 12px; --_pad-y: 7px; --_fs: var(--mv-text-xs); }
.mb-btn--lg { --_pad-x: 20px; --_pad-y: 12px; --_fs: var(--mv-text-md); }
.mb-btn--primary { background: var(--mv-p-500); color: #fff; }
.mb-btn--primary:hover { background: var(--mv-p-600); box-shadow: var(--mv-elev-2); color: #fff; }
.mb-btn--secondary {
  background: var(--mv-bg-surface);
  color: var(--mv-text-primary);
  border-color: var(--mv-border-strong);
}
.mb-btn--secondary:hover { background: var(--mv-n-100); border-color: var(--mv-n-400); }
.mb-btn--ghost { background: transparent; color: var(--mv-text-secondary); }
.mb-btn--ghost:hover { background: var(--mv-n-100); color: var(--mv-text-primary); }
.mb-btn--danger { background: transparent; color: var(--mv-danger-strong); border-color: var(--mv-border); }
.mb-btn--danger:hover { background: var(--mv-danger-muted); border-color: var(--mv-danger-base); }
.mb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--mv-r-md);
  border: 1px solid var(--mv-border);
  background: var(--mv-bg-surface);
  color: var(--mv-text-secondary);
  cursor: pointer;
  transition: all var(--mv-d-fast) var(--mv-e-out);
  font-family: inherit;
}
.mb-icon-btn:hover {
  background: var(--mv-n-100);
  color: var(--mv-text-primary);
  border-color: var(--mv-border-strong);
}

/* ── BADGES ────────────────────────────────────────────────────────── */
.mb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-s-1);
  padding: 3px 10px;
  font-size: var(--mv-text-2xs);
  font-weight: 600;
  border-radius: var(--mv-r-full);
  line-height: 1.4;
  background: var(--mv-n-100);
  color: var(--mv-text-secondary);
  border: 1px solid var(--mv-border);
}
.mb-badge--success { background: var(--mv-success-muted); color: var(--mv-success-strong); border-color: transparent; }
.mb-badge--warning { background: var(--mv-warning-muted); color: var(--mv-warning-strong); border-color: transparent; }
.mb-badge--danger  { background: var(--mv-danger-muted);  color: var(--mv-danger-strong);  border-color: transparent; }
.mb-badge--info    { background: var(--mv-info-muted);    color: var(--mv-info-strong);    border-color: transparent; }
.mb-badge--brand   { background: var(--mv-p-100);         color: var(--mv-p-700);          border-color: transparent; }
.mb-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--mv-r-full);
  background: currentColor;
}

/* ── CARD ──────────────────────────────────────────────────────────── */
.mb-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
}
.mb-card__header {
  display: flex;
  align-items: center;
  gap: var(--mv-s-3);
  padding: var(--mv-s-4) var(--mv-s-5);
  border-bottom: 1px solid var(--mv-border);
}
.mb-card__title {
  font-size: var(--mv-text-md);
  font-weight: 600;
  margin: 0;
  color: var(--mv-text-primary);
}
.mb-card__subtitle {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
  margin: 0;
  margin-top: 2px;
}
.mb-card__body { padding: var(--mv-s-5); }
.mb-card__actions { margin-left: auto; display: flex; gap: var(--mv-s-2); }

/* ── KPI ───────────────────────────────────────────────────────────── */
.mb-kpi-grid {
  display: grid;
  gap: var(--mv-s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mb-kpi {
  position: relative;
  padding: var(--mv-s-5);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
  transition: box-shadow var(--mv-d-base) var(--mv-e-out), transform var(--mv-d-base) var(--mv-e-out);
}
.mb-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--mv-p-500);
  opacity: .9;
}
.mb-kpi--info::before    { background: var(--mv-info-base); }
.mb-kpi--success::before { background: var(--mv-success-base); }
.mb-kpi--warning::before { background: var(--mv-warning-base); }
.mb-kpi--danger::before  { background: var(--mv-danger-base); }
.mb-kpi:hover { box-shadow: var(--mv-elev-3); transform: translateY(-1px); }
.mb-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--mv-s-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.mb-kpi__label i { color: var(--mv-text-tertiary); }
.mb-kpi__value {
  font-size: var(--mv-display-kpi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mv-text-primary);
  margin: var(--mv-s-3) 0 var(--mv-s-2);
  font-variant-numeric: tabular-nums;
}
.mb-kpi__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
}

/* ── TABLE ─────────────────────────────────────────────────────────── */
.mb-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mv-text-sm);
}
.mb-data-table th,
.mb-data-table td {
  padding: var(--mv-s-3) var(--mv-s-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--mv-border);
}
.mb-data-table thead th {
  font-size: var(--mv-text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-secondary);
  background: var(--mv-bg-sunken);
  border-bottom: 1px solid var(--mv-border-strong);
}
.mb-data-table tbody tr {
  transition: background var(--mv-d-fast) var(--mv-e-out);
}
.mb-data-table tbody tr:hover { background: var(--mv-n-50); }
.mb-data-table .tnum { font-variant-numeric: tabular-nums; text-align: right; }
.mb-overflow { overflow-x: auto; }

/* ── TOOLBAR / SEARCH / CHIP-FILTER ───────────────────────────────── */
.mb-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mv-s-3);
  flex-wrap: wrap;
  padding: var(--mv-s-4) var(--mv-s-5);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  margin-bottom: var(--mv-s-5);
}
.mb-search {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 480px;
}
.mb-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mv-text-tertiary);
  font-size: 13px;
}
.mb-search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: var(--mv-text-sm);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-md);
  background: var(--mv-bg-canvas);
  color: var(--mv-text-primary);
  transition: all var(--mv-d-fast) var(--mv-e-out);
  font-family: inherit;
}
.mb-search input:focus {
  outline: none;
  border-color: var(--mv-p-500);
  background: var(--mv-bg-surface);
}
.mb-chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--mv-r-full);
  border: 1px solid var(--mv-border);
  background: var(--mv-bg-surface);
  color: var(--mv-text-secondary);
  font-size: var(--mv-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mv-d-fast) var(--mv-e-out);
  font-family: inherit;
}
.mb-chip-filter:hover { border-color: var(--mv-border-strong); color: var(--mv-text-primary); }
.mb-chip-filter--active {
  background: var(--mv-p-50);
  border-color: var(--mv-p-500);
  color: var(--mv-p-700);
}
.mb-toolbar__spacer { flex: 1; }

/* ── EMPTY STATE ───────────────────────────────────────────────────── */
.mb-empty {
  text-align: center;
  padding: var(--mv-s-10) var(--mv-s-6);
  background: var(--mv-bg-surface);
  border: 1px dashed var(--mv-border);
  border-radius: var(--mv-r-lg);
}
.mb-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--mv-s-4);
  border-radius: var(--mv-r-full);
  background: var(--mv-p-50);
  color: var(--mv-p-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.mb-empty h3 { margin: 0 0 var(--mv-s-2); font-size: var(--mv-display-h4); font-weight: 600; color: var(--mv-text-primary); }
.mb-empty p { margin: 0 0 var(--mv-s-5); font-size: var(--mv-text-md); color: var(--mv-text-secondary); max-width: 460px; margin-inline: auto; }

/* ── PROGRESS BAR ──────────────────────────────────────────────────── */
.mb-progress { display: flex; align-items: center; gap: var(--mv-s-3); min-width: 140px; }
.mb-progress__track {
  flex: 1;
  height: 6px;
  background: var(--mv-n-150);
  border-radius: var(--mv-r-full);
  overflow: hidden;
}
.mb-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mv-p-400), var(--mv-p-600));
  border-radius: var(--mv-r-full);
  transition: width var(--mv-d-slow) var(--mv-e-out);
}
.mb-progress__label {
  font-size: var(--mv-text-xs);
  font-weight: 600;
  color: var(--mv-text-primary);
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── LIVE DOT ──────────────────────────────────────────────────────── */
.mb-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--mv-r-full);
  background: var(--mv-success-base);
  box-shadow: 0 0 0 3px rgb(16 185 129 / .25);
  animation: mb-live-pulse 1.8s var(--mv-e-inout) infinite;
}
@keyframes mb-live-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgb(16 185 129 / .25); }
  50%      { box-shadow: 0 0 0 6px rgb(16 185 129 / .10); }
}

/* ── AGENT CARD GRID ───────────────────────────────────────────────── */
.mb-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--mv-s-5);
}
.mb-agent-card {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  box-shadow: var(--mv-elev-1);
  padding: var(--mv-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-s-4);
  transition: all var(--mv-d-base) var(--mv-e-out);
  position: relative;
  overflow: hidden;
}
.mb-agent-card:hover {
  box-shadow: var(--mv-elev-3);
  transform: translateY(-2px);
  border-color: var(--mv-border-strong);
}
.mb-agent-card__top { display: flex; align-items: flex-start; gap: var(--mv-s-3); }
.mb-agent-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--mv-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--mv-text-lg);
  color: #fff;
  letter-spacing: -0.01em;
}
.mb-agent-avatar--sales   { background: linear-gradient(135deg, var(--mv-p-400), var(--mv-p-700)); }
.mb-agent-avatar--survey  { background: linear-gradient(135deg, #4fa8ff, var(--mv-info-strong)); }
.mb-agent-avatar--support { background: linear-gradient(135deg, #34d399, var(--mv-success-strong)); }
.mb-agent-avatar--default { background: linear-gradient(135deg, var(--mv-n-400), var(--mv-n-600)); }
.mb-agent-card__name {
  font-size: var(--mv-display-h5);
  font-weight: 600;
  color: var(--mv-text-primary);
  margin: 0;
  line-height: 1.25;
}
.mb-agent-card__desc {
  font-size: var(--mv-text-sm);
  color: var(--mv-text-secondary);
  margin: 4px 0 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mb-agent-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--mv-s-2);
  border-top: 1px solid var(--mv-border);
  padding-top: var(--mv-s-3);
}
.mb-agent-card__row {
  display: flex;
  align-items: center;
  gap: var(--mv-s-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
}
.mb-agent-card__row i { width: 14px; text-align: center; color: var(--mv-text-tertiary); }
.mb-agent-card__row strong { color: var(--mv-text-primary); font-weight: 500; }
.mb-agent-card__row code {
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 11px;
  background: var(--mv-bg-sunken);
  padding: 1px 6px;
  border-radius: var(--mv-r-sm);
  color: var(--mv-text-primary);
}
.mb-agent-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-s-2);
}
.mb-agent-card__actions { display: flex; gap: 4px; }
.mb-agent-card__stats {
  display: flex;
  align-items: baseline;
  gap: var(--mv-s-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
}
.mb-agent-card__stats strong {
  font-size: var(--mv-text-md);
  color: var(--mv-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── AGENT DETAIL ──────────────────────────────────────────────────── */
.mb-detail-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--mv-s-6);
}
@media (max-width: 1024px) { .mb-detail-grid { grid-template-columns: 1fr; } }
.mb-agent-hero {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  padding: var(--mv-s-6);
  box-shadow: var(--mv-elev-1);
  position: sticky;
  top: calc(var(--mv-topnav-h, 56px) + 20px);
  align-self: start;
}
.mb-agent-hero__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--mv-r-xl);
  margin: 0 auto var(--mv-s-4);
  background: linear-gradient(135deg, var(--mv-p-400), var(--mv-p-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mb-agent-hero h1 { margin: 0; font-size: var(--mv-display-h3); text-align: center; color: var(--mv-text-primary); font-weight: 600; }
.mb-agent-hero__status { text-align: center; margin: var(--mv-s-2) 0 var(--mv-s-5); }
.mb-agent-hero__attrs { display: flex; flex-direction: column; gap: var(--mv-s-3); padding-top: var(--mv-s-4); border-top: 1px solid var(--mv-border); }
.mb-agent-hero__attr { display: flex; flex-direction: column; gap: 2px; }
.mb-agent-hero__attr-label {
  font-size: var(--mv-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-secondary);
  font-weight: 600;
}
.mb-agent-hero__attr-value { font-size: var(--mv-text-sm); color: var(--mv-text-primary); font-weight: 500; }
.mb-agent-hero__attr-value code {
  font-family: "SF Mono", monospace;
  font-size: 12px;
  background: var(--mv-bg-sunken);
  padding: 2px 6px;
  border-radius: var(--mv-r-sm);
}
.mb-agent-hero__actions { margin-top: var(--mv-s-5); display: flex; flex-direction: column; gap: var(--mv-s-2); }

/* ── INLINE TABS ───────────────────────────────────────────────────── */
.mb-tabs {
  display: flex;
  gap: var(--mv-s-1);
  border-bottom: 1px solid var(--mv-border);
  margin-bottom: var(--mv-s-5);
}
.mb-tab {
  padding: var(--mv-s-3) var(--mv-s-4);
  border: none;
  background: none;
  font-size: var(--mv-text-sm);
  font-weight: 500;
  color: var(--mv-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--mv-d-fast) var(--mv-e-out);
  font-family: inherit;
}
.mb-tab::after {
  content: "";
  position: absolute;
  left: var(--mv-s-2);
  right: var(--mv-s-2);
  bottom: -1px;
  height: 2px;
  background: transparent;
  border-radius: 2px 2px 0 0;
  transition: background var(--mv-d-base) var(--mv-e-out);
}
.mb-tab:hover { color: var(--mv-text-primary); }
.mb-tab--active { color: var(--mv-p-600); }
.mb-tab--active::after { background: var(--mv-p-500); }
.mb-tab__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--mv-r-full);
  background: var(--mv-bg-sunken);
  color: var(--mv-text-secondary);
  font-size: 10px;
  font-weight: 600;
}

/* ── PROMPT CARD ───────────────────────────────────────────────────── */
.mb-prompt-card {
  background: var(--mv-bg-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-md);
  padding: var(--mv-s-4);
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: 12px;
  color: var(--mv-text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* ── SURVEY CALLOUT ────────────────────────────────────────────────── */
.mb-survey-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-s-4);
  padding: var(--mv-s-4) var(--mv-s-5);
  margin-bottom: var(--mv-s-5);
  background: var(--mv-p-50);
  border: 1px solid var(--mv-p-200);
  border-left: 3px solid var(--mv-p-500);
  border-radius: var(--mv-r-lg);
}
.mb-survey-callout__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--mv-r-md);
  background: var(--mv-bg-surface);
  color: var(--mv-p-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mb-survey-callout__body { flex: 1; min-width: 0; }
.mb-survey-callout__title { margin: 0 0 2px; font-size: var(--mv-text-sm); font-weight: 600; color: var(--mv-text-primary); }
.mb-survey-callout__desc { margin: 0; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); line-height: 1.5; }
.mb-survey-callout__desc strong { color: var(--mv-text-primary); font-weight: 600; }
.mb-survey-callout .mb-btn { flex-shrink: 0; align-self: center; }

/* ── CAMPAIGN STATUS ───────────────────────────────────────────────── */
.mb-campaign-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mv-text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--mv-r-full);
}
.mb-campaign-status--draft    { background: var(--mv-n-150);       color: var(--mv-text-secondary); }
.mb-campaign-status--pending  { background: var(--mv-n-150);       color: var(--mv-text-secondary); }
.mb-campaign-status--scheduled{ background: var(--mv-info-muted);  color: var(--mv-info-strong); }
.mb-campaign-status--active   { background: var(--mv-success-muted); color: var(--mv-success-strong); }
.mb-campaign-status--paused   { background: var(--mv-warning-muted); color: var(--mv-warning-strong); }
.mb-campaign-status--finished { background: var(--mv-n-150);       color: var(--mv-text-secondary); }
.mb-campaign-status__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--mv-r-full);
  background: currentColor;
}
.mb-campaign-status--active .mb-campaign-status__dot {
  animation: mb-live-pulse 2s var(--mv-e-inout) infinite;
}

/* ── BIG PROGRESS ──────────────────────────────────────────────────── */
.mb-bigprogress {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  padding: var(--mv-s-6);
  box-shadow: var(--mv-elev-1);
  margin-bottom: var(--mv-s-5);
}
.mb-bigprogress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--mv-s-3);
  gap: var(--mv-s-3);
  flex-wrap: wrap;
}
.mb-bigprogress__title { margin: 0; font-size: var(--mv-text-sm); color: var(--mv-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.mb-bigprogress__value { font-size: var(--mv-display-h2); font-weight: 700; color: var(--mv-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mb-bigprogress__sub   { color: var(--mv-text-secondary); font-size: var(--mv-text-sm); }
.mb-bigprogress__bar   { height: 12px; background: var(--mv-bg-sunken); border-radius: var(--mv-r-full); overflow: hidden; position: relative; }
.mb-bigprogress__fill  {
  height: 100%;
  background: linear-gradient(90deg, var(--mv-p-400), var(--mv-p-600));
  border-radius: var(--mv-r-full);
  position: relative;
  transition: width var(--mv-d-slow) var(--mv-e-out);
}
.mb-bigprogress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .25), transparent);
  animation: mb-shimmer 2s linear infinite;
}
@keyframes mb-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.mb-bigprogress__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mv-s-3);
  margin-top: var(--mv-s-4);
  padding-top: var(--mv-s-4);
  border-top: 1px solid var(--mv-border);
}
.mb-bigprogress__stat  { font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }
.mb-bigprogress__stat strong { display: block; font-size: var(--mv-text-lg); color: var(--mv-text-primary); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ── DID GRID ──────────────────────────────────────────────────────── */
.mb-did-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--mv-s-4); }
.mb-did {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  padding: var(--mv-s-5);
  box-shadow: var(--mv-elev-1);
  transition: all var(--mv-d-base) var(--mv-e-out);
}
.mb-did:hover { box-shadow: var(--mv-elev-3); transform: translateY(-1px); }
.mb-did__number {
  font-family: "SF Mono", "Cascadia Code", monospace;
  font-size: var(--mv-display-h5);
  color: var(--mv-text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.mb-did__desc { font-size: var(--mv-text-xs); color: var(--mv-text-secondary); margin: var(--mv-s-1) 0 var(--mv-s-4); line-height: 1.4; }
.mb-did__meta {
  display: flex;
  gap: var(--mv-s-3);
  margin-bottom: var(--mv-s-3);
  padding-top: var(--mv-s-3);
  border-top: 1px solid var(--mv-border);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-secondary);
}
.mb-did__meta i { color: var(--mv-text-tertiary); margin-right: 4px; }
.mb-did__assigned {
  display: flex;
  align-items: center;
  gap: var(--mv-s-2);
  padding: var(--mv-s-3);
  background: var(--mv-bg-sunken);
  border-radius: var(--mv-r-md);
  margin-bottom: var(--mv-s-3);
}
.mb-did__assigned-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--mv-r-md);
  background: linear-gradient(135deg, var(--mv-p-400), var(--mv-p-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--mv-text-xs);
  flex-shrink: 0;
}
.mb-did__assigned-name { font-size: var(--mv-text-sm); color: var(--mv-text-primary); font-weight: 500; display: block; line-height: 1.2; }
.mb-did__assigned-role { font-size: var(--mv-text-2xs); color: var(--mv-text-secondary); display: block; margin-top: 1px; }
.mb-did__actions { display: flex; gap: var(--mv-s-2); }
.mb-did__actions .mb-btn { flex: 1; justify-content: center; }

/* ── SECTION (used in fake_dids) ───────────────────────────────────── */
.mb-section {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  overflow: hidden;
  margin-bottom: var(--mv-s-6);
  box-shadow: var(--mv-elev-1);
}
.mb-section__header {
  display: flex;
  align-items: center;
  gap: var(--mv-s-3);
  padding: var(--mv-s-4) var(--mv-s-5);
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-bg-sunken);
}
.mb-section__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mv-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mb-section__icon--available { background: var(--mv-success-muted); color: var(--mv-success-strong); }
.mb-section__icon--assigned  { background: var(--mv-p-100);         color: var(--mv-p-700); }
.mb-section__title  { margin: 0; font-size: var(--mv-display-h5); color: var(--mv-text-primary); font-weight: 600; }
.mb-section__subtitle { margin: 2px 0 0; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }
.mb-section__body   { padding: var(--mv-s-5); }
.mb-section__actions { margin-left: auto; display: flex; gap: var(--mv-s-2); }

/* ── FORM COMPONENTS ───────────────────────────────────────────────── */
.mb-form-section {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  margin-bottom: var(--mv-s-5);
  overflow: hidden;
  box-shadow: var(--mv-elev-1);
}
.mb-form-section__header {
  display: flex;
  align-items: center;
  gap: var(--mv-s-3);
  padding: var(--mv-s-4) var(--mv-s-5);
  border-bottom: 1px solid var(--mv-border);
}
.mb-form-section__step {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--mv-r-full);
  background: var(--mv-p-50);
  color: var(--mv-p-700);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mv-text-xs);
}
.mb-form-section__title  { margin: 0; font-size: var(--mv-display-h5); color: var(--mv-text-primary); font-weight: 600; }
.mb-form-section__desc   { margin: 2px 0 0; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }
.mb-form-section__body   { padding: var(--mv-s-5); }
.mb-form-group  { margin-bottom: var(--mv-s-4); }
.mb-form-group:last-child { margin-bottom: 0; }
.mb-form-label  { display: block; font-size: var(--mv-text-sm); font-weight: 500; color: var(--mv-text-primary); margin-bottom: var(--mv-s-2); }
.mb-form-help   { display: block; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); margin-top: var(--mv-s-2); }
.mb-form-input,
.mb-form-select,
.mb-form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--mv-text-sm);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-md);
  background: var(--mv-bg-canvas);
  color: var(--mv-text-primary);
  font-family: inherit;
  transition: all var(--mv-d-fast) var(--mv-e-out);
}
.mb-form-input:focus,
.mb-form-select:focus,
.mb-form-textarea:focus {
  outline: none;
  border-color: var(--mv-p-500);
  background: var(--mv-bg-surface);
  box-shadow: 0 0 0 3px rgb(247 24 131 / .1);
}
.mb-form-textarea  { resize: vertical; min-height: 90px; line-height: 1.55; }
.mb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mv-s-4); }
@media (max-width: 640px) { .mb-form-row { grid-template-columns: 1fr; } }
.mb-slider-row { display: flex; align-items: center; gap: var(--mv-s-3); }
.mb-slider-row input[type="range"] { flex: 1; accent-color: var(--mv-p-500); }
.mb-slider-row input[type="number"] { width: 80px; text-align: center; }
.mb-password-input { position: relative; }
.mb-password-input input { padding-right: 40px; }
.mb-password-input button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: var(--mv-r-sm);
  border: none;
  background: transparent;
  color: var(--mv-text-tertiary);
  cursor: pointer;
  font-size: 12px;
}
.mb-password-input button:hover { background: var(--mv-n-150); color: var(--mv-text-primary); }

/* ── CREATE GRID (campaign create) ─────────────────────────────────── */
.mb-create-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--mv-s-6); }
@media (max-width: 1023px) { .mb-create-grid { grid-template-columns: 1fr; } }
/* ── AGENT PICKER ──────────────────────────────────────────────────── */
.mb-agent-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--mv-s-3); }
.mb-agent-pick {
  padding: var(--mv-s-4);
  border: 2px solid var(--mv-border);
  border-radius: var(--mv-r-md);
  background: var(--mv-bg-surface);
  cursor: pointer;
  text-align: left;
  display: flex;
  gap: var(--mv-s-3);
  align-items: flex-start;
  font-family: inherit;
  transition: all var(--mv-d-fast) var(--mv-e-out);
}
.mb-agent-pick:hover { border-color: var(--mv-border-strong); }
.mb-agent-pick--active { border-color: var(--mv-p-500); background: var(--mv-p-50); }
.mb-agent-pick__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--mv-r-md);
  background: linear-gradient(135deg, var(--mv-p-400), var(--mv-p-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--mv-text-sm);
}
.mb-agent-pick__name { margin: 0; font-size: var(--mv-text-sm); color: var(--mv-text-primary); font-weight: 600; }
.mb-agent-pick__desc { margin: 2px 0 0; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }

/* ── FILE UPLOAD ───────────────────────────────────────────────────── */
.mb-upload {
  border: 2px dashed var(--mv-border);
  border-radius: var(--mv-r-lg);
  padding: var(--mv-s-8);
  text-align: center;
  background: var(--mv-bg-sunken);
  transition: all var(--mv-d-fast) var(--mv-e-out);
  cursor: pointer;
}
.mb-upload:hover { border-color: var(--mv-p-500); background: var(--mv-p-50); }
.mb-upload__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--mv-r-full);
  background: var(--mv-p-100);
  color: var(--mv-p-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto var(--mv-s-3);
}
.mb-upload__title { margin: 0 0 var(--mv-s-1); font-size: var(--mv-text-md); color: var(--mv-text-primary); font-weight: 600; }
.mb-upload__desc  { margin: 0 0 var(--mv-s-3); font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }

/* ── ENCUESTAS ─────────────────────────────────────────────────────── */
.mb-agent-block {
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-r-lg);
  overflow: hidden;
  box-shadow: var(--mv-elev-1);
  margin-bottom: var(--mv-s-5);
}
.mb-agent-block__header {
  display: flex;
  align-items: center;
  gap: var(--mv-s-4);
  padding: var(--mv-s-4) var(--mv-s-5);
  cursor: pointer;
  list-style: none;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.mb-agent-block__header::-webkit-details-marker { display: none; }
.mb-agent-block__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--mv-r-md);
  background: linear-gradient(135deg, var(--mv-p-400), var(--mv-p-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--mv-text-lg);
  flex-shrink: 0;
}
.mb-agent-block__info { flex: 1; min-width: 0; }
.mb-agent-block__name { margin: 0; font-size: var(--mv-display-h5); font-weight: 600; color: var(--mv-text-primary); }
.mb-agent-block__sub  { margin: 2px 0 0; font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }
.mb-agent-block__stats span { font-size: var(--mv-text-xs); color: var(--mv-text-secondary); }
.mb-agent-block__stats strong { color: var(--mv-text-primary); font-weight: 600; display: block; font-size: var(--mv-text-sm); }
.mb-agent-block__caret { color: var(--mv-text-tertiary); font-size: 12px; transition: transform var(--mv-d-base) var(--mv-e-out); }
details[open] .mb-agent-block__caret { transform: rotate(180deg); }

.mb-question-list { border-top: 1px solid var(--mv-border); background: var(--mv-bg-sunken); }
.mb-q {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--mv-s-4);
  align-items: center;
  padding: var(--mv-s-4) var(--mv-s-5);
  border-bottom: 1px solid var(--mv-border);
}
.mb-q:last-child { border-bottom: none; }
.mb-q__order {
  width: 28px;
  height: 28px;
  border-radius: var(--mv-r-full);
  background: var(--mv-bg-surface);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mv-text-xs);
  font-weight: 700;
}
.mb-q__text  { margin: 0 0 var(--mv-s-2); font-size: var(--mv-text-sm); color: var(--mv-text-primary); font-weight: 500; }
.mb-q__meta  { display: flex; gap: var(--mv-s-3); flex-wrap: wrap; font-size: var(--mv-text-2xs); color: var(--mv-text-secondary); }
.mb-q__meta span { display: inline-flex; align-items: center; gap: 4px; }
.mb-q__meta i { color: var(--mv-text-tertiary); }
.mb-q__actions { display: flex; gap: var(--mv-s-2); }
.mb-agent-block__footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--mv-s-3) var(--mv-s-5);
  background: var(--mv-bg-sunken);
  border-top: 1px solid var(--mv-border);
}

/* Response aggregates */
.mb-resp-card {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--mv-s-5);
  padding: var(--mv-s-5);
  align-items: center;
  border-bottom: 1px solid var(--mv-border);
}
.mb-resp-card:last-child { border-bottom: none; }
@media (max-width: 767px) { .mb-resp-card { grid-template-columns: 1fr; } }
.mb-resp-card__q   { margin: 0 0 var(--mv-s-2); font-size: var(--mv-text-sm); color: var(--mv-text-primary); font-weight: 500; }
.mb-resp-card__meta{ font-size: var(--mv-text-xs); color: var(--mv-text-secondary); margin-bottom: var(--mv-s-3); }
.mb-bar { display: flex; align-items: center; gap: var(--mv-s-3); margin-bottom: var(--mv-s-2); font-size: var(--mv-text-xs); }
.mb-bar__label  { min-width: 90px; color: var(--mv-text-secondary); }
.mb-bar__track  { flex: 1; height: 8px; background: var(--mv-bg-sunken); border-radius: var(--mv-r-full); overflow: hidden; }
.mb-bar__fill   { height: 100%; background: linear-gradient(90deg, var(--mv-p-400), var(--mv-p-600)); border-radius: var(--mv-r-full); }
.mb-bar__fill--success { background: linear-gradient(90deg, #34d399, #047857); }
.mb-bar__fill--warning { background: linear-gradient(90deg, #fbbf24, #b45309); }
.mb-bar__fill--danger  { background: linear-gradient(90deg, #f87171, #b91c1c); }
.mb-bar__val { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--mv-text-primary); font-weight: 600; }
.mb-resp-card__total { text-align: center; padding: var(--mv-s-4); background: var(--mv-bg-sunken); border-radius: var(--mv-r-md); }
.mb-resp-card__total-num { font-size: var(--mv-display-h3); font-weight: 700; color: var(--mv-text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.mb-resp-card__total-lbl { font-size: var(--mv-text-2xs); color: var(--mv-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 4px; }

/* ── ASTERISK SERVERS ──────────────────────────────────────────────── */
.mb-srv__name { display: block; font-weight: 600; color: var(--mv-text-primary); font-size: var(--mv-text-sm); line-height: 1.2; }
.mb-srv__sub  { display: block; font-size: var(--mv-text-2xs); color: var(--mv-text-tertiary); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
.mb-chan { display: flex; align-items: center; gap: var(--mv-s-2); min-width: 140px; }
.mb-chan__track { flex: 1; height: 6px; background: var(--mv-n-150); border-radius: var(--mv-r-full); overflow: hidden; }
.mb-chan__fill  { height: 100%; background: linear-gradient(90deg, var(--mv-p-400), var(--mv-p-600)); border-radius: var(--mv-r-full); transition: width var(--mv-d-slow) var(--mv-e-out); }
.mb-chan__fill--warn { background: linear-gradient(90deg, #fbbf24, var(--mv-warning-base)); }
.mb-chan__label { font-size: var(--mv-text-2xs); font-weight: 600; color: var(--mv-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 48px; text-align: right; }
.mb-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.mb-info-callout {
  display: flex;
  gap: var(--mv-s-3);
  padding: var(--mv-s-4);
  background: var(--mv-info-muted);
  color: var(--mv-info-strong);
  border-radius: var(--mv-r-md);
  font-size: var(--mv-text-xs);
  line-height: 1.55;
  margin-bottom: var(--mv-s-4);
}
.mb-info-callout i { flex-shrink: 0; margin-top: 2px; font-size: 14px; }
/* ── SECTION HEADER ────────────────────────────────────────────────── */
.mb-section-header { display: flex; align-items: center; justify-content: space-between; margin: var(--mv-s-8) 0 var(--mv-s-4); }
.mb-section-header h2 { margin: 0; font-size: var(--mv-display-h4); color: var(--mv-text-primary); font-weight: 600; }
.mb-section-header p  { margin: 0; font-size: var(--mv-text-sm); color: var(--mv-text-secondary); }

/* Phase 3 fix 2026-04-15: make icon inside close button transparent to pointer events
 * so real clicks register on the <button class="mv-modal__close"> not the <i> child.
 */
.mv-modal__close i,
.mv-modal__close svg {
  pointer-events: none;
}