/* =========================================================
   DX — Design System (Bloque 1)
   Tokens, app shell, components
   BEM con prefijo mp-
   ========================================================= */

/* ---------- TOKENS · LIGHT (default) ---------- */
:root {
  /* Neutrals (10 pasos) — slightly cool */
  --mp-neutral-0:   #ffffff;
  --mp-neutral-50:  #fafafb;
  --mp-neutral-100: #f4f5f7;
  --mp-neutral-200: #e8eaee;
  --mp-neutral-300: #d8dbe1;
  --mp-neutral-400: #b4b8c1;
  --mp-neutral-500: #8c919c;
  --mp-neutral-600: #626773;
  --mp-neutral-700: #3f444f;
  --mp-neutral-800: #262a33;
  --mp-neutral-900: #14171c;

  /* Brand */
  --mp-primary-50:  #eef1ff;
  --mp-primary-100: #dde3ff;
  --mp-primary-200: #b9c4ff;
  --mp-primary-300: #8d9fff;
  --mp-primary-400: #6678f5;
  --mp-primary-500: #4356e0;
  --mp-primary-600: #3142bf;
  --mp-primary-700: #25339a;
  --mp-primary-800: #1c2778;
  --mp-primary-900: #141c5a;

  /* Accent (warm — para destacar, badges, charts) */
  --mp-accent-50:   #fff5e8;
  --mp-accent-100:  #ffe6c4;
  --mp-accent-300:  #f5b269;
  --mp-accent-500:  --mp-accent-500-fallback;
  --mp-accent-500:  #c47a1a;
  --mp-accent-700:  #8a510a;

  /* Semantic */
  --mp-success-50:  #e8f6ee;
  --mp-success-500: #1f8a4c;
  --mp-success-700: #146134;

  --mp-warning-50:  #fff5e0;
  --mp-warning-500: #b07300;
  --mp-warning-700: #7a5000;

  --mp-danger-50:   #fdecec;
  --mp-danger-500:  #c8302d;
  --mp-danger-700:  #8e1d1b;

  --mp-info-50:     #e8f0fb;
  --mp-info-500:    #246fcf;
  --mp-info-700:    #184a8c;

  /* Roles (semantic mapping) */
  --mp-bg-app:        var(--mp-neutral-100);
  --mp-bg-surface:    var(--mp-neutral-0);
  --mp-bg-sunken:     var(--mp-neutral-50);
  --mp-bg-raised:     var(--mp-neutral-0);
  --mp-bg-hover:      var(--mp-neutral-100);
  --mp-bg-active:     var(--mp-neutral-200);
  --mp-bg-input:      var(--mp-neutral-0);
  --mp-bg-input-disabled: var(--mp-neutral-100);
  --mp-bg-overlay:    rgba(20, 23, 28, 0.45);

  --mp-fg-primary:    var(--mp-neutral-900);
  --mp-fg-secondary:  var(--mp-neutral-700);
  --mp-fg-muted:      var(--mp-neutral-500);
  --mp-fg-disabled:   var(--mp-neutral-400);
  --mp-fg-inverse:    var(--mp-neutral-0);
  --mp-fg-link:       var(--mp-primary-600);
  --mp-fg-on-primary: var(--mp-neutral-0);

  --mp-border-subtle:  var(--mp-neutral-200);
  --mp-border-default: var(--mp-neutral-300);
  --mp-border-strong:  var(--mp-neutral-400);
  --mp-border-focus:   var(--mp-primary-500);

  /* Type scale */
  --mp-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mp-text-xs:   11px;
  --mp-text-sm:   12px;
  --mp-text-base: 13px;
  --mp-text-md:   14px;
  --mp-text-lg:   16px;
  --mp-text-xl:   20px;
  --mp-text-2xl:  24px;
  --mp-text-3xl:  30px;
  --mp-text-4xl:  38px;

  --mp-leading-tight:  1.2;
  --mp-leading-normal: 1.45;
  --mp-leading-loose:  1.65;

  --mp-tracking-tight:  -0.01em;
  --mp-tracking-normal: 0;
  --mp-tracking-wide:   0.04em;

  /* Spacing (base 4) */
  --mp-space-0:  0;
  --mp-space-1:  2px;
  --mp-space-2:  4px;
  --mp-space-3:  8px;
  --mp-space-4:  12px;
  --mp-space-5:  16px;
  --mp-space-6:  20px;
  --mp-space-7:  24px;
  --mp-space-8:  32px;
  --mp-space-9:  40px;
  --mp-space-10: 48px;
  --mp-space-11: 64px;

  /* Radii */
  --mp-radius-xs:   2px;
  --mp-radius-sm:   4px;
  --mp-radius-md:   6px;
  --mp-radius-lg:   8px;
  --mp-radius-xl:   12px;
  --mp-radius-pill: 999px;

  /* Shadows */
  --mp-shadow-xs: 0 1px 0 rgba(20, 23, 28, 0.04);
  --mp-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06), 0 1px 1px rgba(20, 23, 28, 0.04);
  --mp-shadow-md: 0 2px 4px rgba(20, 23, 28, 0.06), 0 4px 8px rgba(20, 23, 28, 0.06);
  --mp-shadow-lg: 0 4px 8px rgba(20, 23, 28, 0.06), 0 12px 24px rgba(20, 23, 28, 0.10);
  --mp-shadow-focus: 0 0 0 3px rgba(67, 86, 224, 0.30);
  --mp-shadow-focus-danger: 0 0 0 3px rgba(200, 48, 45, 0.28);

  /* Motion */
  --mp-duration-fast: 120ms;
  --mp-duration-base: 160ms;
  --mp-duration-slow: 200ms;
  --mp-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Layout */
  --mp-sidebar-w: 232px;
  --mp-topbar-h:  56px;

  color-scheme: light;
}

/* ---------- TOKENS · DARK ---------- */
[data-theme="dark"] {
  --mp-neutral-0:   #0d1015;
  --mp-neutral-50:  #11141a;
  --mp-neutral-100: #161a21;
  --mp-neutral-200: #1d222b;
  --mp-neutral-300: #272d38;
  --mp-neutral-400: #3a414f;
  --mp-neutral-500: #6b7382;
  --mp-neutral-600: #9097a4;
  --mp-neutral-700: #b8bdc7;
  --mp-neutral-800: #dcdfe5;
  --mp-neutral-900: #f1f2f5;

  --mp-primary-50:  #161c3d;
  --mp-primary-100: #1c2454;
  --mp-primary-200: #283175;
  --mp-primary-300: #3d4ba8;
  --mp-primary-400: #6878e8;
  --mp-primary-500: #8190ff;
  --mp-primary-600: #a4afff;
  --mp-primary-700: #c2cbff;
  --mp-primary-800: #dee3ff;
  --mp-primary-900: #eef1ff;

  --mp-accent-50:   #2a1c08;
  --mp-accent-100:  #3a2811;
  --mp-accent-300:  #8a510a;
  --mp-accent-500:  #e09a3a;
  --mp-accent-700:  #f5c068;

  --mp-success-50:  #0f2418;
  --mp-success-500: #4cb27a;
  --mp-success-700: #7fd3a3;

  --mp-warning-50:  #2a1f08;
  --mp-warning-500: #e0a32f;
  --mp-warning-700: #f5c46a;

  --mp-danger-50:   #2a1112;
  --mp-danger-500:  #e8625f;
  --mp-danger-700:  #f59895;

  --mp-info-50:     #0f1c2e;
  --mp-info-500:    #5b9eff;
  --mp-info-700:    #94c0ff;

  --mp-bg-app:        var(--mp-neutral-0);
  --mp-bg-surface:    var(--mp-neutral-50);
  --mp-bg-sunken:     var(--mp-neutral-0);
  --mp-bg-raised:     var(--mp-neutral-100);
  --mp-bg-hover:      var(--mp-neutral-200);
  --mp-bg-active:     var(--mp-neutral-300);
  --mp-bg-input:      var(--mp-neutral-100);
  --mp-bg-input-disabled: var(--mp-neutral-50);
  --mp-bg-overlay:    rgba(0, 0, 0, 0.6);

  --mp-fg-primary:    var(--mp-neutral-900);
  --mp-fg-secondary:  var(--mp-neutral-700);
  --mp-fg-muted:      var(--mp-neutral-500);
  --mp-fg-disabled:   var(--mp-neutral-400);
  --mp-fg-inverse:    var(--mp-neutral-0);
  --mp-fg-link:       var(--mp-primary-600);
  --mp-fg-on-primary: #0d1015;

  --mp-border-subtle:  var(--mp-neutral-200);
  --mp-border-default: var(--mp-neutral-300);
  --mp-border-strong:  var(--mp-neutral-400);
  --mp-border-focus:   var(--mp-primary-500);

  --mp-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --mp-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45);
  --mp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --mp-shadow-focus: 0 0 0 3px rgba(129, 144, 255, 0.32);
  --mp-shadow-focus-danger: 0 0 0 3px rgba(232, 98, 95, 0.30);

  color-scheme: dark;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--mp-font-sans);
  font-size: var(--mp-text-base);
  line-height: var(--mp-leading-normal);
  color: var(--mp-fg-primary);
  background: var(--mp-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "tnum";
}
button, input, textarea, select { font: inherit; color: inherit; }
/* Sin subrayado por defecto. La mitad de los enlaces de esta aplicación son
   superficies —tarjetas, filas, mosaicos— y el subrayado del navegador les
   cruzaba todo el contenido, títulos y cifras incluidos. Donde el enlace es
   texto dentro de un párrafo, se subraya al pasar por encima y se pide ahí. */
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--mp-primary-500); outline-offset: 2px; border-radius: var(--mp-radius-sm); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* ---------- APP SHELL ---------- */
.mp-app {
  display: grid;
  grid-template-columns: var(--mp-sidebar-w) 1fr;
  grid-template-rows: var(--mp-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}
.mp-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--mp-bg-surface);
  border-right: 1px solid var(--mp-border-subtle);
  padding: var(--mp-space-6) var(--mp-space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.mp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: 0 var(--mp-space-3) var(--mp-space-7);
  border-bottom: 1px solid var(--mp-border-subtle);
  margin-bottom: var(--mp-space-5);
}
.mp-sidebar__logo {
  width: 28px;
  height: 28px;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-neutral-900);
  color: var(--mp-neutral-0);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.mp-sidebar__brand-name {
  font-weight: 600;
  font-size: var(--mp-text-md);
  letter-spacing: -0.01em;
}
.mp-sidebar__brand-sub {
  display: block;
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mp-nav { display: flex; flex-direction: column; gap: 2px; }
.mp-nav__group-title {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  font-weight: 600;
  padding: var(--mp-space-5) var(--mp-space-3) var(--mp-space-2);
}
.mp-nav__link {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: 6px var(--mp-space-3);
  border-radius: var(--mp-radius-md);
  color: var(--mp-fg-secondary);
  text-decoration: none;
  font-size: var(--mp-text-base);
  font-weight: 500;
  transition: background var(--mp-duration-fast) var(--mp-ease), color var(--mp-duration-fast) var(--mp-ease);
}
.mp-nav__link:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-nav__link.is-active {
  background: var(--mp-bg-active);
  color: var(--mp-fg-primary);
  font-weight: 600;
}
.mp-nav__link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }

/* La ruta de la pantalla dentro del menú. Cada escalón se sangra un poco más
   que el anterior para que se lea como un camino y no como una lista suelta; a
   partir del cuarto deja de sangrar, o los nombres no cabrían. El último no
   enlaza a ningún sitio —es donde estás— y por eso puede ser un <span>. */
.mp-nav__link--trail { font-weight: 400; font-size: var(--mp-text-sm); }
.mp-nav__link--trail svg { width: 12px; height: 12px; opacity: .5; }
.mp-nav__link--trail .mp-nav__link-label { overflow: hidden; text-overflow: ellipsis; }
.mp-nav__link--nivel0 { padding-left: var(--mp-space-3); }
.mp-nav__link--nivel1 { padding-left: var(--mp-space-5); }
.mp-nav__link--nivel2 { padding-left: var(--mp-space-6); }
.mp-nav__link--nivel3 { padding-left: var(--mp-space-7); }
span.mp-nav__link--trail { cursor: default; }

.mp-topbar {
  grid-area: topbar;
  position: sticky; top: 0; z-index: 10;
  background: var(--mp-bg-surface);
  border-bottom: 1px solid var(--mp-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mp-space-7);
}
.mp-topbar__title {
  font-size: var(--mp-text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
}
.mp-topbar__crumb {
  color: var(--mp-fg-muted);
  font-weight: 500;
}
.mp-topbar__crumb-sep { color: var(--mp-fg-disabled); }
.mp-topbar__actions { display: flex; gap: var(--mp-space-3); align-items: center; }

.mp-main {
  grid-area: main;
  padding: var(--mp-space-9) var(--mp-space-9) var(--mp-space-11);
  min-width: 0;
}

/* Empuja el bloque de usuario al fondo del sidebar */
.mp-sidebar__spacer { flex: 1 1 auto; }
.mp-nav__link-label { white-space: nowrap; }

/* Usuario en el sidebar */
.mp-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-3);
  margin-top: var(--mp-space-3);
  border-top: 1px solid var(--mp-border-subtle);
}
.mp-sidebar__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mp-bg-active);
  color: var(--mp-fg-secondary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mp-sidebar__avatar svg { width: 16px; height: 16px; }
.mp-sidebar__user-name { flex: 1; min-width: 0; font-size: var(--mp-text-sm); font-weight: 600; color: var(--mp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sidebar__logout button { border: 0; background: transparent; color: var(--mp-fg-muted); cursor: pointer; width: 28px; height: 28px; border-radius: var(--mp-radius-sm); display: grid; place-items: center; }
.mp-sidebar__logout button:hover { background: var(--mp-bg-hover); color: var(--mp-danger-500); }
.mp-sidebar__logout svg { width: 15px; height: 15px; }

/* Toggle de contraer en la topbar */
.mp-topbar__lead { display: flex; align-items: center; gap: var(--mp-space-3); }
.mp-topbar__toggle { border: 0; background: transparent; color: var(--mp-fg-muted); cursor: pointer; width: 32px; height: 32px; border-radius: var(--mp-radius-sm); display: grid; place-items: center; }
.mp-topbar__toggle:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-topbar__toggle svg { width: 17px; height: 17px; }

/* ---- Menú contraído ---- */
:root[data-sidebar="collapsed"] { --mp-sidebar-w: 68px; }
[data-sidebar="collapsed"] .mp-sidebar { padding-left: var(--mp-space-3); padding-right: var(--mp-space-3); }
[data-sidebar="collapsed"] .mp-sidebar__brand { justify-content: center; gap: 0; }
[data-sidebar="collapsed"] .mp-sidebar__brand-text,
[data-sidebar="collapsed"] .mp-nav__group-title,
[data-sidebar="collapsed"] .mp-nav__link-label,
[data-sidebar="collapsed"] .mp-sidebar__user-name { display: none; }
[data-sidebar="collapsed"] .mp-nav__link { justify-content: center; padding-left: 0; padding-right: 0; }
[data-sidebar="collapsed"] .mp-sidebar__user { flex-direction: column; gap: var(--mp-space-2); padding-left: 0; padding-right: 0; }

.mp-section { margin-bottom: var(--mp-space-11); scroll-margin-top: 72px; }
.mp-section__head { margin-bottom: var(--mp-space-7); max-width: 720px; }
.mp-section__eyebrow {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  font-weight: 600;
  color: var(--mp-fg-muted);
}
.mp-section__title {
  font-size: var(--mp-text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: var(--mp-space-2) 0 var(--mp-space-3);
  line-height: var(--mp-leading-tight);
}
.mp-section__lead { color: var(--mp-fg-secondary); font-size: var(--mp-text-md); }

.mp-subsection { margin-top: var(--mp-space-9); }
.mp-subsection__title {
  font-size: var(--mp-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--mp-space-2);
}
.mp-subsection__lead { color: var(--mp-fg-muted); margin: 0 0 var(--mp-space-5); font-size: var(--mp-text-base); }

/* ---------- CARDS / DEMO FRAMES ---------- */
.mp-card {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-6);
}
.mp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--mp-space-5);
  gap: var(--mp-space-5);
}
.mp-card__title {
  font-size: var(--mp-text-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.mp-card__sub {
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-sm);
  font-family: var(--mp-font-mono);
}
.mp-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-4);
  align-items: center;
}
.mp-card__row + .mp-card__row { margin-top: var(--mp-space-4); }
.mp-card__row-label {
  flex-basis: 120px;
  flex-shrink: 0;
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  font-weight: 600;
}
.mp-card__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--mp-space-3);
  margin-top: var(--mp-space-5);
  padding-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-border-subtle);
}

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

/* ---------- FOUNDATIONS · PALETTE ---------- */
.mp-palette { display: grid; gap: var(--mp-space-7); }
.mp-palette__row { display: grid; gap: var(--mp-space-3); }
.mp-palette__row-title {
  font-size: var(--mp-text-sm);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--mp-border-subtle);
  padding-bottom: var(--mp-space-2);
}
.mp-palette__row-meta { color: var(--mp-fg-muted); font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); font-weight: 400; }
.mp-palette__swatches {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--mp-space-2);
}
.mp-palette__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-2);
}
.mp-palette__chip {
  height: 56px;
  border-radius: var(--mp-radius-sm);
  border: 1px solid var(--mp-border-subtle);
}
.mp-palette__label { font-size: 10px; font-family: var(--mp-font-mono); color: var(--mp-fg-muted); display: flex; justify-content: space-between; }
.mp-palette__label b { color: var(--mp-fg-primary); font-weight: 600; }

