/* ============================================================
   MetaVoz Theme - Design System v3.0
   Refined Dark Mode + Cards + Buttons + Full Component Styling
   ============================================================ */

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== DESIGN TOKENS ===== */
:root {
  /* Brand */
  --mv-primary: #f71883;
  --mv-primary-light: #fa4da0;
  --mv-primary-muted: rgba(247, 24, 131, 0.12);
  --mv-secondary: #89468b;
  --mv-gradient: linear-gradient(135deg, #f71883 0%, #89468b 100%);
  --mv-gradient-subtle: linear-gradient(135deg, rgba(247, 24, 131, 0.08) 0%, rgba(137, 70, 139, 0.08) 100%);

  /* Top Navigation Bar tokens (Option B — replaces sidebar) */
  --mv-topnav-h: 56px;
  --mv-topnav-bg: #ffffff;
  --mv-topnav-border: rgba(0, 0, 0, 0.08);
  --mv-topnav-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --mv-topnav-text: #6e6e73;
  --mv-topnav-text-hover: #1d1d1f;
  --mv-topnav-tab-active: #f71883;
  --mv-topnav-tab-indicator: #f71883;
  --mv-topnav-mega-bg: #ffffff;
  --mv-topnav-mega-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --mv-topnav-mega-border: rgba(0, 0, 0, 0.08);
  --mv-topnav-mega-col-title: #f71883;
  --mv-topnav-link-hover-bg: rgba(247, 24, 131, 0.08);
  --mv-topnav-link-hover-text: #f71883;
  --mv-topnav-backdrop-bg: rgba(0, 0, 0, 0.08);

  /* Light Mode */
  --mv-content-bg: #f5f5f7;
  --mv-content-text: #1d1d1f;
  --mv-text-muted: #6e6e73;
  --mv-card-bg: #ffffff;
  --mv-card-border: rgba(0, 0, 0, 0.06);
  --mv-card-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --mv-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --mv-surface-bg: #ffffff;
  --mv-surface-border: #e5e5e7;
  --mv-input-bg: #ffffff;
  --mv-input-border: #d1d1d6;
  --mv-input-focus-ring: rgba(247, 24, 131, 0.2);
  --mv-topbar-bg: rgba(255, 255, 255, 0.82);
  --mv-topbar-text: #1d1d1f;
  --mv-topbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  --mv-topbar-border: rgba(0, 0, 0, 0.06);
  --mv-modal-bg: #ffffff;
  --mv-modal-overlay: rgba(0, 0, 0, 0.4);
  --mv-toggle-bg: #e5e5ea;
  --mv-badge-bg: #f2f2f7;
  --mv-table-header-bg: #fafafa;
  --mv-table-stripe-bg: #fafafa;
  --mv-table-border: #f0f0f2;
  --mv-hr-color: #e5e5e7;
}

/* Dark mode removed — light-only theme for professional call center UI.
   Tokens above define the light palette. No [data-theme="dark"] overrides. */

/* ===== GLOBAL ===== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background-color: var(--mv-content-bg) !important;
  color: var(--mv-content-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, label, input, select, textarea, button:not([class*="fa"]), a:not([class*="fa"]), p, span:not([class*="fa"]), td, th, li, div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.fa, .fas, .far, .fal, .fab, [class*="fa-"] {
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
}

hr {
  border-color: var(--mv-hr-color) !important;
  transition: border-color 0.3s ease;
}

/* ===== TOPBAR ===== */
#topbar {
  height: 54px !important;
  background: var(--mv-topbar-bg) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mv-topbar-border) !important;
  box-shadow: var(--mv-topbar-shadow);
  padding: 0 24px !important;
  transition: all 0.3s ease;
  position: sticky;
  top: 0;
  z-index: 5;
}

#topbar a {
  color: var(--mv-topbar-text) !important;
  font-weight: 500;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

#topbar a:hover { color: var(--mv-primary) !important; }

/* Logout button */
#topbar a.btn {
  background: transparent !important;
  border: 1.5px solid var(--mv-primary) !important;
  color: var(--mv-primary) !important;
  border-radius: 6px !important;
  padding: 4px 14px !important;
  font-weight: 500;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

#topbar a.btn:hover {
  background: var(--mv-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(247, 24, 131, 0.2);
}

#nav-user {
  top: 11px !important;
  right: 24px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

#nav-user > a:first-child {
  font-weight: 600 !important;
  font-size: 0.83rem !important;
}

/* Language select */
#topbar select,
#topbar .nav select {
  background: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  color: var(--mv-text-muted) !important;
  border-radius: 6px !important;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

#topbar select:hover,
#topbar select:focus { border-color: var(--mv-primary) !important; }

/* ===== TOP NAVIGATION BAR (Option B) ===== */

/* Layout helpers */
.mv-topnav-layout {
  display: block !important;  /* override any flex that put sidebar + content side by side */
}

.mv-topnav-content {
  margin-left: 0 !important;  /* full-width — no sidebar offset */
  padding-top: var(--mv-topnav-h) !important; /* push content below fixed bar */
}

/* The bar itself */
.mv-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mv-topnav-h);
  background: var(--mv-topnav-bg);
  border-bottom: 1px solid var(--mv-topnav-border);
  box-shadow: var(--mv-topnav-shadow);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  gap: 0;
}

/* Logo */
.mv-topnav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 32px;
}

.mv-topnav__logo-full {
  display: block;
}

.mv-topnav__logo-symbol {
  display: none;
}

/* Main tabs */
.mv-topnav__nav {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2px;
}

.mv-topnav__tab {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mv-topnav-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  white-space: nowrap;
  gap: 6px;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

.mv-topnav__tab:hover {
  color: var(--mv-topnav-text-hover);
}

/* Active tab indicator bar */
.mv-topnav__tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background 0.15s ease;
}

.mv-topnav__tab--active {
  color: var(--mv-topnav-tab-active) !important;
}

.mv-topnav__tab--active::after {
  background: var(--mv-topnav-tab-indicator) !important;
}

.mv-topnav__tab:hover::after {
  background: rgba(0, 0, 0, 0.12);
}

.mv-topnav__tab--active:hover::after {
  background: var(--mv-topnav-tab-indicator) !important;
}

.mv-topnav__tab-caret {
  font-size: 9px !important;
  opacity: 0.4;
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.mv-topnav__tab--active .mv-topnav__tab-caret,
.mv-topnav__tab[aria-expanded="true"] .mv-topnav__tab-caret {
  transform: rotate(180deg);
}

/* Right-side actions */
.mv-topnav__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

.mv-topnav__sep {
  width: 1px;
  height: 20px;
  background: var(--mv-topnav-border);
  flex-shrink: 0;
}

.mv-topnav__user-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mv-topnav__username {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--mv-topnav-text-hover);
}

.mv-topnav__logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mv-primary) !important;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1.5px solid var(--mv-primary);
  border-radius: 6px;
  padding: 4px 12px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.mv-topnav__logout:hover {
  background: var(--mv-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Language selector inside topnav — legacy bare <select> (kept for fallback) */
.mv-topnav select,
.mv-topnav .nav select,
.mv-topnav form select {
  background: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  color: var(--mv-text-muted) !important;
  border-radius: 6px !important;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.mv-topnav select:hover,
.mv-topnav select:focus {
  border-color: var(--mv-primary) !important;
}

/* ── QW1: Globe language picker (UX audit v2) ───────────────────────────── */
.mv-lang-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mv-lang-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--mv-topnav-border);
  border-radius: 6px;
  color: var(--mv-topnav-text);
  font-family: var(--mv-font);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.mv-lang-picker__btn:hover,
.mv-lang-picker__btn[aria-expanded="true"] {
  border-color: var(--mv-primary);
  color: var(--mv-primary);
  background: rgba(247, 24, 131, 0.06);
}

.mv-lang-picker__code {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mv-lang-picker__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--mv-card-bg, #fff);
  border: 1px solid var(--mv-card-border, rgba(0,0,0,.08));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1200;
  overflow: hidden;
  padding: 4px 0;
}

.mv-lang-picker__dropdown[aria-hidden="false"] {
  display: block;
}

.mv-lang-picker__item-form {
  margin: 0;
  padding: 0;
}

.mv-lang-picker__item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--mv-content-text, #1d1d1f);
  font-family: var(--mv-font);
  font-size: 0.83rem;
  font-weight: 400;
  padding: 7px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.mv-lang-picker__item:hover {
  background: rgba(247, 24, 131, 0.07);
}

.mv-lang-picker__item--active {
  font-weight: 600;
  color: var(--mv-primary);
}

/* ── QW2: Hide ID subtitle in Gen-3 campaign tables (UX audit v2) ───────── */
/* The campaign pk is preserved in the row's id="camp-data-N" attribute.     */
/* This rule hides the visible "ID N" text only — JS references are intact.  */
.mv-table__muted.mv-table__id-subtitle,
.mv-table .mv-table__primary small.mv-table__muted,
.mv-table td > a.mv-table__primary > small.mv-table__muted,
.mv-table td > span.mv-table__primary > small.mv-table__muted {
  display: none;
}

/* Backdrop */
.mv-topnav-backdrop {
  position: fixed;
  inset: 0;
  top: var(--mv-topnav-h);
  background: var(--mv-topnav-backdrop-bg);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mv-topnav-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* Mega menu panel */
.mv-topnav-mega {
  position: fixed;
  top: var(--mv-topnav-h);
  left: 0;
  right: 0;
  background: var(--mv-topnav-mega-bg);
  border-bottom: 1px solid var(--mv-topnav-mega-border);
  box-shadow: var(--mv-topnav-mega-shadow);
  z-index: 999;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.mv-topnav-mega--open {
  max-height: 520px;
  opacity: 1;
  overflow-y: auto;
}

/* Mega inner grid */
.mv-topnav-mega__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px 40px 28px;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

/* Columns */
.mv-topnav-mega__col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 20px;
  border-right: 1px solid var(--mv-topnav-mega-border);
}

.mv-topnav-mega__col:first-child {
  padding-left: 0;
}

.mv-topnav-mega__col:last-child {
  border-right: none;
  padding-right: 0;
}

/* Column heading */
.mv-topnav-mega__col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--mv-topnav-mega-col-title);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mv-topnav-mega-border);
}

/* Mega links */
.mv-topnav-mega__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 5px;
  text-decoration: none !important;
  color: var(--mv-topnav-text-hover) !important;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.12s ease;
}

.mv-topnav-mega__link:hover {
  background: var(--mv-topnav-link-hover-bg);
  color: var(--mv-topnav-link-hover-text) !important;
}

.mv-topnav-mega__link--active {
  background: var(--mv-topnav-link-hover-bg);
  color: var(--mv-topnav-link-hover-text) !important;
  font-weight: 500;
}

.mv-topnav-mega__link i {
  width: 18px;
  text-align: center;
  font-size: 13px;
  opacity: 0.6;
  flex-shrink: 0;
}

.mv-topnav-mega__link:hover i,
.mv-topnav-mega__link--active i {
  opacity: 1;
}

/* Sub-link (grandchildren) */
.mv-topnav-mega__link--sub {
  font-size: 13px;
  padding-left: 18px;
  color: var(--mv-text-muted) !important;
}

.mv-topnav-mega__link--sub:hover {
  color: var(--mv-topnav-link-hover-text) !important;
}

/* Sub-group label (for grandchild sections) */
.mv-topnav-mega__subgroup-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0 4px 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .mv-topnav__logo-full { display: none; }
  .mv-topnav__logo-symbol { display: block; }
  .mv-topnav__logo { margin-right: 16px; }
}

@media (max-width: 1200px) {
  .mv-topnav-mega__inner { flex-wrap: wrap; }
  .mv-topnav-mega__col { flex: 1 1 calc(33.33% - 40px); min-width: 160px; margin-bottom: 16px; }
}

@media (max-width: 768px) {
  .mv-topnav { padding: 0 12px; }
  .mv-topnav__tab { padding: 0 10px; font-size: 13px; }
  .mv-topnav__tab i:not(.mv-topnav__tab-caret) { display: none; }
  .mv-topnav-mega__inner { flex-direction: column; gap: 16px; padding: 16px; }
  .mv-topnav-mega__col {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--mv-topnav-mega-border);
    padding-bottom: 12px;
  }
  .mv-topnav-mega__col:last-child { border-bottom: none; padding-bottom: 0; }
  .mv-topnav__username { display: none; }
}

/* ===== CONTENT AREA ===== */
.wrapper-content {
  background-color: var(--mv-content-bg) !important;
  transition: background-color 0.3s ease;
}

.wrapper-info {
  padding: 28px 36px 28px 36px !important;
}

.wrapper-info > h1:first-of-type {
  color: var(--mv-content-text) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em;
  margin-bottom: 24px !important;
}

