/* ============================================================
   Metavoz OmniLeads — Design System v2 Foundation
   Version: 2.0.0
   Date: 2026-04-11
   Purpose: CSS foundation for the 6 dialer report endpoints redesign
            (Phase 4a). Additive to metavoz-theme.css v1 — loaded AFTER it.
            Defines all tokens + base component styles. No legacy class names
            redefined here. All v2 components use -v2 suffix per §9.4.
   Scope: ~36 components, full token set, a11y mandatory rules (§9.7).
   ============================================================ */

/* ============================================================
   @font-face — Inter Variable (self-hosted, strict CSP)
   ============================================================ */
@font-face {
  font-family: "Inter";
  src: url("/static/ominicontacto/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   :root — light mode tokens (canonical §9.1 namespace)
   ============================================================ */
:root {

  /* --- Neutral scale (§9.8 locked hex values, light) --- */
  --mv-neutral-0:   #ffffff;
  --mv-neutral-50:  #fafafa;
  --mv-neutral-100: #f5f5f7;
  --mv-neutral-150: #eeeef1;
  --mv-neutral-200: #e5e5ea;
  --mv-neutral-300: #d1d1d6;
  --mv-neutral-400: #a8a8ae;
  --mv-neutral-500: #6e6e73;
  --mv-neutral-600: #48484d;
  --mv-neutral-700: #2c2c31;
  --mv-neutral-800: #1d1d1f;
  --mv-neutral-900: #0b0c0e;

  /* --- Primary scale (§9.2 locked hex values, light) --- */
  --mv-primary-50:  #fff0f7;
  --mv-primary-100: #ffd9ea;
  --mv-primary-200: #ffaed3;
  --mv-primary-300: #ff7cba;
  --mv-primary-400: #fb479f;
  --mv-primary-500: #f71883;
  --mv-primary-600: #d10d6e;
  --mv-primary-700: #a60a56;
  --mv-primary-800: #7a073f;
  --mv-primary-900: #4f0528;

  /* --- Semantic 3-shade (muted/base/strong) light --- */
  --mv-success-muted:  #ecfdf5;
  --mv-success-base:   #10b981;
  --mv-success-strong: #047857;

  --mv-warning-muted:  #fffbeb;
  --mv-warning-base:   #f59e0b;
  --mv-warning-strong: #b45309;

  --mv-danger-muted:   #fef2f2;
  --mv-danger-base:    #ef4444;
  --mv-danger-strong:  #b91c1c;

  --mv-info-muted:     #eff6ff;
  --mv-info-base:      #1f78d1;
  --mv-info-strong:    #1e40af;

  /* --- Chart palette (color-blind safe 8, §2 light) --- */
  --mv-chart-1: #f71883;
  --mv-chart-2: #1f78d1;
  --mv-chart-3: #f59e0b;
  --mv-chart-4: #10b981;
  --mv-chart-5: #7c3aed;
  --mv-chart-6: #0891b2;
  --mv-chart-7: #be185d;
  --mv-chart-8: #525252;

  /* Sequential palette (primary ramp for heatmaps, 6 steps) */
  --mv-chart-seq-1: #fff0f7;
  --mv-chart-seq-2: #ffaed3;
  --mv-chart-seq-3: #fb479f;
  --mv-chart-seq-4: #f71883;
  --mv-chart-seq-5: #d10d6e;
  --mv-chart-seq-6: #7a073f;

  /* Diverging palette (delta: neg=blue, pos=magenta, CVD-safe) */
  --mv-chart-div-neg-3: #1e40af;
  --mv-chart-div-neg-2: #1f78d1;
  --mv-chart-div-neg-1: #93c5fd;
  --mv-chart-div-pos-1: #fda4d0;
  --mv-chart-div-pos-2: #f71883;
  --mv-chart-div-pos-3: #a60a56;

  /* --- Typography: font families --- */
  --mv-font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mv-font-num:  "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Typography: font weights --- */
  --mv-fw-regular:  400;
  --mv-fw-medium:   500;
  --mv-fw-semibold: 600;
  --mv-fw-bold:     700;

  /* --- Typography: fluid text scale (body/UI) --- */
  --mv-text-2xs: clamp(0.6875rem, 0.67rem  + 0.10vw, 0.75rem);
  --mv-text-xs:  clamp(0.75rem,   0.73rem  + 0.10vw, 0.8125rem);
  --mv-text-sm:  clamp(0.8125rem, 0.79rem  + 0.12vw, 0.875rem);
  --mv-text-md:  clamp(0.9375rem, 0.91rem  + 0.15vw, 1rem);
  --mv-text-lg:  clamp(1rem,      0.95rem  + 0.20vw, 1.125rem);

  /* --- Typography: fluid display scale (headings/KPIs) --- */
  --mv-display-h6:             clamp(1rem,      0.95rem  + 0.20vw, 1.125rem);
  --mv-display-h5:             clamp(1.125rem,  1.05rem  + 0.30vw, 1.25rem);
  --mv-display-h4:             clamp(1.25rem,   1.15rem  + 0.40vw, 1.5rem);
  --mv-display-h3:             clamp(1.5rem,    1.35rem  + 0.60vw, 1.875rem);
  --mv-display-h2:             clamp(1.875rem,  1.60rem  + 1.00vw, 2.375rem);
  --mv-display-h1:             clamp(2.25rem,   1.90rem  + 1.40vw, 3rem);
  --mv-display-kpi:            clamp(2rem,      1.70rem  + 1.20vw, 2.75rem);
  --mv-display-kpi-xl:         clamp(2.75rem,   2.20rem  + 2.00vw, 4rem);
  --mv-display-wallboard:      clamp(6rem,      5.00rem  + 5.00vw, 9rem);
  --mv-display-wallboard-label:clamp(1.25rem,   1.10rem  + 0.75vw, 1.75rem);

  /* --- Spacing (4px base, 13 steps §9.1) --- */
  --mv-space-0:  0;
  --mv-space-1:  4px;
  --mv-space-2:  8px;
  --mv-space-3:  12px;
  --mv-space-4:  16px;
  --mv-space-5:  20px;
  --mv-space-6:  24px;
  --mv-space-7:  32px;
  --mv-space-8:  40px;
  --mv-space-9:  48px;
  --mv-space-10: 64px;
  --mv-space-11: 80px;
  --mv-space-12: 96px;

  /* Fluid spacing */
  --mv-space-fluid-sm:  clamp(8px,   1.5vw, 16px);
  --mv-space-fluid-md:  clamp(12px,  2.0vw, 24px);
  --mv-space-fluid-lg:  clamp(16px,  3.0vw, 40px);
  --mv-space-fluid-xl:  clamp(24px,  4.0vw, 64px);
  --mv-space-fluid-2xl: clamp(40px,  6.0vw, 96px);

  /* --- Radius (§9.1) --- */
  --mv-radius-xs:   2px;
  --mv-radius-sm:   4px;
  --mv-radius-md:   8px;
  --mv-radius-lg:   12px;
  --mv-radius-xl:   16px;
  --mv-radius-2xl:  24px;
  --mv-radius-3xl:  32px;
  --mv-radius-full: 9999px;

  /* --- Elevation (5 levels, light mode) --- */
  --mv-elev-0: none;
  --mv-elev-1: 0 1px 2px 0 rgb(0 0 0 / 0.04),
               0 1px 1px 0 rgb(0 0 0 / 0.03);
  --mv-elev-2: 0 2px 4px -1px rgb(0 0 0 / 0.06),
               0 1px 2px -1px rgb(0 0 0 / 0.04);
  --mv-elev-3: 0 6px 12px -3px rgb(0 0 0 / 0.08),
               0 2px 4px -2px rgb(0 0 0 / 0.04);
  --mv-elev-4: 0 18px 28px -8px rgb(0 0 0 / 0.12),
               0 6px 10px -4px rgb(0 0 0 / 0.06);
  --mv-elev-5: 0 30px 60px -12px rgb(0 0 0 / 0.20),
               0 12px 20px -6px rgb(0 0 0 / 0.08);
  --mv-elev-brand-glow: 0 0 0 4px rgb(247 24 131 / 0.14),
                        0 8px 20px -6px rgb(247 24 131 / 0.30);

  /* --- Motion durations (§9.1) --- */
  --mv-dur-instant:    0ms;
  --mv-dur-fast:       120ms;
  --mv-dur-base:       200ms;
  --mv-dur-slow:       320ms;
  --mv-dur-deliberate: 500ms;
  --mv-dur-ambient:    1200ms;

  /* --- Motion easings (§9.1) --- */
  --mv-ease-linear:   linear;
  --mv-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --mv-ease-in:       cubic-bezier(0.65, 0, 0.85, 0.4);
  --mv-ease-in-out:   cubic-bezier(0.45, 0, 0.35, 1);
  --mv-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --mv-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* --- Z-index scale (§9.1 + §2) --- */
  --mv-z-hide:           -1;
  --mv-z-base:            0;
  --mv-z-raised:          1;
  --mv-z-sticky:         10;
  --mv-z-fixed:          50;
  --mv-z-dropdown:      100;
  --mv-z-popover:       200;
  --mv-z-drawer:        500;
  --mv-z-modal-backdrop: 999;
  --mv-z-modal:         1000;
  --mv-z-toast:         2000;
  --mv-z-tooltip:       3000;

  /* --- Focus ring tokens (§2, §9.7) --- */
  --mv-focus-ring-color:  var(--mv-primary-500);
  --mv-focus-ring-offset: 2px;
  --mv-focus-ring-width:  2px;
  --mv-focus-ring-halo:   rgb(247 24 131 / 0.30);
  --mv-focus-ring: 0 0 0 var(--mv-focus-ring-offset) var(--mv-surface),
                   0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width)) var(--mv-focus-ring-color),
                   0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width) + 3px) var(--mv-focus-ring-halo);

  /* --- Surface / text / border semantic aliases (§9.1) --- */
  --mv-surface:        var(--mv-neutral-0);
  --mv-surface-sunken: var(--mv-neutral-100);
  --mv-surface-raised: var(--mv-neutral-0);
  --mv-card-bg:        var(--mv-neutral-0);
  --mv-text:           var(--mv-neutral-800);
  --mv-text-muted:     var(--mv-neutral-500);
  --mv-text-tertiary:  var(--mv-neutral-400);
  --mv-border:         var(--mv-neutral-200);
  --mv-border-subtle:  var(--mv-neutral-150);
  --mv-border-strong:  var(--mv-neutral-300);

  /* Canvas (page background) */
  --mv-canvas: var(--mv-neutral-100);

  /* --- Glass effect tokens --- */
  --mv-glass-bg:     rgb(255 255 255 / 0.72);
  --mv-glass-border: rgb(255 255 255 / 0.30);
  --mv-glass-blur:   blur(12px) saturate(180%);

  /* --- Scrollbar tokens --- */
  --mv-scrollbar-track: var(--mv-neutral-100);
  --mv-scrollbar-thumb: var(--mv-neutral-300);
  --mv-scrollbar-thumb-hover: var(--mv-neutral-400);
  --mv-scrollbar-width: 6px;

  color-scheme: light;
}

/* ============================================================
   [data-theme="dark"] — dark mode overrides
   §9.8 neutral hex values (cool-gray, NOT blue-tinted)
   §9.2 primary hex values dark column
   ============================================================ */
[data-theme="dark"] {

  /* --- Neutral scale dark (§9.8) --- */
  --mv-neutral-0:   #0b0c0e;
  --mv-neutral-50:  #111214;
  --mv-neutral-100: #16171b;
  --mv-neutral-150: #1a1b1f;
  --mv-neutral-200: #1e1f23;
  --mv-neutral-300: #2a2b30;
  --mv-neutral-400: #3a3b40;
  --mv-neutral-500: #787880;
  --mv-neutral-600: #9a9ba1;
  --mv-neutral-700: #b5b6bc;
  --mv-neutral-800: #d4d5d9;
  --mv-neutral-900: #e4e4e7;

  /* --- Primary scale dark (§9.2) --- */
  --mv-primary-50:  #2a0817;
  --mv-primary-100: #3a0b1f;
  --mv-primary-200: #5a0f2e;
  --mv-primary-300: #8c1a48;
  --mv-primary-400: #c3256a;
  --mv-primary-500: #ff4ea0;
  --mv-primary-600: #ff3d96;
  --mv-primary-700: #ff6aad;
  --mv-primary-800: #ff94c3;
  --mv-primary-900: #ffc2dc;

  /* --- Semantic dark (alpha backgrounds) --- */
  --mv-success-muted:  rgb(16 185 129 / 0.15);
  --mv-success-base:   #34d399;
  --mv-success-strong: #6ee7b7;

  --mv-warning-muted:  rgb(245 158 11 / 0.15);
  --mv-warning-base:   #fbbf24;
  --mv-warning-strong: #fcd34d;

  --mv-danger-muted:   rgb(239 68 68 / 0.15);
  --mv-danger-base:    #f87171;
  --mv-danger-strong:  #fca5a5;

  --mv-info-muted:     rgb(31 120 209 / 0.20);
  --mv-info-base:      #4fa8ff;
  --mv-info-strong:    #93c5fd;

  /* --- Chart palette dark (§2) --- */
  --mv-chart-1: #ff4ea0;
  --mv-chart-2: #4fa8ff;
  --mv-chart-3: #fbbf24;
  --mv-chart-4: #34d399;
  --mv-chart-5: #a78bfa;
  --mv-chart-6: #22d3ee;
  --mv-chart-7: #f472b6;
  --mv-chart-8: #a3a3a3;

  /* Sequential dark */
  --mv-chart-seq-1: #2a0817;
  --mv-chart-seq-2: #8c1a48;
  --mv-chart-seq-3: #ff4ea0;
  --mv-chart-seq-4: #ff6aad;
  --mv-chart-seq-5: #ff94c3;
  --mv-chart-seq-6: #ffc2dc;

  /* Diverging dark */
  --mv-chart-div-neg-3: #1e3a8a;
  --mv-chart-div-neg-2: #4fa8ff;
  --mv-chart-div-neg-1: #93c5fd;
  --mv-chart-div-pos-1: #ff94c3;
  --mv-chart-div-pos-2: #ff4ea0;
  --mv-chart-div-pos-3: #ff6aad;

  /* --- Elevation dark (border-glow pattern) --- */
  --mv-elev-0: none;
  --mv-elev-1: 0 0 0 1px rgb(255 255 255 / 0.04),
               0 1px 2px 0 rgb(0 0 0 / 0.50);
  --mv-elev-2: 0 0 0 1px rgb(255 255 255 / 0.05),
               0 4px 12px -2px rgb(0 0 0 / 0.60);
  --mv-elev-3: 0 0 0 1px rgb(255 255 255 / 0.06),
               0 8px 18px -4px rgb(0 0 0 / 0.70);
  --mv-elev-4: 0 0 0 1px rgb(255 255 255 / 0.08),
               0 20px 40px -10px rgb(0 0 0 / 0.80);
  --mv-elev-5: 0 0 0 1px rgb(255 255 255 / 0.10),
               0 40px 80px -12px rgb(0 0 0 / 0.90);
  --mv-elev-brand-glow: 0 0 0 4px rgb(255 78 160 / 0.18),
                        0 8px 20px -6px rgb(255 78 160 / 0.35);

  /* --- Focus ring dark --- */
  --mv-focus-ring-color: var(--mv-primary-500);
  --mv-focus-ring-halo:  rgb(255 78 160 / 0.30);
  --mv-focus-ring: 0 0 0 var(--mv-focus-ring-offset) var(--mv-surface),
                   0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width)) var(--mv-focus-ring-color),
                   0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width) + 3px) var(--mv-focus-ring-halo);

  /* --- Surface / text / border semantic aliases dark --- */
  --mv-surface:        var(--mv-neutral-100);
  --mv-surface-sunken: var(--mv-neutral-50);
  --mv-surface-raised: var(--mv-neutral-150);
  --mv-card-bg:        var(--mv-neutral-100);
  --mv-text:           var(--mv-neutral-900);
  --mv-text-muted:     var(--mv-neutral-600);
  --mv-text-tertiary:  var(--mv-neutral-500);
  --mv-border:         var(--mv-neutral-200);
  --mv-border-subtle:  var(--mv-neutral-150);
  --mv-border-strong:  var(--mv-neutral-300);
  --mv-canvas:         var(--mv-neutral-0);

  /* --- Glass dark --- */
  --mv-glass-bg:     rgb(22 23 27 / 0.80);
  --mv-glass-border: rgb(255 255 255 / 0.08);

  /* --- Scrollbar dark --- */
  --mv-scrollbar-track: var(--mv-neutral-100);
  --mv-scrollbar-thumb: var(--mv-neutral-300);
  --mv-scrollbar-thumb-hover: var(--mv-neutral-400);

  color-scheme: dark;
}

/* ============================================================
   §9.7 MANDATORY — prefers-reduced-motion global override
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   §9.7 MANDATORY — forced-colors (Windows High Contrast) fallback
   gradient-text components must not be invisible
   ============================================================ */
@media (forced-colors: active) {
  .mv-kpi__value,
  .mv-wallboard-kpi-giant__value,
  .mv-kpi-hero__value {
    color: CanvasText !important;
    -webkit-text-fill-color: CanvasText !important;
    background: none !important;
  }
}

/* ============================================================
   RESET LAYER — minimal
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--mv-font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--mv-font-sans);
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-regular);
  line-height: 1.5;
  color: var(--mv-text);
  background-color: var(--mv-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a {
  color: var(--mv-primary-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Tabular numerics utility */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Global focus-visible — §9.7: :focus-visible ONLY, never :focus */
:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
  border-radius: var(--mv-radius-sm);
}

/* Custom scrollbar (webkit) */
::-webkit-scrollbar {
  width: var(--mv-scrollbar-width);
  height: var(--mv-scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--mv-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--mv-scrollbar-thumb);
  border-radius: var(--mv-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mv-scrollbar-thumb-hover);
}

/* ============================================================
   COMPONENTS — Shell / Layout
   ============================================================ */

/* --- mv-report-shell --- */
.mv-report-shell {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
  max-width: 1920px;
  margin-inline: auto;
  background-color: var(--mv-canvas);

  /* drawer support: slide in from right without layout shift */
  position: relative;
  overflow-x: hidden;
}

.mv-report-shell--has-drawer {
  /* reserve right gutter equal to drawer width when open */
  transition: padding-right var(--mv-dur-slow) var(--mv-ease-emphasized);
}

.mv-report-shell__main {
  padding: var(--mv-space-fluid-lg);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-6);
}

/* --- mv-page-header-v2 --- */
.mv-page-header-v2 {
  padding: var(--mv-space-7) var(--mv-space-fluid-lg) var(--mv-space-5);
  background: var(--mv-surface);
  border-bottom: 1px solid var(--mv-border);
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
}

.mv-page-header-v2__titles {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-1);
}

.mv-page-header-v2__title {
  margin: 0;
  font-size: var(--mv-display-h2);
  font-weight: var(--mv-fw-bold);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--mv-text);
}

.mv-page-header-v2__subtitle {
  margin: 0;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-regular);
  color: var(--mv-text-muted);
  line-height: 1.4;
}

.mv-page-header-v2__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* --- mv-breadcrumbs-v2 --- */
.mv-breadcrumbs-v2 {
  display: flex;
  align-items: center;
  gap: var(--mv-space-1);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  padding: var(--mv-space-2) var(--mv-space-fluid-lg);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

.mv-breadcrumbs-v2__item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-1);
}

.mv-breadcrumbs-v2__link {
  color: var(--mv-text-muted);
  text-decoration: none;
  transition: color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-breadcrumbs-v2__link:hover {
  color: var(--mv-text);
  text-decoration: none;
}

.mv-breadcrumbs-v2__sep {
  color: var(--mv-text-tertiary);
  user-select: none;
  flex-shrink: 0;
}

.mv-breadcrumbs-v2__current {
  color: var(--mv-text);
  font-weight: var(--mv-fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 24ch;
}

/* --- mv-topbar-actions --- */
.mv-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-shrink: 0;
}

/* ============================================================
   COMPONENTS — Filter System
   ============================================================ */

/* --- mv-filter-bar (sticky, 56px tall, glass effect) --- */
.mv-filter-bar {
  position: sticky;
  top: 0;
  z-index: var(--mv-z-sticky);
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding-inline: var(--mv-space-fluid-lg);
  background: var(--mv-glass-bg);
  -webkit-backdrop-filter: var(--mv-glass-blur);
  backdrop-filter: var(--mv-glass-blur);
  border-bottom: 1px solid var(--mv-glass-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.mv-filter-bar::-webkit-scrollbar {
  display: none;
}

.mv-filter-bar__chips {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

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

/* --- mv-filter-chip --- */
.mv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1);
  padding: var(--mv-space-1) var(--mv-space-3);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-primary-700);
  background: color-mix(in srgb, var(--mv-primary-500) 10%, transparent);
  border: 1px solid var(--mv-primary-500);
  border-radius: var(--mv-radius-full);
  white-space: nowrap;
  cursor: default;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out),
              opacity var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out);

  /* chip add animation */
  animation: mv-chip-enter var(--mv-dur-fast) var(--mv-ease-out) both;
}

@keyframes mv-chip-enter {
  from {
    opacity: 0;
    transform: translateX(-6px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.mv-filter-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--mv-radius-full);
  background: transparent;
  color: currentcolor;
  cursor: pointer;
  opacity: 0.65;
  font-size: 10px;
  line-height: 1;
  transition: opacity var(--mv-dur-fast) var(--mv-ease-out),
              background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-filter-chip__remove:hover {
  opacity: 1;
  background: color-mix(in srgb, currentcolor 20%, transparent);
}

/* chip removing state */
.mv-filter-chip[aria-hidden="true"],
.mv-filter-chip--removing {
  animation: mv-chip-exit var(--mv-dur-fast) var(--mv-ease-in) both;
}

@keyframes mv-chip-exit {
  from {
    opacity: 1;
    transform: scale(1);
    max-width: 200px;
    margin-right: 0;
  }
  to {
    opacity: 0;
    transform: scale(0.85);
    max-width: 0;
    margin-right: calc(-1 * var(--mv-space-2));
  }
}

/* --- mv-date-range-picker-v2 (trigger only) --- */
.mv-date-range-picker-v2 {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.mv-date-range-picker-v2__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-1) var(--mv-space-3);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out);
  height: 36px;
}

.mv-date-range-picker-v2__trigger:hover {
  background: var(--mv-surface-sunken);
  border-color: var(--mv-border-strong);
}

.mv-date-range-picker-v2__trigger:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

.mv-date-range-picker-v2__icon {
  width: 16px;
  height: 16px;
  opacity: 0.55;
  flex-shrink: 0;
}

/* --- mv-segmented (toggle control) --- */
.mv-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 2px;
  gap: 2px;
  position: relative;
}

.mv-segmented__item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-1);
  padding: var(--mv-space-1) var(--mv-space-3);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  border: none;
  background: transparent;
  border-radius: calc(var(--mv-radius-md) - 2px);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--mv-dur-fast) var(--mv-ease-out);
  line-height: 1;
  height: 28px;
}

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