/* Mini-paleta semántica */
.mp-semantic { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-space-4); }
.mp-semantic__item { display: flex; gap: var(--mp-space-3); align-items: center; padding: var(--mp-space-3); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-md); background: var(--mp-bg-sunken); }
.mp-semantic__dot { width: 14px; height: 14px; border-radius: var(--mp-radius-pill); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.mp-semantic__name { font-weight: 600; font-size: var(--mp-text-sm); display: block; }
.mp-semantic__hex { font-family: var(--mp-font-mono); color: var(--mp-fg-muted); font-size: var(--mp-text-xs); }

/* Fixed-theme preview cards (light/dark side by side) */
.mp-theme-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mp-space-5);
}
.mp-theme-preview__card {
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-6);
  border: 1px solid var(--mp-border-subtle);
}
.mp-theme-preview__card--light { background: #fafafb; color: #14171c; }
.mp-theme-preview__card--dark { background: #0d1015; color: #f1f2f5; border-color: #1d222b; }
.mp-theme-preview__title { font-size: var(--mp-text-sm); font-weight: 600; margin: 0 0 var(--mp-space-3); display: flex; justify-content: space-between; align-items: baseline; }
.mp-theme-preview__title span { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); opacity: 0.6; font-weight: 400; }
.mp-theme-preview__strip { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; }
.mp-theme-preview__strip > div { aspect-ratio: 1 / 1.4; border-radius: 2px; }

/* ---------- TYPOGRAPHY SCALE ---------- */
.mp-type { display: grid; gap: var(--mp-space-4); }
.mp-type__row {
  display: grid;
  grid-template-columns: 90px 80px 1fr;
  gap: var(--mp-space-5);
  align-items: baseline;
  padding: var(--mp-space-4) 0;
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-type__row:last-child { border-bottom: 0; }
.mp-type__name { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-type__meta { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-type__sample { color: var(--mp-fg-primary); }
.mp-type__sample--display-1 { font-size: var(--mp-text-4xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.mp-type__sample--display-2 { font-size: var(--mp-text-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.mp-type__sample--heading-1 { font-size: var(--mp-text-2xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.mp-type__sample--heading-2 { font-size: var(--mp-text-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.mp-type__sample--heading-3 { font-size: var(--mp-text-lg); font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.mp-type__sample--body-lg { font-size: var(--mp-text-md); font-weight: 400; line-height: 1.5; }
.mp-type__sample--body { font-size: var(--mp-text-base); font-weight: 400; line-height: 1.5; }
.mp-type__sample--body-sm { font-size: var(--mp-text-sm); font-weight: 400; line-height: 1.5; }
.mp-type__sample--caption { font-size: var(--mp-text-xs); font-weight: 500; line-height: 1.4; color: var(--mp-fg-muted); }
.mp-type__sample--mono { font-family: var(--mp-font-mono); font-size: var(--mp-text-sm); }

/* ---------- SPACING ---------- */
.mp-spacing { display: flex; flex-direction: column; gap: var(--mp-space-3); }
.mp-spacing__row { display: grid; grid-template-columns: 80px 80px 1fr; align-items: center; gap: var(--mp-space-4); font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); }
.mp-spacing__name { color: var(--mp-fg-primary); font-weight: 600; }
.mp-spacing__val { color: var(--mp-fg-muted); }
.mp-spacing__bar { background: var(--mp-primary-200); height: 14px; border-radius: var(--mp-radius-xs); }

/* ---------- RADII ---------- */
.mp-radii { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--mp-space-4); }
.mp-radii__item { display: flex; flex-direction: column; gap: var(--mp-space-3); align-items: flex-start; }
.mp-radii__shape { width: 100%; aspect-ratio: 1.4 / 1; background: var(--mp-bg-sunken); border: 1px solid var(--mp-border-default); }
.mp-radii__meta { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); }
.mp-radii__meta b { display: block; font-weight: 600; color: var(--mp-fg-primary); }
.mp-radii__meta span { color: var(--mp-fg-muted); }

/* ---------- SHADOWS ---------- */
.mp-shadows { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-space-5); }
.mp-shadows__item { display: flex; flex-direction: column; gap: var(--mp-space-3); }
.mp-shadows__box {
  height: 88px;
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-md);
  border: 1px solid var(--mp-border-subtle);
}
.mp-shadows__box--xs { box-shadow: var(--mp-shadow-xs); }
.mp-shadows__box--sm { box-shadow: var(--mp-shadow-sm); }
.mp-shadows__box--md { box-shadow: var(--mp-shadow-md); border-color: transparent; }
.mp-shadows__box--lg { box-shadow: var(--mp-shadow-lg); border-color: transparent; }
.mp-shadows__meta { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); }
.mp-shadows__meta b { color: var(--mp-fg-primary); font-weight: 600; }
.mp-shadows__meta span { color: var(--mp-fg-muted); display: block; }

/* ---------- ICONS GALLERY ---------- */
.mp-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--mp-space-3);
}
.mp-icons__item {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-2);
  align-items: center;
  justify-content: center;
  padding: var(--mp-space-5) var(--mp-space-3);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-sunken);
  transition: background var(--mp-duration-fast) var(--mp-ease);
}
.mp-icons__item:hover { background: var(--mp-bg-hover); }
.mp-icons__item svg { width: 20px; height: 20px; color: var(--mp-fg-secondary); }
.mp-icons__name {
  font-family: var(--mp-font-mono);
  font-size: 10px;
  color: var(--mp-fg-muted);
}

/* ---------- BUTTONS ---------- */
.mp-button {
  --_bg:        var(--mp-bg-surface);
  --_bg-hover:  var(--mp-bg-hover);
  --_bg-active: var(--mp-bg-active);
  --_fg:        var(--mp-fg-primary);
  --_border:    var(--mp-border-default);
  --_focus:     var(--mp-shadow-focus);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  padding: 0 var(--mp-space-4);
  height: 32px;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_border);
  border-radius: var(--mp-radius-md);
  font-size: var(--mp-text-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--mp-duration-fast) var(--mp-ease),
    color      var(--mp-duration-fast) var(--mp-ease),
    border-color var(--mp-duration-fast) var(--mp-ease),
    box-shadow var(--mp-duration-fast) var(--mp-ease),
    transform  var(--mp-duration-fast) var(--mp-ease);
}
.mp-button:hover, .mp-button.is-hover { background: var(--_bg-hover); }
.mp-button:focus-visible { outline: none; box-shadow: var(--_focus); border-color: var(--mp-border-focus); }
.mp-button:active, .mp-button.is-active { background: var(--_bg-active); transform: translateY(0.5px); }
.mp-button:disabled, .mp-button.is-disabled { cursor: not-allowed; opacity: 0.5; pointer-events: none; }

/* Variants */
.mp-button--primary {
  --_bg: var(--mp-primary-600);
  --_bg-hover: var(--mp-primary-700);
  --_bg-active: var(--mp-primary-800);
  --_fg: var(--mp-fg-on-primary);
  --_border: transparent;
}
[data-theme="dark"] .mp-button--primary {
  --_bg: var(--mp-primary-500);
  --_bg-hover: var(--mp-primary-400);
  --_bg-active: var(--mp-primary-300);
  --_fg: #0d1015;
}
.mp-button--secondary {
  /* default */
}
.mp-button--ghost {
  --_bg: transparent;
  --_border: transparent;
  --_fg: var(--mp-fg-secondary);
}
.mp-button--ghost:hover, .mp-button--ghost.is-hover { color: var(--mp-fg-primary); }
.mp-button--danger {
  --_bg: var(--mp-danger-500);
  --_bg-hover: var(--mp-danger-700);
  --_bg-active: var(--mp-danger-700);
  --_fg: #fff;
  --_border: transparent;
  --_focus: var(--mp-shadow-focus-danger);
}
[data-theme="dark"] .mp-button--danger {
  --_bg: var(--mp-danger-500);
  --_bg-hover: #d44b48;
}
.mp-button--link {
  --_bg: transparent;
  --_border: transparent;
  --_fg: var(--mp-fg-link);
  padding-left: 0;
  padding-right: 0;
  height: auto;
}
.mp-button--link:hover, .mp-button--link.is-hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sizes */
.mp-button--sm { height: 26px; padding: 0 10px; font-size: var(--mp-text-sm); }
.mp-button--lg { height: 38px; padding: 0 var(--mp-space-5); font-size: var(--mp-text-md); }

.mp-button__icon { width: 14px; height: 14px; flex-shrink: 0; }
.mp-button--sm .mp-button__icon { width: 12px; height: 12px; }
.mp-button--lg .mp-button__icon { width: 16px; height: 16px; }
.mp-button--icon-only { padding: 0; width: 32px; }
.mp-button--icon-only.mp-button--sm { width: 26px; }
.mp-button--icon-only.mp-button--lg { width: 38px; }

/* Button group */
.mp-button-group { display: inline-flex; }
.mp-button-group .mp-button { border-radius: 0; }
.mp-button-group .mp-button:first-child { border-top-left-radius: var(--mp-radius-md); border-bottom-left-radius: var(--mp-radius-md); }
.mp-button-group .mp-button:last-child  { border-top-right-radius: var(--mp-radius-md); border-bottom-right-radius: var(--mp-radius-md); }
.mp-button-group .mp-button + .mp-button { margin-left: -1px; }
.mp-button-group .mp-button:focus-visible,
.mp-button-group .mp-button.is-active { z-index: 1; }

/* Split button */
.mp-split { display: inline-flex; }
.mp-split .mp-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mp-split .mp-button:last-child  {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  margin-left: -1px;
  padding: 0; width: 32px;
}

/* Dropdown button */
.mp-dropdown { position: relative; display: inline-block; }
.mp-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: var(--mp-space-2);
  z-index: 5;
  display: none;
}
.mp-dropdown.is-open .mp-dropdown__menu { display: block; }
.mp-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  width: 100%;
  padding: 6px var(--mp-space-3);
  border: 0;
  background: transparent;
  color: var(--mp-fg-primary);
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: var(--mp-text-base);
}
.mp-dropdown__item:hover { background: var(--mp-bg-hover); }
.mp-dropdown__item svg { width: 14px; height: 14px; color: var(--mp-fg-muted); }
.mp-dropdown__sep { height: 1px; background: var(--mp-border-subtle); margin: var(--mp-space-2) 0; }

/* ---------- FORM PRIMITIVES ---------- */
.mp-field { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.mp-field--inline { flex-direction: row; align-items: center; gap: var(--mp-space-3); }
.mp-label {
  font-size: var(--mp-text-sm);
  font-weight: 500;
  color: var(--mp-fg-secondary);
  display: flex;
  gap: 4px;
  align-items: center;
}
.mp-label__req { color: var(--mp-danger-500); font-weight: 600; }
.mp-helper { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-helper--error { color: var(--mp-danger-500); display: flex; align-items: center; gap: 4px; }
.mp-helper--error svg { width: 12px; height: 12px; }

.mp-input, .mp-textarea, .mp-select {
  --_border: var(--mp-border-default);
  --_bg: var(--mp-bg-input);
  --_focus: var(--mp-shadow-focus);

  width: 100%;
  background: var(--_bg);
  color: var(--mp-fg-primary);
  border: 1px solid var(--_border);
  border-radius: var(--mp-radius-md);
  padding: 0 var(--mp-space-4);
  height: 32px;
  font-size: var(--mp-text-base);
  transition:
    border-color var(--mp-duration-fast) var(--mp-ease),
    box-shadow var(--mp-duration-fast) var(--mp-ease),
    background var(--mp-duration-fast) var(--mp-ease);
}
.mp-textarea {
  height: auto;
  padding: var(--mp-space-3) var(--mp-space-4);
  min-height: 88px;
  resize: vertical;
  font-family: inherit;
  line-height: var(--mp-leading-normal);
}
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-fg-muted); }
.mp-input:hover:not(:disabled):not([readonly]),
.mp-textarea:hover:not(:disabled):not([readonly]),
.mp-select:hover:not(:disabled) { border-color: var(--mp-border-strong); }

.mp-input:focus, .mp-input.is-focus,
.mp-textarea:focus, .mp-textarea.is-focus,
.mp-select:focus, .mp-select.is-focus {
  outline: none;
  border-color: var(--mp-border-focus);
  box-shadow: var(--_focus);
}
.mp-input:disabled, .mp-input.is-disabled,
.mp-textarea:disabled, .mp-textarea.is-disabled,
.mp-select:disabled, .mp-select.is-disabled {
  background: var(--mp-bg-input-disabled);
  color: var(--mp-fg-disabled);
  cursor: not-allowed;
  border-color: var(--mp-border-subtle);
}
.mp-input[readonly], .mp-textarea[readonly], .mp-input.is-readonly, .mp-textarea.is-readonly {
  background: var(--mp-bg-sunken);
  color: var(--mp-fg-secondary);
  cursor: default;
}
.mp-input.is-error, .mp-textarea.is-error, .mp-select.is-error {
  border-color: var(--mp-danger-500);
}
.mp-input.is-error:focus, .mp-textarea.is-error:focus, .mp-select.is-error:focus {
  box-shadow: var(--mp-shadow-focus-danger);
}

/* Tamaños (alineados con los del botón) */
.mp-input--sm { height: 26px; padding: 0 var(--mp-space-3); font-size: var(--mp-text-sm); }
.mp-input--lg { height: 38px; padding: 0 var(--mp-space-5); font-size: var(--mp-text-md); }

/* Input adornment wrapper (for icon, search, masked) */
.mp-input-group {
  position: relative;
  width: 100%;
}
.mp-input-group__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--mp-fg-muted);
  pointer-events: none;
}
.mp-input-group__icon--left { left: var(--mp-space-4); }
.mp-input-group__icon--right { right: var(--mp-space-4); }
.mp-input-group--has-left .mp-input { padding-left: 32px; }
.mp-input-group--has-right .mp-input { padding-right: 32px; }
.mp-input-group__addon {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  right: var(--mp-space-3);
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-muted);
  pointer-events: none;
}

/* ---------- ELEGIR FICHERO ----------
   El <input type="file"> del navegador no se puede maquetar: pinta un botón
   gris del sistema operativo y un «No se ha seleccionado ningún archivo» que
   no se toca. El mockup de la importación de tarifas ya lo dijo el 2026-08-30
   —«PIDE COMPONENTE»— y se dibujó a propósito con el control crudo para que se
   viera.
   El truco es no maquetar el input: se estira invisible sobre la zona entera.
   Así el clic Y EL ARRASTRE siguen siendo los nativos —que funcionan y son
   accesibles— y lo que se ve encima es nuestro. */
.mp-filefield {
  position: relative;
  display: block;
  border: 1px dashed var(--mp-border-strong);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-sunken);
  padding: var(--mp-space-6) var(--mp-space-5);
  text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
.mp-filefield:hover { border-color: var(--mp-primary-400); background: var(--mp-bg-surface); }
/* El input invisible por encima de todo: es quien recibe el clic y el drop. */
.mp-filefield__input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.mp-filefield__input:focus-visible + .mp-filefield__body { outline: 2px solid var(--mp-primary-400); outline-offset: 4px; }
.mp-filefield__input:disabled { cursor: default; }
.mp-filefield__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mp-space-2);
  pointer-events: none;
}
.mp-filefield__icon {
  width: 22px; height: 22px;
  color: var(--mp-fg-muted);
}
.mp-filefield__title {
  font-size: var(--mp-text-base);
  color: var(--mp-fg-primary);
}
.mp-filefield__title b { color: var(--mp-primary-500); font-weight: 600; }
.mp-filefield__hint {
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-muted);
}
/* Con fichero elegido deja de ser una invitación y pasa a ser un dato: marco
   sólido, icono en color y el nombre en mono, que es como se lee un fichero. */
.mp-filefield--filled {
  border-style: solid;
  border-color: var(--mp-border-subtle);
  background: var(--mp-bg-surface);
  text-align: left;
}
.mp-filefield--filled .mp-filefield__body { flex-direction: row; align-items: center; gap: var(--mp-space-4); }
.mp-filefield--filled .mp-filefield__icon { color: var(--mp-primary-500); flex-shrink: 0; }
.mp-filefield__name {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-filefield__meta { font-size: var(--mp-text-sm); color: var(--mp-fg-muted); }
.mp-filefield__file { min-width: 0; flex: 1; text-align: left; }
.mp-filefield__swap { font-size: var(--mp-text-sm); color: var(--mp-primary-500); flex-shrink: 0; }
.mp-filefield--busy { border-style: solid; border-color: var(--mp-primary-200); }

/* Checkbox */
.mp-checkbox, .mp-radio, .mp-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-3);
  cursor: pointer;
  font-size: var(--mp-text-base);
  color: var(--mp-fg-primary);
  user-select: none;
}
.mp-checkbox input, .mp-radio input, .mp-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mp-checkbox__box {
  width: 16px; height: 16px;
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-xs);
  background: var(--mp-bg-input);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--mp-duration-fast) var(--mp-ease), border-color var(--mp-duration-fast) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-checkbox__box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(0.7); transition: opacity var(--mp-duration-fast) var(--mp-ease), transform var(--mp-duration-fast) var(--mp-ease); }
.mp-checkbox input:checked ~ .mp-checkbox__box { background: var(--mp-primary-600); border-color: var(--mp-primary-600); }
[data-theme="dark"] .mp-checkbox input:checked ~ .mp-checkbox__box { background: var(--mp-primary-500); border-color: var(--mp-primary-500); }
[data-theme="dark"] .mp-checkbox__box svg { color: #0d1015; }
.mp-checkbox input:checked ~ .mp-checkbox__box svg { opacity: 1; transform: scale(1); }
.mp-checkbox input:focus-visible ~ .mp-checkbox__box { box-shadow: var(--mp-shadow-focus); }
.mp-checkbox input:disabled ~ .mp-checkbox__box { opacity: 0.5; }
.mp-checkbox.is-disabled { color: var(--mp-fg-disabled); cursor: not-allowed; }

/* Radio */
.mp-radio__dot {
  width: 16px; height: 16px;
  border: 1px solid var(--mp-border-strong);
  border-radius: 50%;
  background: var(--mp-bg-input);
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--mp-duration-fast) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-radio__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mp-primary-600);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--mp-duration-fast) var(--mp-ease), transform var(--mp-duration-fast) var(--mp-ease);
}
[data-theme="dark"] .mp-radio__dot::after { background: var(--mp-primary-500); }
.mp-radio input:checked ~ .mp-radio__dot { border-color: var(--mp-primary-600); }
[data-theme="dark"] .mp-radio input:checked ~ .mp-radio__dot { border-color: var(--mp-primary-500); }
.mp-radio input:checked ~ .mp-radio__dot::after { opacity: 1; transform: scale(1); }
.mp-radio input:focus-visible ~ .mp-radio__dot { box-shadow: var(--mp-shadow-focus); }
.mp-radio input:disabled ~ .mp-radio__dot { opacity: 0.5; }
.mp-radio.is-disabled { color: var(--mp-fg-disabled); cursor: not-allowed; }

.mp-radio-group { display: flex; flex-direction: column; gap: var(--mp-space-3); }
.mp-radio-group--horizontal { flex-direction: row; gap: var(--mp-space-6); }

/* Switch */
.mp-switch__track {
  width: 32px;
  height: 18px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-neutral-300);
  position: relative;
  flex-shrink: 0;
  transition: background var(--mp-duration-base) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: transform var(--mp-duration-base) var(--mp-ease);
}
.mp-switch input:checked ~ .mp-switch__track { background: var(--mp-primary-600); }
[data-theme="dark"] .mp-switch input:checked ~ .mp-switch__track { background: var(--mp-primary-500); }
.mp-switch input:checked ~ .mp-switch__track .mp-switch__thumb { transform: translateX(14px); }
.mp-switch input:focus-visible ~ .mp-switch__track { box-shadow: var(--mp-shadow-focus); }
.mp-switch input:disabled ~ .mp-switch__track { opacity: 0.5; }

/* Form layout */
.mp-form { display: flex; flex-direction: column; gap: var(--mp-space-7); }
.mp-form__actions { display: flex; justify-content: flex-end; gap: var(--mp-space-3); margin-top: var(--mp-space-7); }

/* ---- Layout de pantalla de edición (formulario en tarjetas) ---- */
.mp-breadcrumb { display: flex; align-items: center; gap: var(--mp-space-2); font-size: var(--mp-text-sm); color: var(--mp-fg-muted); }
.mp-breadcrumb a { color: var(--mp-fg-muted); }
/* Aquí sí: la miga de pan es texto suelto y sin el subrayado al pasar por
   encima no se distingue del escalón actual, que no es pulsable. */
.mp-breadcrumb a:hover { color: var(--mp-fg-secondary); text-decoration: underline; text-underline-offset: 3px; }
.mp-breadcrumb__sep { color: var(--mp-border-strong); }
.mp-breadcrumb__current { color: var(--mp-fg-secondary); font-weight: 600; }

.mp-summary { display: flex; flex-direction: column; gap: var(--mp-space-6); }
.mp-summary__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-space-5); flex-wrap: wrap; }
.mp-summary__title { margin: var(--mp-space-2) 0 0; font-size: var(--mp-text-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: var(--mp-leading-tight); }
.mp-summary__meta { margin-top: var(--mp-space-2); font-size: var(--mp-text-base); color: var(--mp-fg-secondary); }
.mp-summary__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mp-space-4); }
.mp-stat { background: var(--mp-bg-sunken); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-md); padding: var(--mp-space-3) var(--mp-space-4); }
.mp-stat__label { font-size: var(--mp-text-xs); text-transform: uppercase; letter-spacing: var(--mp-tracking-wide); color: var(--mp-fg-muted); font-weight: 600; }
.mp-stat__value { font-size: var(--mp-text-md); font-weight: 700; margin-top: var(--mp-space-2); }

/* Cabecera de sección dentro de una tarjeta */
.mp-card__desc { margin: var(--mp-space-2) 0 0; font-size: var(--mp-text-sm); color: var(--mp-fg-muted); }
.mp-card__section { display: flex; flex-direction: column; gap: var(--mp-space-4); }
.mp-card__section-head { margin-bottom: var(--mp-space-5); }