/* ===== CARDS / FICHAS ===== */
.jumbotron {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border);
  border-radius: 12px !important;
  box-shadow: var(--mv-card-shadow);
  padding: 20px 24px !important;
  transition: all 0.2s ease;
}

.jumbotron:hover {
  box-shadow: var(--mv-card-shadow-hover);
}

/* Dashboard stat cards */
.wrapper-info .col-md-3,
.wrapper-info .col-sm-3,
.wrapper-info [class*="col-"] > .card,
.wrapper-info [class*="col-"] > div[style] {
  transition: all 0.2s ease;
}

/* Generic card containers in dashboard */
.wrapper-info > div > div[class*="col-"] > div {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--mv-card-shadow);
  transition: all 0.2s ease;
  overflow: hidden;
}

.wrapper-info > div > div[class*="col-"] > div:hover {
  box-shadow: var(--mv-card-shadow-hover);
}

/* Chart/graph containers */
.graficos-avances {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--mv-card-shadow);
  padding: 20px !important;
}

.graficos-avances text {
  font-family: 'Inter', sans-serif !important;
  fill: var(--mv-text-muted) !important;
}

/* ===== BUTTONS ===== */
.btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.005em;
}

.btn-primary {
  background: var(--mv-gradient) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(247, 24, 131, 0.2);
}

.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(247, 24, 131, 0.3) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(247, 24, 131, 0.2) !important;
}

.btn-primary.disabled, .btn-primary:disabled {
  background: var(--mv-input-border) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.6;
}

.btn-secondary {
  background: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  color: var(--mv-content-text) !important;
}

.btn-secondary:hover {
  background: var(--mv-surface-bg) !important;
  border-color: var(--mv-primary) !important;
  color: var(--mv-primary) !important;
}

.btn-light {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  color: var(--mv-content-text) !important;
}

.btn-light:hover {
  border-color: var(--mv-input-border) !important;
  background: var(--mv-surface-bg) !important;
}

.btn-outline-primary {
  color: var(--mv-primary) !important;
  border: 1.5px solid var(--mv-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--mv-primary-muted) !important;
  color: var(--mv-primary) !important;
  border-color: var(--mv-primary) !important;
}

.btn-outline-danger {
  color: #ef4444 !important;
  border: 1.5px solid #ef4444 !important;
  background: transparent !important;
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

a.btn .icon { color: var(--mv-text-muted) !important; }

/* ===== TABLES ===== */
.table {
  color: var(--mv-content-text) !important;
}

.table thead th {
  background-color: var(--mv-table-header-bg) !important;
  color: var(--mv-text-muted) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--mv-table-border) !important;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px !important;
}

.table td {
  border-top: 1px solid var(--mv-table-border) !important;
  color: var(--mv-content-text) !important;
  padding: 10px 12px !important;
  font-size: 0.85rem;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--mv-table-stripe-bg) !important;
}

.table-striped td, .table-striped th {
  border-top: none !important;
}

.table tbody tr {
  transition: background-color 0.1s ease;
}

.table tbody tr:hover {
  background-color: var(--mv-primary-muted) !important;
}

/* ===== FORMS ===== */
label {
  color: var(--mv-text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  transition: color 0.2s ease;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 8px !important;
  color: var(--mv-content-text) !important;
  padding: 9px 12px !important;
  font-size: 0.88rem !important;
  transition: all 0.15s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 3px var(--mv-input-focus-ring) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--mv-text-muted) !important;
  opacity: 0.6;
}

/* Select elements */
select.form-control,
select {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 8px !important;
  color: var(--mv-content-text) !important;
  padding: 9px 12px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Select2 custom */
.select2-container--default .select2-selection--single {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 8px !important;
  height: 38px !important;
  padding: 4px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--mv-content-text) !important;
  font-size: 0.88rem;
}

.select2-dropdown {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.select2-container--default .select2-results__option {
  color: var(--mv-content-text) !important;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--mv-primary) !important;
  color: white !important;
  border-radius: 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  color: var(--mv-content-text) !important;
  border-radius: 6px !important;
}

/* ===== MODALS ===== */
.modal-content {
  background-color: var(--mv-modal-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.modal-header {
  border-bottom: 1px solid var(--mv-surface-border) !important;
  padding: 16px 20px !important;
}

.modal-title {
  color: var(--mv-content-text) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

.modal-body {
  padding: 20px !important;
  color: var(--mv-content-text) !important;
}

.modal-body p {
  color: var(--mv-content-text) !important;
}

.modal-footer {
  border-top: 1px solid var(--mv-surface-border) !important;
  padding: 12px 20px !important;
}

.modal-backdrop.show {
  opacity: 0.5;
}

[data-theme="dark"] .modal-backdrop.show {
  opacity: 0.65;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 4px !important;
}

[data-theme="dark"] .dropdown-menu {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.dropdown-item {
  color: var(--mv-content-text) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem;
  transition: all 0.1s ease;
}

.dropdown-item:hover {
  background-color: var(--mv-primary-muted) !important;
  color: var(--mv-primary) !important;
}

.dropdown-item .icon {
  color: var(--mv-text-muted) !important;
}

button.dropdown-toggle {
  color: var(--mv-content-text) !important;
}

/* ===== PAGINATION ===== */
.page-link {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  color: var(--mv-primary) !important;
  border-radius: 6px !important;
  margin: 0 2px;
  font-size: 0.85rem;
  padding: 6px 12px !important;
  transition: all 0.15s ease;
}

.page-link:hover {
  background-color: var(--mv-primary-muted) !important;
  border-color: var(--mv-primary) !important;
  color: var(--mv-primary) !important;
}

.page-item.active .page-link {
  background: var(--mv-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ===== BADGES ===== */
.badge {
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* ===== TABS / PILLS ===== */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--mv-primary-muted) !important;
  color: var(--mv-primary) !important;
  border-radius: 8px !important;
  font-weight: 500;
}

.nav-tabs .nav-link {
  color: var(--mv-text-muted) !important;
  border: none !important;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
}

.nav-tabs .nav-link:hover {
  color: var(--mv-content-text) !important;
  background: var(--mv-primary-muted) !important;
}

.nav-tabs .nav-link.active {
  color: var(--mv-primary) !important;
  background: var(--mv-primary-muted) !important;
}

.nav-tabs {
  border-bottom: 1px solid var(--mv-surface-border) !important;
}

/* Navigation indicators */
ul.nav-indicators {
  background-color: var(--mv-badge-bg) !important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease;
}

ul.nav-indicators li.active a {
  color: var(--mv-primary) !important;
  border-bottom-color: var(--mv-primary) !important;
}

ul.nav-indicators li.disabled a { color: var(--mv-text-muted) !important; }

/* ===== ALERTS ===== */
.alert {
  border-radius: 10px !important;
  border: none !important;
  font-size: 0.88rem;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
}

.alert-success {
  background-color: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: #86efac !important;
}

/* ===== SEARCH FORM ===== */
#wrapperSearchForm {
  border-bottom: 1px solid var(--mv-surface-border) !important;
  transition: border-color 0.3s ease;
}

#btnCollapse {
  background-color: var(--mv-badge-bg) !important;
  color: var(--mv-content-text) !important;
  border-radius: 8px !important;
  border: 1px solid var(--mv-card-border) !important;
  transition: all 0.15s ease;
}

#btnCollapse.collapsed {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
}

#btnCollapse:hover { background-color: var(--mv-surface-bg) !important; }
#btnCollapse .icon { color: var(--mv-text-muted) !important; }

/* ===== DATE PICKERS ===== */
.daterangepicker {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.daterangepicker .ranges li {
  background: var(--mv-card-bg) !important;
  color: var(--mv-content-text) !important;
  border-radius: 6px !important;
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
  background: var(--mv-primary) !important;
  color: #fff !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--mv-primary) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  background-color: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 10px !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td span.active {
  background-color: var(--mv-primary) !important;
}

/* ===== WELCOME SCREEN ===== */
.wrapper-content.welcome {
  background-color: var(--mv-content-bg) !important;
}

.wrapper-content.welcome h4 { color: var(--mv-content-text) !important; }

/* ===== PERMISSIONS TABLE ===== */
#permiso_resp {
  background-color: var(--mv-card-bg) !important;
  color: var(--mv-content-text) !important;
}

#permiso_resp thead {
  background-color: var(--mv-primary) !important;
}

/* ===== DARK/LIGHT TOGGLE ===== */
.mv-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 14px;
  vertical-align: middle;
}

.mv-theme-toggle-btn {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--mv-toggle-bg);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  padding: 0;
  vertical-align: middle;
}

.mv-theme-toggle-btn::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .mv-theme-toggle-btn { background: var(--mv-primary); }
[data-theme="dark"] .mv-theme-toggle-btn::after { transform: translateX(16px); }

.mv-theme-icon {
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* ===== JQUERY DATATABLES ===== */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  color: var(--mv-content-text) !important;
  border-radius: 6px !important;
}

.dataTables_info { color: var(--mv-text-muted) !important; }

/* ===== ERROR PAGES ===== */
body.wrapper-page-error {
  background-color: var(--mv-content-bg) !important;
  color: var(--mv-content-text) !important;
}