.mv-segmented__item[aria-selected="true"],
.mv-segmented__item--active {
  color: var(--mv-text);
  background: var(--mv-surface);
  box-shadow: var(--mv-elev-1);
}

.mv-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- mv-filter-drawer (right slide panel) --- */
.mv-filter-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: 400px;
  max-width: 90vw;
  background: var(--mv-surface);
  border-inline-start: 1px solid var(--mv-border);
  box-shadow: var(--mv-elev-5);
  z-index: var(--mv-z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--mv-dur-slow) var(--mv-ease-emphasized);
  overflow-y: auto;
}

.mv-filter-drawer[aria-hidden="false"],
.mv-filter-drawer--open {
  transform: translateX(0);
}

.mv-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mv-space-5) var(--mv-space-6);
  border-bottom: 1px solid var(--mv-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--mv-surface);
  z-index: 1;
}

.mv-filter-drawer__title {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}

.mv-filter-drawer__body {
  flex: 1;
  padding: var(--mv-space-5) var(--mv-space-6);
  overflow-y: auto;
}

.mv-filter-drawer__footer {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-4) var(--mv-space-6);
  border-top: 1px solid var(--mv-border);
  flex-shrink: 0;
  background: var(--mv-surface);
}

/* ============================================================
   COMPONENTS — KPIs
   ============================================================ */

/* --- mv-kpi base (canonical §9.5) --- */
.mv-kpi {
  /* accent bar color overridden by variant modifiers */
  --mv-kpi-accent: var(--mv-primary-500);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  padding: var(--mv-space-5);
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-left: 3px solid var(--mv-kpi-accent);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-elev-1);
  transition: transform var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out);
  overflow: hidden;
}

.mv-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--mv-elev-2);
}

/* KPI semantic modifiers — override accent variable */
.mv-kpi--success { --mv-kpi-accent: var(--mv-success-base); }
.mv-kpi--warning { --mv-kpi-accent: var(--mv-warning-base); }
.mv-kpi--danger  { --mv-kpi-accent: var(--mv-danger-base);  }
.mv-kpi--info    { --mv-kpi-accent: var(--mv-info-base);    }

/* Hero variant */
.mv-kpi--hero {
  padding: var(--mv-space-6);
}

.mv-kpi--hero .mv-kpi__value {
  font-size: var(--mv-display-kpi);
}

/* Compact variant */
.mv-kpi--compact {
  padding: var(--mv-space-4);
  gap: var(--mv-space-2);
}

.mv-kpi--compact .mv-kpi__value {
  font-size: var(--mv-display-h4);
}

/* KPI inner structure */
.mv-kpi__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-2);
}

.mv-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mv-radius-md);
  background: color-mix(in srgb, var(--mv-kpi-accent) 12%, transparent);
  color: var(--mv-kpi-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mv-kpi__label {
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.2;
}

.mv-kpi__value {
  font-size: var(--mv-display-h3);
  font-weight: var(--mv-fw-bold);
  color: var(--mv-text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.mv-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  padding: 2px var(--mv-space-2);
  border-radius: var(--mv-radius-full);
}

.mv-kpi__delta--up {
  color: var(--mv-success-strong);
  background: var(--mv-success-muted);
}

.mv-kpi__delta--down {
  color: var(--mv-danger-strong);
  background: var(--mv-danger-muted);
}

.mv-kpi__delta--neutral {
  color: var(--mv-text-muted);
  background: color-mix(in srgb, var(--mv-neutral-500) 10%, transparent);
}

.mv-kpi__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-2xs);
  color: var(--mv-text-muted);
}

/* SLA progress bar inside KPI */
.mv-kpi__sla-bar {
  width: 100%;
  height: 4px;
  background: var(--mv-border);
  border-radius: var(--mv-radius-full);
  overflow: hidden;
  margin-top: var(--mv-space-1);
}

.mv-kpi__sla-fill {
  height: 100%;
  background: var(--mv-kpi-accent);
  border-radius: var(--mv-radius-full);
  transition: width var(--mv-dur-slow) var(--mv-ease-out);
}

/* --- mv-kpi-grid (container queries) --- */
.mv-kpi-grid {
  container-type: inline-size;
  container-name: kpi-grid;
  display: grid;
  gap: var(--mv-space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@container kpi-grid (max-width: 500px) {
  .mv-kpi-grid {
    grid-template-columns: 1fr;
  }
}

@container kpi-grid (min-width: 501px) and (max-width: 900px) {
  .mv-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- mv-kpi-hero (XL standalone card) --- */
.mv-kpi-hero {
  --mv-kpi-accent: var(--mv-primary-500);

  position: relative;
  overflow: hidden;
  padding: var(--mv-space-6);
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-2);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
  transition: box-shadow var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-kpi-hero:hover {
  box-shadow: var(--mv-elev-brand-glow);
}

.mv-kpi-hero__label {
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-muted);
  margin: 0;
}

.mv-kpi-hero__value {
  font-size: var(--mv-display-kpi-xl);
  font-weight: var(--mv-fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text);
  margin: 0;
}

/* gradient accent on hero value — forced-colors fallback is in §9.7 block */
.mv-kpi-hero__value--gradient {
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mv-kpi-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
}

/* --- mv-stat (inline stat) --- */
.mv-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mv-space-1);
}

.mv-stat__value {
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-bold);
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mv-stat__label {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-regular);
}

.mv-stat__delta {
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  padding: 1px var(--mv-space-1);
  border-radius: var(--mv-radius-sm);
}

.mv-stat__delta--up {
  color: var(--mv-success-strong);
  background: var(--mv-success-muted);
}

.mv-stat__delta--down {
  color: var(--mv-danger-strong);
  background: var(--mv-danger-muted);
}

/* --- mv-sparkline (40px tall inline SVG wrapper) --- */
.mv-sparkline {
  display: inline-flex;
  align-items: center;
  height: 40px;
  width: 80px;
  flex-shrink: 0;
}

.mv-sparkline svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mv-sparkline--wide {
  width: 120px;
}

/* ============================================================
   COMPONENTS — Charts
   ============================================================ */

/* --- mv-chart-card --- */
.mv-chart-card {
  position: relative;
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--mv-dur-fast) var(--mv-ease-out);
}

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

.mv-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4) var(--mv-space-5);
  border-bottom: 1px solid var(--mv-border);
  flex-shrink: 0;
}

.mv-chart-card__title {
  margin: 0;
  font-size: var(--mv-display-h6);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  line-height: 1.3;
}

.mv-chart-card__subtitle {
  margin: 0;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  margin-top: 2px;
}

.mv-chart-card__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-1);
  flex-shrink: 0;
}

.mv-chart-card__body {
  flex: 1;
  min-height: 240px;
  padding: var(--mv-space-4) var(--mv-space-5);
  display: flex;
  align-items: stretch;
}

/* Loading/empty states inside chart card */
.mv-chart-card__body--loading {
  align-items: center;
  justify-content: center;
}

.mv-chart-card__body--empty {
  align-items: center;
  justify-content: center;
}

/* ============================================================
   COMPONENTS — Data Table
   ============================================================ */

/* --- mv-data-table --- */
.mv-data-table {
  /* density variable: overridden by density modifier classes */
  --mv-row-h: 44px;

  container-type: inline-size;
  container-name: data-table;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}

/* Density modes */
.mv-data-table--dense       { --mv-row-h: 32px; }
.mv-data-table--comfortable { --mv-row-h: 44px; }
.mv-data-table--relaxed     { --mv-row-h: 56px; }

.mv-data-table__scroll {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mv-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mv-text-sm);
  table-layout: auto;
}

.mv-data-table thead {
  position: sticky;
  top: 0;
  z-index: var(--mv-z-raised);
  background: var(--mv-surface-sunken);
}

.mv-data-table th {
  height: var(--mv-row-h);
  padding-block: 0;
  padding-inline: var(--mv-space-4);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mv-text-muted);
  text-align: start;
  border-bottom: 1px solid var(--mv-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-data-table th:hover {
  color: var(--mv-text);
}

/* Sort indicator */
.mv-data-table th[aria-sort] {
  color: var(--mv-primary-700);
}

.mv-data-table th .mv-sort-icon {
  display: inline-flex;
  margin-inline-start: var(--mv-space-1);
  width: 12px;
  height: 12px;
  opacity: 0.4;
  vertical-align: middle;
  transition: transform var(--mv-dur-base) var(--mv-ease-out),
              opacity var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-data-table th[aria-sort="ascending"] .mv-sort-icon {
  opacity: 1;
  transform: rotate(0deg);
}

.mv-data-table th[aria-sort="descending"] .mv-sort-icon {
  opacity: 1;
  transform: rotate(180deg);
}

.mv-data-table td {
  height: var(--mv-row-h);
  padding-block: 0;
  padding-inline: var(--mv-space-4);
  color: var(--mv-text);
  border-bottom: 1px solid var(--mv-border-subtle);
  vertical-align: middle;
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-data-table tbody tr {
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--mv-primary-500) 4%, transparent);
}

.mv-data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row selected state */
.mv-data-table tbody tr[aria-selected="true"] td {
  background: color-mix(in srgb, var(--mv-primary-500) 6%, transparent);
}

/* Numeric cells: right-aligned tnum */
.mv-data-table .mv-col-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Container query reflow: hide secondary cols at narrow container */
@container data-table (max-width: 600px) {
  .mv-data-table .mv-col-secondary {
    display: none;
  }
}

/* --- mv-data-table-toolbar --- */
.mv-data-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-3) var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-surface);
  flex-wrap: wrap;
}

.mv-data-table-toolbar__search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  position: relative;
}

.mv-data-table-toolbar__search-input {
  width: 100%;
  height: 32px;
  padding-inline: var(--mv-space-3);
  padding-inline-start: var(--mv-space-7);
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  transition: border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-data-table-toolbar__search-input:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  box-shadow: var(--mv-focus-ring);
}

.mv-data-table-toolbar__search-icon {
  position: absolute;
  inset-block: 50%;
  inset-inline-start: var(--mv-space-2);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--mv-text-tertiary);
  pointer-events: none;
}

.mv-data-table-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-shrink: 0;
}

/* --- mv-cell-badge --- */
.mv-cell-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--mv-space-2);
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  border-radius: var(--mv-radius-full);
  white-space: nowrap;
  line-height: 1.2;
}

.mv-cell-badge--success {
  color: var(--mv-success-strong);
  background: var(--mv-success-muted);
}

.mv-cell-badge--warning {
  color: var(--mv-warning-strong);
  background: var(--mv-warning-muted);
}

.mv-cell-badge--danger {
  color: var(--mv-danger-strong);
  background: var(--mv-danger-muted);
}

.mv-cell-badge--info {
  color: var(--mv-info-strong);
  background: var(--mv-info-muted);
}

.mv-cell-badge--neutral {
  color: var(--mv-text-muted);
  background: color-mix(in srgb, var(--mv-neutral-500) 12%, transparent);
}

/* --- mv-cell-progress --- */
.mv-cell-progress {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  min-width: 80px;
}

.mv-cell-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--mv-border);
  border-radius: var(--mv-radius-full);
  overflow: hidden;
}

.mv-cell-progress__fill {
  height: 100%;
  border-radius: var(--mv-radius-full);
  background: var(--mv-primary-500);
  transition: width var(--mv-dur-slow) var(--mv-ease-out);
}

.mv-cell-progress__label {
  font-size: var(--mv-text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--mv-text-muted);
  white-space: nowrap;
  min-width: 3ch;
  text-align: end;
}

/* --- mv-cell-mini-chart --- */
.mv-cell-mini-chart {
  display: inline-flex;
  align-items: center;
  height: 28px;
  width: 56px;
  flex-shrink: 0;
}

/* ============================================================
   COMPONENTS — Tabs
   ============================================================ */

/* --- mv-tab-bar-v2 (underline variant, default) --- */
.mv-tab-bar-v2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 1px solid var(--mv-border);
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}

.mv-tab-bar-v2::-webkit-scrollbar {
  display: none;
}

.mv-tab-bar-v2__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-3) var(--mv-space-4);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-base) var(--mv-ease-out);
  position: relative;
  margin-bottom: -1px;
}

.mv-tab-bar-v2__item:hover {
  color: var(--mv-text);
}

.mv-tab-bar-v2__item[aria-selected="true"],
.mv-tab-bar-v2__item--active {
  color: var(--mv-primary-600);
  font-weight: var(--mv-fw-semibold);
  border-bottom-color: var(--mv-primary-600);
}

.mv-tab-bar-v2__item:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
  border-radius: var(--mv-radius-sm) var(--mv-radius-sm) 0 0;
}

.mv-tab-bar-v2__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  background: color-mix(in srgb, var(--mv-primary-500) 12%, transparent);
  color: var(--mv-primary-700);
  border-radius: var(--mv-radius-full);
}

/* Animated sliding indicator (JS sets --mv-tab-indicator-left, --mv-tab-indicator-width) */
.mv-tab-bar-v2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--mv-tab-indicator-left, 0px);
  width: var(--mv-tab-indicator-width, 0px);
  height: 2px;
  background: var(--mv-primary-600);
  border-radius: var(--mv-radius-full) var(--mv-radius-full) 0 0;
  transition: left var(--mv-dur-base) var(--mv-ease-emphasized),
              width var(--mv-dur-base) var(--mv-ease-emphasized);
  pointer-events: none;
}

/* Panel transition */
.mv-tab-panel {
  display: none;
}

.mv-tab-panel[aria-hidden="false"],
.mv-tab-panel--active {
  display: block;
  animation: mv-tab-fadein var(--mv-dur-fast) var(--mv-ease-out) both;
}

@keyframes mv-tab-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- mv-tab-bar-v2--pill modifier --- */
.mv-tab-bar-v2--pill {
  border-bottom: none;
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-1);
  gap: var(--mv-space-1);
}

.mv-tab-bar-v2--pill::after {
  display: none;
}

.mv-tab-bar-v2--pill .mv-tab-bar-v2__item {
  border-bottom: none;
  border-radius: var(--mv-radius-md);
  margin-bottom: 0;
  padding: var(--mv-space-1) var(--mv-space-3);
}

.mv-tab-bar-v2--pill .mv-tab-bar-v2__item[aria-selected="true"],
.mv-tab-bar-v2--pill .mv-tab-bar-v2__item--active {
  background: var(--mv-surface);
  color: var(--mv-primary-700);
  box-shadow: var(--mv-elev-1);
  border-bottom-color: transparent;
}

/* --- mv-tab-pill (secondary standalone pill tab) --- */
.mv-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1);
  padding: var(--mv-space-1) var(--mv-space-3);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  background: transparent;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-full);
  cursor: pointer;
  transition: color var(--mv-dur-fast) var(--mv-ease-out),
              background var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-tab-pill:hover {
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
}

.mv-tab-pill[aria-selected="true"],
.mv-tab-pill--active {
  color: var(--mv-primary-700);
  background: color-mix(in srgb, var(--mv-primary-500) 10%, transparent);
  border-color: var(--mv-primary-500);
  font-weight: var(--mv-fw-semibold);
}

/* ============================================================
   COMPONENTS — Overlays
   ============================================================ */

/* --- mv-modal-v2 --- */
.mv-modal-v2-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.48);
  z-index: var(--mv-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-5);
  animation: mv-backdrop-in var(--mv-dur-base) var(--mv-ease-out) both;
}

.mv-modal-v2-backdrop[aria-hidden="true"],
.mv-modal-v2-backdrop--closing {
  animation: mv-backdrop-out var(--mv-dur-base) var(--mv-ease-in) both;
}

@keyframes mv-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mv-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.mv-modal-v2 {
  position: relative;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-5);
  z-index: var(--mv-z-modal);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--mv-space-10));
  width: 100%;
  animation: mv-modal-in var(--mv-dur-base) var(--mv-ease-out) both;
  overflow: hidden;
}

.mv-modal-v2--closing {
  animation: mv-modal-out var(--mv-dur-fast) var(--mv-ease-in) both;
}

@keyframes mv-modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes mv-modal-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(4px);
  }
}

/* Modal sizes */
.mv-modal-v2--sm         { max-width: 400px; }
.mv-modal-v2--md         { max-width: 560px; }
.mv-modal-v2--lg         { max-width: 800px; }
.mv-modal-v2--xl         { max-width: 1080px; }
.mv-modal-v2--fullscreen {
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
}

.mv-modal-v2__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  padding: var(--mv-space-5) var(--mv-space-6);
  border-bottom: 1px solid var(--mv-border);
  flex-shrink: 0;
}

.mv-modal-v2__title {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  line-height: 1.3;
}

.mv-modal-v2__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--mv-radius-md);
  background: transparent;
  color: var(--mv-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-modal-v2__close:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}

.mv-modal-v2__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mv-space-5) var(--mv-space-6);
}

.mv-modal-v2__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mv-space-2);
  padding: var(--mv-space-4) var(--mv-space-6);
  border-top: 1px solid var(--mv-border);
  flex-shrink: 0;
}

/* --- mv-drawer (right slide, inspector) --- */
.mv-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  background: var(--mv-surface);
  border-inline-start: 1px solid var(--mv-border);
  box-shadow: var(--mv-elev-5);
  z-index: var(--mv-z-drawer);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--mv-dur-slow) var(--mv-ease-emphasized);
}

.mv-drawer[aria-hidden="false"],
.mv-drawer--open {
  transform: translateX(0);
}

/* Drawer sizes */
.mv-drawer--sm  { width: 320px; }
.mv-drawer--md  { width: 480px; }
.mv-drawer--lg  { width: 640px; }
.mv-drawer--xl  { width: 860px; }

.mv-drawer__header {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-5) var(--mv-space-6);
  border-bottom: 1px solid var(--mv-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--mv-surface);
  z-index: 1;
}

.mv-drawer__title {
  flex: 1;
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}

.mv-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mv-space-5) var(--mv-space-6);
}

.mv-drawer__footer {
  padding: var(--mv-space-4) var(--mv-space-6);
  border-top: 1px solid var(--mv-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  justify-content: flex-end;
}

/* --- mv-popover --- */
.mv-popover {
  position: absolute;
  z-index: var(--mv-z-popover);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-elev-4);
  padding: var(--mv-space-3);
  min-width: 200px;
  max-width: 360px;
  animation: mv-popover-in var(--mv-dur-fast) var(--mv-ease-out) both;
}

.mv-popover[aria-hidden="true"] {
  display: none;
}

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

.mv-popover__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  transform: rotate(45deg);
}

.mv-popover[data-placement^="bottom"] .mv-popover__arrow {
  top: -5px;
  border-bottom: none;
  border-right: none;
}

.mv-popover[data-placement^="top"] .mv-popover__arrow {
  bottom: -5px;
  border-top: none;
  border-left: none;
}

/* --- mv-tooltip-v2 (400ms delay, keyboard-accessible) --- */
.mv-tooltip-v2 {
  position: absolute;
  z-index: var(--mv-z-tooltip);
  padding: var(--mv-space-1) var(--mv-space-2);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-neutral-0);
  background: var(--mv-neutral-800);
  border-radius: var(--mv-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  max-width: 240px;
  white-space: normal;
  text-align: center;
  animation: mv-tooltip-in var(--mv-dur-fast) var(--mv-ease-out) both;
}

[data-theme="dark"] .mv-tooltip-v2 {
  background: var(--mv-neutral-700);
  color: var(--mv-neutral-900);
}

.mv-tooltip-v2[aria-hidden="true"] {
  display: none;
}

@keyframes mv-tooltip-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   COMPONENTS — Feedback
   ============================================================ */

/* --- mv-skeleton + variants --- */
.mv-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--mv-radius-sm);
  background: var(--mv-neutral-200);
}

[data-theme="dark"] .mv-skeleton {
  background: var(--mv-neutral-200);
}

.mv-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--mv-neutral-0) 35%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: mv-shimmer var(--mv-dur-ambient) var(--mv-ease-linear) infinite;
}

/* Shape variants */
.mv-skeleton--line {
  height: 1em;
  width: 100%;
  border-radius: var(--mv-radius-sm);
}

.mv-skeleton--line + .mv-skeleton--line {
  margin-top: var(--mv-space-2);
}

.mv-skeleton--rect {
  width: 100%;
  border-radius: var(--mv-radius-md);
}

.mv-skeleton--circle {
  border-radius: var(--mv-radius-full);
  aspect-ratio: 1;
}

.mv-skeleton--chart {
  width: 100%;
  min-height: 200px;
  border-radius: var(--mv-radius-md);
}

.mv-skeleton--kpi {
  height: 120px;
  border-radius: var(--mv-radius-lg);
}

.mv-skeleton--table-row {
  height: var(--mv-row-h, 44px);
  border-radius: 0;
}

/* --- mv-empty-v2 --- */
.mv-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-4);
  padding: var(--mv-space-10) var(--mv-space-6);
  text-align: center;
}

.mv-empty-v2__illustration {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mv-radius-2xl);
  background: color-mix(in srgb, var(--mv-primary-500) 10%, transparent);
  color: var(--mv-primary-500);
  flex-shrink: 0;
}

.mv-empty-v2__headline {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}

.mv-empty-v2__description {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  max-width: 40ch;
  line-height: 1.6;
}

.mv-empty-v2__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--mv-space-2);
}

/* --- mv-error-state --- */
.mv-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mv-space-4);
  padding: var(--mv-space-10) var(--mv-space-6);
  text-align: center;
}

.mv-error-state__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mv-radius-full);
  background: var(--mv-danger-muted);
  color: var(--mv-danger-base);
}

.mv-error-state__title {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}

.mv-error-state__message {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  max-width: 44ch;
}

/* --- mv-toast + stack --- */
.mv-toast-region {
  position: fixed;
  inset-block-end: var(--mv-space-6);
  inset-inline-end: var(--mv-space-6);
  z-index: var(--mv-z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--mv-space-2);
  pointer-events: none;
  max-width: min(360px, calc(100vw - var(--mv-space-8)));
}

.mv-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-3);
  padding: var(--mv-space-3) var(--mv-space-4);
  background: var(--mv-neutral-800);
  color: var(--mv-neutral-0);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-elev-4);
  pointer-events: auto;
  animation: mv-toast-in var(--mv-dur-base) var(--mv-ease-out) both;
  font-size: var(--mv-text-sm);
  border-inline-start: 3px solid transparent;
  max-width: 100%;
}

[data-theme="dark"] .mv-toast {
  background: var(--mv-neutral-700);
  color: var(--mv-neutral-900);
}

.mv-toast--removing {
  animation: mv-toast-out var(--mv-dur-fast) var(--mv-ease-in) both;
}

@keyframes mv-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mv-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 80px;
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    max-height: 0;
  }
}

/* Toast variants */
.mv-toast--success { border-inline-start-color: var(--mv-success-base); }
.mv-toast--warning { border-inline-start-color: var(--mv-warning-base); }
.mv-toast--danger  { border-inline-start-color: var(--mv-danger-base);  }
.mv-toast--info    { border-inline-start-color: var(--mv-info-base);    }