/* Píldora de estado */
.mp-status { display: inline-flex; align-items: center; gap: var(--mp-space-2); padding: 5px var(--mp-space-4); border-radius: var(--mp-radius-pill); font-size: var(--mp-text-sm); font-weight: 600; border: 1px solid transparent; }
.mp-status__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mp-status--draft { background: var(--mp-warning-50); color: var(--mp-warning-700); }
.mp-status--draft .mp-status__dot { background: var(--mp-warning-500); }
.mp-status--active { background: var(--mp-success-50); color: var(--mp-success-700); }
.mp-status--active .mp-status__dot { background: var(--mp-success-500); }
.mp-status--closed { background: var(--mp-bg-active); color: var(--mp-fg-secondary); }
.mp-status--closed .mp-status__dot { background: var(--mp-fg-muted); }

/* Chips seleccionables (medio) */
.mp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--mp-space-3); }
.mp-chip { display: flex; align-items: center; gap: var(--mp-space-3); padding: var(--mp-space-3) var(--mp-space-4); border: 1px solid var(--mp-border-default); border-radius: var(--mp-radius-md); background: var(--mp-bg-sunken); color: var(--mp-fg-secondary); font-size: var(--mp-text-base); font-weight: 600; cursor: pointer; user-select: none; transition: border-color var(--mp-duration-fast) var(--mp-ease), background var(--mp-duration-fast) var(--mp-ease), color var(--mp-duration-fast) var(--mp-ease); }
.mp-chip:hover { border-color: var(--mp-border-strong); }
.mp-chip:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.mp-chip.is-active { border-color: var(--mp-primary-600); background: var(--mp-primary-50); color: var(--mp-primary-700); }
[data-theme="dark"] .mp-chip.is-active { border-color: var(--mp-primary-500); background: var(--mp-primary-100); }
.mp-chip__dot { width: 16px; height: 16px; border-radius: var(--mp-radius-xs); flex-shrink: 0; background: var(--mp-bg-surface); box-shadow: inset 0 0 0 1.5px var(--mp-border-strong); }
.mp-chip.is-active .mp-chip__dot { background: var(--mp-primary-600); box-shadow: none; }
[data-theme="dark"] .mp-chip.is-active .mp-chip__dot { background: var(--mp-primary-500); }

/* Barra de acciones pegajosa */
.mp-form-bar { position: sticky; bottom: var(--mp-space-5); display: flex; align-items: center; gap: var(--mp-space-3); padding: var(--mp-space-3) var(--mp-space-4); background: var(--mp-bg-raised); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-md); }
.mp-form-bar__spacer { flex: 1; }

/* ---- Página de listado/búsqueda ---- */
.mp-listpage { display: flex; flex-direction: column; gap: var(--mp-space-5); }
.mp-listpage__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-space-5); flex-wrap: wrap; }
.mp-search { max-width: 420px; }
.mp-listpage__grid { border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-lg); overflow: hidden; background: var(--mp-bg-surface); }
.mp-listpage__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-4); padding: var(--mp-space-3) var(--mp-space-5); border-top: 1px solid var(--mp-border-subtle); background: var(--mp-bg-sunken); color: var(--mp-fg-muted); font-size: var(--mp-text-sm); font-variant-numeric: tabular-nums; }
.mp-listpage__foot b { color: var(--mp-fg-primary); font-weight: 600; }

/* ---- Login ---- */
.mp-auth { min-height: 100vh; display: grid; place-items: center; background: var(--mp-bg-app); padding: var(--mp-space-6); }
.mp-auth-card { width: 100%; max-width: 380px; background: var(--mp-bg-surface); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-lg); padding: var(--mp-space-7); display: flex; flex-direction: column; gap: var(--mp-space-5); }
.mp-auth-card__brand { display: flex; align-items: center; gap: var(--mp-space-3); }
.mp-auth-card__title { margin: 0; font-size: var(--mp-text-xl); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- INTRO DE ENTRADA ----------
   La cortina que se ve una vez, al entrar, mientras la aplicación se monta
   detrás. La idea viene del lienzo que dejó Joan en `Resources`; lo que cambia
   es que aquí se dibuja con NUESTRA marca y NUESTROS tokens, sin colores ni
   tipografías de fuera.
   Lo que se anima es un plan: cuatro barras creciendo, que es exactamente lo
   que hace `mp-progress` en las pantallas. La marca no se inventa un logotipo
   nuevo: es el mismo cuadrado «MP» de la barra lateral, en grande.
   El fondo NO es un azul de presentación: es `--mp-neutral-900`, la misma tinta
   del cuadrado. Una intro que estrena paleta es una intro que no pertenece a la
   aplicación a la que da paso. */
.mp-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--mp-space-6);
  /* Literal y no por token: el fondo es la tinta de la marca, y en modo oscuro
     los tonos neutros se invierten. La cortina es la misma siempre. */
  background: #14171c;
}
/* El irse es un ESTADO, no un retardo dentro de la animación de entrada.
   Así quien decide cuándo se va es la aplicación —que sabe si ya ha cargado— y
   no la hoja de estilos; y de paso el mockup puede dibujar la cortina quieta,
   que si no se esfumaría a los dos segundos de abrir la página. */
.mp-intro--leaving {
  animation: mp-intro-out 620ms cubic-bezier(.7, 0, .28, 1) both;
  pointer-events: none;
}
.mp-intro__mark {
  width: 96px; height: 96px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-neutral-0);
  color: #14171c;
  display: grid;
  place-items: center;
  font-size: 34px; font-weight: 700; letter-spacing: -0.03em;
  animation: mp-intro-mark 560ms cubic-bezier(.16, 1, .3, 1) both;
}
/* El plan que se dibuja solo. Cuatro barras porque cuatro son las que caben sin
   que parezca un gráfico de verdad: esto es un gesto, no un dato. */
.mp-intro__plan {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
  width: 204px;
}
.mp-intro__bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.mp-intro__bar::after {
  content: "";
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--mp-primary-400);
  transform-origin: left;
  animation: mp-intro-bar 520ms cubic-bezier(.16, 1, .3, 1) both;
}
.mp-intro__bar:nth-child(1)::after { width: 62%; animation-delay: 240ms; }
.mp-intro__bar:nth-child(2)::after { width: 88%; animation-delay: 340ms; }
.mp-intro__bar:nth-child(3)::after { width: 44%; animation-delay: 440ms; }
.mp-intro__bar:nth-child(4)::after { width: 74%; animation-delay: 540ms; }
.mp-intro__word {
  font-size: var(--mp-text-xl);
  font-weight: 600;
  color: var(--mp-neutral-0);
  animation: mp-intro-word 620ms cubic-bezier(.16, 1, .3, 1) 420ms both;
}
/* La línea de abajo dice DE QUIÉN es la sesión, no «cargando»: quien entra ya
   sabe que está entrando; lo que no sabe es en qué agencia va a caer. */
.mp-intro__sub {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-3);
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  animation: mp-intro-fade 420ms ease 760ms both;
}
.mp-intro__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mp-primary-400);
  animation: mp-intro-pulse 1s ease-in-out infinite;
}

@keyframes mp-intro-mark { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes mp-intro-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mp-intro-word { from { opacity: 0; transform: translateY(8px); letter-spacing: .12em; } to { opacity: 1; transform: translateY(0); letter-spacing: -0.01em; } }
@keyframes mp-intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-intro-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* Se va hacia arriba y hacia dentro, como si la cortina se guardara en el
   cuadrado de la barra lateral, que es donde vive la marca a partir de ahora. */
@keyframes mp-intro-out { 0% { opacity: 1; transform: scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(.9) translateY(-6vh); visibility: hidden; } }

/* Quien pide menos movimiento ve la cortina quieta y se va igual de rápido: la
   intro no puede convertirse en una espera para quien la ha desactivado. */
@media (prefers-reduced-motion: reduce) {
  .mp-intro, .mp-intro *, .mp-intro *::after { animation: none !important; }
  /* Sin movimiento, pero tampoco sin salida: al marcarse como que se va,
     desaparece de golpe en vez de quedarse pegada. */
  .mp-intro--leaving { opacity: 0 !important; visibility: hidden !important; }
}
.mp-topbar__user { display: inline-flex; align-items: center; gap: var(--mp-space-2); font-size: var(--mp-text-sm); color: var(--mp-fg-secondary); }
.mp-topbar__user svg { width: 14px; height: 14px; }

/* ---- Home / dashboard ---- */
.mp-home { display: flex; flex-direction: column; gap: var(--mp-space-9); }
.mp-quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-space-5); }

.mp-hero-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--mp-space-6); min-height: 172px; padding: var(--mp-space-6) var(--mp-space-7); border-radius: var(--mp-radius-lg); background: linear-gradient(135deg, var(--mp-primary-600), var(--mp-primary-500)); color: #fff; box-shadow: var(--mp-shadow-md); }
.mp-hero-card:hover { color: #fff; box-shadow: var(--mp-shadow-lg); }
.mp-hero-card__top { display: flex; align-items: center; justify-content: space-between; }
.mp-hero-card__icon { width: 48px; height: 48px; border-radius: var(--mp-radius-md); background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; }
.mp-hero-card__icon svg { width: 22px; height: 22px; }
.mp-hero-card__arrow { width: 20px; height: 20px; opacity: 0.7; }
.mp-hero-card__title { font-size: var(--mp-text-lg); font-weight: 700; }
.mp-hero-card__desc { font-size: var(--mp-text-sm); opacity: 0.85; margin-top: var(--mp-space-2); }

.mp-recent { min-height: 172px; display: flex; flex-direction: column; }
.mp-recent__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mp-space-4); }
.mp-recent__title { display: flex; align-items: center; gap: var(--mp-space-3); font-size: var(--mp-text-md); font-weight: 700; }
.mp-recent__icon { width: 36px; height: 36px; border-radius: var(--mp-radius-md); background: var(--mp-primary-50); color: var(--mp-primary-700); display: grid; place-items: center; }
.mp-recent__icon svg { width: 18px; height: 18px; }
.mp-recent__all { font-size: var(--mp-text-sm); font-weight: 600; }
.mp-recent__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mp-space-2); color: var(--mp-fg-muted); text-align: center; font-size: var(--mp-text-sm); }
.mp-recent__empty svg { width: 26px; height: 26px; opacity: 0.5; }
.mp-recent__list { display: flex; flex-direction: column; gap: 2px; }
.mp-recent__item { display: flex; align-items: center; gap: var(--mp-space-3); padding: var(--mp-space-2) var(--mp-space-3); border-radius: var(--mp-radius-md); color: var(--mp-fg-primary); }
.mp-recent__item:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-recent__item-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--mp-radius-sm); background: var(--mp-primary-50); color: var(--mp-primary-700); display: grid; place-items: center; }
.mp-recent__item-icon svg { width: 15px; height: 15px; }
.mp-recent__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mp-recent__item-name { font-size: var(--mp-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-recent__item-meta { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-recent__item-chev { width: 14px; height: 14px; color: var(--mp-border-strong); flex-shrink: 0; }

.mp-modules__title { font-size: var(--mp-text-xs); letter-spacing: var(--mp-tracking-wide); color: var(--mp-fg-muted); font-weight: 700; text-transform: uppercase; margin-bottom: var(--mp-space-4); }
.mp-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mp-space-4); }
.mp-module-card { display: flex; align-items: center; gap: var(--mp-space-4); background: var(--mp-bg-surface); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-lg); padding: var(--mp-space-4) var(--mp-space-5); transition: border-color var(--mp-duration-fast) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease), transform var(--mp-duration-fast) var(--mp-ease); }
.mp-module-card:hover { border-color: var(--mp-border-strong); box-shadow: var(--mp-shadow-sm); transform: translateY(-2px); }
.mp-module-card__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--mp-radius-md); display: grid; place-items: center; }
.mp-module-card__icon svg { width: 21px; height: 21px; }
.mp-module-card__text { flex: 1; min-width: 0; }
.mp-module-card__title { font-size: var(--mp-text-base); font-weight: 700; }
.mp-module-card__desc { font-size: var(--mp-text-sm); color: var(--mp-fg-muted); margin-top: 2px; }
.mp-module-card__chev { width: 16px; height: 16px; color: var(--mp-border-strong); flex-shrink: 0; }
.mp-module-card__icon--red { background: var(--mp-danger-50); color: var(--mp-danger-700); }
.mp-module-card__icon--amber { background: var(--mp-warning-50); color: var(--mp-warning-700); }
.mp-module-card__icon--blue { background: var(--mp-info-50); color: var(--mp-info-700); }
.mp-module-card__icon--green { background: var(--mp-success-50); color: var(--mp-success-700); }

.mp-module-card__icon--rigel { background: var(--mp-accent-50); color: var(--mp-accent-700); }

/* ── Rigel: la constelación de Orión (pantalla /rigel) ──────────────────────
   Traducción fiel de la sección «Constelación de Orión» del prototipo
   `Resources/MediaPlanner/Orion Home.dc.html`. Las medidas, los colores, los
   retardos y las curvas de animación salen de ahí tal cual: si el prototipo
   cambia, este bloque se vuelve a copiar de él.

   Este bloque NO usa los tokens de color del sistema, y es a propósito: un
   cielo nocturno es negro en tema claro y en tema oscuro.

   --mp-orion-line-base y --mp-orion-line-lit son el `lineIntensity` del panel
   de Tweaks: base 0,24 × valor y encendida 0,85 × valor, con tope en 1. Aquí
   están puestas al equivalente de un valor de 2. */