/* ===== SUPERVISION BADGES ===== */
.badge.agent-ready { background: #22c55e !important; }
.badge.agent-oncall { background: #a855f7 !important; }
.badge.agent-dialing { background: #06b6d4 !important; }
.badge.agent-pause { background: #f59e0b !important; }
.badge.agent-offline { background: #6b7280 !important; }

/* ===== SweetAlert2 ===== */
.swal2-popup {
  background-color: var(--mv-modal-bg) !important;
  color: var(--mv-content-text) !important;
  border-radius: 12px !important;
}

.swal2-title { color: var(--mv-content-text) !important; }

.swal2-styled.swal2-confirm {
  background: var(--mv-gradient) !important;
  border-radius: 8px !important;
}

/* ===== MISC OVERRIDES ===== */
.oml-table-bg {
  background: var(--mv-table-header-bg) !important;
  color: var(--mv-content-text) !important;
}

.card {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--mv-card-shadow);
  transition: all 0.2s ease;
}

.card:hover { box-shadow: var(--mv-card-shadow-hover); }
.card-header {
  background: var(--mv-table-header-bg) !important;
  border-bottom: 1px solid var(--mv-surface-border) !important;
}
.card-body { color: var(--mv-content-text) !important; }

/* Collapsible table button */
.btn-collapse-table { color: var(--mv-content-text) !important; }

/* Wrapper table */
.wrapper-table { color: var(--mv-content-text) !important; }

/* Links in content area */
.wrapper-info a { transition: color 0.15s ease; }

/* ===== TRANSITIONS ===== */
* {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0s;
}

#topbar, #topbar *,
.wrapper-content, .wrapper-info,
.form-control, .table, .table *, .btn,
.modal-content, .dropdown-menu, .card,
.jumbotron, label, input, select, textarea,
.badge, .page-link, .alert, .nav-link,
.swal2-popup, body {
  transition-duration: 0.25s !important;
  transition-timing-function: ease !important;
}

/* ===== DIALER DASHBOARD PREMIUM REDESIGN ===== */
.table-premium {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  background: transparent !important;
  border: none !important;
}

.table-premium thead tr.header-premium th {
  background: var(--mv-card-bg) !important;
  color: var(--mv-text-muted) !important;
  border: none !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 14px 10px !important;
  font-weight: 600;
  vertical-align: middle;
}

.table-premium tbody tr {
  background: var(--mv-card-bg) !important;
  border-radius: 12px !important;
  box-shadow: var(--mv-card-shadow);
  transition: all 0.25s ease !important;
}

.table-premium tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: var(--mv-card-shadow-hover);
  background: var(--mv-primary-muted) !important;
}

.table-premium tbody td {
  border: none !important;
  padding: 14px 10px !important;
  vertical-align: middle;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mv-content-text) !important;
}

.table-premium tbody td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.table-premium tbody td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Base Pill Style */
.metavoz-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 40px;
  transition: all 0.2s ease;
}

.table-premium tbody tr:hover .metavoz-pill {
  transform: scale(1.05);
}

/* Specific Pill Variants */
.pill-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.pill-success-glow {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.pill-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.pill-danger-glow {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.pill-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.pill-info {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #06b6d4 !important;
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.pill-primary {
  background: var(--mv-primary-muted) !important;
  color: var(--mv-primary) !important;
  border: 1px solid rgba(247, 24, 131, 0.2);
}

.pill-light {
  background: var(--mv-surface-bg) !important;
  color: var(--mv-text-muted) !important;
  border: 1px solid var(--mv-surface-border);
}

[data-theme="dark"] .pill-success-glow { color: #4ade80 !important; box-shadow: 0 0 12px rgba(74, 222, 128, 0.15); }
[data-theme="dark"] .pill-danger-glow  { color: #f87171 !important; box-shadow: 0 0 12px rgba(248, 113, 113, 0.15); }
[data-theme="dark"] .pill-success { color: #4ade80 !important; border-color: rgba(74, 222, 128, 0.3) !important; }
[data-theme="dark"] .pill-danger  { color: #f87171 !important; border-color: rgba(248, 113, 113, 0.3) !important; }
[data-theme="dark"] .pill-warning { color: #fbbf24 !important; border-color: rgba(251, 191, 36, 0.3) !important; }
[data-theme="dark"] .pill-info    { color: #22d3ee !important; border-color: rgba(34, 211, 238, 0.3) !important; }
[data-theme="dark"] .pill-primary { color: var(--mv-primary-light) !important; border-color: rgba(250, 77, 160, 0.3) !important; }

/* ============================================================
   MetaVoz Form Wizards & Input Standardization
   ============================================================ */
.mv-form-card {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: 20px;
  box-shadow: var(--mv-card-shadow-hover);
  padding: 36px 48px;
  margin: 0 auto 3rem auto;
  max-width: 900px;
  width: 100%;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (max-width: 768px) {
  .mv-form-card { padding: 24px; border-radius: 12px; }
}

.mv-input-group {
  margin-bottom: 24px;
  position: relative;
}

.mv-input-group label {
  color: var(--mv-content-text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: inline-block;
  letter-spacing: -0.01em;
}

/* Base input styling overriding Bootstrap */
.mv-input-group input:not([type="checkbox"]):not([type="radio"]), 
.mv-input-group select, 
.mv-input-group textarea {
  width: 100%;
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 12px !important;
  color: var(--mv-content-text) !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
}

.mv-input-group input:focus, 
.mv-input-group select:focus, 
.mv-input-group textarea:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 4px var(--mv-input-focus-ring) !important;
  outline: none !important;
}

/* Error states */
.mv-input-group.has-error input {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

/* Help text styling */
.mv-help-text {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--mv-text-muted);
  font-style: italic;
  opacity: 0.85;
}

/* ============================================================
   MetaVoz Stepper (Progress Bar)
   ============================================================ */

/* Sprint 2 C1 — wrapper nav del stepper en wizard_base.html */
.mv-wizard-nav {
  margin: var(--mv-space-4) 0 var(--mv-space-5) 0;
  overflow-x: auto;
}
.mv-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.mv-stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mv-input-border);
  z-index: -1;
  transform: translateY(-50%);
}

.mv-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--mv-card-bg);
  padding: 0 16px;
}

.mv-step-bubble {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mv-input-bg);
  border: 2px solid var(--mv-input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--mv-text-muted);
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.mv-step-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Active Step */
.mv-step.active .mv-step-bubble {
  background: var(--mv-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(247, 24, 131, 0.3);
  transform: scale(1.1);
}
.mv-step.active .mv-step-label {
  color: var(--mv-primary);
  font-weight: 700;
}

/* Completed Step */
.mv-step.completed .mv-step-bubble {
  background: var(--mv-surface-bg);
  border-color: var(--mv-primary);
  color: var(--mv-primary);
}

/* Stepper Connection Active Line */
.mv-stepper-progress {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: var(--mv-gradient);
  z-index: -1;
  transition: width 0.4s ease;
  transform: translateY(-50%);
}

/* ============================================================
   MetaVoz Enhanced Buttons
   ============================================================ */
.btn-mv-primary {
  background: var(--mv-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(247, 24, 131, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-mv-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(247, 24, 131, 0.4) !important;
  color: #ffffff !important;
}

.btn-mv-outline {
  background: transparent !important;
  color: var(--mv-text-muted) !important;
  border: 2px solid var(--mv-input-border) !important;
  border-radius: 12px !important;
  padding: 10px 26px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer;
}
.btn-mv-outline:hover {
  background: var(--mv-surface-bg) !important;
  color: var(--mv-content-text) !important;
  border-color: var(--mv-text-muted) !important;
}

.mv-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mv-card-border);
}

/* ============================================================
   MetaVoz DataTables Overrides
   ============================================================ */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 20px;
}
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 8px !important;
  color: var(--mv-content-text) !important;
  padding: 8px 16px !important;
  margin-left: 10px;
  font-size: 0.9rem !important;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02) inset;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 4px var(--mv-input-focus-ring) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_length {
  margin-bottom: 20px;
  color: var(--mv-text-muted);
}
.dataTables_wrapper .dataTables_length select {
  background-color: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: 8px !important;
  color: var(--mv-content-text) !important;
  padding: 6px 12px !important;
  margin: 0 10px;
  font-size: 0.9rem !important;
}
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 4px var(--mv-input-focus-ring) !important;
}

/* Pagination Overrides */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  color: var(--mv-text-muted) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  margin: 0 2px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--mv-surface-bg) !important;
  color: var(--mv-content-text) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--mv-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(247, 24, 131, 0.25) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dataTables_info {
  margin-top: 20px;
  color: var(--mv-text-muted) !important;
  font-size: 0.85rem;
}

/* ============================================================
   MetaVoz Django Native Pagination Overrides (for normal tables)
   ============================================================ */
.pagination {
  margin-top: 20px !important;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.pagination.pagination-centered {
  justify-content: flex-end; /* Actually push it to the right like DataTables */
  width: 100%;
}
.pagination .page-item .page-link {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-card-border) !important;
  color: var(--mv-text-muted) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  margin: 0 2px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}
.pagination .page-item:not(.disabled) .page-link:hover {
  background: var(--mv-surface-bg) !important;
  color: var(--mv-content-text) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
  background: var(--mv-gradient) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(247, 24, 131, 0.25) !important;
}
.pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   MetaVoz Global Checkboxes to Modern Toggle Switches
   ============================================================ */
.mv-form-card input[type="checkbox"],
.mv-input-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 20px !important;
  background-color: var(--mv-input-border);
  position: relative;
  outline: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
  flex-shrink: 0;
  vertical-align: middle;
  border: none !important;
  margin: 0 !important;
}

.mv-form-card input[type="checkbox"]::after,
.mv-input-group input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.mv-form-card input[type="checkbox"]:checked,
.mv-input-group input[type="checkbox"]:checked {
  background: var(--mv-gradient) !important;
}

.mv-form-card input[type="checkbox"]:checked::after,
.mv-input-group input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.mv-form-card input[type="checkbox"]:focus,
.mv-input-group input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px var(--mv-input-focus-ring) !important;
}

/* ============================================================
   OVERRIDE — Data table checkboxes stay as native checkboxes
   ------------------------------------------------------------
   mv-form-card converts checkboxes to toggle switches, which is
   correct for FORMS where checkbox = boolean setting (e.g.
   "Auto unpause: ON/OFF"). But inside admin LIST tables (.mv-table)
   checkboxes are SELECTION indicators, not boolean settings.
   This restores native checkbox appearance for those cases.
   ============================================================ */
.mv-form-card .mv-table input[type="checkbox"],
.mv-form-card table.table input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  border-radius: 3px !important;
  background-color: transparent;
  box-shadow: none !important;
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--mv-primary);
  margin: 0 !important;
  border: 1px solid var(--mv-input-border) !important;
}
.mv-form-card .mv-table input[type="checkbox"]::after,
.mv-form-card table.table input[type="checkbox"]::after {
  content: none;
}
.mv-form-card .mv-table input[type="checkbox"]:focus-visible,
.mv-form-card table.table input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--mv-primary);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Fix help_text next to Toggles */
.form-text.text-muted {
  font-size: 0.8rem;
  color: var(--mv-text-muted) !important;
  display: block;
  margin-top: 6px;
}

/* ============================================================================
   METAVOZ DESIGN SYSTEM EXTENSIONS — Phase 1 of admin redesign
   Added 2026-04-09 — see docs/metavoz_redesign/REDESIGN_ADMIN_PROPOSAL.md
   ============================================================================
   These additions are 100% additive. Nothing above this line is touched.
   They use existing --mv-* tokens plus a small set of new semantic tokens
   (success/danger/warning/info) and a spacing/radius/motion scale.

   Sections:
   4.0  Semantic tokens + scales
   4.1  Page header
   4.2  Breadcrumbs
   4.3  Fieldsets
   4.4  Validation states
   4.5  Empty state
   4.6  Skeleton loader
   4.7  Toast notifications
   4.8  Search input
   4.9  Filter chips
   4.10 Bulk action toolbar
   4.11 Sort indicators + row icon buttons + semantic badges
   4.12 Unsaved changes indicator + sticky actions
   4.13 Roles matrix new layout (master-detail)
   ============================================================================ */

/* ===== 4.0 SEMANTIC COLOR TOKENS + SCALES (new) ===== */
:root {
  --mv-success: #16a34a;
  --mv-success-bg: rgba(34, 197, 94, 0.10);
  --mv-success-border: rgba(34, 197, 94, 0.25);
  --mv-danger: #dc2626;
  --mv-danger-bg: rgba(239, 68, 68, 0.10);
  --mv-danger-border: rgba(239, 68, 68, 0.25);
  --mv-warning: #d97706;
  --mv-warning-bg: rgba(245, 158, 11, 0.10);
  --mv-warning-border: rgba(245, 158, 11, 0.25);
  --mv-info: #0891b2;
  --mv-info-bg: rgba(6, 182, 212, 0.10);
  --mv-info-border: rgba(6, 182, 212, 0.25);

  /* Spacing scale (4px base) */
  --mv-space-1: 4px;
  --mv-space-2: 8px;
  --mv-space-3: 12px;
  --mv-space-4: 16px;
  --mv-space-5: 24px;
  --mv-space-6: 32px;
  --mv-space-7: 48px;
  --mv-space-8: 64px;

  /* Radius scale */
  --mv-radius-sm: 6px;
  --mv-radius-md: 8px;
  --mv-radius-lg: 12px;
  --mv-radius-xl: 16px;
  --mv-radius-pill: 999px;

  /* Motion */
  --mv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mv-duration-fast: 150ms;
  --mv-duration-base: 250ms;
  --mv-duration-slow: 400ms;
}

[data-theme="dark"] {
  --mv-success: #4ade80;
  --mv-success-bg: rgba(34, 197, 94, 0.14);
  --mv-success-border: rgba(74, 222, 128, 0.30);
  --mv-danger: #f87171;
  --mv-danger-bg: rgba(239, 68, 68, 0.14);
  --mv-danger-border: rgba(248, 113, 113, 0.30);
  --mv-warning: #fbbf24;
  --mv-warning-bg: rgba(245, 158, 11, 0.14);
  --mv-warning-border: rgba(251, 191, 36, 0.30);
  --mv-info: #22d3ee;
  --mv-info-bg: rgba(6, 182, 212, 0.14);
  --mv-info-border: rgba(34, 211, 238, 0.30);
}

/* ===== 4.1 PAGE HEADER ===== */
.mv-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mv-space-5);
  padding: var(--mv-space-5) 0 var(--mv-space-5) 0;
  margin-bottom: var(--mv-space-5);
  border-bottom: 1px solid var(--mv-surface-border);
  flex-wrap: wrap;
}
.mv-page-header__titles {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-1);
  min-width: 0;
}
.mv-page-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mv-content-text);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
.mv-page-header__title .fas,
.mv-page-header__title .far {
  color: var(--mv-primary);
  font-size: 1.25rem;
}
.mv-page-header__subtitle {
  font-size: 0.88rem;
  color: var(--mv-text-muted);
  margin: 0;
  font-weight: 400;
}
.mv-page-header__actions {
  display: flex;
  gap: var(--mv-space-3);
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .mv-page-header { flex-direction: column; align-items: stretch; }
  .mv-page-header__actions { width: 100%; }
}

/* ===== 4.2 BREADCRUMB ===== */
.mv-breadcrumb {
  display: flex;
  gap: var(--mv-space-2);
  font-size: 0.78rem;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-2);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.mv-breadcrumb li { display: flex; align-items: center; gap: var(--mv-space-2); }
.mv-breadcrumb li + li::before {
  content: '/';
  color: var(--mv-surface-border);
  font-weight: 400;
}
.mv-breadcrumb a {
  color: var(--mv-text-muted);
  text-decoration: none;
  transition: color var(--mv-duration-fast) var(--mv-ease);
}
.mv-breadcrumb a:hover { color: var(--mv-primary); }
.mv-breadcrumb li[aria-current="page"] {
  color: var(--mv-content-text);
  font-weight: 500;
}