.mv-toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

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

.mv-toast__title {
  font-weight: var(--mv-fw-semibold);
  line-height: 1.3;
}

.mv-toast__message {
  color: color-mix(in srgb, currentcolor 70%, transparent);
  font-size: var(--mv-text-xs);
  margin-top: 2px;
  line-height: 1.4;
}

.mv-toast__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: currentcolor;
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: var(--mv-radius-sm);
  transition: opacity var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-toast__close:hover {
  opacity: 1;
}

/* --- mv-loading-bar (top-fixed, indeterminate gradient) --- */
.mv-loading-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: var(--mv-z-tooltip); /* above everything */
  background: linear-gradient(
    90deg,
    var(--mv-primary-500) 0%,
    var(--mv-primary-300) 40%,
    var(--mv-primary-500) 100%
  );
  background-size: 200% 100%;
  animation: mv-loading-bar-slide 1.4s var(--mv-ease-in-out) infinite;
  transform-origin: left center;
}

.mv-loading-bar[hidden] {
  display: none;
}

@keyframes mv-loading-bar-slide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ============================================================
   COMPONENTS — Controls / Buttons
   ============================================================ */

/* --- mv-btn-v2 base (all variants share structure) --- */
.mv-btn-v2 {
  /* size defaults (--md) */
  --mv-btn-h:    36px;
  --mv-btn-px:   var(--mv-space-4);
  --mv-btn-fs:   var(--mv-text-sm);
  --mv-btn-radius: var(--mv-radius-md);
  --mv-btn-gap:  var(--mv-space-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-btn-gap);
  height: var(--mv-btn-h);
  padding-inline: var(--mv-btn-px);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-btn-fs);
  font-weight: var(--mv-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--mv-btn-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out),
              opacity var(--mv-dur-fast) var(--mv-ease-out);
}

/* Size variants */
.mv-btn-v2--xs {
  --mv-btn-h:    24px;
  --mv-btn-px:   var(--mv-space-2);
  --mv-btn-fs:   var(--mv-text-2xs);
  --mv-btn-radius: var(--mv-radius-sm);
  --mv-btn-gap:  var(--mv-space-1);
}

.mv-btn-v2--sm {
  --mv-btn-h:    30px;
  --mv-btn-px:   var(--mv-space-3);
  --mv-btn-fs:   var(--mv-text-xs);
}

.mv-btn-v2--md {
  --mv-btn-h:    36px;
  --mv-btn-px:   var(--mv-space-4);
  --mv-btn-fs:   var(--mv-text-sm);
}

.mv-btn-v2--lg {
  --mv-btn-h:    44px;
  --mv-btn-px:   var(--mv-space-5);
  --mv-btn-fs:   var(--mv-text-md);
  --mv-btn-radius: var(--mv-radius-lg);
}

/* Disabled state */
.mv-btn-v2:disabled,
.mv-btn-v2[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.mv-btn-v2[data-loading="true"] {
  pointer-events: none;
}

.mv-btn-v2[data-loading="true"] .mv-btn-v2__label {
  visibility: hidden;
}

.mv-btn-v2__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-btn-v2[data-loading="true"] .mv-btn-v2__spinner {
  display: flex;
}

.mv-btn-v2:not([data-loading="true"]) .mv-btn-v2__spinner {
  display: none;
}

/* Icon positioning */
.mv-btn-v2__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  font-size: calc(var(--mv-btn-fs) * 1.15);
}

.mv-btn-v2__icon--end {
  order: 1;
}

/* --- primary variant (§9.3: bg = --mv-primary-600, NOT -500) --- */
.mv-btn-v2--primary {
  background: var(--mv-primary-600);
  color: #ffffff;
  border-color: var(--mv-primary-600);
}

.mv-btn-v2--primary:hover {
  background: var(--mv-primary-700);
  border-color: var(--mv-primary-700);
}

.mv-btn-v2--primary:active {
  background: var(--mv-primary-800);
  border-color: var(--mv-primary-800);
  transform: scale(0.98);
}

.mv-btn-v2--primary:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- secondary variant --- */
.mv-btn-v2--secondary {
  background: var(--mv-surface);
  color: var(--mv-text);
  border-color: var(--mv-border-strong);
}

.mv-btn-v2--secondary:hover {
  background: var(--mv-surface-sunken);
  border-color: var(--mv-border-strong);
}

.mv-btn-v2--secondary:active {
  background: var(--mv-neutral-200);
  transform: scale(0.98);
}

.mv-btn-v2--secondary:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- tertiary variant --- */
.mv-btn-v2--tertiary {
  background: color-mix(in srgb, var(--mv-primary-500) 8%, transparent);
  color: var(--mv-primary-700);
  border-color: transparent;
}

.mv-btn-v2--tertiary:hover {
  background: color-mix(in srgb, var(--mv-primary-500) 14%, transparent);
}

.mv-btn-v2--tertiary:active {
  background: color-mix(in srgb, var(--mv-primary-500) 20%, transparent);
  transform: scale(0.98);
}

.mv-btn-v2--tertiary:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- ghost variant --- */
.mv-btn-v2--ghost {
  background: transparent;
  color: var(--mv-text-muted);
  border-color: transparent;
}

.mv-btn-v2--ghost:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}

.mv-btn-v2--ghost:active {
  background: var(--mv-neutral-200);
  transform: scale(0.98);
}

.mv-btn-v2--ghost:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- danger variant --- */
.mv-btn-v2--danger {
  background: var(--mv-danger-base);
  color: #ffffff;
  border-color: var(--mv-danger-base);
}

.mv-btn-v2--danger:hover {
  background: var(--mv-danger-strong);
  border-color: var(--mv-danger-strong);
}

.mv-btn-v2--danger:active {
  transform: scale(0.98);
}

/* Danger focus ring uses danger-base color (§9.7) */
.mv-btn-v2--danger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--mv-focus-ring-offset) var(--mv-surface),
    0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width)) var(--mv-danger-base),
    0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width) + 3px) rgb(239 68 68 / 0.30);
}

/* --- danger-ghost variant --- */
.mv-btn-v2--danger-ghost {
  background: transparent;
  color: var(--mv-danger-base);
  border-color: transparent;
}

.mv-btn-v2--danger-ghost:hover {
  background: var(--mv-danger-muted);
  border-color: transparent;
}

.mv-btn-v2--danger-ghost:active {
  transform: scale(0.98);
}

.mv-btn-v2--danger-ghost:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--mv-focus-ring-offset) var(--mv-surface),
    0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width)) var(--mv-danger-base),
    0 0 0 calc(var(--mv-focus-ring-offset) + var(--mv-focus-ring-width) + 3px) rgb(239 68 68 / 0.30);
}

/* --- mv-icon-btn (icon-only with implicit tooltip) --- */
.mv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-icon-btn:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  border-color: var(--mv-border);
}

.mv-icon-btn:active {
  background: var(--mv-neutral-200);
  transform: scale(0.95);
}

.mv-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

.mv-icon-btn--sm {
  width: 28px;
  height: 28px;
}

.mv-icon-btn--lg {
  width: 44px;
  height: 44px;
}

/* --- mv-menu (dropdown) --- */
.mv-menu {
  position: absolute;
  z-index: var(--mv-z-dropdown);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  box-shadow: var(--mv-elev-4);
  padding: var(--mv-space-1);
  min-width: 180px;
  max-width: 280px;
  animation: mv-popover-in var(--mv-dur-fast) var(--mv-ease-out) both;
  list-style: none;
  margin: 0;
}

.mv-menu[aria-hidden="true"] {
  display: none;
}

.mv-menu__item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-2) var(--mv-space-3);
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: start;
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-menu__item:hover {
  background: var(--mv-surface-sunken);
}

.mv-menu__item:focus-visible {
  outline: none;
  background: var(--mv-surface-sunken);
  box-shadow: inset 0 0 0 2px var(--mv-primary-500);
}

.mv-menu__item--danger {
  color: var(--mv-danger-base);
}

.mv-menu__item--danger:hover {
  background: var(--mv-danger-muted);
}

.mv-menu__item__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--mv-text-muted);
}

.mv-menu__item--danger .mv-menu__item__icon {
  color: var(--mv-danger-base);
}

.mv-menu__shortcut {
  margin-inline-start: auto;
  font-size: var(--mv-text-2xs);
  color: var(--mv-text-tertiary);
  letter-spacing: 0.05em;
}

.mv-menu__divider {
  height: 1px;
  background: var(--mv-border);
  margin-block: var(--mv-space-1);
}

.mv-menu__label {
  padding: var(--mv-space-1) var(--mv-space-3);
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-tertiary);
}

/* --- mv-switch --- */
.mv-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  cursor: pointer;
  user-select: none;
}

.mv-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--mv-neutral-300);
  border-radius: var(--mv-radius-full);
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
  flex-shrink: 0;
}

.mv-switch__thumb {
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  background: var(--mv-neutral-0);
  border-radius: var(--mv-radius-full);
  box-shadow: var(--mv-elev-1);
  transition: transform var(--mv-dur-fast) var(--mv-ease-spring);
}

.mv-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mv-switch input[type="checkbox"]:checked + .mv-switch__track {
  background: var(--mv-primary-600);
}

.mv-switch input[type="checkbox"]:checked + .mv-switch__track .mv-switch__thumb {
  transform: translateX(16px);
}

.mv-switch input[type="checkbox"]:focus-visible + .mv-switch__track {
  box-shadow: var(--mv-focus-ring);
}

.mv-switch__label {
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
}

/* --- mv-density-toggle --- */
.mv-density-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: 2px;
  gap: 2px;
}

.mv-density-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: calc(var(--mv-radius-md) - 2px);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-density-toggle__btn:hover {
  color: var(--mv-text);
}

.mv-density-toggle__btn[aria-pressed="true"],
.mv-density-toggle__btn--active {
  background: var(--mv-surface);
  color: var(--mv-primary-700);
  box-shadow: var(--mv-elev-1);
}

.mv-density-toggle__btn:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* --- mv-theme-toggle --- */
.mv-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-theme-toggle:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  border-color: var(--mv-border-strong);
}

.mv-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* ============================================================
   COMPONENTS — Wallboard
   ============================================================ */

/* --- mv-wallboard-shell (fullscreen, dark default) --- */
.mv-wallboard-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--mv-space-7) var(--mv-space-8);
  gap: var(--mv-space-6);
  background:
    radial-gradient(1200px 600px at 10% -20%,
      color-mix(in srgb, var(--mv-primary-500) 8%, transparent), transparent 60%),
    radial-gradient(1000px 500px at 100% 120%,
      color-mix(in srgb, var(--mv-chart-2) 6%, transparent), transparent 60%),
    var(--mv-neutral-0);
  color: var(--mv-text);
  overflow: hidden;
}

/* wallboard is always dark — override if needed with ?theme=light */
[data-theme="dark"] .mv-wallboard-shell,
.mv-wallboard-shell {
  /* inherits dark tokens when html[data-theme="dark"] */
}

/* --- mv-wallboard-kpi-giant (8rem value at 1080p) --- */
.mv-wallboard-kpi-giant {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

.mv-wallboard-kpi-giant__label {
  font-size: var(--mv-display-wallboard-label);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mv-text-muted);
  margin: 0;
}

.mv-wallboard-kpi-giant__value {
  font-size: var(--mv-display-wallboard);
  font-weight: var(--mv-fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text);
  margin: 0;
}

.mv-wallboard-kpi-giant__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  padding: var(--mv-space-1) var(--mv-space-3);
  border-radius: var(--mv-radius-full);
}

.mv-wallboard-kpi-giant__delta--up {
  background: rgb(52 211 153 / 0.12);
  color: var(--mv-chart-4);
}

.mv-wallboard-kpi-giant__delta--down {
  background: rgb(239 68 68 / 0.12);
  color: var(--mv-danger-base);
}

/* --- mv-wallboard-gauge (radial with threshold zones) --- */
.mv-wallboard-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-3);
}

.mv-wallboard-gauge__svg-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
}

.mv-wallboard-gauge__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.mv-wallboard-gauge__track {
  fill: none;
  stroke: var(--mv-border);
  stroke-width: 12;
  stroke-linecap: round;
}

.mv-wallboard-gauge__fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--mv-dur-deliberate) var(--mv-ease-out),
              stroke var(--mv-dur-base) var(--mv-ease-out);
}

.mv-wallboard-gauge__fill--ok      { stroke: var(--mv-success-base); }
.mv-wallboard-gauge__fill--warning { stroke: var(--mv-warning-base); }
.mv-wallboard-gauge__fill--danger  { stroke: var(--mv-danger-base);  }

.mv-wallboard-gauge__label {
  font-size: var(--mv-display-wallboard-label);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Gauge center value (positioned absolute over SVG via JS) */
.mv-wallboard-gauge__center-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.mv-wallboard-gauge__center-value .val {
  font-size: var(--mv-display-kpi-xl);
  font-weight: var(--mv-fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--mv-text);
}

.mv-wallboard-gauge__center-value .unit {
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  margin-top: var(--mv-space-1);
}

/* Rotation progress ring (§9.6 mv-rotate keyframe) */
.mv-wallboard-rotation-ring {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-wallboard-rotation-ring svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.mv-wallboard-rotation-ring__track {
  fill: none;
  stroke: var(--mv-border);
  stroke-width: 3.5;
}

.mv-wallboard-rotation-ring__fill {
  fill: none;
  stroke: var(--mv-primary-500);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: mv-rotate var(--mv-dur-ambient) var(--mv-ease-linear) infinite;
}

/* Live dot */
.mv-live-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mv-success-base);
}

.mv-live-dot__indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-success-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-success-base) 25%, transparent);
  animation: mv-pulse 2s var(--mv-ease-linear) infinite;
  flex-shrink: 0;
}

/* ============================================================
   KEYFRAMES (§9.6 canonical names)
   ============================================================ */

/* mv-pulse: 2s linear infinite — live dots, realtime tick */
@keyframes mv-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* mv-shimmer: 1200ms linear infinite — skeleton loaders */
@keyframes mv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* mv-rotate: 30s linear infinite — wallboard rotation progress ring */
@keyframes mv-rotate {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* mv-kpi-digit-roll: 500ms ease-emphasized — KPI delta animation (deferred) */
@keyframes mv-kpi-digit-roll {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   UTILITIES — minimal
   ============================================================ */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Stack (vertical flex) */
.mv-stack {
  display: flex;
  flex-direction: column;
}

.mv-stack--xs  { gap: var(--mv-space-1); }
.mv-stack--sm  { gap: var(--mv-space-2); }
.mv-stack--md  { gap: var(--mv-space-4); }
.mv-stack--lg  { gap: var(--mv-space-6); }
.mv-stack--xl  { gap: var(--mv-space-8); }

/* Cluster (horizontal flex wrap) */
.mv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-cluster--sm  { gap: var(--mv-space-1); }
.mv-cluster--md  { gap: var(--mv-space-3); }
.mv-cluster--lg  { gap: var(--mv-space-4); }

/* Grid column helpers */
.mv-grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mv-space-4); }
.mv-grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mv-space-4); }
.mv-grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mv-space-4); }
.mv-grid-cols-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--mv-space-4); }

/* Responsive breakdowns for grid helpers */
@media (max-width: 1023px) {
  .mv-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
  .mv-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .mv-grid-cols-6,
  .mv-grid-cols-4,
  .mv-grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .mv-grid-cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
  .mv-grid-cols-6,
  .mv-grid-cols-4,
  .mv-grid-cols-3,
  .mv-grid-cols-2 { grid-template-columns: 1fr; }
}

/* Text truncation */
.mv-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Visually hide (preserves space) */
.mv-invisible {
  visibility: hidden;
}

/* ===== MV-WIZARD COMPONENTS (Sprint 3 redesign) ===== */
/* Source: mv-wizard.css v1.0.0 (2026-04-11)            */
/* Appended to metavoz-theme-v2.css — all tokens already */
/* defined above; the :root block below is a NOOP in     */
/* production (same values, different source). Only the  */
/* component classes starting at SHELL are net-new.      */
/* ===================================================== */

/* ============================================================
   SHELL — mv-wizard-shell
   Grid: header / body (main + rail) / footer. Fixed footer on
   mobile so primary action is always reachable without scroll.
   ============================================================ */
.mv-wizard-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: var(--mv-canvas);
}

/* ------------- HEADER -------------- */
.mv-wizard-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--mv-border);
}

.mv-wizard-header__bar {
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--mv-space-4) var(--mv-space-6);
  display: flex;
  align-items: center;
  gap: var(--mv-space-5);
}

.mv-wizard-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.mv-wizard-header__brand-mark {
  width: 26px;
  height: 26px;
  border-radius: var(--mv-radius-md);
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  box-shadow: var(--mv-elev-2);
}

.mv-wizard-header__divider {
  width: 1px;
  height: 20px;
  background: var(--mv-border);
}

.mv-wizard-header__crumb {
  color: var(--mv-text-muted);
  font-size: var(--mv-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--mv-fw-medium);
}

.mv-wizard-header__title {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-wizard-header__spacer { flex: 1; }

.mv-wizard-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

/* ============================================================
   STEP INDICATOR — mv-stepper-bar
   Desktop: full horizontal stepper with numbered bubbles and
   connecting line. Clickable backwards.
   Mobile: compact pill + dots + "Paso N de 8".
   ============================================================ */
.mv-stepper-bar {
  background: var(--mv-surface);
  border-bottom: 1px solid var(--mv-border);
}

.mv-stepper-bar__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--mv-space-4) var(--mv-space-6);
}

/* --- Desktop full stepper --- */
.mv-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.mv-stepper__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-2);
  position: relative;
  min-width: 0;
}

/* connector line behind bubbles */
.mv-stepper__item::before {
  content: "";
  position: absolute;
  top: 17px; /* center of bubble */
  left: calc(-50% + 18px);
  right: calc(50% + 18px);
  height: 2px;
  background: var(--mv-border);
  z-index: 0;
}
.mv-stepper__item:first-child::before { display: none; }

.mv-stepper__item[data-state="completed"]::before {
  background: var(--mv-primary-500);
}

.mv-stepper__bubble {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-surface);
  border: 2px solid var(--mv-border-strong);
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-stepper__label {
  font-size: var(--mv-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-medium);
  text-align: center;
  max-width: 13ch;
  line-height: 1.25;
}

.mv-stepper__item[data-state="active"] .mv-stepper__bubble {
  background: var(--mv-primary-600);
  border-color: var(--mv-primary-600);
  color: #fff;
  box-shadow: var(--mv-elev-brand-glow);
}
.mv-stepper__item[data-state="active"] .mv-stepper__label {
  color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
}

.mv-stepper__item[data-state="completed"] .mv-stepper__bubble {
  background: var(--mv-primary-500);
  border-color: var(--mv-primary-500);
  color: #fff;
}
.mv-stepper__item[data-state="completed"] .mv-stepper__label {
  color: var(--mv-text);
}

.mv-stepper__item[data-state="error"] .mv-stepper__bubble {
  background: var(--mv-danger-muted);
  border-color: var(--mv-danger-base);
  color: var(--mv-danger-strong);
}
.mv-stepper__item[data-state="error"] .mv-stepper__label {
  color: var(--mv-danger-strong);
}

.mv-stepper__item[data-state="error"] .mv-stepper__badge {
  position: absolute;
  top: -4px;
  right: calc(50% - 24px);
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-danger-base);
  color: #fff;
  font-size: 10px;
  font-weight: var(--mv-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mv-surface);
}

/* A whole step that is still locked (ahead of progress) */
.mv-stepper__item[data-state="locked"] .mv-stepper__bubble {
  background: var(--mv-surface);
  border-color: var(--mv-border);
  color: var(--mv-text-tertiary);
}

/* make completed items clickable via <button> wrapper */
.mv-stepper__button {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mv-space-2);
  cursor: pointer;
  padding: var(--mv-space-1);
  border-radius: var(--mv-radius-md);
  width: 100%;
}
.mv-stepper__button:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-stepper__item[data-state="locked"] .mv-stepper__button {
  cursor: not-allowed;
}
.mv-stepper__item[data-state="completed"] .mv-stepper__button:hover .mv-stepper__bubble {
  transform: translateY(-1px);
  box-shadow: var(--mv-elev-2);
}

/* --- Mobile compact stepper --- */
.mv-stepper-compact {
  display: none;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-3) var(--mv-space-4);
}

.mv-stepper-compact__dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mv-stepper-compact__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-border-strong);
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-stepper-compact__dot[data-state="completed"] {
  background: var(--mv-primary-500);
}
.mv-stepper-compact__dot[data-state="active"] {
  background: var(--mv-primary-600);
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}
.mv-stepper-compact__dot[data-state="error"] {
  background: var(--mv-danger-base);
}

.mv-stepper-compact__label {
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  font-weight: var(--mv-fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-stepper-compact__counter {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* scroll-affordance fade for the full stepper in tablet range */
.mv-stepper-bar--scroll {
  position: relative;
}
.mv-stepper-bar--scroll::before,
.mv-stepper-bar--scroll::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}
.mv-stepper-bar--scroll::before {
  left: 0;
  background: linear-gradient(to right, var(--mv-surface), transparent);
}
.mv-stepper-bar--scroll::after {
  right: 0;
  background: linear-gradient(to left, var(--mv-surface), transparent);
}

/* ============================================================
   BODY — mv-wizard-body: main + summary rail
   ============================================================ */
.mv-wizard-body {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: var(--mv-space-7) var(--mv-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--mv-space-7);
  align-items: start;
}

.mv-wizard-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5);
}

/* ============================================================
   FORM CARD — mv-form-card (hosts a single wizard step)
   ============================================================ */
.mv-form-card {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-2);
  overflow: hidden;
}

.mv-form-card__header {
  padding: var(--mv-space-6) var(--mv-space-7);
  border-bottom: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-4);
}

.mv-form-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mv-radius-lg);
  background: linear-gradient(135deg, var(--mv-primary-50), var(--mv-primary-100));
  color: var(--mv-primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid var(--mv-primary-100);
}

.mv-form-card__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-form-card__title {
  margin: 0;
  font-size: var(--mv-display-h4);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  letter-spacing: -0.015em;
}

.mv-form-card__subtitle {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  line-height: 1.45;
  max-width: 68ch;
}

.mv-form-card__autosave {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  padding: var(--mv-space-1) var(--mv-space-3);
  background: var(--mv-surface-sunken);
  border-radius: var(--mv-radius-full);
  white-space: nowrap;
}
.mv-form-card__autosave[data-state="saved"]  { color: var(--mv-success-strong); }
.mv-form-card__autosave[data-state="saving"] { color: var(--mv-info-strong); }
.mv-form-card__autosave[data-state="dirty"]  { color: var(--mv-warning-strong); }

.mv-form-card__autosave-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--mv-radius-full);
  background: currentColor;
}
.mv-form-card__autosave[data-state="saving"] .mv-form-card__autosave-dot {
  animation: mv-pulse 1.1s ease-in-out infinite;
}
@keyframes mv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.mv-form-card__body {
  padding: var(--mv-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-7);
}