.mp-orion {
    --mp-orion-line-base: .48;
    --mp-orion-line-lit: 1;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: radial-gradient(ellipse 70% 90% at 50% 45%, #141a2c 0%, #0d111c 55%, #0a0c14 100%);
    animation: mp-orion-up .6s ease-out .08s both;
}
@keyframes mp-orion-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.mp-orion__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px 0; }
.mp-orion__kicker { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #6c7692; }
.mp-orion__hint { font-size: 11px; color: #6c7692; }

.mp-orion__stage { position: relative; display: flex; justify-content: center; padding: 26px 40px 34px; }
.mp-orion__map { position: relative; height: min(50vh, 420px); aspect-ratio: 100 / 126; }

/* El cielo de fondo. Ocho ritmos en vez de un tiempo distinto por punto: la
   variedad se ve igual y no hace falta un `style` en línea por estrella. */
.mp-orion__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-orion__spark { fill: #cfe0ff; animation: mp-orion-twinkle 6s ease-in-out infinite; }
.mp-orion__spark--calida { fill: #ffe6c9; }
.mp-orion__spark--t0 { animation-duration: 3.2s; animation-delay: .4s; }
.mp-orion__spark--t1 { animation-duration: 4.1s; animation-delay: 2.7s; }
.mp-orion__spark--t2 { animation-duration: 5.3s; animation-delay: 1.1s; }
.mp-orion__spark--t3 { animation-duration: 6.4s; animation-delay: 5.2s; }
.mp-orion__spark--t4 { animation-duration: 7.2s; animation-delay: 3.3s; }
.mp-orion__spark--t5 { animation-duration: 8.1s; animation-delay: 6.8s; }
.mp-orion__spark--t6 { animation-duration: 4.7s; animation-delay: 7.6s; }
.mp-orion__spark--t7 { animation-duration: 8.9s; animation-delay: 1.9s; }
@keyframes mp-orion-twinkle { 0%, 100% { opacity: .10; } 50% { opacity: .5; } }

/* Cada estrella cuelga de un ancla de tamaño cero colocada en tanto por ciento.
   La animación de entrada va en el ancla, no en el punto: al escalar un ancla
   sin tamaño, el punto crece desde su propio centro y el rótulo lo acompaña. */
.mp-orion__anchor { position: absolute; animation: mp-orion-in .7s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes mp-orion-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.mp-orion__anchor--betelgeuse { left: 9%;    top: 0;     animation-delay: .15s; }
.mp-orion__anchor--bellatrix  { left: 64.7%; top: 6.2%;  animation-delay: .3s; }
.mp-orion__anchor--alnitak    { left: 35.7%; top: 54.7%; animation-delay: .45s; }
.mp-orion__anchor--alnilam    { left: 44.1%; top: 50.4%; animation-delay: .6s; }
.mp-orion__anchor--mintaka    { left: 51.9%; top: 45.1%; animation-delay: .75s; }
.mp-orion__anchor--rigel      { left: 84.2%; top: 91.4%; animation-duration: .8s; animation-delay: .92s; }
.mp-orion__anchor--saiph      { left: 22.7%; top: 100%;  animation-duration: .8s; animation-timing-function: ease-out; animation-delay: 1.1s; }

.mp-orion__star { position: absolute; left: 0; top: 0; display: block; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; transition: box-shadow .25s ease, scale .25s ease; }
/* Zona de agarre invisible: un punto de 12 px es imposible de señalar. */
.mp-orion__star::before { content: ''; position: absolute; border-radius: 50%; }
.mp-orion__star:focus-visible { outline: 2px solid #eef3ff; outline-offset: 8px; }

.mp-orion__star--betelgeuse { width: 22px; height: 22px; background: radial-gradient(circle at 34% 30%, #fff 0%, #ffd9ae 38%, #ffa24a 100%); box-shadow: 0 0 16px rgba(255, 150, 70, .55), 0 0 40px rgba(255, 120, 40, .2); }
.mp-orion__star--betelgeuse::before { inset: -16px; }
.mp-orion__star--betelgeuse:hover { scale: 1.18; box-shadow: 0 0 24px rgba(255, 170, 90, .85), 0 0 64px rgba(255, 120, 40, .4); }

.mp-orion__star--bellatrix { width: 15px; height: 15px; background: radial-gradient(circle at 34% 30%, #fff 0%, #dce6ff 40%, #93b0ee 100%); box-shadow: 0 0 13px rgba(160, 190, 255, .5), 0 0 32px rgba(120, 160, 255, .16); }
.mp-orion__star--bellatrix::before { inset: -20px; }
.mp-orion__star--bellatrix:hover { scale: 1.22; box-shadow: 0 0 20px rgba(200, 220, 255, .85), 0 0 54px rgba(120, 160, 255, .35); }

.mp-orion__star--alnitak { width: 12px; height: 12px; background: radial-gradient(circle at 34% 30%, #fff 0%, #dce6ff 40%, #93b0ee 100%); box-shadow: 0 0 11px rgba(160, 190, 255, .5), 0 0 28px rgba(120, 160, 255, .14); }
.mp-orion__star--alnitak::before { inset: -22px; }
.mp-orion__star--alnitak:hover { scale: 1.25; box-shadow: 0 0 18px rgba(200, 220, 255, .85), 0 0 48px rgba(120, 160, 255, .35); }

.mp-orion__star--alnilam { width: 13px; height: 13px; background: radial-gradient(circle at 34% 30%, #fff 0%, #dce6ff 40%, #93b0ee 100%); box-shadow: 0 0 12px rgba(160, 190, 255, .5), 0 0 30px rgba(120, 160, 255, .14); }
.mp-orion__star--alnilam::before { inset: -21px; }
.mp-orion__star--alnilam:hover { scale: 1.25; box-shadow: 0 0 18px rgba(200, 220, 255, .85), 0 0 48px rgba(120, 160, 255, .35); }

.mp-orion__star--mintaka { width: 12px; height: 12px; background: radial-gradient(circle at 34% 30%, #fff 0%, #dce6ff 40%, #93b0ee 100%); box-shadow: 0 0 11px rgba(160, 190, 255, .5), 0 0 28px rgba(120, 160, 255, .14); }
.mp-orion__star--mintaka::before { inset: -22px; }
.mp-orion__star--mintaka:hover { scale: 1.25; box-shadow: 0 0 18px rgba(200, 220, 255, .85), 0 0 48px rgba(120, 160, 255, .35); }

.mp-orion__star--rigel { width: 20px; height: 20px; background: radial-gradient(circle at 34% 30%, #ffc2dc 0%, #e5006d 55%, #9e004c 100%); box-shadow: 0 0 18px rgba(229, 0, 109, .6), 0 0 48px rgba(229, 0, 109, .22); }
.mp-orion__star--rigel::before { inset: -17px; }
.mp-orion__star--rigel:hover { scale: 1.18; box-shadow: 0 0 28px rgba(255, 60, 145, .9), 0 0 72px rgba(229, 0, 109, .45); }

/* Saiph está reservada: se ve, pero no invita a nada. */
.mp-orion__star--saiph { width: 8px; height: 8px; background: radial-gradient(circle at 34% 30%, #7e8aa6 0%, #454f68 70%); box-shadow: 0 0 8px rgba(120, 140, 180, .22); cursor: default; }

.mp-orion__label { position: absolute; width: max-content; white-space: nowrap; pointer-events: none; }
.mp-orion__name { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #d5dbec; }
.mp-orion__desc { margin-top: 5px; font-size: 11px; font-weight: 300; color: #8a93aa; opacity: 0; transition: opacity .25s ease; }
.mp-orion__anchor:hover .mp-orion__desc,
.mp-orion__anchor:focus-within .mp-orion__desc { opacity: 1; }

.mp-orion__label--betelgeuse { right: 24px; top: 0; transform: translateY(-50%); text-align: right; }
.mp-orion__label--bellatrix { left: 22px; top: 0; transform: translateY(-50%); }
.mp-orion__label--alnitak { right: 20px; top: 20px; text-align: right; }
.mp-orion__label--alnilam { left: 50%; top: 58px; transform: translateX(-50%); text-align: center; }
.mp-orion__label--mintaka { left: 20px; top: -30px; }
.mp-orion__label--rigel { right: 24px; top: 0; transform: translateY(-50%); text-align: right; }
.mp-orion__label--rigel .mp-orion__name { font-size: 11.5px; color: #ffd3e6; }
.mp-orion__label--rigel .mp-orion__desc { color: #c58fab; }

.mp-orion__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mp-orion__asterism { stroke: #a8c0f0; stroke-width: 1; stroke-dasharray: 100; animation: mp-orion-draw 1s ease-out 1.15s both; }
@keyframes mp-orion-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* SIN `vector-effect: non-scaling-stroke`, y no es un olvido. Con él, el patrón
   de `stroke-dasharray` se mide en píxeles de pantalla en vez de a lo largo del
   trazo: la línea sale TROCEADA en guiones de 100 px en cuanto es más larga que
   eso. En el prototipo la propiedad está como atributo del <g>, y como no se
   hereda, allí tampoco llega a aplicarse a las líneas. */
.mp-orion__line { opacity: var(--mp-orion-line-base); transition: opacity .25s ease; }

/* Al señalar una estrella se encienden las líneas que salen de ella. Se hace
   con `:has()` y no con un evento de Blazor: con @onmouseover sería un viaje al
   servidor por cada movimiento del ratón, y en Blazor Server eso se nota. */
.mp-orion__map:has(.mp-orion__anchor--betelgeuse:is(:hover, :focus-within)) :is(.mp-orion__line--l1, .mp-orion__line--l5),
.mp-orion__map:has(.mp-orion__anchor--bellatrix:is(:hover, :focus-within)) :is(.mp-orion__line--l1, .mp-orion__line--l2),
.mp-orion__map:has(.mp-orion__anchor--mintaka:is(:hover, :focus-within)) :is(.mp-orion__line--l2, .mp-orion__line--l3, .mp-orion__line--l6),
.mp-orion__map:has(.mp-orion__anchor--alnilam:is(:hover, :focus-within)) :is(.mp-orion__line--l3, .mp-orion__line--l4),
.mp-orion__map:has(.mp-orion__anchor--alnitak:is(:hover, :focus-within)) :is(.mp-orion__line--l4, .mp-orion__line--l5, .mp-orion__line--l7),
.mp-orion__map:has(.mp-orion__anchor--rigel:is(:hover, :focus-within)) .mp-orion__line--l6,
.mp-orion__map:has(.mp-orion__anchor--saiph:is(:hover, :focus-within)) .mp-orion__line--l7 { opacity: var(--mp-orion-line-lit); }

@media (prefers-reduced-motion: reduce) {
    .mp-orion, .mp-orion *, .mp-orion *::before { animation: none !important; transition: none !important; }
}

.mp-fieldset {
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-6);
  background: var(--mp-bg-surface);
}
.mp-fieldset__legend {
  font-size: var(--mp-text-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0 var(--mp-space-3);
  margin-left: -4px;
}
.mp-fieldset__sub {
  margin: var(--mp-space-2) 0 var(--mp-space-6);
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-sm);
}
.mp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mp-space-5) var(--mp-space-7);
}
.mp-form-grid--full { grid-column: 1 / -1; }

.mp-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--mp-space-3);
  padding-top: var(--mp-space-5);
  border-top: 1px solid var(--mp-border-subtle);
}
.mp-form-actions__hint {
  margin-right: auto;
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-xs);
  display: flex; align-items: center; gap: var(--mp-space-2);
}

/* Pretty select with chevron */
.mp-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c919c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--mp-space-4) center;
  padding-right: 32px;
}
/* Tamaños del select (alineados con input/botón; conservan hueco del chevron) */
.mp-select--sm { height: 26px; font-size: var(--mp-text-sm); }
.mp-select--lg { height: 38px; font-size: var(--mp-text-md); }

/* Badge */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--mp-space-3);
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--mp-bg-active);
  color: var(--mp-fg-secondary);
}
.mp-badge--info { background: var(--mp-info-50); color: var(--mp-info-700); }
/* Variantes alineadas con ButtonVariant (secondary = badge base neutro) */
.mp-badge--primary { background: var(--mp-primary-50); color: var(--mp-primary-700); }
.mp-badge--danger  { background: var(--mp-danger-50);  color: var(--mp-danger-700); }
.mp-badge--ghost   { background: transparent; color: var(--mp-fg-secondary); box-shadow: inset 0 0 0 1px var(--mp-border-default); }
.mp-badge--link    { background: transparent; color: var(--mp-primary-600); padding-inline: 0; }

/* Utility */
.mp-stack { display: flex; flex-direction: column; gap: var(--mp-space-4); }
.mp-row { display: flex; flex-wrap: wrap; gap: var(--mp-space-3); align-items: center; }
.mp-mono { font-family: var(--mp-font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Theme toggle button (in topbar) */
.mp-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--mp-border-default);
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-md);
  cursor: pointer;
  font-size: var(--mp-text-sm);
  font-weight: 500;
  color: var(--mp-fg-secondary);
  transition: background var(--mp-duration-fast) var(--mp-ease), color var(--mp-duration-fast) var(--mp-ease);
}
.mp-theme-toggle:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-theme-toggle:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); border-color: var(--mp-border-focus); }
.mp-theme-toggle svg { width: 14px; height: 14px; }
.mp-theme-toggle__icon--light { display: none; }
[data-theme="dark"] .mp-theme-toggle__icon--dark { display: none; }
[data-theme="dark"] .mp-theme-toggle__icon--light { display: inline-block; }

/* =========================================================
   BLOQUE 2 — Data Grid, TreeList, Filter Builder, Pager
   ========================================================= */

/* ---------- DATA GRID ---------- */
.mp-dgrid-wrap {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  box-shadow: var(--mp-shadow-xs);
}
.mp-dgrid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-4);
  padding: var(--mp-space-4) var(--mp-space-5);
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-dgrid-toolbar__title {
  font-size: var(--mp-text-md);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.mp-dgrid-toolbar__meta {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-muted);
  margin-left: var(--mp-space-3);
}
.mp-dgrid-toolbar__actions { display: flex; gap: var(--mp-space-2); align-items: center; }

.mp-dgrid-scroll { overflow-x: auto; }

.mp-dgrid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mp-text-base);
  color: var(--mp-fg-primary);
}
.mp-dgrid th, .mp-dgrid td {
  padding: 0 var(--mp-space-4);
  height: 36px;
  text-align: left;
  border-bottom: 1px solid var(--mp-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}
.mp-dgrid thead th {
  background: var(--mp-bg-sunken);
  font-weight: 600;
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--mp-border-default);
  position: sticky;
  top: 0;
  z-index: 1;
}
.mp-dgrid__th { user-select: none; }
.mp-dgrid__th-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  height: 36px;
  cursor: pointer;
}
.mp-dgrid__th-inner:hover { color: var(--mp-fg-primary); }
/* La cabecera ordenable es un <button> para que se pueda ordenar con el
   teclado. Se le quita la pinta de boton, no el comportamiento. */
button.mp-dgrid__th-inner {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button.mp-dgrid__th-inner:focus-visible {
  outline: 2px solid var(--mp-border-focus);
  outline-offset: 2px;
  border-radius: var(--mp-radius-sm);
}
.mp-dgrid__sort {
  display: inline-flex;
  flex-direction: column;
  line-height: 0;
  color: var(--mp-fg-disabled);
}
.mp-dgrid__sort svg { width: 9px; height: 9px; display: block; }
.mp-dgrid__th.is-sort-asc .mp-dgrid__sort-up { color: var(--mp-primary-600); }
.mp-dgrid__th.is-sort-desc .mp-dgrid__sort-down { color: var(--mp-primary-600); }
[data-theme="dark"] .mp-dgrid__th.is-sort-asc .mp-dgrid__sort-up,
[data-theme="dark"] .mp-dgrid__th.is-sort-desc .mp-dgrid__sort-down { color: var(--mp-primary-500); }
.mp-dgrid__th-menu {
  margin-left: auto;
  width: 22px; height: 22px;
  border: 0;
  background: transparent;
  border-radius: var(--mp-radius-sm);
  color: var(--mp-fg-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--mp-duration-fast) var(--mp-ease), background var(--mp-duration-fast) var(--mp-ease);
}
.mp-dgrid__th:hover .mp-dgrid__th-menu,
.mp-dgrid__th-menu:focus-visible,
.mp-dgrid__th.is-filtered .mp-dgrid__th-menu { opacity: 1; }
.mp-dgrid__th-menu:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-dgrid__th-menu svg { width: 12px; height: 12px; }
.mp-dgrid__th.is-filtered .mp-dgrid__th-menu { color: var(--mp-primary-600); }

/* Filter row */
.mp-dgrid__filter-row th {
  height: 34px;
  padding: 0 var(--mp-space-3);
  background: var(--mp-bg-surface);
  border-bottom: 1px solid var(--mp-border-subtle);
  position: sticky;
  top: 36px;
  z-index: 1;
}
.mp-dgrid__filter-input,
.mp-dgrid__filter-select {
  width: 100%;
  height: 26px;
  background: var(--mp-bg-input);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-sm);
  padding: 0 var(--mp-space-3);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
  transition: border-color var(--mp-duration-fast) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-dgrid__filter-input:focus,
.mp-dgrid__filter-select:focus {
  outline: none;
  border-color: var(--mp-border-focus);
  box-shadow: var(--mp-shadow-focus);
}
.mp-dgrid__filter-input::placeholder { color: var(--mp-fg-muted); }
.mp-dgrid__filter-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238c919c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}

/* Body rows */
.mp-dgrid__row td { background: var(--mp-bg-surface); }
/* Fila que abre ficha: se ve que es pulsable y se puede enfocar con el
   tabulador, porque tambien se abre con Intro. */
.mp-dgrid__row.is-clickable { cursor: pointer; }
.mp-dgrid__row.is-clickable:focus-visible {
  outline: 2px solid var(--mp-border-focus);
  outline-offset: -2px;
}
.mp-dgrid__row:nth-child(even) td { background: var(--mp-bg-sunken); }
.mp-dgrid__row:hover td { background: var(--mp-bg-hover); }
.mp-dgrid__row.is-selected td { background: var(--mp-primary-50); }
[data-theme="dark"] .mp-dgrid__row.is-selected td { background: var(--mp-primary-100); }
.mp-dgrid__row.is-selected:hover td { background: var(--mp-primary-100); }
[data-theme="dark"] .mp-dgrid__row.is-selected:hover td { background: var(--mp-primary-200); }
.mp-dgrid__row.is-editing td {
  background: var(--mp-bg-surface);
  box-shadow: inset 2px 0 0 var(--mp-primary-500);
}

.mp-dgrid__cell--num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-feature-settings: "tnum";
}
.mp-dgrid__cell--mono { font-family: var(--mp-font-mono); font-size: var(--mp-text-sm); }
.mp-dgrid__empty { text-align: center; color: var(--mp-fg-muted); padding: var(--mp-space-6); white-space: normal; }
.mp-dgrid__cell--select, .mp-dgrid__cell--actions {
  width: 36px;
  padding: 0;
  text-align: center;
}
.mp-dgrid__cell--select { padding-left: var(--mp-space-3); }
.mp-dgrid__cell--actions { padding-right: var(--mp-space-2); white-space: nowrap; width: 92px; }
.mp-dgrid__row-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--mp-duration-fast) var(--mp-ease); }
.mp-dgrid__row:hover .mp-dgrid__row-actions,
.mp-dgrid__row.is-selected .mp-dgrid__row-actions,
.mp-dgrid__row.is-editing .mp-dgrid__row-actions { opacity: 1; }
.mp-dgrid__row-action {
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  color: var(--mp-fg-muted);
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.mp-dgrid__row-action:hover { background: var(--mp-bg-active); color: var(--mp-fg-primary); }
.mp-dgrid__row-action--danger:hover { color: var(--mp-danger-500); }
.mp-dgrid__row-action svg { width: 14px; height: 14px; }

/* Inline edit input */
.mp-dgrid__inline-input {
  width: 100%;
  height: 26px;
  background: var(--mp-bg-input);
  border: 1px solid var(--mp-border-focus);
  border-radius: var(--mp-radius-sm);
  padding: 0 var(--mp-space-2);
  font-size: var(--mp-text-base);
  color: var(--mp-fg-primary);
  box-shadow: var(--mp-shadow-focus);
}
.mp-dgrid__inline-input:focus { outline: none; }
.mp-dgrid__inline-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status pill */
.mp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--mp-bg-active);
  color: var(--mp-fg-secondary);
}
.mp-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.mp-pill--success { background: var(--mp-success-50); color: var(--mp-success-700); }
.mp-pill--warning { background: var(--mp-warning-50); color: var(--mp-warning-700); }
.mp-pill--danger  { background: var(--mp-danger-50);  color: var(--mp-danger-700); }
.mp-pill--info    { background: var(--mp-info-50);    color: var(--mp-info-700); }
.mp-pill--neutral { background: var(--mp-bg-active);  color: var(--mp-fg-secondary); }

/* Footer / totals */
.mp-dgrid tfoot td {
  background: var(--mp-bg-sunken);
  font-weight: 600;
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
  border-top: 1px solid var(--mp-border-default);
  border-bottom: 0;
  height: 36px;
}
.mp-dgrid tfoot .mp-dgrid__totals-label {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  font-weight: 600;
}

/* Column-filter popover (header menu) */
.mp-col-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: var(--mp-space-3);
  width: 220px;
  z-index: 5;
  display: none;
  font-weight: 400;
}
.mp-dgrid__th { position: relative; }
.mp-dgrid__th.is-popover-open .mp-col-popover { display: block; }
.mp-col-popover__title {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  font-weight: 600;
  margin-bottom: var(--mp-space-2);
}
.mp-col-popover__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--mp-space-3); max-height: 160px; overflow-y: auto; }
.mp-col-popover__sep { height: 1px; background: var(--mp-border-subtle); margin: var(--mp-space-2) -8px; }
.mp-col-popover__row {
  display: flex;
  gap: var(--mp-space-2);
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
  text-align: left;
}
.mp-col-popover__row:hover { background: var(--mp-bg-hover); }
.mp-col-popover__row svg { width: 12px; height: 12px; color: var(--mp-fg-muted); }

/* ---------- TREELIST ---------- */
.mp-tree__cell-tree {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  --_indent: 0px;
  padding-left: var(--_indent);
}
.mp-tree__toggle {
  width: 18px; height: 18px;
  border: 0;
  background: transparent;
  color: var(--mp-fg-muted);
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--mp-duration-fast) var(--mp-ease), background var(--mp-duration-fast) var(--mp-ease);
}
.mp-tree__toggle:hover { background: var(--mp-bg-active); color: var(--mp-fg-primary); }
.mp-tree__toggle svg { width: 10px; height: 10px; transition: transform var(--mp-duration-fast) var(--mp-ease); }
.mp-tree__row.is-expanded .mp-tree__toggle svg { transform: rotate(90deg); }
.mp-tree__toggle--leaf { visibility: hidden; }
.mp-tree__icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--mp-fg-muted);
}
.mp-tree__row--level-0 .mp-tree__icon { color: var(--mp-primary-600); }
[data-theme="dark"] .mp-tree__row--level-0 .mp-tree__icon { color: var(--mp-primary-500); }
.mp-tree__row--level-1 .mp-tree__icon { color: var(--mp-accent-500); }
.mp-tree__name { font-weight: 500; }
.mp-tree__row--level-0 .mp-tree__name { font-weight: 600; }
.mp-tree__row.is-collapsed-child { display: none; }

/* ---------- FILTER BUILDER ---------- */
.mp-fb {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-5);
}
.mp-fb__group {
  border: 1px dashed var(--mp-border-default);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-4);
  background: var(--mp-bg-sunken);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
  position: relative;
}
.mp-fb__group + .mp-fb__group { margin-top: var(--mp-space-3); }
.mp-fb__group .mp-fb__group {
  background: var(--mp-bg-surface);
  border-style: dashed;
}
.mp-fb__group-head {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
}
.mp-fb__op-toggle {
  display: inline-flex;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-default);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
}
.mp-fb__op-btn {
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font-size: var(--mp-text-xs);
  font-weight: 600;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  cursor: pointer;
  font-family: var(--mp-font-mono);
}
.mp-fb__op-btn + .mp-fb__op-btn { border-left: 1px solid var(--mp-border-subtle); }
.mp-fb__op-btn.is-active {
  background: var(--mp-primary-600);
  color: var(--mp-fg-on-primary);
}
[data-theme="dark"] .mp-fb__op-btn.is-active { background: var(--mp-primary-500); color: #0d1015; }
.mp-fb__group-spacer { flex: 1; }
.mp-fb__group-actions { display: inline-flex; gap: var(--mp-space-2); }

.mp-fb__cond {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(140px, 1fr) minmax(180px, 1.4fr) auto;
  gap: var(--mp-space-3);
  align-items: center;
}
.mp-fb__field, .mp-fb__operator, .mp-fb__value {
  height: 30px;
  background: var(--mp-bg-input);
  border: 1px solid var(--mp-border-default);
  border-radius: var(--mp-radius-sm);
  padding: 0 var(--mp-space-3);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
}
.mp-fb__field:focus, .mp-fb__operator:focus, .mp-fb__value:focus {
  outline: none;
  border-color: var(--mp-border-focus);
  box-shadow: var(--mp-shadow-focus);
}
.mp-fb__field, .mp-fb__operator {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238c919c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.mp-fb__cond-remove {
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  border-radius: var(--mp-radius-sm);
  color: var(--mp-fg-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.mp-fb__cond-remove:hover { background: var(--mp-danger-50); color: var(--mp-danger-500); }
.mp-fb__cond-remove svg { width: 13px; height: 13px; }

.mp-fb__add { display: flex; gap: var(--mp-space-2); padding-top: var(--mp-space-2); border-top: 1px dashed var(--mp-border-subtle); margin-top: var(--mp-space-1); }

/* Output preview */
.mp-fb__output {
  margin-top: var(--mp-space-4);
  padding: var(--mp-space-4);
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
  line-height: 1.6;
}
.mp-fb__output b { color: var(--mp-primary-700); font-weight: 600; }
[data-theme="dark"] .mp-fb__output b { color: var(--mp-primary-600); }

/* ---------- PAGER ---------- */
.mp-pager {
  display: flex;
  align-items: center;
  gap: var(--mp-space-5);
  padding: var(--mp-space-3) var(--mp-space-5);
  background: var(--mp-bg-surface);
  border-top: 1px solid var(--mp-border-subtle);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
}
.mp-pager--standalone {
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
}
.mp-pager__info {
  font-variant-numeric: tabular-nums;
  color: var(--mp-fg-muted);
}
.mp-pager__info b { color: var(--mp-fg-primary); font-weight: 600; }
.mp-pager__spacer { flex: 1; }
.mp-pager__pages { display: inline-flex; gap: 2px; }
.mp-pager__btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--mp-border-default);
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-sm);
  font-size: var(--mp-text-sm);
  font-weight: 500;
  color: var(--mp-fg-secondary);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  transition: background var(--mp-duration-fast) var(--mp-ease), color var(--mp-duration-fast) var(--mp-ease), border-color var(--mp-duration-fast) var(--mp-ease);
}
.mp-pager__btn:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-pager__btn:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); border-color: var(--mp-border-focus); }
.mp-pager__btn.is-active {
  background: var(--mp-primary-600);
  border-color: var(--mp-primary-600);
  color: var(--mp-fg-on-primary);
}
[data-theme="dark"] .mp-pager__btn.is-active {
  background: var(--mp-primary-500);
  border-color: var(--mp-primary-500);
  color: #0d1015;
}
.mp-pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-pager__btn svg { width: 12px; height: 12px; }
.mp-pager__ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  color: var(--mp-fg-muted);
  font-weight: 600;
}
.mp-pager__size {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  color: var(--mp-fg-muted);
}
.mp-pager__size-select {
  height: 28px;
  background: var(--mp-bg-input);
  border: 1px solid var(--mp-border-default);
  border-radius: var(--mp-radius-sm);
  padding: 0 22px 0 8px;
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-primary);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238c919c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.mp-pager__size-select:focus { outline: none; border-color: var(--mp-border-focus); box-shadow: var(--mp-shadow-focus); }