/* ===== 4.3 FORM FIELDSETS ===== */
.mv-fieldset {
  border: 1px solid var(--mv-surface-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5) var(--mv-space-6);
  margin: 0 0 var(--mv-space-5) 0;
  background: var(--mv-surface-bg);
  transition: border-color var(--mv-duration-base) var(--mv-ease);
}
.mv-fieldset:hover { border-color: var(--mv-input-border); }
.mv-fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: 0 var(--mv-space-3);
  margin-left: calc(var(--mv-space-3) * -1);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mv-content-text);
  width: auto;
  border: 0;
  margin-bottom: var(--mv-space-4);
}
.mv-fieldset__legend .fas { color: var(--mv-primary); font-size: 0.95rem; }
.mv-fieldset__description {
  font-size: 0.82rem;
  color: var(--mv-text-muted);
  margin: calc(var(--mv-space-3) * -1) 0 var(--mv-space-4) 0;
  padding-left: var(--mv-space-6);
}
.mv-fieldset__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mv-space-4) var(--mv-space-5);
}
.mv-fieldset__grid--2 { grid-template-columns: repeat(2, 1fr); }
.mv-fieldset__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .mv-fieldset__grid,
  .mv-fieldset__grid--2,
  .mv-fieldset__grid--3 { grid-template-columns: 1fr; }
}
.mv-fieldset .mv-input-group[data-depends-on] {
  position: relative;
  padding-left: var(--mv-space-5);
  border-left: 2px solid var(--mv-surface-border);
  transition: border-color var(--mv-duration-base) var(--mv-ease);
}
.mv-fieldset .mv-input-group[data-depends-on].is-enabled {
  border-left-color: var(--mv-primary);
}
.mv-fieldset .mv-input-group[data-depends-on]:not(.is-enabled) {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== 4.4 FORM VALIDATION STATES ===== */
.mv-input-group .mv-help,
.mv-input-group .mv-error {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: 0.78rem;
  margin-top: var(--mv-space-2);
  line-height: 1.35;
}
.mv-input-group .mv-help { color: var(--mv-text-muted); }
.mv-input-group .mv-error { color: var(--mv-danger); }
.mv-input-group .mv-error .fas { font-size: 0.75rem; }

.mv-input-group.has-error input:not([type="checkbox"]),
.mv-input-group.has-error select,
.mv-input-group.has-error textarea {
  border-color: var(--mv-danger) !important;
  box-shadow: 0 0 0 4px var(--mv-danger-bg) !important;
}
.mv-input-group.has-success input:not([type="checkbox"]),
.mv-input-group.has-success select,
.mv-input-group.has-success textarea {
  border-color: var(--mv-success) !important;
}
.mv-input-group label .mv-required {
  color: var(--mv-danger);
  margin-left: 2px;
  font-weight: 700;
}

/* ===== 4.5 EMPTY STATE ===== */
.mv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-8) var(--mv-space-5);
  text-align: center;
  background: var(--mv-card-bg);
  border: 1px dashed var(--mv-surface-border);
  border-radius: var(--mv-radius-xl);
  gap: var(--mv-space-4);
  min-height: 320px;
}
.mv-empty-state__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mv-gradient-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-primary);
  font-size: 28px;
  margin-bottom: var(--mv-space-2);
}
.mv-empty-state__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mv-content-text);
  margin: 0;
}
.mv-empty-state__description {
  font-size: 0.9rem;
  color: var(--mv-text-muted);
  max-width: 420px;
  margin: 0;
  line-height: 1.5;
}
.mv-empty-state__actions { display: flex; gap: var(--mv-space-3); margin-top: var(--mv-space-3); }
.mv-empty-state--search .mv-empty-state__icon { background: var(--mv-surface-bg); color: var(--mv-text-muted); }

/* ===== 4.6 SKELETONS ===== */
.mv-skeleton {
  background: linear-gradient(90deg, var(--mv-surface-bg) 0%, var(--mv-badge-bg) 50%, var(--mv-surface-bg) 100%);
  background-size: 200% 100%;
  animation: mv-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--mv-radius-sm);
  display: inline-block;
}
.mv-skeleton--text { height: 14px; width: 100%; }
.mv-skeleton--title { height: 22px; width: 40%; }
.mv-skeleton--row { height: 44px; width: 100%; border-radius: var(--mv-radius-md); margin-bottom: var(--mv-space-2); }
.mv-skeleton--avatar { width: 32px; height: 32px; border-radius: 50%; }
@keyframes mv-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-skeleton { animation: none; }
}

/* ===== 4.7 TOASTS ===== */
.mv-toast-container {
  position: fixed;
  top: 72px;
  right: var(--mv-space-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  max-width: 400px;
  pointer-events: none;
}
.mv-toast {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  padding: var(--mv-space-4) var(--mv-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-3);
  pointer-events: auto;
  animation: mv-toast-in var(--mv-duration-base) var(--mv-ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 3px solid var(--mv-info);
}
.mv-toast--success { border-left-color: var(--mv-success); }
.mv-toast--danger { border-left-color: var(--mv-danger); }
.mv-toast--warning { border-left-color: var(--mv-warning); }
.mv-toast__icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.mv-toast--success .mv-toast__icon { color: var(--mv-success); }
.mv-toast--danger .mv-toast__icon { color: var(--mv-danger); }
.mv-toast--warning .mv-toast__icon { color: var(--mv-warning); }
.mv-toast--info .mv-toast__icon { color: var(--mv-info); }
.mv-toast__body { flex: 1; min-width: 0; }
.mv-toast__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mv-content-text);
  margin: 0 0 2px 0;
}
.mv-toast__message {
  font-size: 0.82rem;
  color: var(--mv-text-muted);
  margin: 0;
  line-height: 1.4;
}
.mv-toast__close {
  background: none;
  border: none;
  color: var(--mv-text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: 0.85rem;
  border-radius: 4px;
}
.mv-toast__close:hover { color: var(--mv-content-text); }
.mv-toast.is-leaving { animation: mv-toast-out var(--mv-duration-base) var(--mv-ease) forwards; }
@keyframes mv-toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes mv-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}
@media (prefers-reduced-motion: reduce) {
  .mv-toast { animation: none; }
  .mv-toast.is-leaving { animation: none; }
}

/* ===== 4.8 SEARCH INPUT ===== */
.mv-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 280px;
  max-width: 100%;
}
.mv-search__icon {
  position: absolute;
  left: var(--mv-space-4);
  color: var(--mv-text-muted);
  pointer-events: none;
  font-size: 0.85rem;
  z-index: 2;
}
.mv-search input[type="text"],
.mv-search input[type="search"] {
  width: 100%;
  padding: 10px 40px 10px 40px !important;
  border-radius: var(--mv-radius-pill) !important;
  background: var(--mv-input-bg) !important;
  border: 1px solid var(--mv-input-border) !important;
  font-size: 0.85rem !important;
  transition: all var(--mv-duration-fast) var(--mv-ease);
}
.mv-search input:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 4px var(--mv-input-focus-ring) !important;
}
.mv-search__clear {
  position: absolute;
  right: var(--mv-space-3);
  background: none;
  border: none;
  color: var(--mv-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: none;
  font-size: 0.75rem;
}
.mv-search.has-value .mv-search__clear { display: block; }
.mv-search__clear:hover { color: var(--mv-danger); background: var(--mv-danger-bg); }

/* ===== 4.9 FILTER CHIPS ===== */
.mv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-2);
  align-items: center;
}
.mv-chips__label {
  font-size: 0.78rem;
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.mv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: 4px 4px 4px 12px;
  background: var(--mv-primary-muted);
  color: var(--mv-primary);
  border: 1px solid rgba(247, 24, 131, 0.2);
  border-radius: var(--mv-radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
}
.mv-chip__remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  opacity: 0.7;
  font-size: 0.72rem;
}
.mv-chip__remove:hover { opacity: 1; background: rgba(247, 24, 131, 0.15); }

/* ===== 4.10 BULK ACTION TOOLBAR ===== */
.mv-bulk-bar {
  position: sticky;
  top: 54px;
  z-index: 4;
  background: var(--mv-gradient);
  color: white;
  padding: var(--mv-space-3) var(--mv-space-5);
  border-radius: var(--mv-radius-lg);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  box-shadow: 0 8px 24px rgba(247, 24, 131, 0.25);
  margin-bottom: var(--mv-space-4);
  animation: mv-bulk-in var(--mv-duration-base) var(--mv-ease);
}
.mv-bulk-bar.is-active { display: flex; }
.mv-bulk-bar__count {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-bulk-bar__actions { display: flex; gap: var(--mv-space-2); }
.mv-bulk-bar .btn-mv-bulk {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 14px;
  border-radius: var(--mv-radius-md);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mv-duration-fast) var(--mv-ease);
  display: inline-flex;
  gap: var(--mv-space-2);
  align-items: center;
}
.mv-bulk-bar .btn-mv-bulk:hover { background: rgba(255, 255, 255, 0.25); }
.mv-bulk-bar .btn-mv-bulk--danger {
  background: rgba(255, 255, 255, 0.95);
  color: var(--mv-danger);
  border-color: transparent;
}
@keyframes mv-bulk-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 4.11 SORTABLE COLUMN HEADERS + ROW ICON BUTTONS + BADGES ===== */
.mv-table th.is-sortable {
  cursor: pointer;
  user-select: none;
  padding-right: var(--mv-space-6) !important;
  position: relative;
}
.mv-table th.is-sortable::after {
  content: '\f0dc';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: var(--mv-space-3);
  opacity: 0.3;
  font-size: 0.7rem;
  transition: opacity var(--mv-duration-fast);
}
.mv-table th.is-sortable:hover::after { opacity: 0.7; }
.mv-table th.is-sorted-asc::after { content: '\f0de'; opacity: 1; color: var(--mv-primary); }
.mv-table th.is-sorted-desc::after { content: '\f0dd'; opacity: 1; color: var(--mv-primary); }

.mv-row-actions {
  display: inline-flex;
  gap: var(--mv-space-1);
  align-items: center;
}
.mv-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--mv-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f7 !important;
  border: 1px solid #d1d1d6 !important;
  color: #1d1d1f !important;
  cursor: pointer;
  transition: all var(--mv-duration-fast) var(--mv-ease);
  font-size: 0.9rem;
  text-decoration: none !important;
}
.mv-icon-btn:hover {
  background: var(--mv-primary-muted);
  border-color: var(--mv-primary);
  color: var(--mv-primary);
  text-decoration: none;
  transform: translateY(-1px);
}
.mv-icon-btn:focus-visible {
  outline: 2px solid var(--mv-primary);
  outline-offset: 2px;
}
.mv-icon-btn--primary:hover { color: var(--mv-primary); border-color: var(--mv-primary); background: var(--mv-primary-muted); }
.mv-icon-btn--danger:hover { color: var(--mv-danger); border-color: var(--mv-danger); background: var(--mv-danger-bg); }
.mv-icon-btn--warning:hover { color: var(--mv-warning); border-color: var(--mv-warning); background: var(--mv-warning-bg); }

.mv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: 4px 10px;
  border-radius: var(--mv-radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
}
.mv-badge--success { background: var(--mv-success-bg); color: var(--mv-success); border-color: var(--mv-success-border); }
.mv-badge--danger { background: var(--mv-danger-bg); color: var(--mv-danger); border-color: var(--mv-danger-border); }
.mv-badge--warning { background: var(--mv-warning-bg); color: var(--mv-warning); border-color: var(--mv-warning-border); }
.mv-badge--info { background: var(--mv-info-bg); color: var(--mv-info); border-color: var(--mv-info-border); }
.mv-badge--neutral { background: var(--mv-surface-bg); color: var(--mv-text-muted); border-color: var(--mv-surface-border); }

.btn-mv-sm { padding: 6px 14px !important; font-size: 0.8rem !important; }

/* ===== 4.12 UNSAVED CHANGES INDICATOR + STICKY ACTIONS ===== */
.mv-unsaved-indicator {
  display: none;
  align-items: center;
  gap: var(--mv-space-2);
  padding: 6px 14px;
  background: var(--mv-warning-bg);
  color: var(--mv-warning);
  border: 1px solid var(--mv-warning-border);
  border-radius: var(--mv-radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
}
.mv-unsaved-indicator.is-dirty { display: inline-flex; }
.mv-unsaved-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mv-warning);
  animation: mv-pulse 2s ease-in-out infinite;
}
@keyframes mv-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.mv-sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--mv-card-bg);
  border-top: 1px solid var(--mv-surface-border);
  padding: var(--mv-space-4) var(--mv-space-5);
  margin: var(--mv-space-5) calc(var(--mv-space-6) * -1) calc(var(--mv-space-5) * -1) calc(var(--mv-space-6) * -1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mv-space-4);
  z-index: 3;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 var(--mv-radius-lg) var(--mv-radius-lg);
}
.mv-sticky-actions__hint { font-size: 0.82rem; color: var(--mv-text-muted); display: flex; align-items: center; gap: var(--mv-space-2); }