/* ============================================================
   SECTION / ACCORDION — mv-form-section
   First section of a step is expanded, others collapsed.
   ============================================================ */
.mv-form-section {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  background: var(--mv-surface);
  overflow: hidden;
  transition: border-color var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-form-section[open] {
  border-color: var(--mv-border-strong);
  box-shadow: var(--mv-elev-1);
}

.mv-form-section__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--mv-space-5) var(--mv-space-6);
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  user-select: none;
  min-height: 64px;
}

.mv-form-section__summary::-webkit-details-marker { display: none; }

.mv-form-section__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.mv-form-section[open] .mv-form-section__icon {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
}
.mv-form-section[data-state="complete"] .mv-form-section__icon {
  background: var(--mv-success-muted);
  color: var(--mv-success-strong);
}
.mv-form-section[data-state="error"] .mv-form-section__icon {
  background: var(--mv-danger-muted);
  color: var(--mv-danger-strong);
}

.mv-form-section__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-form-section__title {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  margin: 0;
}

.mv-form-section__hint {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mv-form-section[data-state="complete"] .mv-form-section__hint {
  color: var(--mv-success-strong);
}
.mv-form-section[data-state="error"] .mv-form-section__hint {
  color: var(--mv-danger-strong);
}

.mv-form-section__chevron {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--mv-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-form-section[open] .mv-form-section__chevron {
  transform: rotate(180deg);
}

/* Default: section body collapsed (browser hides via details, but explicit
   display:none avoids residual flex layout when the parent is closed). */
.mv-form-section__body {
  padding: var(--mv-space-6);
  border-top: 1px solid var(--mv-border-subtle);
  display: none;
  flex-direction: column;
  gap: var(--mv-space-5);
}
.mv-form-section[open] > .mv-form-section__body {
  display: flex;
}

/* ============================================================
   FORM PRIMITIVES — mv-form-*
   ============================================================ */
.mv-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
  min-width: 0;
}

.mv-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mv-space-5);
}
.mv-form-grid--1 { grid-template-columns: 1fr; }
.mv-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mv-form-label {
  display: flex;
  align-items: center;
  gap: var(--mv-space-1);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text);
}

.mv-form-label__required {
  color: var(--mv-danger-base);
  font-weight: var(--mv-fw-bold);
  line-height: 1;
}

.mv-form-label__optional {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-regular);
  margin-left: var(--mv-space-1);
}

.mv-form-input,
.mv-form-select,
.mv-form-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--mv-space-3) var(--mv-space-4);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-text-md);
  color: var(--mv-text);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  line-height: 1.4;
  transition: border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out),
              background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-form-input::placeholder,
.mv-form-textarea::placeholder {
  color: var(--mv-text-tertiary);
}

.mv-form-input:hover,
.mv-form-select:hover,
.mv-form-textarea:hover {
  border-color: var(--mv-neutral-400);
}

.mv-form-input:focus-visible,
.mv-form-select:focus-visible,
.mv-form-textarea:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}

.mv-form-input[aria-invalid="true"],
.mv-form-select[aria-invalid="true"],
.mv-form-textarea[aria-invalid="true"] {
  border-color: var(--mv-danger-base);
  background: var(--mv-danger-muted);
}
.mv-form-input[aria-invalid="true"]:focus-visible,
.mv-form-select[aria-invalid="true"]:focus-visible,
.mv-form-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.22);
}

.mv-form-textarea {
  resize: vertical;
  min-height: 96px;
}

/* select with chevron indicator */
.mv-form-select {
  appearance: none;
  padding-right: var(--mv-space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mv-space-4) center;
}

/* --- helper + error --- */
.mv-form-helper {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-1);
}

.mv-form-error {
  font-size: var(--mv-text-xs);
  color: var(--mv-danger-strong);
  font-weight: var(--mv-fw-medium);
  display: flex;
  align-items: center;
  gap: var(--mv-space-1);
  line-height: 1.4;
}

/* --- toggle row (switch + label + helper) --- */
.mv-form-toggle {
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  padding: var(--mv-space-3) var(--mv-space-4);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface);
  min-height: 56px;
  /* Don't stretch to match a taller grid-row sibling (e.g. a text input
     with helper text). The toggle keeps its intrinsic height. */
  align-self: start;
}

.mv-form-toggle__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-form-toggle__title {
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text);
}
.mv-form-toggle__hint {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}

/* ============================================================
   CASCADING SELECT — mv-form-cascade
   Parent + child inline with arrow, contextual empty state.
   ============================================================ */
.mv-form-cascade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-form-cascade__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-text-tertiary);
  font-size: 18px;
  padding-top: 22px; /* align with select center after labels */
}

.mv-form-cascade__empty {
  grid-column: 1 / -1;
  margin-top: var(--mv-space-2);
  padding: var(--mv-space-4);
  background: var(--mv-warning-muted);
  border: 1px solid color-mix(in srgb, var(--mv-warning-base) 40%, transparent);
  border-radius: var(--mv-radius-md);
  display: flex;
  gap: var(--mv-space-3);
  align-items: flex-start;
  color: var(--mv-warning-strong);
  font-size: var(--mv-text-sm);
}
.mv-form-cascade__empty strong { color: var(--mv-warning-strong); }
.mv-form-cascade__empty-cta {
  color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
  text-decoration: underline;
  white-space: nowrap;
}

/* ============================================================
   ERROR SUMMARY BANNER — mv-error-summary
   Anchored above the form card, lists fields with anchors.
   ============================================================ */
.mv-error-summary {
  background: var(--mv-danger-muted);
  border: 1px solid color-mix(in srgb, var(--mv-danger-base) 50%, transparent);
  border-left: 4px solid var(--mv-danger-base);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-5) var(--mv-space-6);
  display: flex;
  gap: var(--mv-space-4);
}

.mv-error-summary__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--mv-danger-base);
  font-size: 22px;
}

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

.mv-error-summary__title {
  margin: 0 0 var(--mv-space-1);
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-danger-strong);
}

.mv-error-summary__list {
  margin: var(--mv-space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-1);
}

.mv-error-summary__item a {
  font-size: var(--mv-text-sm);
  color: var(--mv-danger-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mv-error-summary__item a:hover { color: var(--mv-danger-base); }

/* ============================================================
   SUMMARY RAIL — mv-summary-rail
   Sticky sidebar with per-step recap, edit links.
   ============================================================ */
.mv-summary-rail {
  position: sticky;
  top: 112px; /* header(~60) + stepper(~52) */
  align-self: start;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
}

.mv-summary-rail__header {
  padding: var(--mv-space-5) var(--mv-space-5) var(--mv-space-3);
  border-bottom: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}

.mv-summary-rail__title {
  margin: 0;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mv-summary-rail__progress {
  margin-left: auto;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}

.mv-summary-rail__body {
  padding: var(--mv-space-4) var(--mv-space-5) var(--mv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5);
}

.mv-summary-rail__section {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
}

.mv-summary-rail__section-head {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-summary-rail__section-title {
  flex: 1;
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mv-summary-rail__edit {
  all: unset;
  cursor: pointer;
  color: var(--mv-primary-700);
  font-size: 12px;
  padding: 4px;
  border-radius: var(--mv-radius-sm);
}
.mv-summary-rail__edit:hover {
  background: var(--mv-primary-50);
}
.mv-summary-rail__edit:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

.mv-summary-rail__kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-summary-rail__kv dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-tertiary);
  font-weight: var(--mv-fw-medium);
}
.mv-summary-rail__kv dd {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  font-weight: var(--mv-fw-medium);
  word-break: break-word;
}
.mv-summary-rail__kv dd[data-empty="true"] {
  color: var(--mv-text-tertiary);
  font-style: italic;
  font-weight: var(--mv-fw-regular);
}

.mv-summary-rail__divider {
  border: 0;
  border-top: 1px dashed var(--mv-border);
  margin: 0;
}

.mv-summary-rail__state {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1);
  padding: 2px var(--mv-space-2);
  border-radius: var(--mv-radius-full);
  font-size: 10px;
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--mv-neutral-150);
  color: var(--mv-text-muted);
}
.mv-summary-rail__state[data-state="complete"] {
  background: var(--mv-success-muted);
  color: var(--mv-success-strong);
}
.mv-summary-rail__state[data-state="active"] {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
}
.mv-summary-rail__state[data-state="pending"] {
  background: var(--mv-neutral-150);
  color: var(--mv-text-muted);
}

/* ============================================================
   FOOTER — mv-wizard-footer (sticky primary actions)
   ============================================================ */
.mv-wizard-footer {
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-top: 1px solid var(--mv-border);
  position: sticky;
  bottom: 0;
  z-index: 15;
}

.mv-wizard-footer__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--mv-space-4) var(--mv-space-6);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}

.mv-wizard-footer__left,
.mv-wizard-footer__right {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-wizard-footer__right {
  margin-left: auto;
}

.mv-wizard-footer__hint {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-wizard-footer__hint kbd {
  font-family: var(--mv-font-sans);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  color: var(--mv-text);
}

/* ============================================================
   BUTTON — mv-btn-v2 (wizard variants & size overrides)
   ============================================================ */
.mv-btn-v2 {
  --mv-btn-h: 40px;
  --mv-btn-px: var(--mv-space-4);
  --mv-btn-fs: var(--mv-text-sm);
  --mv-btn-radius: var(--mv-radius-md);
  --mv-btn-gap: var(--mv-space-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mv-btn-gap);
  height: var(--mv-btn-h);
  min-height: 44px; /* a11y: WCAG 2.5.5 */
  padding-inline: var(--mv-btn-px);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-btn-fs);
  font-weight: var(--mv-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--mv-btn-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-btn-v2--lg { --mv-btn-h: 48px; --mv-btn-px: var(--mv-space-6); --mv-btn-fs: var(--mv-text-md); }
.mv-btn-v2--sm { --mv-btn-h: 34px; --mv-btn-px: var(--mv-space-3); --mv-btn-fs: var(--mv-text-xs); min-height: 34px;}

.mv-btn-v2--primary {
  background: var(--mv-primary-600);
  color: #fff;
  border-color: var(--mv-primary-600);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04),
              inset 0 1px 0 rgb(255 255 255 / 0.20);
}
.mv-btn-v2--primary:hover {
  background: var(--mv-primary-700);
  border-color: var(--mv-primary-700);
}
.mv-btn-v2--primary:active { transform: scale(0.98); }

.mv-btn-v2--secondary {
  background: var(--mv-surface);
  color: var(--mv-text);
  border-color: var(--mv-border-strong);
}
.mv-btn-v2--secondary:hover {
  background: var(--mv-surface-sunken);
}

.mv-btn-v2--ghost {
  background: transparent;
  color: var(--mv-text-muted);
}
.mv-btn-v2--ghost:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}

.mv-btn-v2--danger-ghost {
  background: transparent;
  color: var(--mv-danger-strong);
}
.mv-btn-v2--danger-ghost:hover {
  background: var(--mv-danger-muted);
}

.mv-btn-v2:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* ============================================================
   MODAL — mv-wizard-modal (cancel confirmation)
   ============================================================ */
.mv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(11 12 14 / 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-5);
}
.mv-modal-backdrop[hidden] { display: none; }

.mv-modal-v2 {
  width: 100%;
  max-width: 480px;
  background: var(--mv-surface);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mv-modal-v2__header {
  padding: var(--mv-space-6) var(--mv-space-6) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-4);
}
.mv-modal-v2__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mv-radius-full);
  background: var(--mv-warning-muted);
  color: var(--mv-warning-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.mv-modal-v2__title {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}
.mv-modal-v2__body {
  padding: var(--mv-space-4) var(--mv-space-6) var(--mv-space-5);
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  line-height: 1.55;
}
.mv-modal-v2__footer {
  padding: var(--mv-space-4) var(--mv-space-6);
  border-top: 1px solid var(--mv-border-subtle);
  display: flex;
  gap: var(--mv-space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ============================================================
   REVIEW (step 9 — Revisar y confirmar) — mv-review
   ============================================================ */
.mv-review {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-6);
}

.mv-review__hero {
  padding: var(--mv-space-6);
  background: linear-gradient(135deg, var(--mv-primary-50), #fff);
  border: 1px solid var(--mv-primary-100);
  border-radius: var(--mv-radius-lg);
  display: flex;
  align-items: center;
  gap: var(--mv-space-5);
}
.mv-review__hero-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-primary-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--mv-elev-brand-glow);
  flex-shrink: 0;
}
.mv-review__hero-title {
  margin: 0;
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}
.mv-review__hero-text {
  margin: 4px 0 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
}

.mv-review__group {
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  overflow: hidden;
}
.mv-review__group-head {
  padding: var(--mv-space-4) var(--mv-space-5);
  background: var(--mv-surface-sunken);
  border-bottom: 1px solid var(--mv-border);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
.mv-review__group-title {
  margin: 0;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mv-review__group-edit {
  margin-left: auto;
}

.mv-review__list {
  margin: 0;
  padding: var(--mv-space-4) var(--mv-space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mv-space-4) var(--mv-space-6);
}
.mv-review__list > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-review__list dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-tertiary);
  font-weight: var(--mv-fw-medium);
}
.mv-review__list dd {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  font-weight: var(--mv-fw-medium);
}

/* ============================================================
   CHIP / BADGE (for summary rail, review page)
   ============================================================ */
.mv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-1);
  padding: 2px var(--mv-space-2);
  font-size: 11px;
  font-weight: var(--mv-fw-medium);
  border-radius: var(--mv-radius-full);
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  border: 1px solid var(--mv-border);
}
.mv-chip--primary {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  border-color: var(--mv-primary-100);
}
.mv-chip--success {
  background: var(--mv-success-muted);
  color: var(--mv-success-strong);
  border-color: transparent;
}

/* ============================================================
   MOBILE — <= 900px
   ============================================================ */
@media (max-width: 900px) {
  .mv-wizard-body {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--mv-space-5) var(--mv-space-4) calc(var(--mv-space-9) + 64px);
    gap: var(--mv-space-5);
  }
  .mv-summary-rail {
    position: static;
    order: 2;
  }
  .mv-stepper { display: none; }
  .mv-stepper-compact { display: flex; }
  .mv-form-card__header { flex-direction: column; align-items: flex-start; gap: var(--mv-space-3); padding: var(--mv-space-5); }
  .mv-form-card__body { padding: var(--mv-space-5); gap: var(--mv-space-5); }
  .mv-form-grid,
  .mv-form-grid--3,
  .mv-form-grid--1 { grid-template-columns: 1fr; }
  .mv-form-cascade {
    grid-template-columns: 1fr;
  }
  .mv-form-cascade__arrow {
    padding-top: 0;
    transform: rotate(90deg);
    justify-self: start;
  }
  .mv-review__list {
    grid-template-columns: 1fr;
  }
  .mv-wizard-header__title { display: none; }
  .mv-wizard-header__crumb { display: none; }
  .mv-wizard-footer__inner {
    padding: var(--mv-space-3) var(--mv-space-4);
  }
  .mv-wizard-footer__hint { display: none; }
  .mv-btn-v2 { min-height: 44px; }
}

@media (max-width: 480px) {
  .mv-form-card__title { font-size: var(--mv-display-h5); }
  .mv-wizard-header__bar { padding: var(--mv-space-3) var(--mv-space-4); gap: var(--mv-space-3); }
  .mv-wizard-header__divider { display: none; }
}
/* mv-sr-only — visually hidden, accessible to screen readers (WCAG technique C7) */
.mv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MV-WIZARD OVERRIDES — defeat metavoz-theme.css legacy !important
   ============================================================
   The legacy metavoz-theme.css (loaded before v2) has rules with
   !important that bleed into the wizard:
     • .mv-form-card { padding: 36px 48px !important; max-width: 900px;
                       margin: 0 auto 3rem; border-radius: 20px; }
     • input[type=text/etc] { padding: 9px 12px !important;
                              border-radius: 8px !important;
                              font-size: 0.88rem !important; }
   Without these overrides the wizard renders compressed (input 44px
   instead of 47px) and the form card has a 96px horizontal padding
   gap that breaks alignment with the mockup. We use higher specificity
   (mv-wizard-shell descendant) plus !important to deterministically win.
   ============================================================ */
.mv-wizard-shell .mv-form-card {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  border-radius: var(--mv-radius-xl) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mv-wizard-shell .mv-form-card__header {
  padding: var(--mv-space-6) var(--mv-space-7) !important;
}
.mv-wizard-shell .mv-form-card__body {
  padding: var(--mv-space-6) var(--mv-space-7) !important;
}
.mv-wizard-shell .mv-form-input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mv-wizard-shell .mv-form-select,
.mv-wizard-shell .mv-form-textarea {
  padding: var(--mv-space-3) var(--mv-space-4) !important;
  border-radius: var(--mv-radius-md) !important;
  font-size: var(--mv-text-md) !important;
  min-height: 47px !important;
  background: var(--mv-surface) !important;
  border: 1px solid var(--mv-border-strong) !important;
  color: var(--mv-text) !important;
}
/* Defensive: any checkbox/radio inside the wizard shell shouldn't inherit
   text-input-style from .mv-form-input or .form-control. Reset to native sizing. */
.mv-wizard-shell input[type="checkbox"],
.mv-wizard-shell input[type="radio"] {
  min-height: auto !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Kill the OLD metavoz-theme.css full-width connector line on .mv-stepper::before
   — v2 uses per-item ::before connectors instead. */
.mv-wizard-shell .mv-stepper::before {
  display: none !important;
  content: none !important;
}
.mv-wizard-shell .mv-form-input:focus,
.mv-wizard-shell .mv-form-select:focus,
.mv-wizard-shell .mv-form-textarea:focus,
.mv-wizard-shell .mv-form-input:focus-visible,
.mv-wizard-shell .mv-form-select:focus-visible,
.mv-wizard-shell .mv-form-textarea:focus-visible {
  border-color: var(--mv-primary-500) !important;
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18) !important;
  outline: none !important;
}
/* ===== END MV-WIZARD COMPONENTS ===== */

/* ===== MV-LIST COMPONENTS (Sprint 4 redesign) ===== */
/* Source: mv-list.css v1.0.0 (2026-04-11)             */
/* Appended to metavoz-theme-v2.css after MV-WIZARD.   */
/* Purpose: unified PlantillaListView for              */
/*   /calificacion/list/ and /formulario/list/.         */
/* New tokens: --mv-table-actions-col-w,               */
/*   --mv-topbar-h, --mv-bulk-bar-h, --mv-bulk-bar-bottom */
/* ===================================================== */
/* ------------------------------------------------------------
   1. New tokens (minimal — only what v2 doesn't already provide)
   ------------------------------------------------------------ */
:root {
  /* Width of the action button cluster in the list table. Replaces
     hardcoded max-width: 20rem / 25rem (see audit §3.3). */
  --mv-table-actions-col-w:  12.5rem;

  /* Height of the persistent Django shell topbar. Used to compute
     full-viewport height for embedded Vue lists after iframe
     eviction (ola 3 in the audit). */
  --mv-topbar-h:             64px;

  /* Floating bulk-action bar offset from bottom + height. */
  --mv-bulk-bar-h:           64px;
  --mv-bulk-bar-bottom:      24px;
}
/* ============================================================
   3. DJANGO SHELL — mv-shell-*
   The Django part of the page after iframe eviction. Header
   (topbar), sidebar, breadcrumb, h1 live here. The Vue component
   mounts inside .mv-shell__content.
   ============================================================ */
.mv-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: var(--mv-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  min-height: 100vh;
  background: var(--mv-canvas);
}

/* ----- topbar ----- */
.mv-shell__topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--mv-border);
  display: flex;
  align-items: center;
  padding: 0 var(--mv-space-6);
  gap: var(--mv-space-4);
}

.mv-shell__topbar-brand {
  display: none; /* brand lives in sidebar on desktop */
}

.mv-shell__search {
  flex: 1;
  max-width: 520px;
  min-width: 0;
  position: relative;
}

.mv-shell__search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  font: inherit;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
}
.mv-shell__search-input::placeholder { color: var(--mv-text-tertiary); }
.mv-shell__search-input:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  background: var(--mv-surface);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}
.mv-shell__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mv-text-muted);
  font-size: 13px;
  pointer-events: none;
}
.mv-shell__search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-sm);
  color: var(--mv-text-muted);
  font-family: var(--mv-font-sans);
}

.mv-shell__topbar-spacer { flex: 1; }

.mv-shell__topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

.mv-shell__icon-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  position: relative;
}
.mv-shell__icon-btn:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-shell__icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-shell__icon-btn .mv-shell__notif-dot {
  position: absolute;
  top: 8px; right: 10px;
  width: 7px; height: 7px;
  background: var(--mv-primary-500);
  border-radius: var(--mv-radius-full);
  border: 1.5px solid var(--mv-surface);
}

.mv-shell__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--mv-radius-full);
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  color: #fff;
  font-size: 12px;
  font-weight: var(--mv-fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--mv-space-2);
  box-shadow: var(--mv-elev-1);
}

/* ----- sidebar ----- */
.mv-shell__sidebar {
  grid-area: sidebar;
  background: var(--mv-surface);
  border-right: 1px solid var(--mv-border);
  padding: var(--mv-space-5) var(--mv-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.mv-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: var(--mv-space-2) var(--mv-space-3);
  text-decoration: none;
  color: var(--mv-text);
}
.mv-shell__brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--mv-radius-md);
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--mv-elev-2);
}
.mv-shell__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mv-shell__brand-name {
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-md);
  letter-spacing: -0.01em;
}
.mv-shell__brand-tenant {
  font-size: var(--mv-text-2xs);
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mv-shell__nav {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}

.mv-shell__nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mv-shell__nav-label {
  font-size: var(--mv-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mv-text-tertiary);
  font-weight: var(--mv-fw-semibold);
  padding: 0 var(--mv-space-3);
  margin-bottom: var(--mv-space-1);
}

.mv-shell__nav-item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  padding: 9px var(--mv-space-3);
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  text-decoration: none;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  min-height: 38px;
  position: relative;
  transition: background var(--mv-dur-fast) var(--mv-ease-out),
              color var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-shell__nav-item:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  text-decoration: none;
}
.mv-shell__nav-item[aria-current="page"] {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
}
.mv-shell__nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-primary-500);
}
.mv-shell__nav-item:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-shell__nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.mv-shell__nav-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--mv-text-tertiary);
  font-variant-numeric: tabular-nums;
  background: var(--mv-surface-sunken);
  padding: 1px 7px;
  border-radius: var(--mv-radius-full);
}
.mv-shell__nav-item[aria-current="page"] .mv-shell__nav-count {
  background: var(--mv-primary-100);
  color: var(--mv-primary-700);
}

/* nested submenu (Configuración > Plantillas > …) */
.mv-shell__nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: var(--mv-space-7);
  padding-left: var(--mv-space-3);
  border-left: 1px solid var(--mv-border);
  margin-top: var(--mv-space-1);
  margin-bottom: var(--mv-space-2);
}
.mv-shell__nav-sub .mv-shell__nav-item {
  min-height: 32px;
  padding-block: 6px;
  font-size: var(--mv-text-xs);
}
.mv-shell__nav-sub .mv-shell__nav-item[aria-current="page"]::before {
  left: -13px;
}