/* =========================================================
   BLOQUE 3 — Layout/Nav, Dialogs & Windows, Feedback
   ========================================================= */

/* ---------- TABS ---------- */
.mp-tabs__list {
  display: inline-flex;
  gap: 2px;
  border-bottom: 1px solid var(--mp-border-subtle);
  width: 100%;
}
.mp-tabs__tab {
  position: relative;
  border: 0;
  background: transparent;
  padding: 8px var(--mp-space-4);
  font-size: var(--mp-text-base);
  font-weight: 500;
  color: var(--mp-fg-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  border-radius: var(--mp-radius-sm) var(--mp-radius-sm) 0 0;
  transition: color var(--mp-duration-fast) var(--mp-ease), background var(--mp-duration-fast) var(--mp-ease);
}
.mp-tabs__tab:hover:not(:disabled) { color: var(--mp-fg-primary); background: var(--mp-bg-hover); }
.mp-tabs__tab:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
.mp-tabs__tab.is-active { color: var(--mp-fg-primary); font-weight: 600; }
.mp-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--mp-primary-600);
  border-radius: 2px;
}
[data-theme="dark"] .mp-tabs__tab.is-active::after { background: var(--mp-primary-500); }
.mp-tabs__tab:disabled { color: var(--mp-fg-disabled); cursor: not-allowed; }
.mp-tabs__tab svg { width: 14px; height: 14px; }
.mp-tabs__badge { font-size: 10px; font-weight: 600; background: var(--mp-bg-active); color: var(--mp-fg-secondary); padding: 1px 6px; border-radius: var(--mp-radius-pill); }
.mp-tabs__panel { padding: var(--mp-space-5) 0 0; color: var(--mp-fg-secondary); }
.mp-tabs--pills .mp-tabs__list {
  border-bottom: 0;
  background: var(--mp-bg-sunken);
  padding: 4px;
  border-radius: var(--mp-radius-md);
  gap: 2px;
  width: auto;
}
.mp-tabs--pills .mp-tabs__tab {
  border-radius: var(--mp-radius-sm);
  padding: 4px 12px;
  height: 28px;
  font-size: var(--mp-text-sm);
}
.mp-tabs--pills .mp-tabs__tab.is-active {
  background: var(--mp-bg-surface);
  color: var(--mp-fg-primary);
  box-shadow: var(--mp-shadow-xs), 0 0 0 1px var(--mp-border-subtle);
}
.mp-tabs--pills .mp-tabs__tab.is-active::after { display: none; }
.mp-tabs--pills .mp-tabs__tab:hover:not(.is-active):not(:disabled) { background: transparent; color: var(--mp-fg-primary); }

/* ---------- ACCORDION ---------- */
.mp-accordion {
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  background: var(--mp-bg-surface);
}
.mp-accordion__item + .mp-accordion__item { border-top: 1px solid var(--mp-border-subtle); }
.mp-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-4) var(--mp-space-5);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--mp-text-base);
  font-weight: 600;
  color: var(--mp-fg-primary);
  cursor: pointer;
  transition: background var(--mp-duration-fast) var(--mp-ease);
}
.mp-accordion__trigger:hover { background: var(--mp-bg-hover); }
.mp-accordion__trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mp-border-focus); }
.mp-accordion__chevron { width: 14px; height: 14px; margin-left: auto; transition: transform var(--mp-duration-base) var(--mp-ease); color: var(--mp-fg-muted); flex-shrink: 0; }
.mp-accordion__item.is-open .mp-accordion__chevron { transform: rotate(180deg); }
.mp-accordion__icon { width: 16px; height: 16px; color: var(--mp-fg-muted); flex-shrink: 0; }
.mp-accordion__panel {
  display: none;
  padding: 0 var(--mp-space-5) var(--mp-space-5) calc(var(--mp-space-5) + 16px + var(--mp-space-3));
  color: var(--mp-fg-secondary);
  font-size: var(--mp-text-base);
  line-height: var(--mp-leading-normal);
}
.mp-accordion__item.is-open .mp-accordion__panel { display: block; }
.mp-accordion__sub { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); font-weight: 400; margin-left: var(--mp-space-3); }

/* ---------- TOOLBAR ---------- */
.mp-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  padding: var(--mp-space-3) var(--mp-space-4);
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  flex-wrap: wrap;
}
.mp-toolbar__group { display: inline-flex; align-items: center; gap: var(--mp-space-1); }
.mp-toolbar__sep { width: 1px; height: 22px; background: var(--mp-border-subtle); margin: 0 var(--mp-space-2); }
.mp-toolbar__spacer { flex: 1; }
.mp-toolbar__search { width: 220px; position: relative; }
.mp-toolbar__search .mp-input { height: 28px; padding-left: 30px; font-size: var(--mp-text-sm); }
.mp-toolbar__search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--mp-fg-muted); pointer-events: none; }

/* ---------- MENU (menubar + flyouts) ---------- */
.mp-menubar {
  display: flex;
  align-items: stretch;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  padding: 4px;
  gap: 2px;
}
.mp-menubar__item {
  position: relative;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--mp-radius-sm);
  font-size: var(--mp-text-sm);
  font-weight: 500;
  color: var(--mp-fg-primary);
  cursor: pointer;
}
.mp-menubar__item:hover { background: var(--mp-bg-hover); }
.mp-menubar__item.is-open { background: var(--mp-bg-active); }
.mp-menubar__item.is-open > .mp-menu { display: block; }

.mp-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: 4px;
  z-index: 20;
  display: none;
  font-weight: 400;
  text-align: left;
}
.mp-menu--static { position: relative; display: block; top: auto; left: auto; box-shadow: var(--mp-shadow-md); }
.mp-menu__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  padding: 6px 10px 2px;
}
.mp-menu__item {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--mp-fg-primary);
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  font-size: var(--mp-text-sm);
  text-align: left;
  white-space: nowrap;
  position: relative;
}
.mp-menu__item:hover { background: var(--mp-bg-hover); }
.mp-menu__item.is-highlighted { background: var(--mp-primary-50); color: var(--mp-primary-700); }
[data-theme="dark"] .mp-menu__item.is-highlighted { background: var(--mp-primary-100); color: var(--mp-primary-700); }
.mp-menu__item.is-disabled { color: var(--mp-fg-disabled); cursor: not-allowed; }
.mp-menu__item--danger { color: var(--mp-danger-500); }
.mp-menu__item-icon { width: 14px; height: 14px; color: var(--mp-fg-muted); flex-shrink: 0; }
.mp-menu__item.is-highlighted .mp-menu__item-icon { color: var(--mp-primary-700); }
.mp-menu__item--danger .mp-menu__item-icon { color: var(--mp-danger-500); }
.mp-menu__item-shortcut { margin-left: auto; font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-menu__item-arrow { margin-left: auto; width: 11px; height: 11px; color: var(--mp-fg-muted); }
.mp-menu__sep { height: 1px; background: var(--mp-border-subtle); margin: 4px 0; }
.mp-menu__check { width: 12px; height: 12px; color: var(--mp-primary-600); flex-shrink: 0; }
[data-theme="dark"] .mp-menu__check { color: var(--mp-primary-500); }
.mp-menu__submenu {
  position: absolute;
  top: -5px;
  left: calc(100% + 4px);
  min-width: 220px;
  display: block;
}

/* ---------- TREEVIEW ---------- */
.mp-treeview {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-3);
  font-size: var(--mp-text-sm);
}
.mp-treeview__row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  user-select: none;
  color: var(--mp-fg-primary);
}
.mp-treeview__row:hover { background: var(--mp-bg-hover); }
.mp-treeview__row.is-selected {
  background: var(--mp-primary-50);
  color: var(--mp-primary-700);
  font-weight: 600;
}
[data-theme="dark"] .mp-treeview__row.is-selected { background: var(--mp-primary-100); color: var(--mp-primary-700); }
.mp-treeview__row.is-focused { box-shadow: inset 0 0 0 1px var(--mp-border-focus); }
.mp-treeview__toggle {
  width: 16px; height: 16px;
  border: 0;
  background: transparent;
  color: var(--mp-fg-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 3px;
}
.mp-treeview__toggle:hover { background: var(--mp-bg-active); color: var(--mp-fg-primary); }
.mp-treeview__toggle svg { width: 9px; height: 9px; transition: transform var(--mp-duration-fast) var(--mp-ease); }
.mp-treeview__node.is-expanded > .mp-treeview__row > .mp-treeview__toggle svg { transform: rotate(90deg); }
.mp-treeview__toggle--leaf { visibility: hidden; }
.mp-treeview__icon { width: 14px; height: 14px; color: var(--mp-fg-muted); flex-shrink: 0; }
.mp-treeview__row.is-selected .mp-treeview__icon { color: var(--mp-primary-700); }
.mp-treeview__name { flex: 1; }
.mp-treeview__count { font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-treeview__row.is-selected .mp-treeview__count { color: var(--mp-primary-700); opacity: 0.8; }
.mp-treeview__children { margin-left: 16px; padding-left: 6px; border-left: 1px dashed var(--mp-border-subtle); display: none; flex-direction: column; }
.mp-treeview__node.is-expanded > .mp-treeview__children { display: flex; }

/* ---------- DRAWER ---------- */
.mp-drawer-host {
  position: relative;
  height: 420px;
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  display: flex;
}
.mp-drawer-host__app {
  flex: 1;
  position: relative;
  background-image:
    linear-gradient(var(--mp-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--mp-border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mp-drawer-host__app::before {
  content: "Contenido principal";
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-sm);
  letter-spacing: var(--mp-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
}
.mp-drawer-host__overlay { position: absolute; inset: 0; background: var(--mp-bg-overlay); }
.mp-drawer {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 380px;
  background: var(--mp-bg-surface);
  border-left: 1px solid var(--mp-border-subtle);
  box-shadow: var(--mp-shadow-lg);
  display: flex;
  flex-direction: column;
}
.mp-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mp-space-3);
  padding: var(--mp-space-5);
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-drawer__title { font-size: var(--mp-text-md); font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.mp-drawer__sub { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); margin-top: 2px; }
.mp-drawer__body { padding: var(--mp-space-5); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--mp-space-4); }
.mp-drawer__foot { display: flex; justify-content: flex-end; gap: var(--mp-space-2); padding: var(--mp-space-4) var(--mp-space-5); border-top: 1px solid var(--mp-border-subtle); background: var(--mp-bg-sunken); }
/* Overlay real (posición fija) + lado del panel */
/* El marco del cajón NO pinta velo y deja pasar el ratón: con el cajón abierto
   la pantalla de detrás se sigue viendo y usando (2026-08-30, petición de Joan).
   Sigue siendo un elemento a pantalla completa porque es el que recibe el foco
   y escucha el Escape; lo que no hace es tragarse los clics. Ver `Drawer.razor`. */
.mp-drawer-overlay { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.mp-drawer-overlay:focus { outline: none; }
.mp-drawer-overlay .mp-drawer { position: fixed; top: 0; height: 100%; z-index: 1001; pointer-events: auto; }
.mp-drawer--right { right: 0; left: auto; }
.mp-drawer--left { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--mp-border-subtle); }

/* ---------- SPLITTER ---------- */
.mp-splitter { display: flex; height: 220px; background: var(--mp-bg-surface); border: 1px solid var(--mp-border-subtle); border-radius: var(--mp-radius-md); overflow: hidden; }
.mp-splitter--vertical { flex-direction: column; height: 280px; }
.mp-splitter__pane { padding: var(--mp-space-4); overflow: auto; font-size: var(--mp-text-sm); color: var(--mp-fg-secondary); }
.mp-splitter__pane--sunken { background: var(--mp-bg-sunken); }
.mp-splitter__pane-title { font-size: var(--mp-text-xs); text-transform: uppercase; letter-spacing: var(--mp-tracking-wide); font-weight: 600; color: var(--mp-fg-muted); margin: 0 0 var(--mp-space-2); }
.mp-splitter__handle {
  background: var(--mp-bg-sunken);
  border-left: 1px solid var(--mp-border-subtle);
  border-right: 1px solid var(--mp-border-subtle);
  width: 8px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mp-splitter__handle:hover { background: var(--mp-primary-100); }
[data-theme="dark"] .mp-splitter__handle:hover { background: var(--mp-primary-100); }
.mp-splitter--vertical .mp-splitter__handle {
  width: auto; height: 8px; cursor: row-resize;
  border-left: 0; border-right: 0;
  border-top: 1px solid var(--mp-border-subtle);
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-splitter__grip { display: flex; gap: 2px; }
.mp-splitter__grip span { width: 2px; height: 2px; border-radius: 50%; background: var(--mp-fg-muted); }
.mp-splitter:not(.mp-splitter--vertical) .mp-splitter__grip { flex-direction: column; }

/* ---------- DIALOG / WINDOW ---------- */
.mp-dialog-host {
  position: relative;
  min-height: 380px;
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--mp-space-7);
}
.mp-dialog-host__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--mp-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--mp-border-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}
.mp-dialog-host__overlay { position: absolute; inset: 0; background: var(--mp-bg-overlay); }
.mp-dialog {
  position: relative;
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
  width: 480px;
  max-width: 100%;
  /* El overlay es `position: fixed`, así que un diálogo más alto que la ventana
     se sale por abajo Y NO SE PUEDE DESPLAZAR: el pie —donde están Cancelar y
     Aceptar— queda fuera de alcance. Pasó de verdad el 2026-08-30 con la vista
     previa de la importación de tarifas. El tope va contra el área del overlay,
     que ya reserva su propio padding. */
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
/* Para el contenido que de verdad es ancho: una tabla de vista previa a 480px
   deja lo importante fuera del borde derecho. */
.mp-dialog--lg { width: 880px; }
.mp-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--mp-space-5); border-bottom: 1px solid var(--mp-border-subtle); }
.mp-dialog__title { font-size: var(--mp-text-md); font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.mp-dialog__close {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  color: var(--mp-fg-muted);
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
  display: grid; place-items: center;
}
.mp-dialog__close:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-dialog__close svg { width: 14px; height: 14px; }
/* El que desplaza es el CUERPO, no el diálogo entero: así la cabecera y el pie
   se quedan quietos y el botón de aceptar siempre está donde se dejó.
   `min-height: 0` es lo que permite que un hijo de flex se encoja por debajo de
   su contenido; sin él, `overflow` no llega a activarse nunca. */
.mp-dialog__body { padding: var(--mp-space-5); display: flex; flex-direction: column; gap: var(--mp-space-4); overflow-y: auto; min-height: 0; }
.mp-dialog__foot {
  display: flex; justify-content: flex-end; gap: var(--mp-space-2);
  padding: var(--mp-space-4) var(--mp-space-5);
  border-top: 1px solid var(--mp-border-subtle);
  background: var(--mp-bg-sunken);
  border-radius: 0 0 var(--mp-radius-lg) var(--mp-radius-lg);
}
/* Overlay real (posición fija) que centra el diálogo sobre toda la pantalla */
.mp-dialog-overlay {
  position: fixed;
  inset: 0;
  background: var(--mp-bg-overlay);
  display: grid;
  place-items: center;
  padding: var(--mp-space-6);
  z-index: 1000;
}
.mp-dialog-overlay:focus { outline: none; }
/* Un MsgBox va directo sobre el overlay (Modal en modo Bare): acótalo */
.mp-dialog-overlay > .mp-msgbox { width: 440px; max-width: 100%; }

/* ---------- MESSAGE BOX ---------- */
.mp-msgbox {
  display: flex;
  gap: var(--mp-space-4);
  padding: var(--mp-space-5);
  background: var(--mp-bg-surface);
  border-radius: var(--mp-radius-md);
  border: 1px solid var(--mp-border-subtle);
  box-shadow: var(--mp-shadow-sm);
}
.mp-msgbox__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.mp-msgbox__icon svg { width: 18px; height: 18px; }
.mp-msgbox__body { flex: 1; min-width: 0; }
.mp-msgbox__title { font-size: var(--mp-text-md); font-weight: 600; margin: 0 0 var(--mp-space-2); letter-spacing: -0.005em; }
.mp-msgbox__text { font-size: var(--mp-text-base); color: var(--mp-fg-secondary); margin: 0 0 var(--mp-space-4); line-height: var(--mp-leading-normal); }
.mp-msgbox__actions { display: flex; gap: var(--mp-space-2); justify-content: flex-end; flex-wrap: wrap; }
.mp-msgbox--info .mp-msgbox__icon    { background: var(--mp-info-50);    color: var(--mp-info-700); }
.mp-msgbox--warning .mp-msgbox__icon { background: var(--mp-warning-50); color: var(--mp-warning-700); }
.mp-msgbox--error .mp-msgbox__icon   { background: var(--mp-danger-50);  color: var(--mp-danger-700); }
.mp-msgbox--confirm .mp-msgbox__icon { background: var(--mp-primary-50); color: var(--mp-primary-700); }
[data-theme="dark"] .mp-msgbox--info .mp-msgbox__icon    { background: var(--mp-info-50);    color: var(--mp-info-500); }
[data-theme="dark"] .mp-msgbox--warning .mp-msgbox__icon { background: var(--mp-warning-50); color: var(--mp-warning-500); }
[data-theme="dark"] .mp-msgbox--error .mp-msgbox__icon   { background: var(--mp-danger-50);  color: var(--mp-danger-500); }
[data-theme="dark"] .mp-msgbox--confirm .mp-msgbox__icon { background: var(--mp-primary-50); color: var(--mp-primary-500); }

/* ---------- TOOLTIP ---------- */
.mp-tooltip { position: relative; display: inline-flex; }
.mp-tooltip__bubble {
  position: absolute;
  z-index: 1100;
  background: var(--mp-fg-primary);
  color: var(--mp-bg-surface);
  padding: 4px 8px;
  border-radius: var(--mp-radius-sm);
  font-size: var(--mp-text-xs);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mp-duration-fast) var(--mp-ease);
  box-shadow: var(--mp-shadow-sm);
}
.mp-tooltip:hover .mp-tooltip__bubble,
.mp-tooltip:focus-within .mp-tooltip__bubble { opacity: 1; }
.mp-tooltip__bubble--top    { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.mp-tooltip__bubble--bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }
.mp-tooltip__bubble--left   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; }
.mp-tooltip__bubble--right  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; }