/* ===== 4.13 ROLES MATRIX (master-detail layout) ===== */
.mv-roles-layout .table_permisos { display: block; overflow-x: visible; }
.mv-roles-layout .sticky_column,
.mv-roles-layout #main_grid,
.mv-roles-layout #permiso_resp { display: none; }

.mv-roles-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--mv-space-5);
  min-height: 70vh;
}
.mv-roles-layout__sidebar {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  min-height: 0;
}
.mv-roles-layout__sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--mv-space-3);
  border-bottom: 1px solid var(--mv-surface-border);
}
.mv-roles-layout__roles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 60vh;
}
.mv-role-item {
  padding: var(--mv-space-3) var(--mv-space-4);
  border-radius: var(--mv-radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mv-space-3);
  cursor: pointer;
  transition: all var(--mv-duration-fast) var(--mv-ease);
  border: 1px solid transparent;
}
.mv-role-item:hover { background: var(--mv-surface-bg); }
.mv-role-item.is-active {
  background: var(--mv-primary-muted);
  border-color: rgba(247, 24, 131, 0.2);
  color: var(--mv-primary);
  font-weight: 600;
}
.mv-role-item__name { font-size: 0.88rem; }
.mv-role-item__count {
  font-size: 0.72rem;
  color: var(--mv-text-muted);
  background: var(--mv-badge-bg);
  padding: 2px 8px;
  border-radius: var(--mv-radius-pill);
}
.mv-role-item.is-immutable .mv-role-item__name::before {
  content: '\f023';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: var(--mv-space-2);
  color: var(--mv-text-muted);
  font-size: 0.7rem;
}

.mv-roles-layout__main {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}
.mv-permission-group {
  border: 1px solid var(--mv-surface-border);
  border-radius: var(--mv-radius-md);
  overflow: hidden;
}
.mv-permission-group__header {
  padding: var(--mv-space-3) var(--mv-space-4);
  background: var(--mv-surface-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.mv-permission-group__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mv-content-text);
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-permission-group__body {
  padding: var(--mv-space-2) var(--mv-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mv-space-2);
}
.mv-permission-group.is-collapsed .mv-permission-group__body { display: none; }
.mv-permission-item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-2) var(--mv-space-3);
  border-radius: var(--mv-radius-sm);
  transition: background var(--mv-duration-fast) var(--mv-ease);
}
.mv-permission-item:hover { background: var(--mv-surface-bg); }
.mv-permission-item label {
  margin: 0 !important;
  font-size: 0.82rem !important;
  color: var(--mv-content-text) !important;
  cursor: pointer;
  flex: 1;
}

@media (max-width: 992px) {
  .mv-roles-layout { grid-template-columns: 1fr; }
  .mv-roles-layout__sidebar { max-height: 280px; }
}


/* ============================================================================
   HOTFIX 2026-04-11 B — IcoMoon font override
   ============================================================================
   La regla genérica de línea ~99 (`span:not([class*="fa"]) ... { font-family:
   'Inter' !important }`) está pisando el `font-family: 'oml-icons'` que el
   archivo oml-icons.css declara para las clases `icon-*` (IcoMoon). El span
   tiene la clase "icon icon-user" — no contiene "fa", así que el selector
   :not([class*="fa"]) lo matchea y aplica Inter. Inter no tiene los glifos
   de IcoMoon → el browser muestra un fallback glyph (cuadros Unicode) que
   parece una "hamburguesa de guiones apilados".

   Fix: selectores con más especificidad que 'span:not([class*="fa"])' que
   apuntan directamente a los spans con clase icon-* y restauran
   font-family: 'oml-icons'. Especificidad (0,2,1) > (0,1,1).
   ============================================================================ */

span.icon[class*="icon-"],
span[class^="icon-"],
span[class*=" icon-"],
i.icon[class*="icon-"],
i[class^="icon-"],
i[class*=" icon-"] {
  font-family: 'oml-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   SPRINT 2 DIALER — Chunk A — Wizard and list component classes
   ============================================================================
   Clases nuevas para el rediseño de los 4 endpoints del wizard dialer:
   - campana_dialer/list
   - campana_dialer/create (wizard multi-paso)
   - campana_dialer_template/lista/
   - campana_dialer_template/create/

   No modifica ninguna regla existente. Solo agrega.

   Grupos:
   1. .mv-wizard-panel — container del form del wizard
   2. .mv-wizard-summary — panel de review en paso final
   3. .mv-tabs — tabs de estado en listado
   4. .mv-table-toolbar — barra superior de la tabla con search
   5. .mv-table__* — columnas semánticas
   6. .mv-row-actions — acciones inline en filas (extend de 4.11)
   7. .mv-alert — alertas inline en forms
   8. .mv-check-group / .mv-radio-group — layouts de inputs agrupados
   9. .mv-table--stack — responsive cards <768px

   Token approximations (migrate to :root when tokens are added):
   - --mv-text      → var(--mv-content-text)   (no existe como alias corto)
   - --mv-border    → var(--mv-surface-border)  (no existe como alias corto)
   - --mv-shadow-sm → var(--mv-card-shadow)     (no existe escala nombrada)
   - --mv-hover-bg  → var(--mv-surface-bg)      (no existe como token)
   - --mv-font-size-xl / --mv-font-size-sm → valores literales (no hay escala tipográfica tokenizada)
   ============================================================================ */

/* ===== GRUPO 1 — WIZARD PANEL ===== */

.mv-wizard-panel {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-card-shadow);
  padding: var(--mv-space-5) var(--mv-space-6);
  max-width: 1020px;
  width: 100%;
  margin: 0 auto var(--mv-space-6) auto;
}
@media (max-width: 768px) {
  .mv-wizard-panel { padding: var(--mv-space-4); }
}

.mv-wizard-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
  padding-bottom: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-surface-border);
  margin-bottom: var(--mv-space-5);
}

.mv-wizard-panel__title {
  font-size: 1.25rem; /* aproxima --mv-font-size-xl; token no tokenizado */
  font-weight: 600;
  color: var(--mv-content-text); /* alias de --mv-text */
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-wizard-panel__title i {
  color: var(--mv-primary);
  font-size: 1.1rem;
}

.mv-wizard-panel__description {
  font-size: 0.85rem; /* aproxima --mv-font-size-sm; token no tokenizado */
  color: var(--mv-text-muted);
  margin: 0;
}

/* Variante de .mv-form-actions con distribución space-between.
   .mv-form-actions ya existe (flex, justify-content: flex-end, gap: 16px).
   Este override solo cambia la distribución + agrega contenedores laterales. */
.mv-wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mv-space-4);
  margin-top: var(--mv-space-6);
  padding-top: var(--mv-space-5);
  border-top: 1px solid var(--mv-card-border);
  flex-wrap: wrap;
}
.mv-wizard-actions .mv-form-actions__left,
.mv-wizard-actions .mv-form-actions__right {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
@media (max-width: 576px) {
  .mv-wizard-actions { flex-direction: column; align-items: stretch; }
  .mv-wizard-actions .mv-form-actions__left,
  .mv-wizard-actions .mv-form-actions__right { justify-content: center; }
}

/* ===== GRUPO 2 — WIZARD SUMMARY / REVIEW ===== */

.mv-wizard-summary {
  border-left: 4px solid var(--mv-primary);
  padding: var(--mv-space-4);
  /* rgba primary 0.04 — no hay token --mv-primary-bg-subtle; se usa rgba directo */
  background: rgba(247, 24, 131, 0.04);
  border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0;
  margin-bottom: var(--mv-space-5);
}

.mv-wizard-summary__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mv-content-text);
  margin: 0 0 var(--mv-space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-wizard-summary__title i { color: var(--mv-primary); }

/* <dl> en grid 2 columnas. Cada par <dt>/<dd> va envuelto en <div>. */
.mv-summary-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}
.mv-summary-list > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: var(--mv-space-2);
  padding: var(--mv-space-2) 0;
  border-bottom: 1px solid var(--mv-surface-border);
}
.mv-summary-list > div:last-child,
.mv-summary-list > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.mv-summary-list dt {
  font-weight: 500;
  color: var(--mv-text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  margin: 0;
}
.mv-summary-list dd {
  color: var(--mv-content-text);
  font-weight: 500;
  margin: 0;
  font-size: 0.88rem;
  word-break: break-word;
}
@media (max-width: 576px) {
  .mv-summary-list { grid-template-columns: 1fr; }
  .mv-summary-list > div { grid-template-columns: 1fr 1fr; }
}

/* ===== GRUPO 3 — TABS DE ESTADO DE LISTADO ===== */

.mv-tabs {
  display: flex;
  gap: var(--mv-space-2);
  border-bottom: 1px solid var(--mv-surface-border);
  margin-bottom: var(--mv-space-5);
  flex-wrap: wrap;
}

.mv-tab {
  padding: var(--mv-space-2) var(--mv-space-4);
  border-radius: var(--mv-radius-md) var(--mv-radius-md) 0 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--mv-text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  transition: color var(--mv-duration-fast) var(--mv-ease),
              background var(--mv-duration-fast) var(--mv-ease);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.mv-tab:hover {
  color: var(--mv-content-text);
  background: var(--mv-surface-bg); /* aproxima --mv-hover-bg */
  text-decoration: none;
}

.mv-tab.is-active {
  color: var(--mv-primary);
  border-bottom: 2px solid var(--mv-primary);
  margin-bottom: -1px;
  font-weight: 600;
  background: transparent;
}

.mv-tab__count {
  display: inline-block;
  padding: 0 var(--mv-space-2);
  background: var(--mv-surface-bg); /* aproxima --mv-hover-bg */
  border-radius: var(--mv-radius-pill);
  font-size: 0.7rem;
  margin-left: var(--mv-space-2);
  color: var(--mv-text-muted);
  vertical-align: middle;
  line-height: 1.6;
}
.mv-tab.is-active .mv-tab__count {
  background: var(--mv-primary);
  color: #ffffff;
}

.mv-tab-panel { display: none; }
.mv-tab-panel.is-active { display: block; }

/* ===== GRUPO 4 — TABLE TOOLBAR + SEARCH INPUT ===== */

.mv-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  margin-bottom: var(--mv-space-4);
  flex-wrap: wrap;
}

/* Contenedor de search input con icono lupa.
   Nota: ya existe .mv-search (sección 4.8) para la search bar del page header.
   .mv-search-input es una variante más compacta sin pill-radius para uso en toolbars. */
.mv-search-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 260px;
  max-width: 100%;
}
.mv-search-input > i,
.mv-search-input > .fas,
.mv-search-input > .far {
  position: absolute;
  left: var(--mv-space-3);
  color: var(--mv-text-muted);
  pointer-events: none;
  font-size: 0.8rem;
  z-index: 2;
}
.mv-search-input > input[type="text"],
.mv-search-input > input[type="search"] {
  width: 100%;
  padding: 8px var(--mv-space-3) 8px 32px !important;
  border: 1px solid var(--mv-input-border) !important;
  border-radius: var(--mv-radius-md) !important;
  background: var(--mv-input-bg) !important;
  color: var(--mv-content-text) !important;
  font-size: 0.85rem !important;
  transition: border-color var(--mv-duration-fast) var(--mv-ease),
              box-shadow var(--mv-duration-fast) var(--mv-ease);
}
.mv-search-input > input:focus {
  border-color: var(--mv-primary) !important;
  box-shadow: 0 0 0 3px var(--mv-input-focus-ring) !important;
  outline: none !important;
}

/* ===== GRUPO 5 — TABLE SEMANTIC COLUMNS ===== */

/* Celda principal — nombre de entidad con subtítulo */
.mv-table__primary {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.mv-table__primary strong { color: var(--mv-content-text); font-weight: 600; font-size: 0.88rem; }
.mv-table__primary small,
.mv-table__primary .mv-table__muted { font-size: 0.78rem; }

/* Cuando .mv-table__primary es un <a> */
a.mv-table__primary {
  text-decoration: none;
  color: inherit;
  transition: color var(--mv-duration-fast) var(--mv-ease);
}
a.mv-table__primary:hover strong { color: var(--mv-primary); }

/* Texto secundario / muted dentro de celdas */
.mv-table__muted {
  color: var(--mv-text-muted);
  font-size: 0.8rem;
}

/* Columna de acciones — ancho fijo, alineado a la derecha */
.mv-col-actions {
  text-align: right !important;
  width: 190px;
  min-width: 190px;
  white-space: nowrap;
}

/* Columna numérica — alineada a la derecha con dígitos tabulares */
.mv-col-num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* Columna de fechas — sin salto de línea, separadas visualmente */
.mv-col-dates {
  white-space: nowrap;
  font-size: 0.83rem;
  color: var(--mv-text-muted);
}
.mv-col-dates time + time::before,
.mv-col-dates span + span::before {
  content: '·';
  margin: 0 var(--mv-space-2);
  opacity: 0.4;
}

/* ===== GRUPO 6 — ROW ACTIONS, INLINE ELEMENTS, DROPDOWNS ===== */

/* .mv-row-actions ya existe en sección 4.11 como inline-flex gap-1 align-items center.
   Se agrega justify-content: flex-end para uso en .mv-col-actions. */
.mv-col-actions .mv-row-actions,
.mv-row-actions--end {
  justify-content: flex-end;
}

/* Mini link inline dentro de celda */
.mv-inline-link {
  color: var(--mv-primary);
  font-size: 0.75rem;
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--mv-duration-fast) var(--mv-ease);
}
.mv-inline-link:hover { text-decoration: underline; opacity: 0.8; }