/* ----- content area (where Vue mounts) ----- */
.mv-shell__content {
  grid-area: content;
  padding: var(--mv-space-6) var(--mv-space-7) var(--mv-space-10);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5);
}

.mv-shell__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  flex-wrap: wrap;
}
.mv-shell__breadcrumb a {
  color: var(--mv-text-muted);
  text-decoration: none;
}
.mv-shell__breadcrumb a:hover {
  color: var(--mv-text);
  text-decoration: underline;
}
.mv-shell__breadcrumb-sep {
  color: var(--mv-text-tertiary);
  font-size: 10px;
}
.mv-shell__breadcrumb-current {
  color: var(--mv-text);
  font-weight: var(--mv-fw-medium);
}

.mv-shell__page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
}

.mv-shell__page-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mv-shell__page-title {
  margin: 0;
  font-size: var(--mv-display-h2);
  font-weight: var(--mv-fw-bold);
  letter-spacing: -0.02em;
  color: var(--mv-text);
  line-height: 1.15;
}

.mv-shell__page-subtitle {
  margin: 0;
  color: var(--mv-text-muted);
  font-size: var(--mv-text-md);
  line-height: 1.5;
  max-width: 68ch;
}

.mv-shell__page-actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-shrink: 0;
}

/* ============================================================
   4. LIST VIEW SURFACE — mv-list-*
   Hosts the unified PlantillaListView. Renders inside
   .mv-shell__content after breadcrumb + page head.
   ============================================================ */
.mv-list {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mv-list__toolbar {
  padding: var(--mv-space-4) var(--mv-space-5);
  border-bottom: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
  background: var(--mv-surface);
  position: sticky;
  top: var(--mv-topbar-h);
  z-index: 5;
}

.mv-list__search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 360px;
}
.mv-list__search-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px 8px 36px;
  font: inherit;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  transition: border-color var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-list__search-input::placeholder { color: var(--mv-text-tertiary); }
.mv-list__search-input:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}
.mv-list__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mv-text-muted);
  font-size: 13px;
  pointer-events: none;
}
.mv-list__search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-full);
  cursor: pointer;
  display: none;
}
.mv-list__search-clear:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-list__search--has-value .mv-list__search-clear { display: inline-flex; align-items: center; justify-content: center; }

/* filter chip row (Activos · Ocultos · En uso · Sin usar) */
.mv-list__chips {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.mv-chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-full);
  cursor: pointer;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-chip-filter:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-chip-filter[aria-pressed="true"] {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  border-color: var(--mv-primary-200);
}
.mv-chip-filter__count {
  font-variant-numeric: tabular-nums;
  color: var(--mv-text-tertiary);
}
.mv-chip-filter[aria-pressed="true"] .mv-chip-filter__count {
  color: var(--mv-primary-600);
}
.mv-chip-filter:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-chip-filter--clear {
  border-style: dashed;
  color: var(--mv-text-muted);
}

.mv-list__toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

/* result count row (Mostrando 5 de 12) */
.mv-list__meta {
  padding: var(--mv-space-3) var(--mv-space-5);
  border-bottom: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  background: var(--mv-surface-sunken);
  flex-wrap: wrap;
}
.mv-list__meta strong {
  color: var(--mv-text);
  font-weight: var(--mv-fw-semibold);
}
.mv-list__meta-tokens {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mv-list__meta-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-full);
  color: var(--mv-text);
  font-weight: var(--mv-fw-medium);
}
.mv-list__meta-token button {
  all: unset;
  cursor: pointer;
  color: var(--mv-text-muted);
  font-size: 10px;
  width: 14px;
  height: 14px;
  border-radius: var(--mv-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mv-list__meta-token button:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-danger-base);
}
.mv-list__meta-reset {
  margin-left: auto;
  font-size: var(--mv-text-xs);
  color: var(--mv-primary-700);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--mv-fw-medium);
  padding: 4px 8px;
  border-radius: var(--mv-radius-sm);
}
.mv-list__meta-reset:hover { background: var(--mv-primary-50); }

/* ============================================================
   5. TABLE — mv-table-v2
   ============================================================ */
.mv-list__table-wrap {
  overflow-x: auto;
  flex: 1;
  min-height: 0;
}

.mv-table-v2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
}

.mv-table-v2 thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mv-surface-sunken);
  border-bottom: 1px solid var(--mv-border);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-muted);
  white-space: nowrap;
  user-select: none;
}

.mv-table-v2 th[aria-sort] {
  cursor: pointer;
}
.mv-table-v2 th[aria-sort]:hover {
  background: var(--mv-neutral-150);
  color: var(--mv-text);
}
.mv-table-v2 th[aria-sort]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mv-primary-500);
}
.mv-table-v2 th .mv-table-v2__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mv-table-v2 th[aria-sort="ascending"] .mv-table-v2__sort-icon::before { content: "\f0de"; } /* fa-sort-up */
.mv-table-v2 th[aria-sort="descending"] .mv-table-v2__sort-icon::before { content: "\f0dd"; } /* fa-sort-down */
.mv-table-v2 th[aria-sort="none"] .mv-table-v2__sort-icon {
  color: var(--mv-text-tertiary);
  opacity: 0.6;
}
.mv-table-v2 th[aria-sort="ascending"] .mv-table-v2__sort-icon,
.mv-table-v2 th[aria-sort="descending"] .mv-table-v2__sort-icon {
  color: var(--mv-primary-600);
}
.mv-table-v2__sort-icon {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
}

.mv-table-v2 tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--mv-border-subtle);
  vertical-align: top;
  line-height: 1.45;
}

.mv-table-v2 tbody tr {
  background: var(--mv-surface);
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-table-v2 tbody tr:hover {
  background: var(--mv-surface-sunken);
}
.mv-table-v2 tbody tr[aria-selected="true"] {
  background: var(--mv-primary-50);
}
.mv-table-v2 tbody tr[aria-selected="true"]:hover {
  background: var(--mv-primary-100);
}

/* checkbox column */
.mv-table-v2 th.mv-table-v2__check,
.mv-table-v2 td.mv-table-v2__check {
  width: 44px;
  padding-left: 20px;
  padding-right: 4px;
}

/* name column (primary) */
.mv-table-v2__name-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mv-table-v2__name {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  letter-spacing: -0.005em;
  /* clickable: behaves like row edit trigger */
}
.mv-table-v2__name-link {
  color: inherit;
  text-decoration: none;
}
.mv-table-v2__name-link:hover {
  color: var(--mv-primary-700);
  text-decoration: none;
}
.mv-table-v2__name-link:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
  border-radius: var(--mv-radius-sm);
}
.mv-table-v2__name-sub {
  display: flex;
  gap: var(--mv-space-2);
  align-items: center;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}

/* description column with 2-line clamp */
.mv-table-v2__desc {
  color: var(--mv-text-muted);
  font-size: var(--mv-text-sm);
  line-height: 1.5;
  max-width: 42ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-table-v2__desc--empty {
  color: var(--mv-text-tertiary);
  font-style: italic;
}

/* last-modified column (tabular numerics) */
.mv-table-v2__when {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text);
  white-space: nowrap;
}
.mv-table-v2__when-time {
  font-size: 11px;
  color: var(--mv-text-tertiary);
}

/* actions column */
.mv-table-v2 th.mv-table-v2__actions,
.mv-table-v2 td.mv-table-v2__actions {
  width: var(--mv-table-actions-col-w);
  max-width: var(--mv-table-actions-col-w);
  text-align: right;
  padding-right: 20px;
}

.mv-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}

.mv-row-actions__btn {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
  position: relative;
}
.mv-row-actions__btn:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  border-color: var(--mv-border);
}
.mv-row-actions__btn:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-row-actions__btn[disabled],
.mv-row-actions__btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.mv-row-actions__btn--danger:hover {
  background: var(--mv-danger-muted);
  color: var(--mv-danger-strong);
  border-color: color-mix(in srgb, var(--mv-danger-base) 25%, transparent);
}
.mv-row-actions__btn--primary:hover {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  border-color: var(--mv-primary-100);
}

/* tooltip (pure CSS, visible on hover + focus-visible) */
.mv-row-actions__btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--mv-neutral-800);
  color: #fff;
  font-size: 11px;
  font-weight: var(--mv-fw-medium);
  padding: 4px 8px;
  border-radius: var(--mv-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--mv-dur-fast) var(--mv-ease-out),
              transform var(--mv-dur-fast) var(--mv-ease-out);
  z-index: 100;
}
.mv-row-actions__btn:hover::after,
.mv-row-actions__btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   6. CHIP LIST — used inside cells for subcalificaciones
   ============================================================ */
.mv-chip-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 320px;
}
.mv-chip-list__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-full);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-chip-list__more {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-primary-700);
  background: var(--mv-primary-50);
  border: 1px solid var(--mv-primary-100);
  border-radius: var(--mv-radius-full);
  cursor: help;
}

/* ============================================================
   7. STATUS TAG (Activo / Oculto / En uso · Sin uso)
   ============================================================ */
.mv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--mv-fw-semibold);
  border-radius: var(--mv-radius-full);
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.mv-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--mv-radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.mv-tag--active {
  color: var(--mv-success-strong);
  background: var(--mv-success-muted);
  border: 1px solid color-mix(in srgb, var(--mv-success-base) 25%, transparent);
}
.mv-tag--hidden {
  color: var(--mv-text-muted);
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
}
.mv-tag--inuse {
  color: var(--mv-info-strong);
  background: var(--mv-info-muted);
  border: 1px solid color-mix(in srgb, var(--mv-info-base) 25%, transparent);
}
.mv-tag--unused {
  color: var(--mv-warning-strong);
  background: var(--mv-warning-muted);
  border: 1px solid color-mix(in srgb, var(--mv-warning-base) 25%, transparent);
}

.mv-tag-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* ============================================================
   8. CHECKBOX (native, styled)
   ============================================================ */
.mv-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-sm);
  background: var(--mv-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-check:hover {
  border-color: var(--mv-primary-500);
}
.mv-check:checked {
  background: var(--mv-primary-600);
  border-color: var(--mv-primary-600);
}
.mv-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mv-check:indeterminate {
  background: var(--mv-primary-600);
  border-color: var(--mv-primary-600);
}
.mv-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 10px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.mv-check:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}

/* ============================================================
   9. PAGINATION
   ============================================================ */
.mv-list__pagination {
  padding: var(--mv-space-3) var(--mv-space-5);
  border-top: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
  background: var(--mv-surface);
}
.mv-pagination__info {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}
.mv-pagination__info strong {
  color: var(--mv-text);
  font-weight: var(--mv-fw-semibold);
}
.mv-pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.mv-pagination__btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mv-pagination__btn:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-pagination__btn[aria-current="page"] {
  background: var(--mv-primary-600);
  color: #fff;
  border-color: var(--mv-primary-600);
}
.mv-pagination__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.mv-pagination__btn:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-pagination__size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}
.mv-pagination__size select {
  min-height: 32px;
  padding: 4px 28px 4px 10px;
  font: inherit;
  font-size: var(--mv-text-xs);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* ============================================================
   10. MOBILE CARD LAYOUT — stacked cards (<=768px)
   ============================================================ */
.mv-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  padding: var(--mv-space-4);
}

.mv-card-item {
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-lg);
  padding: var(--mv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  box-shadow: var(--mv-elev-1);
  position: relative;
}
.mv-card-item[aria-selected="true"] {
  border-color: var(--mv-primary-300);
  background: var(--mv-primary-50);
}

.mv-card-item__head {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-3);
}
.mv-card-item__check-wrap {
  padding-top: 2px;
}
.mv-card-item__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mv-card-item__title {
  margin: 0;
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  letter-spacing: -0.005em;
  word-break: break-word;
}
.mv-card-item__meta {
  font-size: 11px;
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}
.mv-card-item__kebab {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--mv-border);
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  flex-shrink: 0;
}
.mv-card-item__kebab:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}

.mv-card-item__tags {
  display: flex;
  gap: var(--mv-space-2);
  flex-wrap: wrap;
}
.mv-card-item__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ============================================================
   11. EMPTY STATE
   ============================================================ */
.mv-empty {
  padding: 80px var(--mv-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mv-space-4);
}
.mv-empty__icon {
  width: 96px;
  height: 96px;
  border-radius: var(--mv-radius-2xl);
  background: linear-gradient(135deg, var(--mv-primary-50), #fff);
  border: 1px solid var(--mv-primary-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mv-primary-600);
  font-size: 36px;
  box-shadow: 0 0 0 8px rgb(247 24 131 / 0.04);
}
.mv-empty__title {
  margin: 0;
  font-size: var(--mv-display-h4);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  letter-spacing: -0.01em;
}
.mv-empty__body {
  margin: 0;
  max-width: 52ch;
  color: var(--mv-text-muted);
  font-size: var(--mv-text-md);
  line-height: 1.55;
}
.mv-empty__actions {
  margin-top: var(--mv-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.mv-empty__learn {
  font-size: var(--mv-text-sm);
  color: var(--mv-primary-700);
  text-decoration: none;
  font-weight: var(--mv-fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mv-empty__learn:hover { text-decoration: underline; }

/* ============================================================
   12. BULK ACTION BAR (floating, appears on selection)
   ============================================================ */
.mv-bulk-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: var(--mv-bulk-bar-bottom) !important;
  height: auto !important;
  width: auto !important;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--mv-neutral-800);
  color: #fff;
  border-radius: var(--mv-radius-full);
  padding: 8px 8px 8px 20px;
  display: none;
  align-items: center;
  gap: var(--mv-space-3);
  box-shadow: 0 18px 48px -8px rgb(0 0 0 / 0.35),
              0 8px 16px -4px rgb(0 0 0 / 0.20),
              0 0 0 1px rgb(255 255 255 / 0.08);
  animation: mv-bulk-in 260ms var(--mv-ease-out);
  max-width: calc(100vw - 32px);
  flex-wrap: wrap;
}
@keyframes mv-bulk-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.mv-bulk-bar__count {
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-semibold);
}
.mv-bulk-bar__sep {
  width: 1px;
  height: 20px;
  background: rgb(255 255 255 / 0.15);
}
.mv-bulk-bar__btn {
  min-height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid transparent;
  color: #fff;
  font: inherit;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  border-radius: var(--mv-radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-bulk-bar__btn:hover {
  background: rgb(255 255 255 / 0.08);
}
.mv-bulk-bar__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mv-neutral-800),
              0 0 0 4px var(--mv-primary-500);
}
.mv-bulk-bar__btn--danger {
  color: #fca5a5;
}
.mv-bulk-bar__btn--danger:hover {
  background: rgb(239 68 68 / 0.18);
  color: #fff;
}
.mv-bulk-bar__close {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: var(--mv-radius-full);
  background: rgb(255 255 255 / 0.08);
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.mv-bulk-bar__close:hover {
  background: rgb(255 255 255 / 0.18);
}
/* Show only when JS adds .is-active */
.mv-bulk-bar.is-active {
  display: inline-flex !important;
}
/* Reserve space for bulk bar when visible */
body:has(.mv-bulk-bar.is-active) .mv-list-page__body {
  padding-bottom: 80px;
}

/* ============================================================
   13. MODAL — reuse mv-modal-v2 layout but widen for forms
   ============================================================ */
.mv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(11 12 14 / 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-5);
  animation: mv-backdrop-in 200ms var(--mv-ease-out);
}
@keyframes mv-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mv-modal-v2 {
  width: 100%;
  max-width: 480px;
  background: var(--mv-surface);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: mv-modal-in 220ms var(--mv-ease-out);
}
@keyframes mv-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mv-modal-v2--md { max-width: 560px; }
.mv-modal-v2--lg { max-width: 760px; }
.mv-modal-v2--xl { max-width: 960px; }

.mv-modal-v2__header {
  padding: var(--mv-space-5) var(--mv-space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border-subtle);
}
.mv-modal-v2__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--mv-radius-lg);
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  border: 1px solid var(--mv-primary-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.mv-modal-v2__icon--warning {
  background: var(--mv-warning-muted);
  color: var(--mv-warning-strong);
  border-color: color-mix(in srgb, var(--mv-warning-base) 30%, transparent);
}
.mv-modal-v2__icon--danger {
  background: var(--mv-danger-muted);
  color: var(--mv-danger-strong);
  border-color: color-mix(in srgb, var(--mv-danger-base) 30%, transparent);
}
.mv-modal-v2__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mv-modal-v2__title {
  margin: 0;
  font-size: var(--mv-display-h4);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  letter-spacing: -0.01em;
}
.mv-modal-v2__subtitle {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  line-height: 1.5;
}
.mv-modal-v2__close {
  width: 40px;
  height: 40px;
  min-height: 40px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mv-modal-v2__close:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-modal-v2__close:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-modal-v2__body {
  padding: var(--mv-space-6);
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5);
  max-height: 70vh;
  overflow-y: auto;
}
.mv-modal-v2__footer {
  padding: var(--mv-space-4) var(--mv-space-6);
  border-top: 1px solid var(--mv-border-subtle);
  display: flex;
  gap: var(--mv-space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  background: var(--mv-surface-sunken);
}
.mv-modal-v2__footer-left {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

/* Modal tabs (for formulario modal-with-tabs) */
.mv-modal-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--mv-space-6);
  border-bottom: 1px solid var(--mv-border);
  background: var(--mv-surface);
}
.mv-modal-tabs__item {
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mv-text-muted);
  font: inherit;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: -1px;
  transition: color var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-modal-tabs__item:hover {
  color: var(--mv-text);
}
.mv-modal-tabs__item[aria-selected="true"] {
  color: var(--mv-primary-700);
  border-bottom-color: var(--mv-primary-500);
}
.mv-modal-tabs__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--mv-primary-500);
  border-radius: var(--mv-radius-sm);
}
.mv-modal-tabs__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: var(--mv-fw-semibold);
  border-radius: var(--mv-radius-full);
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}
.mv-modal-tabs__item[aria-selected="true"] .mv-modal-tabs__counter {
  background: var(--mv-primary-100);
  color: var(--mv-primary-700);
}
.mv-modal-tabs__item-error {
  width: 6px;
  height: 6px;
  background: var(--mv-danger-base);
  border-radius: var(--mv-radius-full);
  margin-left: 2px;
}

/* reuse wizard form primitives (mv-form-field, mv-form-label,
   mv-form-input) from mv-wizard.css — declared here minimally as
   fallback so standalone mockups work. */
.mv-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
  min-width: 0;
}
.mv-form-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text);
}
.mv-form-label__required { color: var(--mv-danger-base); font-weight: var(--mv-fw-bold); }
.mv-form-label__optional { font-size: var(--mv-text-xs); color: var(--mv-text-muted); font-weight: var(--mv-fw-regular); }
.mv-form-input,
.mv-form-textarea,
.mv-form-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--mv-text-md);
  color: var(--mv-text);
  background: var(--mv-surface);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  line-height: 1.4;
}
.mv-form-textarea { resize: vertical; min-height: 96px; }
.mv-form-input:focus-visible,
.mv-form-textarea:focus-visible,
.mv-form-select:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}
.mv-form-helper {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  line-height: 1.45;
}

/* inline list editor for subcalificaciones / campos */
.mv-inline-list {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-2);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
  padding: var(--mv-space-3);
  background: var(--mv-surface-sunken);
}
.mv-inline-list__item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: 8px 10px;
  background: var(--mv-surface);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-md);
}
.mv-inline-list__handle {
  color: var(--mv-text-tertiary);
  cursor: grab;
  padding: 4px;
}
.mv-inline-list__text {
  flex: 1;
  min-width: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text);
}
.mv-inline-list__type {
  font-size: 11px;
  color: var(--mv-text-muted);
  padding: 2px 8px;
  border-radius: var(--mv-radius-full);
  background: var(--mv-surface-sunken);
  border: 1px solid var(--mv-border);
}
.mv-inline-list__remove {
  width: 32px;
  height: 32px;
  min-height: 32px;
  background: transparent;
  border: none;
  color: var(--mv-text-muted);
  border-radius: var(--mv-radius-sm);
  cursor: pointer;
}
.mv-inline-list__remove:hover {
  background: var(--mv-danger-muted);
  color: var(--mv-danger-strong);
}
.mv-inline-list__add-row {
  display: flex;
  gap: var(--mv-space-2);
  margin-top: 4px;
}
.mv-inline-list__add-row input {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  font: inherit;
  font-size: var(--mv-text-sm);
  border: 1px solid var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface);
}
.mv-inline-list__add-row input:focus-visible {
  outline: none;
  border-color: var(--mv-primary-500);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.18);
}