/* ---------- FLYOUT ---------- */
.mp-flyout-host {
  position: relative;
  display: inline-block;
  padding: 60px 0 0;
}
.mp-flyout-host__anchor {
  position: absolute;
  top: 8px; left: 24px;
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-muted);
  font-family: var(--mp-font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mp-flyout-host__anchor::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mp-primary-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-primary-500) 25%, transparent);
}
.mp-flyout {
  position: relative;
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  padding: var(--mp-space-4);
  width: 280px;
  font-size: var(--mp-text-sm);
}
.mp-flyout::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px; height: 12px;
  background: var(--mp-bg-raised);
  border-top: 1px solid var(--mp-border-subtle);
  border-left: 1px solid var(--mp-border-subtle);
  transform: rotate(45deg);
}
.mp-flyout__title { font-size: var(--mp-text-sm); font-weight: 600; margin: 0 0 var(--mp-space-2); display: flex; align-items: center; gap: var(--mp-space-2); color: var(--mp-fg-primary); }
.mp-flyout__title svg { width: 14px; height: 14px; color: var(--mp-info-500); }
.mp-flyout__text { color: var(--mp-fg-secondary); line-height: var(--mp-leading-normal); margin: 0 0 var(--mp-space-3); }
.mp-flyout__meta { display: flex; justify-content: space-between; font-family: var(--mp-font-mono); font-size: var(--mp-text-xs); color: var(--mp-fg-muted); border-top: 1px solid var(--mp-border-subtle); padding-top: var(--mp-space-2); }

/* ---------- DROPDOWN container (generic) ---------- */
.mp-dd-container {
  position: relative;
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  width: 320px;
  overflow: hidden;
}
.mp-dd-container__head { padding: var(--mp-space-3) var(--mp-space-4); border-bottom: 1px solid var(--mp-border-subtle); background: var(--mp-bg-sunken); display: flex; justify-content: space-between; align-items: center; }
.mp-dd-container__title { font-size: var(--mp-text-xs); text-transform: uppercase; letter-spacing: var(--mp-tracking-wide); font-weight: 600; color: var(--mp-fg-muted); }
.mp-dd-container__list { display: flex; flex-direction: column; padding: 4px; max-height: 280px; overflow-y: auto; }
.mp-dd-container__item { display: flex; gap: var(--mp-space-3); align-items: center; padding: 6px 8px; border-radius: var(--mp-radius-sm); cursor: pointer; font-size: var(--mp-text-sm); }
.mp-dd-container__item:hover { background: var(--mp-bg-hover); }
.mp-dd-container__item.is-selected { background: var(--mp-primary-50); color: var(--mp-primary-700); }
[data-theme="dark"] .mp-dd-container__item.is-selected { background: var(--mp-primary-100); color: var(--mp-primary-700); }
.mp-dd-container__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--mp-bg-active); color: var(--mp-fg-secondary); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.mp-dd-container__main { flex: 1; min-width: 0; }
.mp-dd-container__name { font-weight: 500; color: var(--mp-fg-primary); }
.mp-dd-container__sub { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-dd-container__item.is-selected .mp-dd-container__name,
.mp-dd-container__item.is-selected .mp-dd-container__sub { color: var(--mp-primary-700); }
.mp-dd-container__foot { padding: var(--mp-space-2) var(--mp-space-3); border-top: 1px solid var(--mp-border-subtle); background: var(--mp-bg-sunken); display: flex; justify-content: space-between; align-items: center; font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }

/* ---------- TOAST ---------- */
.mp-toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
  padding: var(--mp-space-5);
  background: var(--mp-bg-sunken);
  border: 1px dashed var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  align-items: flex-end;
  position: relative;
  min-height: 320px;
}
.mp-toast-stack::before {
  content: "Esquina inferior derecha · uso real";
  position: absolute;
  top: var(--mp-space-3);
  left: var(--mp-space-4);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
}
.mp-toast {
  display: flex;
  gap: var(--mp-space-3);
  align-items: flex-start;
  padding: var(--mp-space-3) var(--mp-space-4);
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-left: 3px solid var(--mp-fg-muted);
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-md);
  width: 340px;
  font-size: var(--mp-text-sm);
}
.mp-toast__icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.mp-toast__body { flex: 1; min-width: 0; }
.mp-toast__title { font-weight: 600; color: var(--mp-fg-primary); margin-bottom: 2px; }
.mp-toast__text { color: var(--mp-fg-secondary); line-height: var(--mp-leading-normal); }
.mp-toast__close { width: 20px; height: 20px; border: 0; background: transparent; color: var(--mp-fg-muted); cursor: pointer; border-radius: var(--mp-radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.mp-toast__close:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-toast__close svg { width: 11px; height: 11px; }
.mp-toast--success { border-left-color: var(--mp-success-500); }
.mp-toast--success .mp-toast__icon { color: var(--mp-success-500); }
.mp-toast--warning { border-left-color: var(--mp-warning-500); }
.mp-toast--warning .mp-toast__icon { color: var(--mp-warning-500); }
.mp-toast--error { border-left-color: var(--mp-danger-500); }
.mp-toast--error .mp-toast__icon { color: var(--mp-danger-500); }
.mp-toast--info { border-left-color: var(--mp-info-500); }
.mp-toast--info .mp-toast__icon { color: var(--mp-info-500); }
/* Contenedor real: fijo en la esquina inferior derecha, apila los toasts */
.mp-toast-container {
  position: fixed;
  bottom: var(--mp-space-5);
  right: var(--mp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
  align-items: flex-end;
  z-index: 1000;
  pointer-events: none;
}
.mp-toast-container .mp-toast { pointer-events: auto; }

/* Alert (aviso inline, no flotante) */
.mp-alert {
  display: flex;
  gap: var(--mp-space-3);
  align-items: flex-start;
  padding: var(--mp-space-3) var(--mp-space-4);
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-left: 3px solid var(--mp-fg-muted);
  border-radius: var(--mp-radius-md);
  font-size: var(--mp-text-sm);
}
.mp-alert__icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.mp-alert__body { flex: 1; min-width: 0; }
.mp-alert__title { font-weight: 600; color: var(--mp-fg-primary); margin-bottom: 2px; }
.mp-alert__text { color: var(--mp-fg-secondary); line-height: var(--mp-leading-normal); }
.mp-alert__close { width: 20px; height: 20px; border: 0; background: transparent; color: var(--mp-fg-muted); cursor: pointer; border-radius: var(--mp-radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.mp-alert__close:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-alert__close svg { width: 11px; height: 11px; }
.mp-alert--success { border-left-color: var(--mp-success-500); }
.mp-alert--success .mp-alert__icon { color: var(--mp-success-500); }
.mp-alert--warning { border-left-color: var(--mp-warning-500); }
.mp-alert--warning .mp-alert__icon { color: var(--mp-warning-500); }
.mp-alert--error { border-left-color: var(--mp-danger-500); }
.mp-alert--error .mp-alert__icon { color: var(--mp-danger-500); }
.mp-alert--info { border-left-color: var(--mp-info-500); }
.mp-alert--info .mp-alert__icon { color: var(--mp-info-500); }

/* ---------- LOADING PANEL ---------- */
.mp-loading-host {
  position: relative;
  padding: var(--mp-space-6);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  background: var(--mp-bg-surface);
  min-height: 220px;
  overflow: hidden;
}
.mp-loading-host__placeholder {
  display: grid; gap: var(--mp-space-3);
}
.mp-loading-host__placeholder > div {
  height: 12px;
  background: var(--mp-bg-active);
  border-radius: var(--mp-radius-sm);
}
.mp-loading-host__placeholder > div:nth-child(1) { width: 60%; }
.mp-loading-host__placeholder > div:nth-child(2) { width: 90%; }
.mp-loading-host__placeholder > div:nth-child(3) { width: 80%; }
.mp-loading-host__placeholder > div:nth-child(4) { width: 70%; }
.mp-loading-host__placeholder > div:nth-child(5) { width: 50%; }
.mp-loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--mp-bg-surface) 70%, transparent);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 2;
}
.mp-loading-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mp-space-3);
  background: var(--mp-bg-raised);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-5) var(--mp-space-6);
  box-shadow: var(--mp-shadow-md);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
}

/* ---------- PROGRESS ---------- */
.mp-progress { display: flex; flex-direction: column; gap: 6px; }
.mp-progress__head { display: flex; justify-content: space-between; font-size: var(--mp-text-xs); color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }
.mp-progress__head b { color: var(--mp-fg-primary); font-weight: 600; }
.mp-progress__track { height: 6px; background: var(--mp-bg-active); border-radius: var(--mp-radius-pill); overflow: hidden; position: relative; }
.mp-progress__bar { height: 100%; background: var(--mp-primary-600); border-radius: var(--mp-radius-pill); transition: width var(--mp-duration-slow) var(--mp-ease); }
[data-theme="dark"] .mp-progress__bar { background: var(--mp-primary-500); }
.mp-progress--success .mp-progress__bar { background: var(--mp-success-500); }
.mp-progress--warning .mp-progress__bar { background: var(--mp-warning-500); }
.mp-progress--danger  .mp-progress__bar { background: var(--mp-danger-500); }
.mp-progress--indeterminate .mp-progress__track::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 30%;
  background: var(--mp-primary-600);
  border-radius: var(--mp-radius-pill);
  animation: mp-progress-indet 1.4s var(--mp-ease) infinite;
}
[data-theme="dark"] .mp-progress--indeterminate .mp-progress__track::after { background: var(--mp-primary-500); }
@keyframes mp-progress-indet {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* ---------- SPINNER (wait indicator) ---------- */
.mp-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--mp-bg-active);
  border-top-color: var(--mp-primary-600);
  border-radius: 50%;
  animation: mp-spin 0.8s linear infinite;
  vertical-align: middle;
}
[data-theme="dark"] .mp-spinner { border-top-color: var(--mp-primary-500); }
.mp-spinner--sm { width: 12px; height: 12px; border-width: 2px; }
.mp-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

.mp-block-divider {
  display: flex;
  align-items: center;
  gap: var(--mp-space-4);
  margin: var(--mp-space-11) 0 var(--mp-space-9);
}
.mp-block-divider::before, .mp-block-divider::after { content: ""; flex: 1; height: 1px; background: var(--mp-border-subtle); }
.mp-block-divider span {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  font-weight: 700;
  color: var(--mp-primary-600);
}
[data-theme="dark"] .mp-block-divider span { color: var(--mp-primary-500); }


/* ---------- BLOQUE 3 fixes: missing utility/composition classes ---------- */
.mp-button > svg:not([class]) { width: 14px; height: 14px; flex-shrink: 0; }
.mp-button--sm > svg:not([class]) { width: 12px; height: 12px; }
.mp-button--lg > svg:not([class]) { width: 16px; height: 16px; }

.mp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--mp-space-5);
}

/* ---------- TILES: mosaico de navegación ----------
   Para elegir a dónde ir, no para leer. Manda el icono, el título es corto y
   las cifras van en una sola línea debajo. Sustituye al uso de `mp-card` como
   enlace, que era una ficha de contenido haciendo de botón: mucho texto y un
   subtítulo explicando lo que el icono ya dice. */
.mp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--mp-space-4);
}
.mp-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mp-space-3);
  padding: var(--mp-space-5);
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  transition: border-color var(--mp-duration-fast) var(--mp-ease),
              box-shadow var(--mp-duration-fast) var(--mp-ease),
              transform var(--mp-duration-fast) var(--mp-ease);
}
.mp-tile:hover {
  border-color: var(--mp-border-strong);
  box-shadow: var(--mp-shadow-sm);
  transform: translateY(-2px);
}
.mp-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--mp-radius-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mp-tile__icon svg { width: 22px; height: 22px; }
.mp-tile__icon--blue  { background: var(--mp-info-50);    color: var(--mp-info-700); }
.mp-tile__icon--green { background: var(--mp-success-50); color: var(--mp-success-700); }
.mp-tile__icon--red   { background: var(--mp-danger-50);  color: var(--mp-danger-700); }
.mp-tile__icon--amber { background: var(--mp-warning-50); color: var(--mp-warning-700); }
.mp-tile__title {
  font-size: var(--mp-text-md);
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* Una línea, cifras separadas por puntos: «3 soportes · 12 programas». En
   tabular para que las columnas del mosaico no bailen. */
.mp-tile__meta {
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-muted);
  font-variant-numeric: tabular-nums;
}
.mp-tile--empty .mp-tile__meta { opacity: 0.6; }
.mp-callout {
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border-subtle);
  border-left: 3px solid var(--mp-primary-500);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-space-3) var(--mp-space-4);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
}
.mp-callout p { margin: 0; line-height: var(--mp-leading-normal); }
.mp-callout p + p { margin-top: var(--mp-space-2); }
.mp-callout strong { color: var(--mp-fg-primary); }
.mp-code {
  font-family: var(--mp-font-mono);
  font-size: 0.92em;
  background: var(--mp-bg-sunken);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-xs);
  padding: 1px 6px;
  color: var(--mp-fg-primary);
}
.mp-select-wrap { position: relative; display: block; }
.mp-select-wrap .mp-select { width: 100%; padding-right: 32px; appearance: none; -webkit-appearance: none; }
.mp-select-wrap__chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--mp-fg-muted);
  pointer-events: none;
}

/* =========================================================
   BLOQUE 4 — KPIs, Charts, Scheduler, AI Chat
   ========================================================= */

/* ---------- KPI CARDS ---------- */
.mp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mp-space-4); }
.mp-kpi {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-3);
  position: relative;
  overflow: hidden;
}
.mp-kpi__head { display: flex; justify-content: space-between; align-items: center; }
.mp-kpi__label {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  color: var(--mp-fg-muted);
  font-weight: 600;
}
.mp-kpi__icon {
  width: 26px; height: 26px;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-bg-sunken);
  color: var(--mp-fg-secondary);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.mp-kpi__icon svg { width: 13px; height: 13px; }
.mp-kpi__value {
  font-size: var(--mp-text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: var(--mp-fg-primary);
}
.mp-kpi__value-unit { font-size: var(--mp-text-lg); font-weight: 500; color: var(--mp-fg-muted); margin-left: 2px; }
.mp-kpi__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--mp-space-3);
  margin-top: auto;
}
.mp-kpi__delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--mp-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mp-kpi__delta--up { color: var(--mp-success-700); }
.mp-kpi__delta--down { color: var(--mp-danger-500); }
.mp-kpi__delta svg { width: 11px; height: 11px; }
.mp-kpi__delta-label { color: var(--mp-fg-muted); font-weight: 500; margin-left: 4px; font-size: var(--mp-text-xs); }
.mp-kpi__spark { width: 92px; height: 32px; flex-shrink: 0; }
.mp-kpi__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- CHART CARD ---------- */
.mp-chart-card {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  padding: var(--mp-space-5);
}
.mp-chart-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--mp-space-4);
  gap: var(--mp-space-4);
}
.mp-chart-card__title { font-size: var(--mp-text-md); font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.mp-chart-card__sub { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); font-family: var(--mp-font-mono); }
.mp-chart-card__legend {
  display: flex; flex-wrap: wrap; gap: var(--mp-space-4);
  margin-top: var(--mp-space-4);
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-secondary);
}
.mp-chart-card__legend-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.mp-chart-card__legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.mp-chart-card__legend-name { color: var(--mp-fg-primary); font-weight: 500; }
.mp-chart-card__legend-val { color: var(--mp-fg-muted); font-family: var(--mp-font-mono); }