/* Dropdown con grupos / headers semánticos */
.mv-dropdown-grouped .dropdown-header {
  color: var(--mv-text-muted) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: var(--mv-space-2) var(--mv-space-3) !important;
  font-weight: 600 !important;
}
.mv-dropdown-grouped .dropdown-divider {
  border-color: var(--mv-surface-border) !important;
  margin: var(--mv-space-1) 0 !important;
}

/* Dropdown item de peligro */
.mv-dropdown-item--danger {
  color: var(--mv-danger) !important;
}
.mv-dropdown-item--danger i,
.mv-dropdown-item--danger .fas,
.mv-dropdown-item--danger .far,
.mv-dropdown-item--danger .icon {
  color: var(--mv-danger) !important;
}
.mv-dropdown-item--danger:hover {
  background-color: var(--mv-danger-bg) !important;
  color: var(--mv-danger) !important;
}

/* ===== GRUPO 7 — ALERTAS INLINE PARA FORMS ===== */

/* Nota: la familia .alert existente (línea ~798) afecta clases Bootstrap (.alert-danger, etc.).
   .mv-alert es una familia completamente separada con prefijo mv- para uso dentro de wizards/forms.
   No hay conflicto de cascade con las reglas existentes. */
.mv-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4) var(--mv-space-5);
  border-left: 4px solid var(--mv-info);
  border-radius: 0 var(--mv-radius-md) var(--mv-radius-md) 0;
  background: var(--mv-info-bg);
  margin-bottom: var(--mv-space-4);
  font-size: 0.88rem;
  line-height: 1.5;
}
.mv-alert > i,
.mv-alert > .fas,
.mv-alert > .far {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
  color: var(--mv-info);
}
.mv-alert > div { flex: 1; min-width: 0; }

.mv-alert--info {
  background: var(--mv-info-bg);
  border-left-color: var(--mv-info);
}
.mv-alert--info > i,
.mv-alert--info > .fas,
.mv-alert--info > .far { color: var(--mv-info); }

.mv-alert--warning {
  background: var(--mv-warning-bg);
  border-left-color: var(--mv-warning);
}
.mv-alert--warning > i,
.mv-alert--warning > .fas,
.mv-alert--warning > .far { color: var(--mv-warning); }

.mv-alert--success {
  background: var(--mv-success-bg);
  border-left-color: var(--mv-success);
}
.mv-alert--success > i,
.mv-alert--success > .fas,
.mv-alert--success > .far { color: var(--mv-success); }

/* ===== GRUPO 8 — CHECK/RADIO GROUPS + INPUT-GROUP VARIANT ===== */

/* Grupo horizontal de checkboxes */
.mv-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-4);
  align-items: center;
}
.mv-check-group label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mv-space-2) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--mv-content-text) !important;
  cursor: pointer;
  margin: 0 !important;
}
/* El checkbox dentro de .mv-check-group no se convierte en toggle —
   usa appearance: auto para preservar el checkbox nativo.
   Aplica cuando .mv-check-group está dentro de .mv-form-card o .mv-input-group
   que normalmente convertirían los checkboxes a toggles. */
.mv-check-group input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  accent-color: var(--mv-primary);
  flex-shrink: 0;
  margin: 0 !important;
  cursor: pointer;
}
.mv-check-group input[type="checkbox"]::after { content: none !important; }

/* Grupo vertical de radio buttons */
.mv-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}
.mv-radio-group label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--mv-space-2) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--mv-content-text) !important;
  cursor: pointer;
  margin: 0 !important;
}
.mv-radio-group input[type="radio"] {
  accent-color: var(--mv-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* Variante de .mv-input-group para cuando el contenido es un check-group inline.
   Hace que el label del grupo ocupe todo el ancho y el check-group quede debajo. */
.mv-input-group--inline-check {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}
.mv-input-group--inline-check > label {
  width: 100%;
}
.mv-input-group--inline-check > .mv-check-group {
  margin-top: var(--mv-space-1);
}

/* ===== GRUPO 9 — RESPONSIVE TABLE STACK ===== */

/* En breakpoints pequeños, convierte la tabla en cards verticales.
   Requiere atributo data-label en cada <td>:
   <td data-label="Nombre">…</td> */
@media (max-width: 768px) {
  .mv-table--stack thead { display: none; }

  .mv-table--stack tbody tr {
    display: block;
    background: var(--mv-card-bg);
    border: 1px solid var(--mv-card-border);
    border-radius: var(--mv-radius-md);
    margin-bottom: var(--mv-space-3);
    padding: var(--mv-space-3);
    box-shadow: var(--mv-card-shadow);
  }

  .mv-table--stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mv-space-3);
    padding: var(--mv-space-2) 0 !important;
    border-top: 1px solid var(--mv-surface-border) !important;
    font-size: 0.85rem;
  }

  .mv-table--stack tbody td:first-child { border-top: 0 !important; }

  .mv-table--stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    min-width: 100px;
  }

  /* Columna de acciones en stack: las acciones van centradas */
  .mv-table--stack tbody td.mv-col-actions {
    justify-content: flex-end;
    text-align: right !important;
  }
  .mv-table--stack tbody td.mv-col-actions::before { display: none; }
}

/* ============================================================================
   SPRINT 2 DIALER — Chunk C7 — Day pills (horario wizard step 5)
   ============================================================================ */

.mv-day-pills {
  display: flex;
  gap: var(--mv-space-2);
  flex-wrap: wrap;
  margin-top: var(--mv-space-2);
}

.mv-day-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--mv-surface-border);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  background: transparent;
  user-select: none;
}

.mv-day-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mv-day-pill span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mv-content-text);
  line-height: 1;
}