.mv-preview-panel {
  padding: var(--mv-space-5);
  border: 1px dashed var(--mv-border-strong);
  border-radius: var(--mv-radius-md);
  background: var(--mv-surface-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
}

/* ============================================================
   14. BUTTON — mv-btn-v2 (mirror from wizard)
   ============================================================ */
.mv-btn-v2 {
  --mv-btn-h: 40px;
  --mv-btn-px: 16px;
  --mv-btn-fs: var(--mv-text-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--mv-btn-h);
  min-height: 44px;
  padding-inline: var(--mv-btn-px);
  font-family: var(--mv-font-sans);
  font-size: var(--mv-btn-fs);
  font-weight: var(--mv-fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-btn-v2--lg { --mv-btn-h: 48px; --mv-btn-px: 24px; --mv-btn-fs: var(--mv-text-md); }
.mv-btn-v2--sm { --mv-btn-h: 34px; --mv-btn-px: 12px; --mv-btn-fs: var(--mv-text-xs); min-height: 34px; }

.mv-btn-v2--primary {
  background: var(--mv-primary-600);
  color: #fff;
  border-color: var(--mv-primary-600);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), inset 0 1px 0 rgb(255 255 255 / 0.2);
}
.mv-btn-v2--primary:hover {
  background: var(--mv-primary-700);
  border-color: var(--mv-primary-700);
}
.mv-btn-v2--secondary {
  background: var(--mv-surface);
  color: var(--mv-text);
  border-color: var(--mv-border-strong);
}
.mv-btn-v2--secondary:hover {
  background: var(--mv-surface-sunken);
}
.mv-btn-v2--ghost {
  background: transparent;
  color: var(--mv-text-muted);
}
.mv-btn-v2--ghost:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
}
.mv-btn-v2--danger {
  background: var(--mv-danger-base);
  color: #fff;
  border-color: var(--mv-danger-base);
}
.mv-btn-v2--danger:hover {
  background: var(--mv-danger-strong);
  border-color: var(--mv-danger-strong);
}
.mv-btn-v2--danger-ghost {
  background: transparent;
  color: var(--mv-danger-strong);
}
.mv-btn-v2--danger-ghost:hover {
  background: var(--mv-danger-muted);
}
.mv-btn-v2:focus-visible {
  outline: none;
  box-shadow: var(--mv-focus-ring);
}
.mv-btn-v2[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   15. VISUALLY HIDDEN
   ============================================================ */
.mv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   16. RESPONSIVE — tablet and mobile breakpoints
   ============================================================ */
@media (max-width: 1024px) {
  .mv-shell {
    grid-template-columns: 72px 1fr;
  }
  .mv-shell__sidebar {
    padding: var(--mv-space-4) var(--mv-space-2);
  }
  .mv-shell__brand-text,
  .mv-shell__nav-label,
  .mv-shell__nav-item span:not(.mv-shell__nav-icon),
  .mv-shell__nav-sub {
    display: none;
  }
  .mv-shell__nav-item {
    justify-content: center;
    padding: 9px 0;
  }
  .mv-shell__content {
    padding: var(--mv-space-5) var(--mv-space-5) var(--mv-space-10);
  }
}

@media (max-width: 768px) {
  .mv-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--mv-topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "content";
  }
  .mv-shell__sidebar {
    display: none;
  }
  .mv-shell__topbar {
    padding: 0 var(--mv-space-4);
  }
  .mv-shell__topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--mv-fw-semibold);
    font-size: var(--mv-text-sm);
    color: var(--mv-text);
    text-decoration: none;
  }
  .mv-shell__topbar-brand .mv-shell__brand-mark {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .mv-shell__search {
    display: none;
  }
  .mv-shell__content {
    padding: var(--mv-space-4) var(--mv-space-4) var(--mv-space-10);
    gap: var(--mv-space-4);
  }
  .mv-shell__page-title {
    font-size: var(--mv-display-h3);
  }
  .mv-shell__page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mv-space-3);
  }
  .mv-shell__page-actions {
    display: flex;
  }
  .mv-shell__page-actions .mv-btn-v2 {
    flex: 1;
    justify-content: center;
  }

  .mv-list {
    border-radius: var(--mv-radius-lg);
  }
  .mv-list__toolbar {
    padding: var(--mv-space-3);
    gap: var(--mv-space-2);
    top: var(--mv-topbar-h);
  }
  .mv-list__search {
    flex: 1 1 100%;
    max-width: none;
  }
  .mv-list__toolbar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .mv-list__chips {
    flex: 1 1 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mv-list__chips::-webkit-scrollbar { display: none; }
  .mv-chip-filter { flex-shrink: 0; min-height: 36px; }

  /* hide desktop table, show card list */
  .mv-list__table-wrap { display: none; }
  .mv-card-list { display: flex; }

  .mv-list__pagination {
    justify-content: center;
  }
  .mv-pagination__size { display: none; }

  .mv-bulk-bar {
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    border-radius: var(--mv-radius-xl);
    padding: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  @keyframes mv-bulk-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 769px) {
  .mv-card-list { display: none; }
}

@media (max-width: 480px) {
  .mv-shell__content {
    padding: var(--mv-space-3) var(--mv-space-3) var(--mv-space-10);
  }
  .mv-shell__page-title {
    font-size: var(--mv-display-h4);
  }
}

/* ============================================================
   17. DARK MODE (inherit from v2 tokens)
   ============================================================ */
[data-theme="dark"] .mv-shell__topbar {
  background: rgb(22 23 27 / 0.88);
}
[data-theme="dark"] .mv-bulk-bar {
  background: var(--mv-neutral-300);
  color: var(--mv-text);
}
[data-theme="dark"] .mv-empty__icon {
  background: linear-gradient(135deg, var(--mv-primary-100), var(--mv-surface));
}
/* ===== END MV-LIST COMPONENTS ===== */

/* ===== MV-WALLBOARD COMPONENTS (Sprint 5) ===== */
/* ============================================================
   1. SHELL — mv-wallboard-shell-v2
   Two modes:
     - .mv-wallboard-shell-v2                 (desktop, in-app)
     - .mv-wallboard-shell-v2--projector      (TV, fullscreen)
   The projector variant suppresses chrome and sets the dark
   tokens; the desktop variant sits inside the existing
   base.html sidebar+topbar and respects them.
   ============================================================ */
.mv-wallboard-shell-v2 {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
  background: var(--mv-canvas);
  color: var(--mv-text);
}

.mv-wallboard-shell-v2--projector {
  --mv-canvas:         #07080b;
  --mv-surface:        #0f1014;
  --mv-card-bg:        #11131a;
  --mv-text:           #f4f4f7;
  --mv-text-muted:     #a8a8ae;
  --mv-text-tertiary:  #787880;
  --mv-border:         #1f2128;
  --mv-border-subtle:  #181a20;
  --mv-border-strong:  #2a2c34;
  background:
    radial-gradient(1200px 600px at 10% -20%,
      rgb(247 24 131 / 0.10), transparent 60%),
    radial-gradient(1000px 500px at 100% 120%,
      rgb(31 120 209 / 0.08), transparent 60%),
    var(--mv-canvas);
}

/* ============================================================
   2. HEADER — mv-wallboard-header-v2
   Title + breadcrumb + clock + live dot + last-update.
   Slot for tenant logo on the projector mode.
   ============================================================ */
.mv-wallboard-header-v2 {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(255 255 255 / 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--mv-border);
}
.mv-wallboard-shell-v2--projector .mv-wallboard-header-v2 {
  background: rgb(11 12 14 / 0.7);
  border-bottom-color: var(--mv-border);
}

.mv-wallboard-header-v2__bar {
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--mv-space-5) var(--mv-space-7);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--mv-space-6);
}

.mv-wallboard-header-v2__primary {
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  min-width: 0;
}

.mv-wallboard-header-v2__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mv-radius-lg);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--mv-elev-2);
}

.mv-wallboard-header-v2__titles { min-width: 0; }

.mv-wallboard-header-v2__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--mv-fw-medium);
  margin: 0 0 2px 0;
}
.mv-wallboard-header-v2__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.mv-wallboard-header-v2__breadcrumb a:hover {
  color: var(--mv-primary-500);
}
.mv-wallboard-header-v2__breadcrumb-sep {
  opacity: 0.5;
}

.mv-wallboard-header-v2__title {
  margin: 0;
  font-size: var(--mv-display-h2);
  font-weight: var(--mv-fw-bold);
  letter-spacing: -0.02em;
  color: var(--mv-text);
  display: flex;
  align-items: baseline;
  gap: var(--mv-space-3);
  flex-wrap: wrap;
}

.mv-wallboard-header-v2__count {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  letter-spacing: 0;
}
.mv-wallboard-header-v2__count strong {
  color: var(--mv-text);
  font-weight: var(--mv-fw-semibold);
}

.mv-wallboard-header-v2__meta {
  display: flex;
  align-items: center;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mv-wallboard-header-v2__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mv-wallboard-header-v2__clock-time {
  font-size: var(--mv-display-h3);
  font-weight: var(--mv-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--mv-text);
}
.mv-wallboard-header-v2__clock-date {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.mv-wallboard-header-v2__health {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.mv-wallboard-header-v2__updated {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  font-variant-numeric: tabular-nums;
}
.mv-wallboard-header-v2__updated--warning { color: var(--mv-warning-strong); }
.mv-wallboard-header-v2__updated--danger  { color: var(--mv-danger-strong); }

.mv-wallboard-header-v2__actions {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

/* Action button (icon + label, ghost style) */
.mv-wb-action {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  min-height: 44px;
  padding: 0 var(--mv-space-4);
  border: 1px solid var(--mv-border);
  background: var(--mv-surface);
  color: var(--mv-text);
  font: inherit;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  border-radius: var(--mv-radius-md);
  cursor: pointer;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-wb-action:hover {
  background: var(--mv-surface-sunken);
  border-color: var(--mv-border-strong);
}
.mv-wb-action:focus-visible {
  box-shadow: var(--mv-focus-ring);
}
.mv-wb-action--icon-only {
  padding: 0;
  width: 44px;
  justify-content: center;
}
.mv-wb-action--primary {
  background: var(--mv-primary-500);
  color: #fff;
  border-color: var(--mv-primary-500);
}
.mv-wb-action--primary:hover {
  background: var(--mv-primary-600);
  border-color: var(--mv-primary-600);
}

/* ============================================================
   3. LIVE DOT — mv-live-dot (already in v2 §2920, repeated here
   for the standalone preview, plus a new --down state)
   ============================================================ */
.mv-live-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mv-success-base);
  white-space: nowrap;
}
.mv-live-dot__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mv-success-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-success-base) 25%, transparent);
  animation: mv-pulse 2s linear infinite;
  flex-shrink: 0;
}
.mv-live-dot--down {
  color: var(--mv-danger-base);
}
.mv-live-dot--down .mv-live-dot__indicator {
  background: var(--mv-danger-base);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-danger-base) 25%, transparent);
  animation: mv-pulse-fast 1s linear infinite;
}
.mv-live-dot--idle {
  color: var(--mv-text-muted);
}
.mv-live-dot--idle .mv-live-dot__indicator {
  background: var(--mv-text-muted);
  box-shadow: none;
  animation: none;
}
@keyframes mv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.18); }
}
@keyframes mv-pulse-fast {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ============================================================
   4. TOOLBAR — mv-wallboard-toolbar
   Sticky filter bar with status chips, type filter, search,
   drill-down toggle, projector toggle.
   ============================================================ */
.mv-wallboard-toolbar {
  position: sticky;
  top: 92px;
  z-index: 25;
  background: rgb(255 255 255 / 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--mv-border);
}
.mv-wallboard-shell-v2--projector .mv-wallboard-toolbar {
  background: rgb(11 12 14 / 0.6);
}

.mv-wallboard-toolbar__bar {
  max-width: 1600px;
  margin-inline: auto;
  padding: var(--mv-space-4) var(--mv-space-7);
  display: flex;
  align-items: center;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
}

.mv-wallboard-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  min-height: 44px;
}

.mv-wallboard-toolbar__label {
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-muted);
  margin-right: var(--mv-space-2);
}

.mv-wallboard-toolbar__spacer { flex: 1; }

/* Filter chips (Linear / Notion style) */
.mv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  height: 36px;
  padding: 0 var(--mv-space-4);
  border-radius: var(--mv-radius-full);
  border: 1px solid var(--mv-border);
  background: var(--mv-surface);
  color: var(--mv-text);
  font: inherit;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  cursor: pointer;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
  white-space: nowrap;
}
.mv-chip:hover {
  background: var(--mv-surface-sunken);
  border-color: var(--mv-border-strong);
}
.mv-chip:focus-visible { box-shadow: var(--mv-focus-ring); }
.mv-chip[aria-pressed="true"] {
  background: var(--mv-primary-500);
  color: #fff;
  border-color: var(--mv-primary-500);
}
.mv-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  border-radius: var(--mv-radius-full);
  font-variant-numeric: tabular-nums;
}
.mv-chip[aria-pressed="true"] .mv-chip__count {
  background: rgb(255 255 255 / 0.22);
  color: #fff;
}
.mv-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mv-chip__dot--success { background: var(--mv-success-base); }
.mv-chip__dot--warning { background: var(--mv-warning-base); }
.mv-chip__dot--danger  { background: var(--mv-danger-base); }
.mv-chip__dot--neutral { background: var(--mv-text-tertiary); }

/* Search input */
.mv-wallboard-toolbar__search {
  position: relative;
  min-width: 240px;
}
.mv-wallboard-toolbar__search input {
  width: 100%;
  height: 36px;
  padding: 0 var(--mv-space-4) 0 var(--mv-space-9);
  border-radius: var(--mv-radius-md);
  border: 1px solid var(--mv-border);
  background: var(--mv-surface);
  color: var(--mv-text);
  font: inherit;
  font-size: var(--mv-text-sm);
}
.mv-wallboard-toolbar__search input::placeholder { color: var(--mv-text-tertiary); }
.mv-wallboard-toolbar__search input:focus-visible { box-shadow: var(--mv-focus-ring); }
.mv-wallboard-toolbar__search-icon {
  position: absolute;
  inset: 0 auto 0 var(--mv-space-3);
  display: grid;
  place-items: center;
  color: var(--mv-text-tertiary);
  pointer-events: none;
}
.mv-wallboard-toolbar__search kbd {
  position: absolute;
  inset: 50% var(--mv-space-3) auto auto;
  transform: translateY(-50%);
  font: inherit;
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  padding: 2px 6px;
  border-radius: var(--mv-radius-sm);
  border: 1px solid var(--mv-border);
}

/* ============================================================
   5. MAIN BODY — mv-wallboard-body
   Holds the KPI grid + the campaigns table.
   ============================================================ */
.mv-wallboard-body {
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
  padding: var(--mv-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-7);
}

/* Section heading */
.mv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mv-space-4);
  margin-bottom: var(--mv-space-4);
}
.mv-section-head h2 {
  font-size: var(--mv-display-h4);
  font-weight: var(--mv-fw-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mv-text);
}
.mv-section-head p {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
}

/* ============================================================
   6. KPI CARDS — mv-kpi-card-v2
   Mid-size cards for the desktop wallboard. Each card has:
     - icon + label + helper
     - big value
     - delta arrow (vs previous snapshot)
     - threshold modifier (--success / --warning / --danger / --info)
     - optional sparkline
   For TV mode, use mv-wallboard-kpi-giant from v2.
   ============================================================ */
.mv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mv-space-5);
}
.mv-kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mv-kpi-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .mv-kpi-grid--5,
  .mv-kpi-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .mv-kpi-grid--5,
  .mv-kpi-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mv-kpi-grid--5,
  .mv-kpi-grid--6 { grid-template-columns: 1fr; }
}

.mv-kpi-card-v2 {
  --mv-kpi-accent: var(--mv-text-tertiary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-3);
  padding: var(--mv-space-5) var(--mv-space-5) var(--mv-space-4);
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
  transition: transform var(--mv-dur-fast) var(--mv-ease-out),
              box-shadow var(--mv-dur-fast) var(--mv-ease-out),
              border-color var(--mv-dur-base) var(--mv-ease-out);
}
.mv-kpi-card-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mv-kpi-accent);
  opacity: 0;
  transition: opacity var(--mv-dur-base) var(--mv-ease-out);
}
.mv-kpi-card-v2:not(.mv-kpi-card-v2--neutral)::before { opacity: 1; }
.mv-kpi-card-v2:hover {
  transform: translateY(-1px);
  box-shadow: var(--mv-elev-3);
}

.mv-kpi-card-v2--success { --mv-kpi-accent: var(--mv-success-base); }
.mv-kpi-card-v2--warning { --mv-kpi-accent: var(--mv-warning-base); }
.mv-kpi-card-v2--danger  { --mv-kpi-accent: var(--mv-danger-base);  }
.mv-kpi-card-v2--info    { --mv-kpi-accent: var(--mv-info-base);    }

.mv-kpi-card-v2__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
}
.mv-kpi-card-v2__label {
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-muted);
  margin: 0;
}
.mv-kpi-card-v2__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--mv-radius-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mv-kpi-accent) 12%, transparent);
  color: var(--mv-kpi-accent);
  flex-shrink: 0;
}

.mv-kpi-card-v2__value {
  font-size: var(--mv-display-kpi);
  line-height: 1;
  font-weight: var(--mv-fw-bold);
  letter-spacing: -0.02em;
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mv-kpi-card-v2__value-unit {
  font-size: 0.5em;
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-semibold);
  margin-left: 4px;
}

.mv-kpi-card-v2__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
  margin-top: auto;
}

.mv-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  padding: 3px var(--mv-space-2);
  border-radius: var(--mv-radius-full);
  font-variant-numeric: tabular-nums;
}
.mv-delta--up   { background: rgb(16 185 129 / 0.12); color: var(--mv-success-strong); }
.mv-delta--down { background: rgb(239 68 68 / 0.12); color: var(--mv-danger-strong); }
.mv-delta--flat { background: var(--mv-surface-sunken); color: var(--mv-text-muted); }
/* When "up" is bad (e.g. abandon rate), invert semantics */
.mv-delta--up-bad   { background: rgb(239 68 68 / 0.12); color: var(--mv-danger-strong); }
.mv-delta--down-good{ background: rgb(16 185 129 / 0.12); color: var(--mv-success-strong); }

.mv-kpi-card-v2__hint {
  font-size: var(--mv-text-2xs);
  color: var(--mv-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Inline sparkline (svg) */
.mv-spark {
  width: 100%;
  height: 28px;
  display: block;
  margin-top: var(--mv-space-2);
  color: var(--mv-kpi-accent);
}
.mv-spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mv-spark__area {
  fill: currentColor;
  opacity: 0.10;
}

/* ============================================================
   7. WALLBOARD KPI GIANT — for the projector mode
   Composes with v2 .mv-wallboard-kpi-giant — adds the card frame
   that's missing in v2.
   ============================================================ */
.mv-wallboard-kpi-giant-v2 {
  --mv-kpi-accent: var(--mv-text-tertiary);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mv-space-4);
  padding: var(--mv-space-7) var(--mv-space-7) var(--mv-space-6);
  border-radius: var(--mv-radius-2xl);
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  box-shadow: var(--mv-elev-3);
  overflow: hidden;
  min-height: 240px;
}
.mv-wallboard-kpi-giant-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 140% at 0% 0%,
      color-mix(in srgb, var(--mv-kpi-accent) 14%, transparent),
      transparent 55%);
  pointer-events: none;
}
.mv-wallboard-kpi-giant-v2::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--mv-kpi-accent);
}
.mv-wallboard-kpi-giant-v2--success { --mv-kpi-accent: var(--mv-success-base); }
.mv-wallboard-kpi-giant-v2--warning { --mv-kpi-accent: var(--mv-warning-base); }
.mv-wallboard-kpi-giant-v2--danger  { --mv-kpi-accent: var(--mv-danger-base);  }
.mv-wallboard-kpi-giant-v2--info    { --mv-kpi-accent: var(--mv-info-base);    }

.mv-wallboard-kpi-giant-v2 > * { position: relative; }

.mv-wallboard-kpi-giant-v2__label {
  font-size: var(--mv-display-wallboard-label);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
.mv-wallboard-kpi-giant-v2__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mv-radius-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mv-kpi-accent) 18%, transparent);
  color: var(--mv-kpi-accent);
}
.mv-wallboard-kpi-giant-v2__value {
  font-size: var(--mv-display-wallboard);
  font-weight: var(--mv-fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mv-wallboard-kpi-giant-v2__value-unit {
  font-size: 0.35em;
  color: var(--mv-text-muted);
  margin-left: 6px;
  font-weight: var(--mv-fw-semibold);
}
.mv-wallboard-kpi-giant-v2__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
}
.mv-wallboard-kpi-giant-v2__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-size: var(--mv-display-h4);
  font-weight: var(--mv-fw-semibold);
  padding: var(--mv-space-2) var(--mv-space-4);
  border-radius: var(--mv-radius-full);
  font-variant-numeric: tabular-nums;
}
.mv-wallboard-kpi-giant-v2__delta--up {
  background: rgb(16 185 129 / 0.18);
  color: var(--mv-success-base);
}
.mv-wallboard-kpi-giant-v2__delta--down {
  background: rgb(239 68 68 / 0.18);
  color: var(--mv-danger-base);
}
.mv-wallboard-kpi-giant-v2__hint {
  font-size: var(--mv-display-h6);
  color: var(--mv-text-muted);
}

/* ============================================================
   8. CAMPAIGNS TABLE — mv-wallboard-table
   DataTables-compatible. Sticky header, hover, semantic
   threshold cells, status badges, agent count cells.
   ============================================================ */
.mv-wallboard-table-wrap {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  box-shadow: var(--mv-elev-1);
  overflow: hidden;
}
.mv-wallboard-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-4);
  padding: var(--mv-space-5) var(--mv-space-6);
  border-bottom: 1px solid var(--mv-border-subtle);
}
.mv-wallboard-table-head h3 {
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-semibold);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
.mv-wallboard-table-head h3 i {
  color: var(--mv-text-muted);
}

.mv-wallboard-table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.mv-wallboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mv-text-sm);
}
.mv-wallboard-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--mv-space-4) var(--mv-space-3);
  text-align: left;
  border-bottom: 1px solid var(--mv-border);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.mv-wallboard-table thead th:first-child { padding-left: var(--mv-space-6); }
.mv-wallboard-table thead th:last-child  { padding-right: var(--mv-space-6); }
.mv-wallboard-table thead th .th-icon {
  margin-right: 6px;
  color: var(--mv-text-tertiary);
}
.mv-wallboard-table thead th[aria-sort="ascending"]::after {
  content: "▲";
  margin-left: 6px;
  color: var(--mv-primary-500);
  font-size: 0.75em;
}
.mv-wallboard-table thead th[aria-sort="descending"]::after {
  content: "▼";
  margin-left: 6px;
  color: var(--mv-primary-500);
  font-size: 0.75em;
}
.mv-wallboard-table thead th[scope="colgroup"] {
  text-align: center;
  border-bottom: 2px solid var(--mv-border);
}

.mv-wallboard-table tbody tr {
  transition: background-color var(--mv-dur-fast) var(--mv-ease-out);
  cursor: pointer;
}
.mv-wallboard-table tbody tr:hover {
  background: color-mix(in srgb, var(--mv-primary-500) 5%, transparent);
}
.mv-wallboard-table tbody tr:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--mv-primary-500) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--mv-primary-500);
}
.mv-wallboard-table tbody td {
  padding: var(--mv-space-4) var(--mv-space-3);
  border-bottom: 1px solid var(--mv-border-subtle);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: var(--mv-text);
}
.mv-wallboard-table tbody td:first-child { padding-left: var(--mv-space-6); }
.mv-wallboard-table tbody td:last-child  { padding-right: var(--mv-space-6); }
.mv-wallboard-table tbody tr:last-child td { border-bottom: none; }

.mv-wallboard-table tbody tr.mv-row--idle {
  opacity: 0.55;
}
.mv-wallboard-table tbody tr.mv-row--flash {
  animation: mv-row-flash var(--mv-dur-deliberate) var(--mv-ease-out);
}
@keyframes mv-row-flash {
  0%   { background: rgb(247 24 131 / 0.16); }
  100% { background: transparent; }
}

/* Campaign cell (name + sub) */
.mv-cell-campaign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.mv-cell-campaign__name {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}
.mv-cell-campaign__name i {
  color: var(--mv-text-tertiary);
  font-size: 0.85em;
}
.mv-cell-campaign__sub {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
}

/* Status badge */
.mv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--mv-space-3);
  border-radius: var(--mv-radius-full);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  background: var(--mv-surface-sunken);
  color: var(--mv-text-muted);
  border: 1px solid var(--mv-border);
  white-space: nowrap;
}
.mv-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mv-status-badge--active   { color: var(--mv-success-strong); background: var(--mv-success-muted); border-color: color-mix(in srgb, var(--mv-success-base) 30%, transparent); }
.mv-status-badge--paused   { color: var(--mv-warning-strong); background: var(--mv-warning-muted); border-color: color-mix(in srgb, var(--mv-warning-base) 30%, transparent); }
.mv-status-badge--danger   { color: var(--mv-danger-strong);  background: var(--mv-danger-muted);  border-color: color-mix(in srgb, var(--mv-danger-base) 30%, transparent); }
.mv-status-badge--info     { color: var(--mv-info-strong);    background: var(--mv-info-muted);    border-color: color-mix(in srgb, var(--mv-info-base) 30%, transparent); }