.mp-chart-svg { width: 100%; height: auto; display: block; font-family: var(--mp-font-sans); font-size: 11px; }
.mp-chart-svg .mp-axis { stroke: var(--mp-border-default); }
.mp-chart-svg .mp-grid { stroke: var(--mp-border-subtle); stroke-dasharray: 2 3; }
.mp-chart-svg .mp-tick { fill: var(--mp-fg-muted); font-size: 10px; }
.mp-chart-svg .mp-tick--axis { fill: var(--mp-fg-secondary); font-weight: 500; }
.mp-chart-svg .mp-bar-label { fill: var(--mp-fg-primary); font-weight: 600; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Grafos del process mining: ProcessMap (mapa de proceso) y ProcessHub (la
   campaña en el centro). Los nombres de token son los que EXISTEN en :root
   —fg-primary, fg-secondary, fg-muted—: uno inventado no da error, deja el
   texto sin color. */
/* Grafos de proceso (ProcessMap y ProcessHub).

   El lienzo es de TAMAÑO FIJO y se desplaza si no cabe, al revés que el resto
   de gráficos, que se estiran con la tarjeta. No es un descuido: para arrastrar
   un nodo hay que traducir píxeles de ratón a unidades del dibujo, y con
   `width:100%` la escala la decide el navegador, que sin JavaScript no se puede
   preguntar. En píxeles, un píxel es una unidad. */
.mp-graph { overflow: auto; user-select: none; }
.mp-graph__svg {
  display: block;
  font-family: var(--mp-font-sans);
  font-size: 11px;
  touch-action: none;
}
.mp-graph__node { cursor: grab; }
.mp-graph.is-dragging .mp-graph__node { cursor: grabbing; }
.mp-graph__name { fill: var(--mp-fg-primary); font-weight: 600; font-size: 12px; }
.mp-graph__meta { fill: var(--mp-fg-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.mp-graph__centre { fill: var(--mp-fg-primary); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.mp-graph__index { fill: var(--mp-fg-inverse); font-weight: 700; font-size: 10px; }
/* El número de una línea tiene que leerse aunque caiga sobre otra: se pinta
   primero el contorno del texto con el color del fondo y encima el relleno. */
.mp-graph__edge-label {
  fill: var(--mp-fg-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  stroke: var(--mp-bg-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.mp-charts-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--mp-space-5); }

/* sparkline compare list */
.mp-sparks { display: flex; flex-direction: column; }
.mp-sparks__row {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 90px 80px;
  gap: var(--mp-space-4);
  align-items: center;
  padding: var(--mp-space-3) 0;
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-sparks__row:last-child { border-bottom: 0; }
.mp-sparks__name { font-weight: 500; font-size: var(--mp-text-sm); }
.mp-sparks__name-sub { display: block; font-size: 10px; color: var(--mp-fg-muted); font-weight: 400; margin-top: 2px; }
.mp-sparks__spark { height: 28px; }
.mp-sparks__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mp-sparks__value { font-variant-numeric: tabular-nums; font-family: var(--mp-font-mono); font-size: var(--mp-text-sm); text-align: right; color: var(--mp-fg-primary); }
.mp-sparks__delta {
  display: inline-flex; gap: 2px; align-items: center;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-sm);
  font-weight: 600;
}
.mp-sparks__delta svg { width: 11px; height: 11px; }
.mp-sparks__delta--up { color: var(--mp-success-700); }
.mp-sparks__delta--down { color: var(--mp-danger-500); }

/* ---------- SCHEDULER ---------- */
.mp-scheduler {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
}
.mp-scheduler__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--mp-space-4) var(--mp-space-5);
  border-bottom: 1px solid var(--mp-border-subtle);
  gap: var(--mp-space-5); flex-wrap: wrap;
}
.mp-scheduler__head-left { display: flex; align-items: baseline; gap: var(--mp-space-3); }
.mp-scheduler__title { font-size: var(--mp-text-md); font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.mp-scheduler__sub { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); font-family: var(--mp-font-mono); }
.mp-scheduler__legend { display: flex; gap: var(--mp-space-4); font-size: var(--mp-text-xs); color: var(--mp-fg-secondary); flex-wrap: wrap; }
.mp-scheduler__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mp-scheduler__legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.mp-scheduler__grid {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--mp-border-subtle);
}
/* Mientras se arrastra un pase, los demas dejan de recibir el puntero: asi el
   soltar cae siempre en la COLUMNA del dia y la hora se mide desde arriba del
   dia. Sin esto, soltar encima de otro pase daria una hora medida desde ese
   pase, y el spot saltaria a una hora que nadie ha elegido. */
.mp-scheduler__grid.is-dragging .mp-event {
  pointer-events: none;
}
.mp-scheduler__grid .mp-event[draggable="true"] {
  cursor: grab;
}
.mp-scheduler__grid .mp-event[draggable="true"]:active {
  cursor: grabbing;
}
.mp-scheduler__cornercell {
  border-right: 1px solid var(--mp-border-subtle);
  border-bottom: 1px solid var(--mp-border-default);
  background: var(--mp-bg-sunken);
  height: 36px;
}
.mp-scheduler__day {
  padding: 0 12px;
  height: 36px;
  background: var(--mp-bg-sunken);
  border-bottom: 1px solid var(--mp-border-default);
  border-right: 1px solid var(--mp-border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-wide);
  font-weight: 600;
  color: var(--mp-fg-muted);
}
.mp-scheduler__day:last-child { border-right: 0; }
.mp-scheduler__day b { color: var(--mp-fg-primary); font-size: var(--mp-text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.mp-scheduler__day.is-today b {
  color: var(--mp-fg-on-primary);
  background: var(--mp-primary-600);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px;
}
[data-theme="dark"] .mp-scheduler__day.is-today b { background: var(--mp-primary-500); color: #0d1015; }

.mp-scheduler__hour {
  height: 56px;
  padding: 4px 8px;
  border-right: 1px solid var(--mp-border-subtle);
  border-bottom: 1px solid var(--mp-border-subtle);
  background: var(--mp-bg-sunken);
  font-family: var(--mp-font-mono);
  font-size: var(--mp-text-xs);
  color: var(--mp-fg-muted);
  text-align: right;
}
/* Dos rejillas superpuestas: la de la HORA, marcada, y la de los CUARTOS, mas
   tenue. Los cuartos entraron el 2026-08-11 a peticion de Joan, porque una cuna
   se compra a y cuarto igual que en punto.

   Los 14px del segundo gradiente son 56/4: si se toca SchedulerGeometry.HourHeight
   hay que tocarlos aqui, o las lineas dejaran de coincidir con los bloques. */
.mp-scheduler__col {
  position: relative;
  border-right: 1px solid var(--mp-border-subtle);
  background-image:
    linear-gradient(to bottom, var(--mp-border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--mp-border-subtle) 45%, transparent) 1px, transparent 1px);
  background-size: 100% 56px, 100% 14px;
  min-height: 504px;
}
.mp-scheduler__col:last-child { border-right: 0; }
.mp-scheduler__col--today { background-color: color-mix(in srgb, var(--mp-primary-50) 55%, transparent); }
[data-theme="dark"] .mp-scheduler__col--today { background-color: color-mix(in srgb, var(--mp-primary-50) 70%, transparent); }

.mp-event {
  position: absolute;
  left: 4px; right: 4px;
  border-radius: var(--mp-radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
  border-left: 3px solid;
  background: var(--mp-bg-surface);
  box-shadow: var(--mp-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-event:hover { box-shadow: var(--mp-shadow-sm); }

/* Dos lineas y no tres: el TITULO arriba y, debajo, hora y soporte juntos.
   Antes eran tres bloques apilados y en un pase corto solo cabia el primero,
   que era la hora; el nombre del budget se cortaba por la mitad. */
.mp-event__title {
  display: block;
  font-weight: 600;
  color: var(--mp-fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-event__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;          /* sin esto los hijos no se dejan recortar y desbordan */
  white-space: nowrap;
  overflow: hidden;
}
/* La hora no se encoge: es corta y de ancho fijo. Lo que cede es el soporte. */
.mp-event__time { font-family: var(--mp-font-mono); color: var(--mp-fg-muted); font-size: 10px; flex: 0 0 auto; }
.mp-event__sup { color: var(--mp-fg-secondary); font-size: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mp-event--prensa { border-left-color: var(--mp-info-500); background: color-mix(in srgb, var(--mp-info-50) 70%, var(--mp-bg-surface)); }
.mp-event--radio  { border-left-color: var(--mp-success-500); background: color-mix(in srgb, var(--mp-success-50) 70%, var(--mp-bg-surface)); }
.mp-event--cine   { border-left-color: var(--mp-primary-500); background: color-mix(in srgb, var(--mp-primary-50) 60%, var(--mp-bg-surface)); }
.mp-event--exterior { border-left-color: var(--mp-accent-500); background: color-mix(in srgb, var(--mp-accent-50) 80%, var(--mp-bg-surface)); }
[data-theme="dark"] .mp-event { background: var(--mp-bg-raised); }
[data-theme="dark"] .mp-event--prensa { background: color-mix(in srgb, var(--mp-info-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--radio  { background: color-mix(in srgb, var(--mp-success-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--cine   { background: color-mix(in srgb, var(--mp-primary-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--exterior { background: color-mix(in srgb, var(--mp-accent-50) 90%, var(--mp-bg-raised)); }
/* ==========================================================================
   POR QUE NO SE PUEDE (.mp-why)
   ==========================================================================
   Acompania a una accion bloqueada y dice los motivos. Tono de aviso, no de
   error: no es que algo haya fallado, es que todavia no se puede. */

.mp-why {
  display: block;
  border-left: 3px solid var(--mp-warning-500);
  background: color-mix(in srgb, var(--mp-warning-50) 60%, var(--mp-bg-surface));
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-space-3);
  font-size: var(--mp-text-sm);
  color: var(--mp-fg-secondary);
}
.mp-why__head {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  color: var(--mp-fg-primary);
  margin-bottom: var(--mp-space-2);
}
.mp-why__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.mp-why__list { margin: 0; padding-left: var(--mp-space-5); }
.mp-why__list li { margin-bottom: 2px; }
/* Lo que si se cumple, en gris: contexto, no aviso. */
.mp-why__list--ok { margin-top: var(--mp-space-2); color: var(--mp-fg-muted); }

/* Cuando la accion SI se puede: no hay nada que avisar, solo contexto de lo que
   va a pasar al pulsar. Azul de informacion, no ambar de aviso. */
.mp-why--info {
  border-left-color: var(--mp-info-500);
  background: color-mix(in srgb, var(--mp-info-50) 55%, var(--mp-bg-surface));
}

.mp-why--compact {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  border-left: 0;
  background: transparent;
  padding: 0;
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-xs);
}

/* ==========================================================================
   DOCUMENTOS IMPRIMIBLES (.mp-doc)
   ==========================================================================
   La orden de compra que se le manda al soporte. Se ve en pantalla como una
   hoja y se guarda como PDF con el "Imprimir" del navegador: sin paquete de
   PDF, sin licencias y con el mismo design system que el resto.

   La contrapartida, sabida y aceptada: no se puede generar en el servidor para
   adjuntarlo a un correo. Cuando haga falta enviar, habra que decidir motor. */

.mp-doc-page {
  min-height: 100vh;
  background: var(--mp-bg-app);
  padding: var(--mp-space-6) var(--mp-space-4);
}

/* La hoja. 21cm es A4; el ancho manda sobre el alto porque el contenido crece
   y el navegador ya reparte en paginas al imprimir. */
.mp-doc {
  width: 21cm;
  max-width: 100%;
  margin: 0 auto;
  background: var(--mp-bg-surface);
  color: var(--mp-fg-primary);
  padding: 1.6cm 1.5cm;
  box-shadow: var(--mp-shadow-md);
  border-radius: var(--mp-radius-sm);
}

.mp-doc__actions {
  width: 21cm;
  max-width: 100%;
  margin: 0 auto var(--mp-space-4);
  display: flex;
  gap: var(--mp-space-2);
  justify-content: flex-end;
}

.mp-doc__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--mp-space-4);
  padding-bottom: var(--mp-space-4);
  border-bottom: 2px solid var(--mp-fg-primary);
}
.mp-doc__brand { display: flex; align-items: center; gap: var(--mp-space-3); }
.mp-doc__logo {
  width: 40px; height: 40px;
  border-radius: var(--mp-radius-sm);
  background: var(--mp-fg-primary);
  color: var(--mp-fg-inverse);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  /* El logo es un bloque de tinta: sin esto el navegador lo omite al imprimir
     y la hoja sale sin marca de quien la manda. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.mp-doc__brand-name { display: block; font-weight: 700; font-size: var(--mp-text-md); }
.mp-doc__brand-sub { display: block; color: var(--mp-fg-muted); font-size: var(--mp-text-xs); text-transform: uppercase; letter-spacing: .06em; }

.mp-doc__title { text-align: right; }
.mp-doc__kind { font-size: var(--mp-text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--mp-fg-muted); }
.mp-doc__ref { font-size: var(--mp-text-xl); font-weight: 700; font-family: var(--mp-font-mono, monospace); }

/* Un sello para lo que no esta vigente. Una orden anulada impresa sin marca es
   un documento peligroso: parece valida. */
.mp-doc__stamp {
  display: inline-block;
  margin-top: var(--mp-space-2);
  padding: 2px 10px;
  border: 2px solid var(--mp-danger-500);
  color: var(--mp-danger-500);
  border-radius: var(--mp-radius-sm);
  font-weight: 700;
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mp-doc__stamp--warning { border-color: var(--mp-warning-500); color: var(--mp-warning-500); }

.mp-doc__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mp-space-5);
  margin: var(--mp-space-5) 0;
}
.mp-doc__block-label {
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mp-fg-muted);
  margin-bottom: 2px;
}
.mp-doc__block-value { font-size: var(--mp-text-sm); }
.mp-doc__block-value b { display: block; font-size: var(--mp-text-md); }

.mp-doc__table { width: 100%; border-collapse: collapse; margin-top: var(--mp-space-3); }
.mp-doc__table th {
  text-align: left;
  font-size: var(--mp-text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mp-fg-muted);
  border-bottom: 1px solid var(--mp-border-default);
  padding: 6px 8px;
}
.mp-doc__table td {
  padding: 7px 8px;
  font-size: var(--mp-text-sm);
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-doc__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mp-doc__table tfoot td {
  border-top: 2px solid var(--mp-fg-primary);
  border-bottom: 0;
  font-weight: 700;
  padding-top: 10px;
}

/* ==========================================================================
   REJILLA DE PLANIFICACION DE RADIO
   Espacios en las filas y dias en las columnas. Una SOLA tabla para cabecera,
   cuerpo y pie: es lo que garantiza que las columnas cuadren a cualquier zoom,
   porque no hay dos tablas que sincronizar.
   ========================================================================== */
.mp-radiobar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--mp-space-4);
  padding: var(--mp-space-3) 0;
}
.mp-radiobar__spacer { flex: 1 1 auto; }

/* Casilla de dia de la semana con aspecto de boton. La casilla real sigue ahi
   para el teclado y el lector de pantalla; solo se esconde a la vista. */
.mp-daychip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 6px;
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-bg-surface);
  font-size: var(--mp-text-sm);
  cursor: pointer; user-select: none;
}
.mp-daychip input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.mp-daychip.is-on {
  background: var(--mp-primary-600); color: var(--mp-fg-inverse);
  border-color: var(--mp-primary-700); font-weight: 600;
}
.mp-daychip:focus-within { outline: 2px solid var(--mp-primary-600); outline-offset: 1px; }

.mp-radiogrid-wrap {
  max-height: calc(100vh - 380px);
  min-height: 160px;
  overflow: auto;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-md);
}

.mp-radiogrid {
  /* `separate` es obligatorio: con `collapse`, los bordes pertenecen a la tabla
     y las celdas fijas scrollean dejandose el borde atras. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mp-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-radiogrid th,
.mp-radiogrid td {
  border-right: 1px solid var(--mp-border-subtle);
  border-bottom: 1px solid var(--mp-border-subtle);
  padding: 0 6px;
  text-align: left;
  font-weight: 400;
  height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-radiogrid .num { text-align: right; }

/* Sticky en dos ejes. Cuatro planos, y el orden importa:
   20 = columna fija | 30 = cabecera y pie | 40 = el cruce de ambos. */
.mp-radiogrid thead th {
  position: sticky; z-index: 30;
  background: var(--mp-neutral-100);
  border-bottom: 1px solid var(--mp-border-strong);
}
.mp-radiogrid thead tr.lv1 th { top: 0; height: 24px; }
.mp-radiogrid thead tr.lv2 th { top: 24px; height: 30px; }
/* Las de la izquierda ocupan las dos filas con rowspan, asi que se quedan
   arriba del todo. */
.mp-radiogrid thead tr.lv1 th.fija { top: 0; }

.mp-radiogrid tfoot td {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--mp-neutral-100);
  font-weight: 600;
  border-top: 2px solid var(--mp-border-strong);
}

.mp-radiogrid .fija { position: sticky; z-index: 20; background: var(--mp-bg-surface); }

/* El cruce de cabecera y columna fija: z-index por encima de los dos, y el
   MISMO fondo que el resto de su fila. `.fija` tiene mas especificidad que
   `thead th`, asi que sin esto la esquina se quedaba blanca sobre una cabecera
   gris y parecia un agujero. */
.mp-radiogrid thead .fija,
.mp-radiogrid tfoot .fija { z-index: 40; background: var(--mp-neutral-100); }
.mp-radiogrid tbody tr:nth-child(even) td { background: var(--mp-neutral-100); }
.mp-radiogrid tbody tr:nth-child(even) td.fija { background: var(--mp-neutral-100); }
.mp-radiogrid tbody tr:hover td,
.mp-radiogrid tbody tr:hover td.fija { background: var(--mp-primary-50); }
.mp-radiogrid tbody tr.is-selected td,
.mp-radiogrid tbody tr.is-selected td.fija { background: var(--mp-primary-100); }

/* Los `left` son la suma acumulada de los anchos anteriores: si se toca uno,
   hay que tocar el siguiente. */
.mp-radiogrid .col-sel     { left: 0;     width: 34px;  min-width: 34px; text-align: center; }
.mp-radiogrid .col-espacio { left: 34px;  width: 230px; min-width: 230px; max-width: 230px; }
.mp-radiogrid .col-dias    { left: 264px; width: 72px;  min-width: 72px; }
.mp-radiogrid .col-total   { left: 336px; width: 56px;  min-width: 56px;
                             border-right: 2px solid var(--mp-border-strong); }

.mp-radiogrid thead th.mes {
  text-align: center; font-weight: 600; font-size: var(--mp-text-xs);
  text-transform: uppercase; letter-spacing: .04em;
  border-right: 1px solid var(--mp-border-strong);
}

/* La columna del espacio lleva DOS lineas —nombre y emisora—, asi que necesita
   mas alto que el resto y que cada linea recorte por su cuenta: con el
   `text-overflow` solo en la celda, el boton no encogia y se veia un «...». */
.mp-radiogrid tbody td.col-espacio { padding: 3px 6px; line-height: 1.25; }
.mp-radiogrid tbody tr { height: 38px; }

.mp-radiogrid__sub {
  display: block;
  font-size: var(--mp-text-xs); color: var(--mp-fg-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-radiogrid .col-espacio .mp-linkbtn {
  display: inline-block; max-width: 190px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cabecera de dia: inicial arriba y numero abajo. */
.mp-radiogrid .dia-h { width: 36px; min-width: 36px; max-width: 36px; padding: 0; }
.mp-radiogrid .dia-h > span { display: block; text-align: center; line-height: 1.2; }
.mp-radiogrid .dia-h .dow { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }
.mp-radiogrid .dia-h .dnum { font-size: var(--mp-text-sm); font-weight: 600; }
.mp-radiogrid .dia-h.finde .dow,
.mp-radiogrid .dia-h.finde .dnum { color: var(--mp-warning-700); }

/* --------------------------------------------------------------------------
   ESTADOS DE CELDA
   Cada uno se distingue por DOS cosas al menos —fondo y textura, o fondo y peso
   de letra—, nunca solo por el color.
   -------------------------------------------------------------------------- */
.mp-radiogrid td.dia {
  width: 36px; min-width: 36px; max-width: 36px;
  text-align: center; padding: 0; cursor: cell;
}

.mp-radiogrid td.dia.st-vacia { color: var(--mp-fg-disabled); }

.mp-radiogrid td.dia.st-cunas {
  background: var(--mp-primary-50);
  color: var(--mp-primary-700);
  font-weight: 700;
}

/* No programado: apagado Y rayado, para que se note en blanco y negro. */
.mp-radiogrid td.dia.st-no {
  background: var(--mp-neutral-200);
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, var(--mp-border-default) 3px 4px);
  cursor: not-allowed;
}

/* Ya cerrado con el proveedor: rayado propio y borde interior. */
.mp-radiogrid td.dia.st-bloq {
  background: var(--mp-neutral-200);
  background-image: repeating-linear-gradient(-45deg,
    transparent 0 4px, var(--mp-primary-200) 4px 5px);
  color: var(--mp-fg-primary);
  font-weight: 700;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--mp-primary-200);
}

/* Fin de semana: tinte de columna que se COMBINA con los demas estados. */
.mp-radiogrid td.dia.finde { background: var(--mp-warning-50); }
.mp-radiogrid td.dia.finde.st-no {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, var(--mp-border-default) 3px 4px);
}

.mp-radiogrid__edit {
  width: 100%; height: 100%; border: 0; padding: 0;
  text-align: center; font: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--mp-bg-surface); color: var(--mp-fg-primary);
  outline: 2px solid var(--mp-primary-600); outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   PLANGRID — la parrilla de plan de digital
   ==========================================
   Una fila es una linea del plan, y a la derecha el reparto por semanas. Sale
   del lienzo de diseno de Joan del 2026-08-29.

   ES PRIMA DE `mp-radiogrid`, NO LA MISMA. Aquella tiene cuatro columnas fijas
   clavadas por la izquierda y 36 px por columna de dia, que es lo que necesita
   una rejilla de dias. Aqui las columnas fijas son otras —linea, via y NETO— y
   las de semana necesitan 64 px para un porcentaje con su barra. Se intento
   reutilizarla y no daba: el mockup lo dijo antes de escribir esto.

   LO QUE VIAJA FIJO ES EL NETO, y es la decision de diseno de la pantalla. En
   el lienzo original solo se quedaba el numero de linea, asi que al desplazarse
   hacia el calendario se perdian los importes, que es justo la cifra contra la
   que se reparte.
   -------------------------------------------------------------------------- */
.mp-plangrid-wrap {
  max-height: calc(100vh - 420px);
  min-height: 160px;
  overflow: auto;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-strong);
  border-radius: var(--mp-radius-md);
}

.mp-plangrid {
  /* `separate` es obligatorio: con `collapse`, los bordes pertenecen a la tabla
     y las celdas fijas scrollean dejandose el borde atras. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mp-text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-plangrid th,
.mp-plangrid td {
  border-right: 1px solid var(--mp-border-subtle);
  border-bottom: 1px solid var(--mp-border-subtle);
  padding: 0 6px;
  text-align: left;
  font-weight: 400;
  height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-plangrid .num { text-align: right; }

/* Sticky en dos ejes, mismos cuatro planos que la rejilla de radio:
   20 = columna fija | 30 = cabecera y pie | 40 = el cruce de ambos. */
.mp-plangrid thead th {
  position: sticky; z-index: 30;
  background: var(--mp-neutral-100);
  border-bottom: 1px solid var(--mp-border-strong);
}
.mp-plangrid thead tr.lv1 th { top: 0; height: 24px; }
.mp-plangrid thead tr.lv2 th { top: 24px; height: 34px; }
.mp-plangrid thead tr.lv1 th.fija { top: 0; }

.mp-plangrid tfoot td {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--mp-neutral-100);
  font-weight: 600;
  border-top: 2px solid var(--mp-border-strong);
}

.mp-plangrid .fija { position: sticky; z-index: 20; background: var(--mp-bg-surface); }
.mp-plangrid thead .fija,
.mp-plangrid tfoot .fija { z-index: 40; background: var(--mp-neutral-100); }
.mp-plangrid tbody tr:nth-child(even) td { background: var(--mp-neutral-100); }
.mp-plangrid tbody tr:nth-child(even) td.fija { background: var(--mp-neutral-100); }
.mp-plangrid tbody tr:hover td,
.mp-plangrid tbody tr:hover td.fija { background: var(--mp-primary-50); }
.mp-plangrid tbody tr.is-selected td,
.mp-plangrid tbody tr.is-selected td.fija { background: var(--mp-primary-100); }

/* Los `left` son la suma acumulada de los anchos anteriores: si se toca uno,
   hay que tocar todos los siguientes. */
.mp-plangrid .col-sel   { left: 0;     width: 34px;  min-width: 34px; text-align: center; }
.mp-plangrid .col-linea { left: 34px;  width: 250px; min-width: 250px; max-width: 250px; }
.mp-plangrid .col-via   { left: 284px; width: 92px;  min-width: 92px; }
.mp-plangrid .col-neto  { left: 376px; width: 96px;  min-width: 96px; text-align: right;
                          font-weight: 600;
                          border-right: 2px solid var(--mp-border-strong); }

.mp-plangrid thead th.grupo {
  text-align: center; font-weight: 600; font-size: var(--mp-text-xs);
  text-transform: uppercase; letter-spacing: .04em;
  border-right: 1px solid var(--mp-border-strong);
}

/* La columna de la linea lleva DOS lineas —soporte y emplazamiento con su
   formato—, asi que necesita mas alto y que cada una recorte por su cuenta. */
.mp-plangrid tbody td.col-linea { padding: 3px 6px; line-height: 1.25; }
.mp-plangrid tbody tr { height: 40px; }

.mp-plangrid__sub {
  display: block;
  font-size: var(--mp-text-xs); color: var(--mp-fg-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-plangrid .col-linea .mp-linkbtn {
  display: inline-block; max-width: 205px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Las columnas de compra: modelo, tarifa, unidades, bruto y descuento. */
.mp-plangrid .col-compra { width: 92px; min-width: 92px; }
.mp-plangrid .col-compra--ancha { width: 110px; min-width: 110px; }

/* Cabecera de semana: rotulo ISO arriba y fecha del lunes abajo. */
.mp-plangrid .sem-h { width: 64px; min-width: 64px; max-width: 64px; padding: 0; }
.mp-plangrid .sem-h > span { display: block; text-align: center; line-height: 1.2; }
.mp-plangrid .sem-h .swk { font-size: var(--mp-text-sm); font-weight: 600; }
.mp-plangrid .sem-h .sday { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }

/* --------------------------------------------------------------------------
   ESTADOS DE CELDA
   Cada uno se distingue por DOS cosas al menos —fondo y peso, o fondo y
   textura—, nunca solo por el color.
   -------------------------------------------------------------------------- */
.mp-plangrid td.sem {
  width: 64px; min-width: 64px; max-width: 64px;
  text-align: right; padding: 0 6px; cursor: cell;
  position: relative;
}

.mp-plangrid td.sem.st-vacia { color: var(--mp-fg-disabled); }

.mp-plangrid td.sem.st-lleva {
  color: var(--mp-primary-700);
  font-weight: 700;
}

/* La barra de intensidad del reparto, que es la idea del lienzo: se ve de un
   vistazo si la campana carga al principio o al final.

   Va DETRAS del numero con `position:absolute` y no como fondo degradado
   porque su altura es un dato —el porcentaje— y un `background-size` en
   porcentaje se mide sobre la celda, no sobre el maximo de la fila. */
.mp-plangrid__bar {
  position: absolute; left: 3px; right: 3px; bottom: 0;
  background: var(--mp-primary-200);
  border-radius: var(--mp-radius-xs) var(--mp-radius-xs) 0 0;
  pointer-events: none;
}

/* El numero, POR ENCIMA de la barra.
   La barra esta posicionada y el texto suelto no, asi que sin esto la barra lo
   pinta encima y la celda se lee vacia. Se vio en la primera pasada por el
   navegador; los tests no lo cazan porque el markup es correcto. */
.mp-plangrid__pct { position: relative; z-index: 1; }

/* Ya comprada: rayado propio y borde interior, igual que en la rejilla de
   radio. Se lee, no se toca. */
.mp-plangrid td.sem.st-bloq,
.mp-plangrid td.col-compra.st-bloq {
  background: var(--mp-neutral-200);
  background-image: repeating-linear-gradient(-45deg,
    transparent 0 4px, var(--mp-primary-200) 4px 5px);
  color: var(--mp-fg-primary);
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--mp-primary-200);
}

/* La suma del reparto. En rojo mientras no cuadre a 100, que es el aviso de
   que esa linea todavia no se puede ordenar. */
.mp-plangrid td.col-suma { width: 56px; min-width: 56px; text-align: right;
                           border-left: 2px solid var(--mp-border-strong); }
.mp-plangrid td.col-suma.st-cuadra { color: var(--mp-fg-muted); }
.mp-plangrid td.col-suma.st-descuadra { color: var(--mp-danger-700); font-weight: 700; }

.mp-plangrid__edit {
  width: 100%; height: 100%; border: 0; padding: 0 6px;
  text-align: right; font: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--mp-bg-surface); color: var(--mp-fg-primary);
  outline: 2px solid var(--mp-primary-600); outline-offset: -2px;
}

.mp-plangrid__legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--mp-space-2) var(--mp-space-4);
  padding: var(--mp-space-2) 0;
  font-size: var(--mp-text-xs); color: var(--mp-fg-muted);
}
.mp-plangrid__legend b { color: var(--mp-fg-secondary); font-weight: 600; }

/* Boton que parece un enlace: abre la ficha del espacio desde la rejilla. */
.mp-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left;
}
.mp-linkbtn:hover { color: var(--mp-primary-700); text-decoration: underline; }

/* Lista de programas con casilla, agrupada por emisora: es como se eligen al
   montar un plan, «de la SER quiero estos tres». */
.mp-multilist__group { margin-bottom: var(--mp-space-3); }
.mp-multilist__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mp-space-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--mp-border-subtle);
  font-size: var(--mp-text-sm);
}
.mp-multilist__item {
  display: flex; align-items: center; gap: var(--mp-space-2);
  padding: 3px 4px;
  font-size: var(--mp-text-sm);
  cursor: pointer;
  border-radius: var(--mp-radius-sm);
}
.mp-multilist__item:hover { background: var(--mp-neutral-100); }
.mp-multilist__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-multilist__time { font-size: var(--mp-text-xs); color: var(--mp-fg-muted); }

.mp-radiogrid__legend {
  display: flex; flex-wrap: wrap; gap: var(--mp-space-4);
  margin-top: var(--mp-space-2);
  font-size: var(--mp-text-xs); color: var(--mp-fg-muted);
}
.mp-radiogrid__legend span { display: inline-flex; align-items: center; gap: 5px; }
.mp-radiogrid__hint { margin-left: auto; }

.mp-swatch {
  width: 18px; height: 14px; display: inline-block;
  border: 1px solid var(--mp-border-strong);
  background: var(--mp-bg-surface);
}
.mp-swatch--cunas { background: var(--mp-primary-50); }
.mp-swatch--no {
  background: var(--mp-neutral-200);
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, var(--mp-border-default) 3px 4px);
}
.mp-swatch--finde { background: var(--mp-warning-50); }
.mp-swatch--bloq {
  background: var(--mp-neutral-200);
  background-image: repeating-linear-gradient(-45deg,
    transparent 0 4px, var(--mp-primary-200) 4px 5px);
}

/* Fila que abre un espacio comprado dentro de la orden de television: la cadena
   lee su orden por espacios, no como una lista plana de cuarenta fechas. Va
   dentro de la misma tabla para que las columnas sigan cuadrando. */
.mp-doc__group-row td {
  padding: var(--mp-space-3) 8px 4px;
  border-bottom: 1px solid var(--mp-border-default);
}
/* El flex vive aqui dentro y no en el `td`: una celda con display:flex sale del
   modelo de tabla y descuadra el ancho de todas las columnas. */
.mp-doc__group-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mp-space-3);
}
.mp-doc__group-name { font-weight: 600; }
.mp-doc__group-sub {
  font-size: var(--mp-text-xs);
  font-weight: 400;
  color: var(--mp-fg-muted);
}

.mp-doc__notes {
  margin-top: var(--mp-space-5);
  padding-top: var(--mp-space-3);
  border-top: 1px solid var(--mp-border-subtle);
  font-size: var(--mp-text-sm);
}
.mp-doc__foot {
  margin-top: var(--mp-space-6);
  padding-top: var(--mp-space-3);
  border-top: 1px solid var(--mp-border-subtle);
  color: var(--mp-fg-muted);
  font-size: var(--mp-text-xs);
  display: flex;
  justify-content: space-between;
  gap: var(--mp-space-4);
}

/* --------------------------------------------------------------------------
   AL IMPRIMIR
   --------------------------------------------------------------------------
   Fuera todo lo que no es el documento, y la hoja a pelo: sin sombra, sin
   margenes propios y sin fondo, que el papel ya es blanco y la tinta cuesta. */
@media print {
  @page { size: A4; margin: 1.4cm; }

  .mp-doc-page { padding: 0; background: #fff; min-height: 0; }
  .mp-doc__actions { display: none; }

  .mp-doc {
    width: auto;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
    color: #000;
  }

  /* Una fila de la tabla partida entre dos hojas es ilegible; la cabecera
     repetida en cada hoja, en cambio, se agradece. */
  .mp-doc__table { page-break-inside: auto; }
  .mp-doc__table tr { page-break-inside: avoid; }
  .mp-doc__table thead { display: table-header-group; }
  .mp-doc__table tfoot { display: table-footer-group; }

  /* Un espacio no se queda con su rotulo al final de una hoja y sus pases en la
     siguiente. */
  .mp-doc__group-row { page-break-after: avoid; break-after: avoid; }

  /* El sello tiene que salir SI o SI: es lo que distingue una orden viva de
     una anulada sobre el papel. */
  .mp-doc__stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Colores por GRUPO, no por medio: los usa el Scheduler cuando se le da
   ColourKey, para que cada budget de television se distinga del de al lado.
   Ocho y vuelta a empezar; con mas grupos que colores, dos comparten, que es
   mejor que inventar tonos que no se distinguen. Se reutilizan los mismos
   tokens de la paleta para no abrir una segunda. */
.mp-event--c0 { border-left-color: var(--mp-info-500);    background: color-mix(in srgb, var(--mp-info-50) 70%, var(--mp-bg-surface)); }
.mp-event--c1 { border-left-color: var(--mp-success-500); background: color-mix(in srgb, var(--mp-success-50) 70%, var(--mp-bg-surface)); }
.mp-event--c2 { border-left-color: var(--mp-primary-500); background: color-mix(in srgb, var(--mp-primary-50) 60%, var(--mp-bg-surface)); }
.mp-event--c3 { border-left-color: var(--mp-accent-500);  background: color-mix(in srgb, var(--mp-accent-50) 80%, var(--mp-bg-surface)); }
.mp-event--c4 { border-left-color: var(--mp-danger-500);  background: color-mix(in srgb, var(--mp-danger-50) 70%, var(--mp-bg-surface)); }
.mp-event--c5 { border-left-color: var(--mp-warning-500); background: color-mix(in srgb, var(--mp-warning-50) 70%, var(--mp-bg-surface)); }
.mp-event--c6 { border-left-color: var(--mp-info-500);    background: color-mix(in srgb, var(--mp-info-50) 35%, var(--mp-bg-surface)); }
.mp-event--c7 { border-left-color: var(--mp-success-500); background: color-mix(in srgb, var(--mp-success-50) 35%, var(--mp-bg-surface)); }
[data-theme="dark"] .mp-event--c0 { background: color-mix(in srgb, var(--mp-info-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c1 { background: color-mix(in srgb, var(--mp-success-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c2 { background: color-mix(in srgb, var(--mp-primary-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c3 { background: color-mix(in srgb, var(--mp-accent-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c4 { background: color-mix(in srgb, var(--mp-danger-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c5 { background: color-mix(in srgb, var(--mp-warning-50) 90%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c6 { background: color-mix(in srgb, var(--mp-info-50) 60%, var(--mp-bg-raised)); }
[data-theme="dark"] .mp-event--c7 { background: color-mix(in srgb, var(--mp-success-50) 60%, var(--mp-bg-raised)); }

/* El mismo color, en punto, para la columna de budget de Spot Values. */
.mp-budget-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--mp-space-2);
  vertical-align: middle;
}
.mp-budget-dot--c0 { background: var(--mp-info-500); }
.mp-budget-dot--c1 { background: var(--mp-success-500); }
.mp-budget-dot--c2 { background: var(--mp-primary-500); }
.mp-budget-dot--c3 { background: var(--mp-accent-500); }
.mp-budget-dot--c4 { background: var(--mp-danger-500); }
.mp-budget-dot--c5 { background: var(--mp-warning-500); }
.mp-budget-dot--c6 { background: var(--mp-info-500); opacity: 0.55; }
.mp-budget-dot--c7 { background: var(--mp-success-500); opacity: 0.55; }

.mp-event.is-selected {
  outline: 2px solid var(--mp-primary-500);
  outline-offset: 1px;
  z-index: 3;
  box-shadow: var(--mp-shadow-md);
}
.mp-event.is-overlap {
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--mp-warning-50) 80%, transparent) 6px 12px);
  z-index: 2;
}

.mp-legend-dot--prensa { background: var(--mp-info-500); }
.mp-legend-dot--radio { background: var(--mp-success-500); }
.mp-legend-dot--cine { background: var(--mp-primary-500); }
.mp-legend-dot--exterior { background: var(--mp-accent-500); }

/* ---------- AI CHAT ---------- */
.mp-chat {
  display: flex;
  flex-direction: column;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  height: 540px;
  box-shadow: var(--mp-shadow-sm);
}
.mp-chat__head {
  display: flex; align-items: center; gap: var(--mp-space-3);
  padding: var(--mp-space-4) var(--mp-space-5);
  border-bottom: 1px solid var(--mp-border-subtle);
}
.mp-chat__avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--mp-primary-500), var(--mp-primary-700));
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mp-chat__avatar svg { width: 16px; height: 16px; }
.mp-chat__head-meta { flex: 1; min-width: 0; }
.mp-chat__head-title { font-size: var(--mp-text-sm); font-weight: 600; color: var(--mp-fg-primary); }
.mp-chat__head-status { font-size: 11px; color: var(--mp-success-700); display: inline-flex; align-items: center; gap: 5px; }
.mp-chat__head-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mp-success-500); }
.mp-chat__head-action {
  width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--mp-fg-muted);
  border-radius: var(--mp-radius-sm);
  cursor: pointer; display: grid; place-items: center;
}
.mp-chat__head-action:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); }
.mp-chat__head-action svg { width: 14px; height: 14px; }

.mp-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--mp-space-5);
  display: flex; flex-direction: column;
  gap: var(--mp-space-3);
  background: var(--mp-bg-sunken);
}
.mp-chat__msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: var(--mp-text-sm);
  line-height: 1.45;
}
.mp-chat__msg--assistant {
  align-self: flex-start;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  color: var(--mp-fg-primary);
  border-top-left-radius: 4px;
}
.mp-chat__msg--user {
  align-self: flex-end;
  background: var(--mp-primary-600);
  color: var(--mp-fg-on-primary);
  border-top-right-radius: 4px;
}
[data-theme="dark"] .mp-chat__msg--user { background: var(--mp-primary-500); color: #0d1015; }
.mp-chat__msg-time {
  display: block;
  font-size: 10px;
  color: var(--mp-fg-muted);
  margin-top: 4px;
  font-family: var(--mp-font-mono);
}
.mp-chat__msg--user .mp-chat__msg-time { color: color-mix(in srgb, var(--mp-fg-on-primary) 65%, transparent); }
[data-theme="dark"] .mp-chat__msg--user .mp-chat__msg-time { color: rgba(13, 16, 21, 0.55); }
.mp-chat__msg--typing {
  display: inline-flex; gap: 4px; align-items: center;
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-subtle);
  padding: 10px 14px;
  border-radius: 12px;
  border-top-left-radius: 4px;
  align-self: flex-start;
  max-width: none;
}
.mp-chat__msg--typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mp-fg-muted);
  animation: mp-chat-typing 1.2s var(--mp-ease) infinite;
}
.mp-chat__msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.mp-chat__msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mp-chat-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.mp-chat__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--mp-space-2); align-self: flex-start; max-width: 80%; }
.mp-chat__suggestion {
  background: var(--mp-bg-surface);
  border: 1px solid var(--mp-border-default);
  border-radius: var(--mp-radius-pill);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--mp-fg-secondary);
  cursor: pointer;
  font-weight: 500;
  transition: background var(--mp-duration-fast) var(--mp-ease), color var(--mp-duration-fast) var(--mp-ease);
}
.mp-chat__suggestion:hover { background: var(--mp-bg-hover); color: var(--mp-fg-primary); border-color: var(--mp-border-strong); }