.mv-day-pill small {
  font-size: 0.65rem;
  color: var(--mv-text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mv-day-pill:has(input:checked),
.mv-day-pill:hover {
  border-color: var(--mv-primary);
}

.mv-day-pill:has(input:checked) {
  background: var(--mv-primary-muted);
}

.mv-day-pill:has(input:checked) span {
  color: var(--mv-primary);
}

@supports not selector(:has(*)) {
  /* Fallback para browsers sin :has() */
  .mv-day-pill input:checked + span {
    color: var(--mv-primary);
  }
}

/* ============================================================================
   Sprint 2 Reports Redesign — Pygal SVG brand override + KPI grid
   ============================================================================
   Sobreescribe los estilos inline default de pygal (fuente Consolas, paletas
   Material) para que los reportes dialer respeten el brand Metavoz.
*/

svg.pygal-chart,
svg.pygal-chart text,
svg.pygal-chart .title {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
}

svg.pygal-chart .title,
svg.pygal-chart .legends .legend text,
svg.pygal-chart .axis text {
  fill: var(--mv-content-text, #2d2d2d) !important;
}

svg.pygal-chart .axis line,
svg.pygal-chart .axis path,
svg.pygal-chart .guides line {
  stroke: var(--mv-border, #e4e4e4) !important;
}

/* 6-color brand palette — overrides pygal defaults */
svg.pygal-chart .color-0 { fill: var(--mv-primary, #F71883) !important; stroke: var(--mv-primary, #F71883) !important; }
svg.pygal-chart .color-1 { fill: #5b8ff9 !important; stroke: #5b8ff9 !important; }
svg.pygal-chart .color-2 { fill: #29c391 !important; stroke: #29c391 !important; }
svg.pygal-chart .color-3 { fill: #f6bd16 !important; stroke: #f6bd16 !important; }
svg.pygal-chart .color-4 { fill: #9b6bff !important; stroke: #9b6bff !important; }
svg.pygal-chart .color-5 { fill: #5ad8a6 !important; stroke: #5ad8a6 !important; }

svg.pygal-chart .tooltip-box {
  fill: var(--mv-card-bg, #ffffff) !important;
  stroke: var(--mv-border, #cccccc) !important;
}
svg.pygal-chart .tooltip text {
  fill: var(--mv-content-text, #2d2d2d) !important;
}

[data-theme="dark"] svg.pygal-chart .title,
[data-theme="dark"] svg.pygal-chart .axis text,
[data-theme="dark"] svg.pygal-chart .legends .legend text {
  fill: #e5e5e5 !important;
}
[data-theme="dark"] svg.pygal-chart .axis line,
[data-theme="dark"] svg.pygal-chart .axis path,
[data-theme="dark"] svg.pygal-chart .guides line {
  stroke: #444 !important;
}

/* ----------------------------------------------------------------------------
   mv-kpi-grid — tarjetas de KPIs (reemplaza .jumbotron + .display-2)
   ---------------------------------------------------------------------------- */

.mv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mv-space-3, 16px);
  margin: var(--mv-space-4, 24px) 0;
}

.mv-kpi {
  background: var(--mv-card-bg, #ffffff);
  border: 1px solid var(--mv-border, #e4e4e4);
  border-radius: 12px;
  padding: var(--mv-space-4, 20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.mv-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.mv-kpi__icon {
  font-size: 1.2rem;
  color: var(--mv-primary, #F71883);
}

.mv-kpi__value {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--mv-content-text, #2d2d2d);
  line-height: 1.1;
}

.mv-kpi__label {
  font-size: 0.82rem;
  color: var(--mv-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.mv-empty-state__text {
  text-align: center;
  padding: var(--mv-space-5, 32px) 0;
  color: var(--mv-text-muted, #666);
  font-size: 0.95rem;
}

.mv-empty-state__text i {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: var(--mv-border, #ccc);
}

/* ============================================================================
   END OF METAVOZ DESIGN SYSTEM EXTENSIONS — Phase 1
   ============================================================================ */

/* ============================================================================
   DASHBOARD COMMAND CENTER — Phase 2
   All classes prefixed mv-dash- to avoid conflicts with existing components.
   Uses CSS custom properties already defined in the :root block above.
   ============================================================================ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.mv-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.mv-dashboard__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.mv-dashboard__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mv-content-text);
}

.mv-dashboard__subtitle {
  font-size: 14px;
  color: var(--mv-text-muted);
  margin-top: 2px;
}

.mv-dashboard__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mv-dashboard__live-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mv-success, #30d158);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mv-dashboard__live-dot {
  width: 8px;
  height: 8px;
  background: var(--mv-success, #30d158);
  border-radius: 50%;
  display: inline-block;
  animation: mv-dash-pulse 2s infinite;
}

@keyframes mv-dash-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.5); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 6px rgba(48, 209, 88, 0); }
}

.mv-dashboard__time {
  font-size: 13px;
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.mv-grid {
  display: grid;
  gap: 20px;
}

.mv-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mv-grid--2-split {
  grid-template-columns: 1.5fr 1fr;
}

.mv-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.mv-row-gap {
  margin-bottom: 20px;
}

/* ── Card base (dashboard variant, scoped) ───────────────────────────────── */
.mv-card {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-card-border);
  border-radius: 14px;
  box-shadow: var(--mv-card-shadow);
  transition: box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.mv-card:hover {
  box-shadow: var(--mv-card-shadow-hover);
}

.mv-card__body {
  padding: 20px;
}

.mv-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
}

.mv-card__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-muted);
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.mv-kpi {
  position: relative;
}

.mv-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.mv-kpi__icon--agents  { background: rgba(10, 132, 255, 0.10);  color: #0a84ff; }
.mv-kpi__icon--calls   { background: rgba(48, 209, 88, 0.10);   color: #30d158; }
.mv-kpi__icon--campaigns { background: var(--mv-primary-muted); color: var(--mv-primary); }
.mv-kpi__icon--rate    { background: rgba(255, 214, 10, 0.10);  color: #c99400; }

.mv-kpi__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mv-kpi__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-text-muted);
}

.mv-kpi__value-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.mv-kpi__value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--mv-content-text);
  font-variant-numeric: tabular-nums;
}

/* KPI detail bars */
.mv-kpi__detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mv-kpi__detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.mv-kpi__detail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mv-kpi__detail-label {
  color: var(--mv-text-muted);
  min-width: 60px;
}

.mv-kpi__detail-bar {
  flex: 1;
  height: 6px;
  background: #f0f0f2;
  border-radius: 3px;
  overflow: hidden;
}

.mv-kpi__detail-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-kpi__detail-count {
  font-weight: 600;
  color: var(--mv-content-text);
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mv-kpi__mini-chart {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.mv-kpi__sparkline {
  margin-top: 12px;
}

/* Campaign type badges (KPI card 3) */
.mv-kpi__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.mv-badge-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mv-badge-type--inbound  { background: rgba(10, 132, 255, 0.10);  color: #0a84ff; }
.mv-badge-type--dialer   { background: var(--mv-primary-muted);   color: var(--mv-primary); }
.mv-badge-type--manual   { background: rgba(48, 209, 88, 0.10);   color: #1fa340; }
.mv-badge-type--preview  { background: rgba(175, 82, 222, 0.10);  color: #9b4dca; }

.mv-badge-type__count {
  font-weight: 800;
}

/* ── Chart panel (Row 2 left) ────────────────────────────────────────────── */
.mv-chart-panel {
  min-height: 320px;
}

.mv-chart-panel .mv-card__body {
  padding: 16px 20px 20px;
}

.mv-chart__legend {
  display: flex;
  gap: 20px;
}

.mv-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mv-text-muted);
  font-weight: 500;
}

.mv-chart__legend-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

.mv-chart__container {
  position: relative;
  width: 100%;
  height: 200px;
}

.mv-chart__container svg {
  width: 100%;
  height: 100%;
}

.mv-chart__grid-line {
  stroke: #e8e8ed;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.mv-chart__axis-label {
  font-size: 10px;
  fill: #aeaeb2;
  font-family: 'Inter', sans-serif;
}

.mv-chart__y-label {
  font-size: 10px;
  fill: #aeaeb2;
  font-family: 'Inter', sans-serif;
  text-anchor: end;
}

/* Chart placeholder */
.mv-dash-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: #fafafa;
  border-radius: 10px;
  border: 1px dashed #d1d1d6;
}

.mv-dash-placeholder-inner {
  text-align: center;
  padding: 24px;
}

.mv-dash-placeholder-icon {
  font-size: 2rem;
  color: #d1d1d6;
  display: block;
  margin-bottom: 10px;
}

.mv-dash-placeholder-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-text-muted);
  margin: 0 0 4px;
}

.mv-dash-placeholder-sub {
  font-size: 12px;
  color: #aeaeb2;
  margin: 0;
}

/* ── Activity Feed (Row 2 right) ─────────────────────────────────────────── */
.mv-feed {
  display: flex;
  flex-direction: column;
  max-height: 360px;
}

.mv-feed .mv-card__body {
  overflow-y: auto;
  flex: 1;
  padding: 12px 20px 20px;
}

.mv-feed__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f2;
  animation: mv-dash-feed-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-feed__item:last-child {
  border-bottom: none;
}

@keyframes mv-dash-feed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mv-feed__icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.mv-feed__icon--login    { background: rgba(48, 209, 88, 0.10);  color: #30d158; }
.mv-feed__icon--logout   { background: #f0f0f2;                  color: #8e8e93; }
.mv-feed__icon--call     { background: rgba(10, 132, 255, 0.10); color: #0a84ff; }
.mv-feed__icon--campaign { background: var(--mv-primary-muted);  color: var(--mv-primary); }
.mv-feed__icon--pause    { background: rgba(255, 214, 10, 0.10); color: #c99400; }
.mv-feed__icon--qualify  { background: rgba(175, 82, 222, 0.10); color: #9b4dca; }

.mv-feed__text {
  flex: 1;
  min-width: 0;
}

.mv-feed__text p {
  font-size: 13px;
  color: #48484a;
  line-height: 1.4;
  margin: 0;
}

.mv-feed__text strong {
  font-weight: 600;
  color: var(--mv-content-text);
}

.mv-feed__time {
  font-size: 11px;
  color: #aeaeb2;
  white-space: nowrap;
  display: block;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Feed scrollbar */
.mv-feed .mv-card__body::-webkit-scrollbar        { width: 4px; }
.mv-feed .mv-card__body::-webkit-scrollbar-track  { background: transparent; }
.mv-feed .mv-card__body::-webkit-scrollbar-thumb  { background: #d1d1d6; border-radius: 2px; }
.mv-feed .mv-card__body::-webkit-scrollbar-thumb:hover { background: #aeaeb2; }

/* ── Campaign Type Mini-Cards (Row 3 left) ───────────────────────────────── */
.mv-campaign-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.mv-campaign-type {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fafafa;
  border-radius: 10px;
  transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-campaign-type:hover {
  background: #f0f0f2;
}

.mv-campaign-type__icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mv-campaign-type__info {
  flex: 1;
  min-width: 0;
}

.mv-campaign-type__name {
  font-size: 12px;
  font-weight: 600;
  color: #48484a;
}

.mv-campaign-type__count {
  font-size: 11px;
  color: #aeaeb2;
}

.mv-campaign-type__bar {
  width: 100%;
  height: 4px;
  background: #e8e8ed;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.mv-campaign-type__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Donut Chart (Row 3 middle) ──────────────────────────────────────────── */
.mv-donut-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mv-donut {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.mv-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mv-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.mv-donut__center-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--mv-content-text);
  line-height: 1;
}

.mv-donut__center-label {
  font-size: 10px;
  color: #aeaeb2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.mv-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mv-donut-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.mv-donut-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.mv-donut-legend__label {
  color: #636366;
  flex: 1;
}

.mv-donut-legend__value {
  font-weight: 700;
  color: #2c2c2e;
  font-variant-numeric: tabular-nums;
}

/* ── Quick Actions (Row 3 right) ─────────────────────────────────────────── */
.mv-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mv-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
  color: inherit !important;
}

.mv-quick-action:hover {
  background: var(--mv-card-bg);
  border-color: #e8e8ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
  text-decoration: none;
}

.mv-quick-action__icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mv-quick-action__text {
  flex: 1;
}

.mv-quick-action__label {
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2e;
}

.mv-quick-action__desc {
  font-size: 11px;
  color: #aeaeb2;
  margin-top: 1px;
}

.mv-quick-action__arrow {
  color: #d1d1d6;
  font-size: 12px;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-quick-action:hover .mv-quick-action__arrow {
  color: #8e8e93;
  transform: translateX(2px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .mv-grid--4       { grid-template-columns: repeat(2, 1fr); }
  .mv-grid--2-split { grid-template-columns: 1fr; }
  .mv-grid--3       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .mv-grid--4  { grid-template-columns: repeat(2, 1fr); }
  .mv-grid--3  { grid-template-columns: 1fr; }
  .mv-dashboard { padding: 16px 16px 32px; }
  .mv-kpi__value { font-size: 28px; }
  .mv-campaign-types { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .mv-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   END OF DASHBOARD COMMAND CENTER — Phase 2
   ============================================================================ */

/* ============================================================================
   SUPERVISION AGENTES — Option A (KPI Cards + Tabla)
   All classes use the sv- prefix to avoid collision with existing styles.
   ============================================================================ */

/* --- Status tokens (shared with existing :root where already defined) --- */
:root {
  --sv-status-ready:          #22c55e;
  --sv-status-ready-bg:       rgba(34, 197, 94, 0.08);
  --sv-status-ready-border:   rgba(34, 197, 94, 0.15);
  --sv-status-oncall:         #3b82f6;
  --sv-status-oncall-bg:      rgba(59, 130, 246, 0.08);
  --sv-status-oncall-border:  rgba(59, 130, 246, 0.15);
  --sv-status-pause:          #eab308;
  --sv-status-pause-bg:       rgba(234, 179, 8, 0.08);
  --sv-status-pause-border:   rgba(234, 179, 8, 0.15);
  --sv-status-unavail:        #ef4444;
  --sv-status-unavail-bg:     rgba(239, 68, 68, 0.08);
  --sv-status-unavail-border: rgba(239, 68, 68, 0.15);
  --sv-status-ringing:        #8b5cf6;
  --sv-status-ringing-bg:     rgba(139, 92, 246, 0.08);
  --sv-status-ringing-border: rgba(139, 92, 246, 0.15);
  --sv-status-dialing:        #06b6d4;
  --sv-status-dialing-bg:     rgba(6, 182, 212, 0.08);
  --sv-status-dialing-border: rgba(6, 182, 212, 0.15);
}

/* --- Page shell --- */
.sv-page {
  padding: 24px 32px 48px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #1d1d1f;
}

/* --- Page header --- */
.sv-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.sv-page-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sv-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1d1d1f;
  margin: 0;
}

.sv-page-title i {
  color: var(--mv-primary, #f71883);
  margin-right: 8px;
  font-size: 1.2rem;
}

.sv-page-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  padding: 3px 10px;
  border-radius: 20px;
}

.sv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: sv-pulse-dot 2s infinite;
}

@keyframes sv-pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.sv-page-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sv-sip-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.sv-sip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: sv-pulse-dot 2s infinite;
}

.sv-btn-end-call {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.sv-btn-end-call:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.sv-btn-end-call:not(:disabled):hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.sv-last-updated {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #6e6e73;
}

.sv-refresh-icon { transition: transform 150ms ease; }

.sv-spinning {
  animation: sv-spin 0.6s linear 1;
}

@keyframes sv-spin {
  100% { transform: rotate(360deg); }
}

/* --- KPI Grid --- */
.sv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.sv-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow 250ms cubic-bezier(0.16,1,0.3,1), transform 250ms cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
}

.sv-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.sv-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}

.sv-kpi-card--total::before     { background: var(--mv-gradient, linear-gradient(135deg,#f71883,#89468b)); }
.sv-kpi-card--ready::before     { background: var(--sv-status-ready); }
.sv-kpi-card--oncall::before    { background: var(--sv-status-oncall); }
.sv-kpi-card--pause::before     { background: var(--sv-status-pause); }
.sv-kpi-card--unavailable::before { background: var(--sv-status-unavail); }

.sv-kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6e6e73;
  margin-bottom: 8px;
}

.sv-kpi-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.sv-kpi-card--total     .sv-kpi-icon { background: rgba(247,24,131,0.12); color: #f71883; }
.sv-kpi-card--ready     .sv-kpi-icon { background: var(--sv-status-ready-bg); color: var(--sv-status-ready); }
.sv-kpi-card--oncall    .sv-kpi-icon { background: var(--sv-status-oncall-bg); color: var(--sv-status-oncall); }
.sv-kpi-card--pause     .sv-kpi-icon { background: var(--sv-status-pause-bg); color: var(--sv-status-pause); }
.sv-kpi-card--unavailable .sv-kpi-icon { background: var(--sv-status-unavail-bg); color: var(--sv-status-unavail); }

.sv-kpi-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.sv-kpi-card--total       .sv-kpi-value { color: #1d1d1f; }
.sv-kpi-card--ready       .sv-kpi-value { color: var(--sv-status-ready); }
.sv-kpi-card--oncall      .sv-kpi-value { color: var(--sv-status-oncall); }
.sv-kpi-card--pause       .sv-kpi-value { color: var(--sv-status-pause); }
.sv-kpi-card--unavailable .sv-kpi-value { color: var(--sv-status-unavail); }

.sv-kpi-percent {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6e6e73;
  font-variant-numeric: tabular-nums;
}

.sv-kpi-bar {
  height: 4px;
  border-radius: 2px;
  background: #f0f0f2;
  margin-top: 12px;
  overflow: hidden;
}

.sv-kpi-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}

.sv-kpi-bar-fill--ready     { background: var(--sv-status-ready); }
.sv-kpi-bar-fill--oncall    { background: var(--sv-status-oncall); }
.sv-kpi-bar-fill--pause     { background: var(--sv-status-pause); }
.sv-kpi-bar-fill--unavailable { background: var(--sv-status-unavail); }

/* --- Filter bar --- */
.sv-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.sv-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sv-filter-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6e6e73;
  white-space: nowrap;
  margin: 0;
}

.sv-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236e6e73' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  padding: 7px 32px 7px 12px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #1d1d1f;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  min-width: 160px;
}

.sv-filter-select:focus {
  outline: none;
  border-color: #f71883;
  box-shadow: 0 0 0 3px rgba(247,24,131,0.18);
}

.sv-filter-search-wrapper {
  position: relative;
}

.sv-filter-search-wrapper > i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #6e6e73;
  font-size: 12px;
  pointer-events: none;
}

.sv-filter-search {
  background: #ffffff;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  padding: 7px 12px 7px 34px;
  font-size: 0.82rem;
  font-family: inherit;
  color: #1d1d1f;
  transition: border-color 150ms ease, box-shadow 150ms ease, width 150ms ease;
  width: 220px;
}

.sv-filter-search:focus {
  outline: none;
  border-color: #f71883;
  box-shadow: 0 0 0 3px rgba(247,24,131,0.18);
  width: 280px;
}

.sv-filter-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: #6e6e73;
  cursor: pointer;
  padding: 7px 12px;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  background: #ffffff;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  user-select: none;
  margin: 0;
}

.sv-filter-toggle:hover {
  border-color: #f71883;
  color: #f71883;
}

.sv-filter-toggle--active {
  background: rgba(247,24,131,0.06);
  border-color: #f71883;
  color: #f71883;
}

.sv-toggle-switch {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: #d1d1d6;
  position: relative;
  transition: background 150ms ease;
  flex-shrink: 0;
}

.sv-filter-toggle--active .sv-toggle-switch { background: #f71883; }

.sv-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 150ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.sv-filter-toggle--active .sv-toggle-switch::after { transform: translateX(12px); }

.sv-filter-divider {
  width: 1px;
  height: 24px;
  background: #e5e5e7;
  margin: 0 4px;
  flex-shrink: 0;
}

.sv-agent-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: #6e6e73;
  font-variant-numeric: tabular-nums;
}

.sv-agent-count strong {
  color: #1d1d1f;
  font-weight: 600;
}

/* --- Table container --- */
.sv-table-container {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;
}

/* --- Agent table --- */
.sv-agent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.sv-agent-table thead th {
  background: #fafafa;
  border-bottom: 1px solid #e5e5e7;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6e6e73;
  text-align: left;
  white-space: nowrap;
}

.sv-agent-row {
  border-bottom: 1px solid #f0f0f2;
  transition: background 150ms ease;
}

.sv-agent-row:last-child { border-bottom: none; }
.sv-agent-row:hover      { background: rgba(0,0,0,0.015) !important; }

/* Row status tinting */
.sv-row--ready       { background: rgba(34, 197, 94, 0.02); }
.sv-row--ready:hover { background: rgba(34, 197, 94, 0.05) !important; }
.sv-row--oncall      { background: rgba(59, 130, 246, 0.02); }
.sv-row--oncall:hover{ background: rgba(59, 130, 246, 0.05) !important; }
.sv-row--pause       { background: rgba(234, 179, 8, 0.02); }
.sv-row--pause:hover { background: rgba(234, 179, 8, 0.05) !important; }
.sv-row--unavailable { background: rgba(239, 68, 68, 0.02); }
.sv-row--unavailable:hover { background: rgba(239, 68, 68, 0.05) !important; }
.sv-row--ringing     { background: rgba(139, 92, 246, 0.02); }
.sv-row--ringing:hover { background: rgba(139, 92, 246, 0.05) !important; }
.sv-row--dialing     { background: rgba(6, 182, 212, 0.02); }
.sv-row--dialing:hover { background: rgba(6, 182, 212, 0.05) !important; }

.sv-agent-table td {
  padding: 12px 16px;
  vertical-align: middle;
}

/* Agent cell */
.sv-agent-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sv-agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
  position: relative;
}

/* Avatar color palette — deterministic by name hash */
.sv-avatar-1  { background: linear-gradient(135deg,#f71883,#c2185b); }
.sv-avatar-2  { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.sv-avatar-3  { background: linear-gradient(135deg,#22c55e,#15803d); }
.sv-avatar-4  { background: linear-gradient(135deg,#eab308,#a16207); }
.sv-avatar-5  { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.sv-avatar-6  { background: linear-gradient(135deg,#06b6d4,#0e7490); }
.sv-avatar-7  { background: linear-gradient(135deg,#f97316,#c2410c); }
.sv-avatar-8  { background: linear-gradient(135deg,#ec4899,#be185d); }
.sv-avatar-9  { background: linear-gradient(135deg,#14b8a6,#0f766e); }
.sv-avatar-10 { background: linear-gradient(135deg,#89468b,#6b2d6d); }

.sv-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #d1d1d6;
}

.sv-row--ready       .sv-status-dot { background: var(--sv-status-ready); }
.sv-row--oncall      .sv-status-dot { background: var(--sv-status-oncall); }
.sv-row--pause       .sv-status-dot { background: var(--sv-status-pause); }
.sv-row--unavailable .sv-status-dot { background: var(--sv-status-unavail); }
.sv-row--ringing     .sv-status-dot { background: var(--sv-status-ringing); }
.sv-row--dialing     .sv-status-dot { background: var(--sv-status-dialing); }

.sv-agent-name-block { min-width: 0; }

.sv-agent-name {
  font-weight: 500;
  color: #1d1d1f;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Group badge */
.sv-group-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  background: #f2f2f7;
  color: #6e6e73;
}

/* Campaign & contact */
.sv-campaign-name {
  font-weight: 500;
  color: #1d1d1f;
}

.sv-contact-number { color: #6e6e73; font-variant-numeric: tabular-nums; }
.sv-has-contact    { color: #1d1d1f; font-weight: 500; }

/* Status badge */
.sv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sv-status-dot-inline {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sv-status-badge--ready {
  background: var(--sv-status-ready-bg);
  color: #15803d;
  border: 1px solid var(--sv-status-ready-border);
}
.sv-status-badge--ready .sv-status-dot-inline { background: var(--sv-status-ready); }

.sv-status-badge--oncall {
  background: var(--sv-status-oncall-bg);
  color: #1d4ed8;
  border: 1px solid var(--sv-status-oncall-border);
}
.sv-status-badge--oncall .sv-status-dot-inline { background: var(--sv-status-oncall); }

.sv-status-badge--pause {
  background: var(--sv-status-pause-bg);
  color: #a16207;
  border: 1px solid var(--sv-status-pause-border);
}
.sv-status-badge--pause .sv-status-dot-inline { background: var(--sv-status-pause); }

.sv-status-badge--unavailable {
  background: var(--sv-status-unavail-bg);
  color: #b91c1c;
  border: 1px solid var(--sv-status-unavail-border);
}
.sv-status-badge--unavailable .sv-status-dot-inline { background: var(--sv-status-unavail); }

.sv-status-badge--ringing {
  background: var(--sv-status-ringing-bg);
  color: #6d28d9;
  border: 1px solid var(--sv-status-ringing-border);
}
.sv-status-badge--ringing .sv-status-dot-inline {
  background: var(--sv-status-ringing);
  animation: sv-pulse-dot 1s infinite;
}

.sv-status-badge--dialing {
  background: var(--sv-status-dialing-bg);
  color: #0e7490;
  border: 1px solid var(--sv-status-dialing-border);
}
.sv-status-badge--dialing .sv-status-dot-inline { background: var(--sv-status-dialing); }

/* Timer */
.sv-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
  color: #1d1d1f;
}

.sv-timer--warning {
  color: #a16207;
  font-weight: 600;
}

.sv-timer--danger {
  color: #b91c1c;
  font-weight: 700;
  animation: sv-pulse-text 2s infinite;
}

@keyframes sv-pulse-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Actions cell */
.sv-actions-cell {
  display: flex;
  gap: 2px;
  align-items: center;
}

.sv-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6e6e73;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 150ms ease, color 150ms ease;
  position: relative;
  padding: 0;
}

.sv-action-btn:hover { background: #f0f0f2; color: #1d1d1f; }

.sv-action-btn:focus-visible {
  outline: 2px solid #f71883;
  outline-offset: 1px;
}

.sv-action-btn--spy:hover     { background: var(--sv-status-oncall-bg);    color: var(--sv-status-oncall); }
.sv-action-btn--whisper:hover { background: var(--sv-status-ringing-bg);   color: var(--sv-status-ringing); }
.sv-action-btn--screen:hover  { background: var(--sv-status-dialing-bg);   color: var(--sv-status-dialing); }
.sv-action-btn--pause:hover   { background: var(--sv-status-pause-bg);     color: #a16207; }
.sv-action-btn--unpause:hover { background: var(--sv-status-ready-bg);     color: var(--sv-status-ready); }
.sv-action-btn--logout:hover  { background: var(--sv-status-unavail-bg);   color: var(--sv-status-unavail); }
.sv-action-btn--message:hover { background: rgba(247,24,131,0.08);         color: #f71883; }

/* Column visibility */
@media (max-width: 1200px) {
  .sv-kpi-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .sv-kpi-value { font-size: 1.6rem; }
}

@media (max-width: 992px) {
  .sv-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .sv-filter-search { width: 180px; }
}

@media (max-width: 768px) {
  .sv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-page { padding: 16px; }
  .sv-col-group, .sv-col-campaign { display: none; }
  .sv-filter-search { width: 140px; }
  .sv-filter-search:focus { width: 180px; }
  .sv-agent-table td,
  .sv-agent-table thead th { padding: 8px 10px; }
}

/* ============================================================================
   CAMPAIGN TYPE SELECTOR — campana_tipo_selector.html
   Prefix: mv-tipo-
   ============================================================================ */

.mv-tipo-page {
  min-height: calc(100vh - 120px);
  background: var(--mv-bg, #f5f5f7);
  padding: 48px 24px 80px;
}

/* ---- Page header ---- */
.mv-tipo-header {
  max-width: 880px;
  margin: 0 auto 40px;
  text-align: center;
}
.mv-tipo-header__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--mv-text-sm, 13px);
  color: var(--mv-text-muted, #6e6e73);
  margin-bottom: 16px;
}
.mv-tipo-header__breadcrumb a {
  color: var(--mv-text-muted, #6e6e73);
  text-decoration: none;
  transition: color var(--mv-transition-fast, 150ms ease);
}
.mv-tipo-header__breadcrumb a:hover { color: var(--mv-primary, #F71883); }
.mv-tipo-sep { color: var(--mv-border, #e5e5e7); }
.mv-tipo-header__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--mv-primary-muted, rgba(247,24,131,0.10));
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: var(--mv-primary, #F71883);
}
.mv-tipo-header__title {
  font-size: var(--mv-text-2xl, 24px);
  font-weight: 700;
  color: var(--mv-text, #1d1d1f);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.mv-tipo-header__subtitle {
  font-size: var(--mv-text-md, 15px);
  color: var(--mv-text-muted, #6e6e73);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ---- 4-card grid ---- */
.mv-tipo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 40px;
}

/* ---- Individual card ---- */
.mv-tipo-card {
  display: block;
  background: #ffffff;
  border: 2px solid var(--mv-border, #e5e5e7);
  border-radius: var(--mv-radius-lg, 14px);
  padding: 28px 20px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--mv-text, #1d1d1f);
  transition: border-color var(--mv-transition-base, 250ms ease),
              box-shadow var(--mv-transition-base, 250ms ease),
              transform var(--mv-transition-base, 250ms ease);
  outline: none;
}
.mv-tipo-card:hover,
.mv-tipo-card:focus-visible {
  border-color: var(--mv-primary-light, #fa4da0);
  box-shadow: 0 8px 24px rgba(247, 24, 131, 0.10);
  transform: translateY(-3px);
  color: var(--mv-text, #1d1d1f);
  text-decoration: none;
}
.mv-tipo-card:focus-visible {
  outline: 2px solid var(--mv-primary, #F71883);
  outline-offset: 3px;
}

/* ---- Card icon ---- */
.mv-tipo-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--mv-primary-muted, rgba(247,24,131,0.10));
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 22px;
  color: var(--mv-primary, #F71883);
  transition: background var(--mv-transition-base, 250ms ease),
              color var(--mv-transition-base, 250ms ease);
}
.mv-tipo-card:hover .mv-tipo-card__icon,
.mv-tipo-card:focus-visible .mv-tipo-card__icon {
  background: var(--mv-primary, #F71883);
  color: #ffffff;
}

/* ---- Card text ---- */
.mv-tipo-card__title {
  font-size: var(--mv-text-md, 15px);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.mv-tipo-card__desc {
  font-size: var(--mv-text-xs, 11px);
  color: var(--mv-text-muted, #6e6e73);
  line-height: 1.45;
}

/* ---- Arrow hint ---- */
.mv-tipo-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: var(--mv-text-xs, 11px);
  font-weight: 600;
  color: var(--mv-primary, #F71883);
  opacity: 0;
  transition: opacity 200ms ease;
}
.mv-tipo-card:hover .mv-tipo-card__arrow,
.mv-tipo-card:focus-visible .mv-tipo-card__arrow {
  opacity: 1;
}

/* ---- Footer back link ---- */
.mv-tipo-footer {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mv-tipo-footer__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mv-text-base, 14px);
  font-weight: 500;
  color: var(--mv-text-muted, #6e6e73);
  text-decoration: none;
  transition: color var(--mv-transition-fast, 150ms ease);
}
.mv-tipo-footer__back:hover { color: var(--mv-primary, #F71883); text-decoration: none; }

/* Responsive breakpoints */
@media (max-width: 860px) {
  .mv-tipo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mv-tipo-grid { grid-template-columns: 1fr; }
  .mv-tipo-page { padding: 32px 16px 60px; }
}

/* ============================================================================
   END OF SUPERVISION AGENTES — Option A
   ============================================================================ */