/* Numeric KPI cell with semantic threshold */
.mv-kpi-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px var(--mv-space-3);
  border-radius: var(--mv-radius-md);
  font-variant-numeric: tabular-nums;
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-md);
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  min-width: 56px;
  justify-content: center;
}
.mv-kpi-cell__unit {
  font-size: 0.75em;
  color: var(--mv-text-muted);
  font-weight: var(--mv-fw-medium);
}
.mv-kpi-cell--success { background: var(--mv-success-muted); color: var(--mv-success-strong); }
.mv-kpi-cell--warning { background: var(--mv-warning-muted); color: var(--mv-warning-strong); }
.mv-kpi-cell--danger  { background: var(--mv-danger-muted);  color: var(--mv-danger-strong);  }
.mv-kpi-cell--info    { background: var(--mv-info-muted);    color: var(--mv-info-strong);    }
.mv-kpi-cell--neutral { background: transparent; color: var(--mv-text-muted); padding-inline: 0; }

/* Agent breakdown cell — small inline pills */
.mv-agent-breakdown {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-variant-numeric: tabular-nums;
}
.mv-agent-breakdown__total {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}
.mv-agent-breakdown__split {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}
.mv-agent-breakdown__split span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.mv-agent-breakdown__split span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.mv-agent-breakdown__split .av::before { background: var(--mv-success-base); }
.mv-agent-breakdown__split .oc::before { background: var(--mv-info-base); }
.mv-agent-breakdown__split .pa::before { background: var(--mv-warning-base); }

/* Mini progress bar (% objetivo) */
.mv-progress-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 90px;
}
.mv-progress-mini__num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.mv-progress-mini__num strong {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
}
.mv-progress-mini__num span {
  font-size: var(--mv-text-2xs);
  color: var(--mv-text-muted);
}
.mv-progress-mini__bar {
  position: relative;
  height: 6px;
  background: var(--mv-surface-sunken);
  border-radius: var(--mv-radius-full);
  overflow: hidden;
}
.mv-progress-mini__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--mv-radius-full);
  background: var(--mv-info-base);
  transition: width var(--mv-dur-deliberate) var(--mv-ease-out);
}
.mv-progress-mini--success .mv-progress-mini__fill { background: var(--mv-success-base); }
.mv-progress-mini--warning .mv-progress-mini__fill { background: var(--mv-warning-base); }
.mv-progress-mini--danger  .mv-progress-mini__fill { background: var(--mv-danger-base);  }

/* Row actions */
.mv-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--mv-dur-fast);
}
.mv-wallboard-table tbody tr:hover .mv-row-actions,
.mv-wallboard-table tbody tr:focus-within .mv-row-actions {
  opacity: 1;
}
.mv-table .mv-row-actions {
  opacity: 1;
}
.mv-row-action-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: all var(--mv-dur-fast) var(--mv-ease-out);
}
.mv-row-action-btn:hover {
  background: var(--mv-surface-sunken);
  color: var(--mv-text);
  border-color: var(--mv-border);
}
.mv-row-action-btn:focus-visible { box-shadow: var(--mv-focus-ring); }

/* ============================================================
   9. EMPTY STATE — mv-empty-state-v2
   ============================================================ */
.mv-empty-state-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--mv-space-4);
  padding: var(--mv-space-12) var(--mv-space-7);
  background: var(--mv-card-bg);
  border: 1px dashed var(--mv-border-strong);
  border-radius: var(--mv-radius-xl);
  max-width: 640px;
  margin-inline: auto;
}
.mv-empty-state-v2__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--mv-radius-2xl);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--mv-primary-500) 10%, transparent),
    color-mix(in srgb, var(--mv-info-base) 10%, transparent));
  color: var(--mv-primary-500);
  font-size: 2rem;
  margin-bottom: var(--mv-space-2);
}
.mv-empty-state-v2 h2 {
  font-size: var(--mv-display-h3);
  font-weight: var(--mv-fw-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mv-text);
}
.mv-empty-state-v2 p {
  margin: 0;
  font-size: var(--mv-text-md);
  color: var(--mv-text-muted);
  max-width: 440px;
  line-height: 1.6;
}
.mv-empty-state-v2__actions {
  display: flex;
  gap: var(--mv-space-3);
  margin-top: var(--mv-space-3);
}

/* ============================================================
   10. STREAM-DOWN ALERT BAR
   ============================================================ */
.mv-stream-alert {
  display: flex;
  align-items: center;
  gap: var(--mv-space-4);
  padding: var(--mv-space-4) var(--mv-space-6);
  background: var(--mv-danger-muted);
  border: 1px solid color-mix(in srgb, var(--mv-danger-base) 35%, transparent);
  border-left: 4px solid var(--mv-danger-base);
  border-radius: var(--mv-radius-lg);
  color: var(--mv-danger-strong);
  margin-bottom: var(--mv-space-5);
}
.mv-stream-alert__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--mv-radius-md);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mv-danger-base) 20%, transparent);
  color: var(--mv-danger-base);
  flex-shrink: 0;
  font-size: 1.1rem;
}
.mv-stream-alert__body { flex: 1; min-width: 0; }
.mv-stream-alert__title {
  font-size: var(--mv-text-md);
  font-weight: var(--mv-fw-semibold);
  margin: 0 0 2px 0;
}
.mv-stream-alert__sub {
  font-size: var(--mv-text-sm);
  margin: 0;
  color: color-mix(in srgb, var(--mv-danger-strong) 75%, var(--mv-text));
}
.mv-stream-alert__action {
  flex-shrink: 0;
}

/* ============================================================
   11. SUMMARY FOOTER
   ============================================================ */
.mv-wallboard-footer {
  max-width: 1600px;
  width: 100%;
  margin-inline: auto;
  padding: var(--mv-space-5) var(--mv-space-7) var(--mv-space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
}
.mv-wallboard-footer__stats {
  display: flex;
  gap: var(--mv-space-5);
  flex-wrap: wrap;
}
.mv-wallboard-footer__stat strong {
  color: var(--mv-text);
  font-weight: var(--mv-fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   12. MOBILE CARD VARIANT (table → cards)
   Used at <720px instead of horizontal scroll on supervision/mobile
   ============================================================ */
.mv-mobile-card {
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  padding: var(--mv-space-5);
  margin-bottom: var(--mv-space-4);
  box-shadow: var(--mv-elev-1);
}
.mv-mobile-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-3);
  margin-bottom: var(--mv-space-4);
}
.mv-mobile-card__title {
  font-size: var(--mv-text-lg);
  font-weight: var(--mv-fw-semibold);
  margin: 0;
  color: var(--mv-text);
}
.mv-mobile-card__sub {
  font-size: var(--mv-text-xs);
  color: var(--mv-text-muted);
  margin: 2px 0 0 0;
}
.mv-mobile-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mv-space-3);
}
.mv-mobile-card__cell {
  background: var(--mv-surface-sunken);
  padding: var(--mv-space-3);
  border-radius: var(--mv-radius-md);
}
.mv-mobile-card__cell-label {
  font-size: var(--mv-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-muted);
  margin: 0 0 4px 0;
  font-weight: var(--mv-fw-semibold);
}
.mv-mobile-card__cell-value {
  font-size: var(--mv-display-h5);
  font-weight: var(--mv-fw-bold);
  color: var(--mv-text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mv-mobile-card__cell-value--success { color: var(--mv-success-strong); }
.mv-mobile-card__cell-value--warning { color: var(--mv-warning-strong); }
.mv-mobile-card__cell-value--danger  { color: var(--mv-danger-strong);  }
.mv-mobile-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mv-space-3);
  margin-top: var(--mv-space-4);
  padding-top: var(--mv-space-4);
  border-top: 1px solid var(--mv-border-subtle);
}

/* ============================================================
   13. INDEX PAGE STYLES (mockup landing only, not production)
   ============================================================ */
.mv-mockup-index {
  max-width: 1100px;
  margin: 64px auto;
  padding: 0 var(--mv-space-7);
}
.mv-mockup-index__head {
  margin-bottom: var(--mv-space-9);
}
.mv-mockup-index__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-3);
  background: var(--mv-card-bg);
  padding: 8px 16px;
  border-radius: var(--mv-radius-full);
  border: 1px solid var(--mv-border);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mv-text-muted);
  margin-bottom: var(--mv-space-5);
}
.mv-mockup-index__brand-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--mv-primary-500), var(--mv-primary-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.mv-mockup-index h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin: 0 0 var(--mv-space-3) 0;
  font-weight: var(--mv-fw-bold);
  letter-spacing: -0.02em;
}
.mv-mockup-index__lead {
  font-size: var(--mv-text-lg);
  color: var(--mv-text-muted);
  margin: 0;
  max-width: 720px;
  line-height: 1.6;
}
.mv-mockup-section {
  margin-bottom: var(--mv-space-10);
}
.mv-mockup-section h2 {
  font-size: var(--mv-display-h3);
  margin: 0 0 var(--mv-space-5) 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
}
.mv-mockup-section h2 i {
  color: var(--mv-primary-500);
}
.mv-mockup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--mv-space-5);
}
.mv-mockup-card {
  display: block;
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-border);
  border-radius: var(--mv-radius-xl);
  padding: var(--mv-space-5);
  text-decoration: none;
  color: var(--mv-text);
  transition: all var(--mv-dur-base) var(--mv-ease-out);
  position: relative;
  overflow: hidden;
}
.mv-mockup-card:hover {
  transform: translateY(-2px);
  border-color: var(--mv-primary-500);
  box-shadow: var(--mv-elev-3);
}
.mv-mockup-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--mv-radius-md);
  display: grid;
  place-items: center;
  margin-bottom: var(--mv-space-4);
}
.mv-mockup-card__icon--entrantes { background: rgb(31 120 209 / 0.12); color: var(--mv-info-base); }
.mv-mockup-card__icon--salientes { background: rgb(16 185 129 / 0.12); color: var(--mv-success-base); }
.mv-mockup-card__icon--dialer    { background: rgb(247 24 131 / 0.12); color: var(--mv-primary-500); }
.mv-mockup-card__icon--system    { background: rgb(124 58 237 / 0.12); color: #7c3aed; }
.mv-mockup-card h3 {
  font-size: var(--mv-display-h5);
  margin: 0 0 var(--mv-space-2) 0;
  font-weight: var(--mv-fw-semibold);
}
.mv-mockup-card p {
  margin: 0;
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  line-height: 1.5;
}
.mv-mockup-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--mv-space-3);
  font-size: var(--mv-text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mv-text-tertiary);
  font-weight: var(--mv-fw-semibold);
}

/* ============================================================
   14. RESPONSIVE — supervision tablet/mobile
   ============================================================ */
@media (max-width: 960px) {
  .mv-wallboard-header-v2__bar {
    grid-template-columns: 1fr;
    padding: var(--mv-space-4) var(--mv-space-5);
  }
  .mv-wallboard-header-v2__meta {
    justify-content: flex-start;
  }
  .mv-wallboard-toolbar { top: 0; }
  .mv-wallboard-toolbar__bar { padding: var(--mv-space-3) var(--mv-space-5); }
  .mv-wallboard-body { padding: var(--mv-space-5); gap: var(--mv-space-5); }
}
@media (max-width: 720px) {
  .mv-wallboard-header-v2__title { font-size: var(--mv-display-h3); }
  .mv-wallboard-header-v2__clock-time { font-size: var(--mv-display-h4); }
  .mv-wallboard-table-wrap { display: none; }
  .mv-wallboard-mobile { display: block; }
}
.mv-wallboard-mobile { display: none; }
@media (max-width: 720px) { .mv-wallboard-mobile { display: block; } }

/* ============================================================
   END mv-wallboard.css
   ============================================================ */

/* ===== END MV-WALLBOARD COMPONENTS ===== */

/* ============================================================
   MV-LIST OVERRIDES — Sprint 6 (list visual redesign)
   Added: 2026-04-11
   Appended at end so they win the cascade over earlier rules.
   These extend the MV-LIST COMPONENTS block above without
   modifying it (audit trail safety).
   ============================================================ */

/* -- Name cell with avatar circle + 2-line stack --
   Used in calificacion list and formulario list.
   Layout: [ avatar ] [ name / author ]               */
.mv-name-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--mv-space-3);
  min-width: 0;
}

.mv-name-cell__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--mv-radius-md);
  background: linear-gradient(135deg, var(--mv-primary-100), var(--mv-primary-200));
  color: var(--mv-primary-700);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  user-select: none;
}

/* Dash placeholder for missing timestamp data */
.mv-cell-dash {
  color: var(--mv-text-tertiary);
  font-size: var(--mv-text-sm);
  letter-spacing: 0.02em;
  display: block;
}

/* Pagination bar at the bottom of .mv-list */
.mv-list__pagination {
  padding: var(--mv-space-3) var(--mv-space-5);
  border-top: 1px solid var(--mv-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--mv-surface);
  min-height: 48px;
}

.mv-pagination__info {
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
}

/* Disabled ghost button (export csv) — subtle but not distracting */
.mv-btn-v2--ghost[disabled],
.mv-btn-v2--ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Disabled chip-filter — shown for features not yet available (e.g. Archivados) */
.mv-chip-filter[disabled],
.mv-chip-filter:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Delete action button: danger style on hover/focus for clear affordance */
.mv-row-actions__btn--danger {
  color: var(--mv-danger-base);
}
.mv-row-actions__btn--danger:hover {
  background: var(--mv-danger-muted);
  border-color: var(--mv-danger-base);
  color: var(--mv-danger-strong);
}

/* ===== END MV-LIST OVERRIDES (Sprint 6) ===== */

/* ===== MV-BLASTER COMPONENTS (Sprint 7) ===== */

/* ============================================================
   LAYOUT — blaster page shell
   ============================================================ */