.mp-chat__foot {
  border-top: 1px solid var(--mp-border-subtle);
  padding: var(--mp-space-3) var(--mp-space-4) var(--mp-space-4);
  background: var(--mp-bg-surface);
}
.mp-chat__inputbar {
  display: flex;
  align-items: flex-end;
  gap: var(--mp-space-2);
  background: var(--mp-bg-input);
  border: 1px solid var(--mp-border-default);
  border-radius: var(--mp-radius-md);
  padding: 4px 4px 4px var(--mp-space-3);
  transition: border-color var(--mp-duration-fast) var(--mp-ease), box-shadow var(--mp-duration-fast) var(--mp-ease);
}
.mp-chat__inputbar:focus-within { border-color: var(--mp-border-focus); box-shadow: var(--mp-shadow-focus); }
.mp-chat__textarea {
  flex: 1;
  background: transparent;
  border: 0;
  resize: none;
  padding: 6px 0;
  font-size: var(--mp-text-sm);
  line-height: 1.45;
  min-height: 28px;
  max-height: 120px;
  color: var(--mp-fg-primary);
  font-family: inherit;
}
.mp-chat__textarea:focus { outline: none; }
.mp-chat__textarea::placeholder { color: var(--mp-fg-muted); }
.mp-chat__send {
  width: 28px; height: 28px;
  border: 0;
  background: var(--mp-primary-600);
  color: var(--mp-fg-on-primary);
  border-radius: var(--mp-radius-sm);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--mp-duration-fast) var(--mp-ease);
}
.mp-chat__send:hover { background: var(--mp-primary-700); }
[data-theme="dark"] .mp-chat__send { background: var(--mp-primary-500); color: #0d1015; }
[data-theme="dark"] .mp-chat__send:hover { background: var(--mp-primary-400); }
.mp-chat__send svg { width: 13px; height: 13px; }
.mp-chat__send:disabled { background: var(--mp-bg-active); color: var(--mp-fg-disabled); cursor: not-allowed; }
.mp-chat__hint { font-size: 10px; color: var(--mp-fg-muted); margin-top: 6px; padding: 0 4px; display: flex; justify-content: space-between; }
.mp-chat__hint kbd { font-family: var(--mp-font-mono); background: var(--mp-bg-active); border-radius: 3px; padding: 1px 5px; font-size: 9.5px; color: var(--mp-fg-secondary); }

/* Responsive cap */
@media (max-width: 960px) {
  .mp-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .mp-sidebar { display: none; }
  .mp-main { padding: var(--mp-space-6); }
  .mp-form-grid, .mp-grid--2, .mp-grid--3,
  .mp-icons, .mp-radii, .mp-shadows,
  .mp-theme-preview, .mp-semantic { grid-template-columns: 1fr 1fr; }
  .mp-kpis { grid-template-columns: repeat(2, 1fr); }
  .mp-charts-grid { grid-template-columns: 1fr; }
}