.bl-page {
  padding: var(--mv-space-6, 24px) var(--mv-space-7, 32px) var(--mv-space-10, 64px);
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-5, 20px);
  max-width: 1440px;
  margin: 0 auto;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.bl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mv-text-xs, 0.75rem);
  color: var(--mv-text-muted, #6e6e73);
}
.bl-breadcrumb a { color: var(--mv-text-muted, #6e6e73); text-decoration: none; }
.bl-breadcrumb a:hover { color: var(--mv-primary-500, #f71883); }
.bl-breadcrumb-sep { font-size: 9px; color: var(--mv-text-tertiary, #a8a8ae); }
.bl-breadcrumb-current { color: var(--mv-neutral-800, #1d1d1f); font-weight: var(--mv-fw-medium, 500); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.bl-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mv-space-4, 16px);
  flex-wrap: wrap;
}
.bl-page-titles { flex: 1; min-width: 200px; }
.bl-page-title {
  margin: 0;
  font-size: var(--mv-display-h2, 1.875rem);
  font-weight: var(--mv-fw-bold, 700);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mv-neutral-900, #0b0c0e);
}
.bl-page-subtitle {
  margin: var(--mv-space-1, 4px) 0 0;
  font-size: var(--mv-text-sm, 0.8125rem);
  color: var(--mv-text-muted, #6e6e73);
  max-width: 600px;
  line-height: 1.6;
}
.bl-page-actions {
  display: flex;
  gap: var(--mv-space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.bl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.8125rem);
  font-weight: var(--mv-fw-semibold, 600);
  white-space: nowrap;
  cursor: pointer;
  transition: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}
.bl-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--mv-surface, #fff), 0 0 0 4px var(--mv-primary-500, #f71883);
}
.bl-btn--primary {
  background: var(--mv-primary-500, #f71883);
  color: #fff;
  border-color: var(--mv-primary-600, #d10d6e);
}
.bl-btn--primary:hover { background: var(--mv-primary-600, #d10d6e); transform: translateY(-1px); }
.bl-btn--primary:active { transform: scale(0.98); }
.bl-btn--secondary {
  background: var(--mv-surface, #fff);
  color: var(--mv-neutral-800, #1d1d1f);
  border-color: var(--mv-neutral-200, #e5e5ea);
}
.bl-btn--secondary:hover { background: var(--mv-neutral-50, #fafafa); border-color: var(--mv-neutral-300, #d1d1d6); }
.bl-btn--ghost {
  background: transparent;
  color: var(--mv-text-muted, #6e6e73);
  border-color: transparent;
}
.bl-btn--ghost:hover { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-800, #1d1d1f); }
.bl-btn--danger {
  background: var(--mv-danger-base, #ef4444);
  color: #fff;
  border-color: var(--mv-danger-strong, #b91c1c);
}
.bl-btn--danger:hover { background: var(--mv-danger-strong, #b91c1c); }
.bl-btn--success {
  background: var(--mv-success-base, #10b981);
  color: #fff;
  border-color: var(--mv-success-strong, #047857);
}
.bl-btn--success:hover { background: var(--mv-success-strong, #047857); }
.bl-btn--sm { height: 34px; padding: 0 12px; font-size: var(--mv-text-xs, 0.75rem); }
.bl-btn--lg { height: 48px; padding: 0 24px; font-size: var(--mv-text-md, 0.9375rem); }
.bl-btn--icon { width: 40px; padding: 0; }
.bl-btn:disabled, .bl-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================
   CHIP FILTERS
   ============================================================ */
.bl-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--mv-radius-full, 9999px);
  border: 1px solid var(--mv-neutral-200, #e5e5ea);
  background: var(--mv-surface, #fff);
  font-size: var(--mv-text-xs, 0.75rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text-muted, #6e6e73);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
}
.bl-chip:hover { border-color: var(--mv-neutral-300, #d1d1d6); color: var(--mv-neutral-800, #1d1d1f); }
.bl-chip[aria-pressed="true"] {
  background: var(--mv-primary-50, #fff0f7);
  border-color: var(--mv-primary-200, #ffaed3);
  color: var(--mv-primary-700, #a60a56);
  font-weight: var(--mv-fw-semibold, 600);
}
.bl-chip__count {
  background: var(--mv-neutral-100, #f5f5f7);
  padding: 1px 7px;
  border-radius: var(--mv-radius-full, 9999px);
  font-size: 11px;
  font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text-muted, #6e6e73);
}
.bl-chip[aria-pressed="true"] .bl-chip__count {
  background: var(--mv-primary-100, #ffd9ea);
  color: var(--mv-primary-700, #a60a56);
}
.bl-chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bl-chip__dot--draft      { background: var(--mv-neutral-400, #a8a8ae); }
.bl-chip__dot--active     { background: var(--mv-success-base, #10b981); }
.bl-chip__dot--paused     { background: var(--mv-warning-base, #f59e0b); }
.bl-chip__dot--scheduled  { background: var(--mv-info-base, #1f78d1); }
.bl-chip__dot--completed  { background: #7c3aed; }
.bl-chip__dot--terminated { background: var(--mv-danger-base, #ef4444); }

/* ============================================================
   LIST SURFACE
   ============================================================ */
.bl-list {
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-neutral-150, #eeeef1);
  border-radius: var(--mv-radius-lg, 12px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px 0 rgb(0 0 0 / 0.03);
  overflow: hidden;
}
.bl-list__toolbar {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  border-bottom: 1px solid var(--mv-neutral-150, #eeeef1);
  flex-wrap: wrap;
}
.bl-list__search {
  position: relative;
  flex: 0 1 280px;
}
.bl-list__search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--mv-neutral-400, #a8a8ae);
  pointer-events: none;
}
.bl-list__search-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--mv-neutral-200, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.8125rem);
  color: var(--mv-neutral-800, #1d1d1f);
  background: var(--mv-surface, #fff);
  transition: border-color 120ms;
  font-family: inherit;
}
.bl-list__search-input::placeholder { color: var(--mv-neutral-400, #a8a8ae); }
.bl-list__search-input:focus {
  outline: none;
  border-color: var(--mv-primary-500, #f71883);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.1);
}

/* ============================================================
   TABLE
   ============================================================ */
.bl-table-wrap { overflow-x: auto; }
.bl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mv-text-sm, 0.8125rem);
}
.bl-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px 14px;
  text-align: left;
  font-size: var(--mv-text-xs, 0.75rem);
  font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text-muted, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--mv-neutral-50, #fafafa);
  border-bottom: 1px solid var(--mv-neutral-200, #e5e5ea);
  white-space: nowrap;
}
.bl-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mv-neutral-150, #eeeef1);
  vertical-align: middle;
  color: var(--mv-neutral-800, #1d1d1f);
}
.bl-table tbody tr { transition: background 120ms; }
.bl-table tbody tr:hover { background: var(--mv-neutral-50, #fafafa); }
.bl-table tbody tr:last-child td { border-bottom: none; }
.bl-table th.bl-col-actions,
.bl-table td.bl-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.bl-table th.bl-col-check,
.bl-table td.bl-col-check { width: 44px; text-align: center; padding-left: 14px; padding-right: 6px; }

/* ============================================================
   NAME CELL
   ============================================================ */
.bl-name-cell { display: flex; align-items: center; gap: 10px; }
.bl-name-cell__avatar {
  width: 34px; height: 34px;
  border-radius: var(--mv-radius-md, 8px);
  background: var(--mv-primary-50, #fff0f7);
  color: var(--mv-primary-600, #d10d6e);
  font-size: 13px;
  font-weight: var(--mv-fw-bold, 700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bl-name-cell__text { display: flex; flex-direction: column; }
.bl-name-cell__name { font-weight: var(--mv-fw-semibold, 600); color: var(--mv-neutral-800, #1d1d1f); line-height: 1.3; }
.bl-name-cell__name a { color: inherit; text-decoration: none; }
.bl-name-cell__name a:hover { color: var(--mv-primary-600, #d10d6e); }
.bl-name-cell__sub { font-size: 11px; color: var(--mv-neutral-400, #a8a8ae); display: flex; align-items: center; gap: 4px; }

/* ============================================================
   STATUS TAGS — campaign & contact
   ============================================================ */
.bl-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--mv-radius-full, 9999px);
  font-size: 11px;
  font-weight: var(--mv-fw-semibold, 600);
  white-space: nowrap;
  line-height: 1.4;
}
.bl-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Campaign statuses */
.bl-tag--draft      { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-600, #48484d); }
.bl-tag--draft::before { background: var(--mv-neutral-400, #a8a8ae); }
.bl-tag--scheduled  { background: var(--mv-info-muted, #eff6ff); color: var(--mv-info-strong, #1e40af); }
.bl-tag--scheduled::before { background: var(--mv-info-base, #1f78d1); }
.bl-tag--active     { background: var(--mv-success-muted, #ecfdf5); color: var(--mv-success-strong, #047857); }
.bl-tag--active::before { background: var(--mv-success-base, #10b981); }
.bl-tag--paused     { background: var(--mv-warning-muted, #fffbeb); color: var(--mv-warning-strong, #b45309); }
.bl-tag--paused::before { background: var(--mv-warning-base, #f59e0b); }
.bl-tag--completed  { background: #f3e8ff; color: #6b21a8; }
.bl-tag--completed::before { background: #7c3aed; }
.bl-tag--terminated { background: var(--mv-danger-muted, #fef2f2); color: var(--mv-danger-strong, #b91c1c); }
.bl-tag--terminated::before { background: var(--mv-danger-base, #ef4444); }
/* Contact statuses */
.bl-tag--pending    { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-600, #48484d); }
.bl-tag--pending::before { background: var(--mv-neutral-400, #a8a8ae); }
.bl-tag--calling    { background: var(--mv-info-muted, #eff6ff); color: var(--mv-info-strong, #1e40af); }
.bl-tag--calling::before { background: var(--mv-info-base, #1f78d1); animation: bl-pulse 1.5s infinite; }
.bl-tag--answered   { background: var(--mv-success-muted, #ecfdf5); color: var(--mv-success-strong, #047857); }
.bl-tag--answered::before { background: var(--mv-success-base, #10b981); }
.bl-tag--voicemail  { background: #fef3c7; color: #92400e; }
.bl-tag--voicemail::before { background: #f59e0b; }
.bl-tag--no_answer  { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-600, #48484d); }
.bl-tag--no_answer::before { background: var(--mv-neutral-400, #a8a8ae); }
.bl-tag--busy       { background: var(--mv-warning-muted, #fffbeb); color: var(--mv-warning-strong, #b45309); }
.bl-tag--busy::before { background: var(--mv-warning-base, #f59e0b); }
.bl-tag--failed     { background: var(--mv-danger-muted, #fef2f2); color: var(--mv-danger-strong, #b91c1c); }
.bl-tag--failed::before { background: var(--mv-danger-base, #ef4444); }
.bl-tag--retry      { background: var(--mv-info-muted, #eff6ff); color: var(--mv-info-strong, #1e40af); }
.bl-tag--retry::before { background: var(--mv-info-base, #1f78d1); }

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

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.bl-progress { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.bl-progress__bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--mv-neutral-200, #e5e5ea); overflow: hidden;
}
.bl-progress__fill {
  height: 100%; border-radius: 3px;
  background: var(--mv-primary-500, #f71883);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-progress__pct {
  font-size: 11px; font-weight: var(--mv-fw-semibold, 600);
  color: var(--mv-text-muted, #6e6e73);
  min-width: 36px; text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Hero progress (campaign detail) */
.bl-progress-hero {
  width: 100%; height: 8px; border-radius: 4px;
  background: var(--mv-neutral-200, #e5e5ea); overflow: hidden;
  margin-top: var(--mv-space-3, 12px);
}
.bl-progress-hero__fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--mv-primary-400, #fb479f), var(--mv-primary-600, #d10d6e));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   ROW ACTIONS
   ============================================================ */
.bl-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.bl-row-actions__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--mv-radius-md, 8px); border: none;
  background: transparent; color: var(--mv-neutral-400, #a8a8ae);
  font-size: 13px; cursor: pointer;
  transition: all 120ms; text-decoration: none;
  font-family: inherit;
}
.bl-row-actions__btn:hover { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-800, #1d1d1f); }
.bl-row-actions__btn--primary { color: var(--mv-primary-500, #f71883); }
.bl-row-actions__btn--primary:hover { background: var(--mv-primary-50, #fff0f7); color: var(--mv-primary-700, #a60a56); }
.bl-row-actions__btn--danger { color: var(--mv-danger-base, #ef4444); }
.bl-row-actions__btn--danger:hover { background: var(--mv-danger-muted, #fef2f2); color: var(--mv-danger-strong, #b91c1c); }
.bl-row-actions__btn--success { color: var(--mv-success-base, #10b981); }
.bl-row-actions__btn--success:hover { background: var(--mv-success-muted, #ecfdf5); color: var(--mv-success-strong, #047857); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.bl-empty { text-align: center; padding: 64px 32px; }
.bl-empty__icon { font-size: 48px; color: var(--mv-neutral-400, #a8a8ae); margin-bottom: var(--mv-space-4, 16px); }
.bl-empty__title { font-size: var(--mv-display-h5, 1.125rem); font-weight: var(--mv-fw-semibold, 600); color: var(--mv-text-muted, #6e6e73); margin: 0 0 var(--mv-space-2, 8px); }
.bl-empty__desc { font-size: var(--mv-text-sm, 0.8125rem); color: var(--mv-neutral-400, #a8a8ae); margin: 0 0 var(--mv-space-6, 24px); max-width: 400px; margin-inline: auto; }

/* ============================================================
   KPI CARDS
   ============================================================ */
.bl-kpi-grid {
  display: grid;
  gap: var(--mv-space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.bl-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bl-kpi-grid--5 { grid-template-columns: repeat(5, 1fr); }
.bl-kpi-card {
  --bl-kpi-accent: var(--mv-neutral-500, #6e6e73);
  position: relative;
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-neutral-150, #eeeef1);
  border-radius: var(--mv-radius-lg, 12px);
  padding: var(--mv-space-4, 16px) var(--mv-space-5, 20px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  overflow: hidden;
  transition: box-shadow 200ms;
}
.bl-kpi-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--bl-kpi-accent); opacity: 0;
  transition: opacity 200ms;
}
.bl-kpi-card:not(.bl-kpi-card--neutral)::before { opacity: 1; }
.bl-kpi-card:hover { box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04); }
.bl-kpi-card--primary  { --bl-kpi-accent: var(--mv-primary-500, #f71883); }
.bl-kpi-card--success  { --bl-kpi-accent: var(--mv-success-base, #10b981); }
.bl-kpi-card--warning  { --bl-kpi-accent: var(--mv-warning-base, #f59e0b); }
.bl-kpi-card--danger   { --bl-kpi-accent: var(--mv-danger-base, #ef4444); }
.bl-kpi-card--info     { --bl-kpi-accent: var(--mv-info-base, #1f78d1); }
.bl-kpi-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mv-space-2, 8px); }
.bl-kpi-card__label { font-size: var(--mv-text-xs, 0.75rem); font-weight: var(--mv-fw-semibold, 600); color: var(--mv-text-muted, #6e6e73); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.bl-kpi-card__icon {
  width: 32px; height: 32px; border-radius: var(--mv-radius-md, 8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--bl-kpi-accent) 12%, transparent);
  color: var(--bl-kpi-accent);
}
.bl-kpi-card__value { font-size: var(--mv-display-kpi, 2rem); font-weight: var(--mv-fw-bold, 700); color: var(--mv-neutral-800, #1d1d1f); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bl-kpi-card__value-unit { font-size: 0.5em; font-weight: var(--mv-fw-medium, 500); color: var(--mv-text-muted, #6e6e73); margin-left: 2px; }
.bl-kpi-card__foot { display: flex; align-items: center; gap: 8px; margin-top: var(--mv-space-2, 8px); font-size: var(--mv-text-xs, 0.75rem); color: var(--mv-neutral-400, #a8a8ae); }

/* ============================================================
   MODAL
   ============================================================ */
.bl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.45);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--mv-space-4, 16px);
}
.bl-modal-backdrop--open { display: flex; }
.bl-modal {
  background: var(--mv-surface, #fff);
  border-radius: var(--mv-radius-xl, 16px);
  box-shadow: 0 30px 60px -12px rgb(0 0 0 / 0.20), 0 12px 20px -6px rgb(0 0 0 / 0.08);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bl-modal--lg { max-width: 800px; }
.bl-modal--xl { max-width: 960px; }
.bl-modal__header {
  display: flex; align-items: center; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-5, 20px) var(--mv-space-6, 24px);
  border-bottom: 1px solid var(--mv-neutral-150, #eeeef1);
  flex-shrink: 0;
}
.bl-modal__icon {
  width: 40px; height: 40px; border-radius: var(--mv-radius-lg, 12px);
  background: var(--mv-primary-50, #fff0f7);
  color: var(--mv-primary-600, #d10d6e);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.bl-modal__titles { flex: 1; }
.bl-modal__title { margin: 0; font-size: var(--mv-display-h5, 1.125rem); font-weight: var(--mv-fw-bold, 700); color: var(--mv-neutral-800, #1d1d1f); }
.bl-modal__subtitle { margin: 2px 0 0; font-size: var(--mv-text-xs, 0.75rem); color: var(--mv-text-muted, #6e6e73); }
.bl-modal__close {
  width: 36px; height: 36px; border-radius: var(--mv-radius-md, 8px); border: none;
  background: transparent; color: var(--mv-neutral-400, #a8a8ae);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 120ms; font-family: inherit;
}
.bl-modal__close:hover { background: var(--mv-neutral-100, #f5f5f7); color: var(--mv-neutral-800, #1d1d1f); }
/* The <form> wrapping body+footer is a flex child of .bl-modal but has no
   flex properties by default. It must participate in the flex column layout
   so the body can scroll within the modal's max-height constraint. */
.bl-modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.bl-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--mv-space-6, 24px); }
.bl-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--mv-space-2, 8px);
  padding: var(--mv-space-4, 16px) var(--mv-space-6, 24px);
  border-top: 1px solid var(--mv-neutral-150, #eeeef1); flex-shrink: 0;
}

/* ============================================================
   FORM COMPONENTS
   ============================================================ */
.bl-form-section {
  font-size: 11px; font-weight: var(--mv-fw-bold, 700);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--mv-neutral-400, #a8a8ae);
  margin: var(--mv-space-5, 20px) 0 var(--mv-space-3, 12px);
  padding-bottom: 6px; border-bottom: 1px solid var(--mv-neutral-150, #eeeef1);
}
.bl-form-section:first-child { margin-top: 0; }
.bl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mv-space-4, 16px); }
.bl-form-grid--1 { grid-template-columns: 1fr; }
.bl-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.bl-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bl-form-group { display: flex; flex-direction: column; gap: 4px; }
.bl-form-label { font-size: var(--mv-text-xs, 0.75rem); font-weight: var(--mv-fw-semibold, 600); color: var(--mv-text-muted, #6e6e73); }
.bl-form-label__req { color: var(--mv-danger-base, #ef4444); }
.bl-form-input,
.bl-form-select,
.bl-form-textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--mv-neutral-200, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.8125rem);
  font-family: inherit; color: var(--mv-neutral-800, #1d1d1f);
  background: var(--mv-surface, #fff);
  transition: border-color 120ms;
}
.bl-form-textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.bl-form-input:focus,
.bl-form-select:focus,
.bl-form-textarea:focus {
  outline: none;
  border-color: var(--mv-primary-500, #f71883);
  box-shadow: 0 0 0 3px rgb(247 24 131 / 0.1);
}
.bl-form-input::placeholder { color: var(--mv-neutral-400, #a8a8ae); }
.bl-form-helper { font-size: 11px; color: var(--mv-neutral-400, #a8a8ae); margin: 0; line-height: 1.4; }
.bl-form-error { font-size: 11px; color: var(--mv-danger-base, #ef4444); margin: 0; }
.bl-form-check { display: flex; align-items: center; gap: 8px; }
.bl-form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mv-primary-500, #f71883); cursor: pointer; flex-shrink: 0; }

/* Conditional show/hide */
.bl-conditional { display: none; }
.bl-conditional--show { display: block; }
.bl-conditional--show.bl-form-grid { display: grid; }

/* ============================================================
   TABS
   ============================================================ */
.bl-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--mv-neutral-200, #e5e5ea); }
.bl-tab {
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  font-size: var(--mv-text-sm, 0.8125rem);
  font-weight: var(--mv-fw-medium, 500);
  color: var(--mv-text-muted, #6e6e73);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all 120ms;
  white-space: nowrap; font-family: inherit;
}
.bl-tab:hover { color: var(--mv-neutral-800, #1d1d1f); }
.bl-tab--active { color: var(--mv-primary-600, #d10d6e); border-bottom-color: var(--mv-primary-500, #f71883); font-weight: var(--mv-fw-semibold, 600); }

/* ============================================================
   UPLOAD ZONE
   ============================================================ */
.bl-upload-zone {
  border: 2px dashed var(--mv-neutral-200, #e5e5ea);
  border-radius: var(--mv-radius-lg, 12px);
  padding: var(--mv-space-9, 48px) var(--mv-space-7, 32px);
  text-align: center; cursor: pointer;
  transition: all 200ms; background: var(--mv-surface, #fff);
}
.bl-upload-zone:hover,
.bl-upload-zone--dragover {
  border-color: var(--mv-primary-400, #fb479f);
  background: var(--mv-primary-50, #fff0f7);
}
.bl-upload-zone__icon { font-size: 40px; color: var(--mv-neutral-400, #a8a8ae); margin-bottom: var(--mv-space-3, 12px); }
.bl-upload-zone__title { font-size: var(--mv-text-md, 0.9375rem); font-weight: var(--mv-fw-semibold, 600); color: var(--mv-neutral-800, #1d1d1f); margin: 0 0 var(--mv-space-1, 4px); }
.bl-upload-zone__hint { font-size: var(--mv-text-xs, 0.75rem); color: var(--mv-text-muted, #6e6e73); margin: 0; }
.bl-upload-zone__link { color: var(--mv-primary-500, #f71883); font-weight: var(--mv-fw-semibold, 600); text-decoration: underline; }

/* ============================================================
   COLUMN MAPPER
   ============================================================ */
.bl-col-mapper { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--mv-space-2, 8px) var(--mv-space-3, 12px); align-items: center; padding: var(--mv-space-4, 16px) 0; }
.bl-col-mapper__csv-col {
  background: var(--mv-neutral-100, #f5f5f7);
  border-radius: var(--mv-radius-md, 8px);
  padding: 8px 14px;
  font-size: var(--mv-text-sm, 0.8125rem);
  font-weight: var(--mv-fw-medium, 500);
  font-family: monospace;
}
.bl-col-mapper__arrow { color: var(--mv-neutral-400, #a8a8ae); font-size: 14px; }

/* ============================================================
   ALERT / INFO BANNER
   ============================================================ */
.bl-alert {
  display: flex; align-items: flex-start;
  gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.8125rem);
  border: 1px solid;
}
.bl-alert--success { background: var(--mv-success-muted, #ecfdf5); border-color: var(--mv-success-base, #10b981); color: var(--mv-success-strong, #047857); }
.bl-alert--info { background: var(--mv-info-muted, #eff6ff); border-color: var(--mv-info-base, #1f78d1); color: var(--mv-info-strong, #1e40af); }
.bl-alert--warning { background: var(--mv-warning-muted, #fffbeb); border-color: var(--mv-warning-base, #f59e0b); color: var(--mv-warning-strong, #b45309); }
.bl-alert--danger { background: var(--mv-danger-muted, #fef2f2); border-color: var(--mv-danger-base, #ef4444); color: var(--mv-danger-strong, #b91c1c); }
.bl-alert__dismiss { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 14px; padding: 0; }
.bl-alert__dismiss:hover { opacity: 1; }

/* ============================================================
   AUDIO PLAYER (mini)
   ============================================================ */
.bl-audio-player {
  display: flex; align-items: center; gap: var(--mv-space-3, 12px);
  padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
  background: var(--mv-neutral-50, #fafafa);
  border: 1px solid var(--mv-neutral-150, #eeeef1);
  border-radius: var(--mv-radius-lg, 12px);
}
.bl-audio-player__btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--mv-primary-500, #f71883); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; flex-shrink: 0;
  transition: background 120ms;
}
.bl-audio-player__btn:hover { background: var(--mv-primary-600, #d10d6e); }
.bl-audio-player__waveform {
  flex: 1; height: 28px;
  background: repeating-linear-gradient(90deg, var(--mv-primary-200, #ffaed3) 0px, var(--mv-primary-200, #ffaed3) 2px, transparent 2px, transparent 5px);
  border-radius: 4px; position: relative;
}
.bl-audio-player__progress {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: repeating-linear-gradient(90deg, var(--mv-primary-500, #f71883) 0px, var(--mv-primary-500, #f71883) 2px, transparent 2px, transparent 5px);
  border-radius: 4px 0 0 4px;
}
.bl-audio-player__time { font-size: 11px; color: var(--mv-text-muted, #6e6e73); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   DETAIL BAR (campaign detail summary strip)
   ============================================================ */
.bl-detail-bar {
  display: flex; gap: var(--mv-space-6, 24px);
  padding: var(--mv-space-4, 16px) var(--mv-space-5, 20px);
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-neutral-150, #eeeef1);
  border-radius: var(--mv-radius-lg, 12px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  flex-wrap: wrap; align-items: center;
}
.bl-detail-bar__item { display: flex; flex-direction: column; gap: 2px; }
.bl-detail-bar__label { font-size: 11px; font-weight: var(--mv-fw-semibold, 600); color: var(--mv-neutral-400, #a8a8ae); text-transform: uppercase; letter-spacing: 0.04em; }
.bl-detail-bar__value { font-size: var(--mv-text-sm, 0.8125rem); font-weight: var(--mv-fw-medium, 500); color: var(--mv-neutral-800, #1d1d1f); }
.bl-detail-bar__sep { width: 1px; height: 32px; background: var(--mv-neutral-150, #eeeef1); flex-shrink: 0; }

/* ============================================================
   TTS TEMPLATE PREVIEW
   ============================================================ */
.bl-tts-preview {
  padding: var(--mv-space-4, 16px);
  background: var(--mv-neutral-50, #fafafa);
  border: 1px solid var(--mv-neutral-150, #eeeef1);
  border-radius: var(--mv-radius-md, 8px);
  font-size: var(--mv-text-sm, 0.8125rem);
  color: var(--mv-neutral-800, #1d1d1f);
  line-height: 1.7;
}
.bl-tts-preview__var {
  background: var(--mv-primary-50, #fff0f7);
  color: var(--mv-primary-700, #a60a56);
  padding: 2px 6px;
  border-radius: var(--mv-radius-sm, 4px);
  font-weight: var(--mv-fw-semibold, 600);
  font-size: 12px;
}

/* ============================================================
   CALLERID INFO NOTE
   ============================================================ */
.bl-callerid-note {
  display: flex; align-items: center; gap: var(--mv-space-2, 8px);
  padding: var(--mv-space-2, 8px) var(--mv-space-3, 12px);
  border-radius: var(--mv-radius-md, 8px);
  background: var(--mv-info-muted, #eff6ff);
  font-size: var(--mv-text-xs, 0.75rem);
  color: var(--mv-info-strong, #1e40af);
}
.bl-callerid-note i { flex-shrink: 0; }

/* ============================================================
   CHECKBOX + SR-ONLY
   ============================================================ */
.bl-check { width: 16px; height: 16px; accent-color: var(--mv-primary-500, #f71883); cursor: pointer; }
.bl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .bl-kpi-grid--4, .bl-kpi-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .bl-form-grid { grid-template-columns: 1fr; }
  .bl-form-grid--3, .bl-form-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .bl-page { padding: var(--mv-space-4, 16px) var(--mv-space-4, 16px) var(--mv-space-8, 40px); }
  .bl-page-head { flex-direction: column; }
  .bl-page-actions { width: 100%; }
  .bl-page-title { font-size: var(--mv-display-h3, 1.5rem); }
  .bl-list__toolbar { flex-direction: column; align-items: stretch; }
  .bl-list__search { flex: 1 1 100%; }
  .bl-kpi-grid--4, .bl-kpi-grid--5 { grid-template-columns: 1fr 1fr; }
  .bl-detail-bar { flex-direction: column; gap: var(--mv-space-3, 12px); }
  .bl-detail-bar__sep { width: 100%; height: 1px; }
  .bl-col-mapper { grid-template-columns: 1fr; }
  .bl-col-mapper__arrow { transform: rotate(90deg); }
}
@media (max-width: 480px) {
  .bl-kpi-grid--4, .bl-kpi-grid--5 { grid-template-columns: 1fr; }
  .bl-form-grid, .bl-form-grid--3, .bl-form-grid--4 { grid-template-columns: 1fr; }
  .bl-modal { border-radius: var(--mv-radius-lg, 12px); max-height: 95vh; }
  .bl-page-title { font-size: var(--mv-display-h4, 1.25rem); }
}

/* ===== MV-WIZARD-FIX ===== */

/* Defensive: checkbox dentro de .mv-switch siempre oculto visualmente */
.mv-switch > input[type="checkbox"],
.mv-switch input[type="checkbox"].form-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Fallback: checkbox suelto en wizard shell (formsets legacy) */
.mv-wizard-shell input[type="checkbox"]:not(.mv-switch input):not([hidden]) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  accent-color: var(--mv-primary-500, #f71883) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin: 0 var(--mv-space-2) 0 0 !important;
  flex-shrink: 0 !important;
}

/* Calificaciones list */
.mv-calif-list {
  display: flex;
  flex-direction: column;
  gap: var(--mv-space-4);
}
.mv-calif-list .readOnly .mv-form-section__summary {
  opacity: 0.7;
  cursor: not-allowed;
}
.mv-calif-list .mv-form-section .mv-form-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Add/Remove formset buttons in wizard */
.mv-wizard-shell .addFormset,
.mv-wizard-shell .deleteFormset {
  display: inline-flex !important;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-2) var(--mv-space-4) !important;
  font-size: var(--mv-text-sm) !important;
  font-weight: var(--mv-fw-medium) !important;
  border-radius: var(--mv-radius-md) !important;
}
.mv-wizard-shell .addFormset {
  margin-top: var(--mv-space-4);
}

/* Check card (supervisor/agent tiles) */
.mv-check-card {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-3) var(--mv-space-4);
  background: var(--mv-surface, #fff);
  border: 1px solid var(--mv-border, #e5e5ea);
  border-radius: var(--mv-radius-md, 8px);
  cursor: pointer;
  font-size: var(--mv-text-sm, 14px);
  transition: all var(--mv-dur-fast, 150ms) ease-out;
  user-select: none;
}
.mv-check-card:hover {
  border-color: var(--mv-primary-400, #fa4da0);
  background: var(--mv-primary-50, rgba(247, 24, 131, 0.05));
}
.mv-check-card:has(input[type="checkbox"]:checked) {
  border-color: var(--mv-primary-600, #d9146f);
  background: var(--mv-primary-50, rgba(247, 24, 131, 0.05));
  color: var(--mv-primary-700, #b1155c);
  font-weight: var(--mv-fw-medium, 500);
}
.mv-check-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mv-primary-600, #d9146f);
  margin: 0;
}
.mv-check-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--mv-space-3);
}

/* Check card — readonly/informational variant (disabled channel indicators) */
.mv-check-card--readonly {
  opacity: 0.85;
  background: var(--mv-surface-sunken, #fafafa);
  cursor: not-allowed !important;
}
.mv-check-card--readonly input[type="checkbox"] {
  cursor: not-allowed !important;
}
.mv-check-card--readonly:hover {
  border-color: var(--mv-border, #e5e5ea) !important;
  background: var(--mv-surface-sunken, #fafafa) !important;
}
.mv-check-card--readonly:has(input:checked) {
  border-color: var(--mv-primary-500, #F71883);
  background: rgba(247, 24, 131, 0.06);
  opacity: 1;
}
.mv-check-card--readonly:has(input:checked) i {
  color: var(--mv-primary-600, #d9146f) !important;
}

/* ===== END MV-BLASTER COMPONENTS (Sprint 7) ===== */