/**
 * MP Estilos 1.1.6
 * Sistema visual base de Mentes Propias.
 *
 * IMPORTANTE:
 * MP Estilos no reemplaza selectores existentes de forma global.
 * Los componentes solo se activan cuando el marcado utiliza clases mp-*.
 */

/* =========================================================
   1. TOKENS / VARIABLES DE DISEÑO
   ========================================================= */
:root {
  /* Identidad */
  --mp-color-primary: #000fff;
  --mp-color-primary-hover: #000bd6;
  --mp-color-link: #007bff;
  --mp-color-accent: #ffe86b;

  /* Texto */
  --mp-color-ink: #111827;
  --mp-color-text: #222222;
  --mp-color-muted: #66717d;
  --mp-color-subtle: #8a949e;

  /* Superficies */
  --mp-color-surface: #ffffff;
  --mp-color-surface-soft: #f8fbff;
  --mp-color-surface-blue: #eef6ff;
  --mp-color-surface-muted: #f3f4f6;
  --mp-color-border: #dcdcde;
  --mp-color-border-soft: #e5e7eb;

  /* Estados */
  --mp-color-danger: #d63638;
  --mp-color-danger-hover: #b32d2e;
  --mp-color-success: #17633a;
  --mp-color-warning: #765410;
  --mp-color-disabled: #999999;

  /* Tipografía */
  --mp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mp-font-size-xs: 12px;
  --mp-font-size-sm: 14px;
  --mp-font-size-md: 16px;
  --mp-font-size-lg: 18px;
  --mp-font-size-xl: 22px;
  --mp-font-size-2xl: 28px;
  --mp-line-height: 1.55;

  /* Radios */
  --mp-radius-sm: 8px;
  --mp-radius-md: 10px;
  --mp-radius-lg: 14px;
  --mp-radius-xl: 18px;
  --mp-radius-2xl: 22px;
  --mp-radius-pill: 999px;

  /* Sombras */
  --mp-shadow-sm: 0 2px 8px rgba(0, 15, 255, 0.18);
  --mp-shadow-md: 0 2px 10px rgba(107, 114, 128, 0.14);
  --mp-shadow-card: 0 8px 24px rgba(17, 24, 39, 0.08);
  --mp-shadow-card-hover: 0 12px 32px rgba(17, 24, 39, 0.12);
  --mp-shadow-accent: 0 0 15px rgba(0, 15, 255, 0.42), 0 5px 16px rgba(0, 15, 255, 0.16);
  --mp-shadow-float: 0 0 20px rgba(0, 0, 0, 0.60), 0 0 10px rgba(0, 0, 0, 0.90);
  --mp-shadow-close: 0 0 10px rgba(0, 0, 0, 0.26);
  --mp-shadow-glow: 0 0 20px var(--mp-color-link);
  --mp-shadow-glow-hover: 0 0 24px var(--mp-color-link);
  --mp-shadow-square-action: 0 0 13px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.50);

  /* Espaciado */
  --mp-space-1: 4px;
  --mp-space-2: 8px;
  --mp-space-3: 12px;
  --mp-space-4: 16px;
  --mp-space-5: 20px;
  --mp-space-6: 24px;
  --mp-space-8: 32px;
  --mp-space-10: 40px;
  --mp-space-12: 48px;

  /* Layout */
  --mp-content-width: 1180px;
  --mp-reading-width: 820px;
  --mp-narrow-width: 650px;

  /* Interacción */
  --mp-focus-ring: 0 0 0 3px rgba(0, 15, 255, 0.18);
  --mp-transition: 160ms ease;
}

/* =========================================================
   2. CONTEXTO MP Y UTILIDADES DE LAYOUT
   ========================================================= */
.mp-ui,
.mp-ui *,
.mp-ui *::before,
.mp-ui *::after {
  box-sizing: border-box;
}

.mp-ui {
  color: var(--mp-color-text);
  font-family: var(--mp-font-sans);
  line-height: var(--mp-line-height);
}

.mp-container {
  width: min(100% - 32px, var(--mp-content-width));
  margin-inline: auto;
}

.mp-container--reading {
  max-width: var(--mp-reading-width);
}

.mp-section {
  padding-block: var(--mp-space-8);
}

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

.mp-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-3);
}

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

/* =========================================================
   3. TIPOGRAFÍA DE COMPONENTES
   ========================================================= */
.mp-title {
  margin: 0;
  color: var(--mp-color-ink);
  font: 800 var(--mp-font-size-2xl)/1.2 var(--mp-font-sans);
}

.mp-subtitle {
  margin: 0;
  color: var(--mp-color-ink);
  font: 800 var(--mp-font-size-xl)/1.25 var(--mp-font-sans);
}

/* Variante reforzada para migraciones desde plugins con selectores heredados
   del tipo .plugin-form h2. Solo se activa si el título adopta .mp-subtitle. */
.mp-ui h2.mp-subtitle,
.mp-ui h3.mp-subtitle {
  margin: 0;
  color: var(--mp-color-ink);
  font: 800 var(--mp-font-size-xl)/1.25 var(--mp-font-sans);
}

.mp-text-muted {
  color: var(--mp-color-muted);
}

/* =========================================================
   4. BOTONES
   ========================================================= */
.mp-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--mp-radius-md);
  font: 800 var(--mp-font-size-sm)/1.2 var(--mp-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mp-transition), border-color var(--mp-transition), color var(--mp-transition), transform var(--mp-transition), box-shadow var(--mp-transition);
}

.mp-btn:hover {
  text-decoration: none;
}

.mp-btn:focus-visible {
  outline: 2px solid var(--mp-color-primary);
  outline-offset: 2px;
}

.mp-btn--primary {
  background: var(--mp-color-primary);
  border-color: var(--mp-color-primary);
  color: #fff;
}

.mp-btn--primary:hover {
  background: var(--mp-color-primary-hover);
  border-color: var(--mp-color-primary-hover);
  color: #fff;
}

.mp-btn--secondary {
  background: var(--mp-color-surface);
  border-color: var(--mp-color-border);
  color: var(--mp-color-ink);
}

.mp-btn--secondary:hover {
  background: var(--mp-color-surface-soft);
  border-color: #ccd0d4;
  color: var(--mp-color-ink);
}

.mp-btn--outline {
  background: var(--mp-color-surface);
  border-color: var(--mp-color-primary);
  color: var(--mp-color-primary);
}

.mp-btn--outline:hover {
  background: var(--mp-color-surface-blue);
  border-color: var(--mp-color-primary);
  color: var(--mp-color-primary);
}

.mp-btn--danger {
  background: var(--mp-color-danger);
  border-color: var(--mp-color-danger);
  color: #fff;
}

.mp-btn--danger:hover {
  background: var(--mp-color-danger-hover);
  border-color: var(--mp-color-danger-hover);
  color: #fff;
}

.mp-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mp-color-primary);
}

.mp-btn--ghost:hover {
  background: var(--mp-color-surface-blue);
  color: var(--mp-color-primary);
}

.mp-btn:disabled,
.mp-btn[aria-disabled="true"],
.mp-btn.is-disabled {
  background: var(--mp-color-surface-muted);
  border-color: var(--mp-color-border-soft);
  color: var(--mp-color-disabled);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

.mp-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  box-shadow: var(--mp-shadow-close);
  cursor: pointer;
}

.mp-icon-btn:hover,
.mp-icon-btn:focus-visible {
  background: var(--mp-color-surface-blue);
}

.mp-icon-btn:focus-visible {
  outline: 2px solid var(--mp-color-primary);
  outline-offset: 2px;
}

/* =========================================================
   5. TARJETAS / SUPERFICIES
   ========================================================= */
.mp-card {
  background: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-card);
  padding: var(--mp-space-5);
}

.mp-card--flat {
  box-shadow: none;
}

.mp-card--accent {
  border-color: rgba(0, 15, 255, 0.18);
  box-shadow: var(--mp-shadow-sm);
}

/* Variantes de tarjeta y contenido multimedia */
.mp-card--compact {
  padding: 14px;
  border-radius: 16px;
}

.mp-card--flush {
  padding: 0;
  overflow: hidden;
  border-radius: var(--mp-radius-xl);
}

.mp-card--interactive {
  transition: transform var(--mp-transition), box-shadow var(--mp-transition), border-color var(--mp-transition);
}

.mp-card--interactive:hover {
  transform: translateY(-1px);
  box-shadow: var(--mp-shadow-card-hover);
}

.mp-card__media {
  display: block;
}

.mp-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

.mp-card__body {
  padding: 14px;
}

.mp-panel-accent {
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  background: var(--mp-color-surface);
  color: var(--mp-color-ink);
  box-shadow: var(--mp-shadow-accent);
}

/* Tarjeta protagonista para contenidos con imagen: libros, autores, etc. */
.mp-card--feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-color: rgba(0, 123, 255, 0.24);
  border-radius: var(--mp-radius-xl);
  box-shadow: var(--mp-shadow-glow);
  transition: box-shadow var(--mp-transition), transform var(--mp-transition);
}

.mp-card--feature:hover {
  box-shadow: var(--mp-shadow-glow-hover);
}

.mp-card-title--center {
  margin: 0;
  color: var(--mp-color-ink);
  font: 900 21px/1.25 var(--mp-font-sans);
  text-align: center;
}

.mp-media-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 130px;
  padding: 10px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface-soft);
  text-decoration: none;
}

.mp-media-frame__image {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--mp-radius-md);
}

.mp-card-copy {
  margin: 0;
  color: #333;
  line-height: var(--mp-line-height);
}

.mp-card-meta {
  margin: 0;
  color: #555;
  text-align: center;
}

.mp-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.mp-action-link {
  color: var(--mp-color-primary) !important;
  font-weight: 900;
  text-decoration: none !important;
}

.mp-action-link:hover,
.mp-action-link:focus-visible {
  text-decoration: underline !important;
}

.mp-icon-btn--square {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: var(--mp-radius-md);
  box-shadow: var(--mp-shadow-square-action);
  font-size: 20px;
}

.mp-details-panel {
  padding: 10px;
  border: 1px solid rgba(0, 15, 255, 0.10);
  border-radius: 12px;
  background: var(--mp-color-surface-soft);
}

.mp-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
}

.mp-detail-list > div {
  display: grid;
  grid-template-columns: minmax(86px,145px) minmax(0,1fr);
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
}

.mp-detail-list dt {
  color: #666;
  font-size: var(--mp-font-size-xs);
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.mp-detail-list dd {
  margin: 0;
  color: var(--mp-color-text);
  font-weight: 700;
  word-break: break-word;
}

.mp-match-heading {
  margin: 0 0 8px;
  color: var(--mp-color-primary);
  font-weight: 900;
  text-align: center;
}

.mp-highlight-mark {
  padding: 0 2px;
  border-radius: 4px;
  background: #fff3a6;
}

.mp-loading-state {
  padding: 18px;
  color: #555;
  font-weight: 900;
  text-align: center;
}

/* Filtros flotantes compartidos */
html.mp-filter-lock,
body.mp-filter-lock {
  overflow: hidden !important;
}

body.mp-filter-lock {
  touch-action: none;
}

.mp-active-filters-panel {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 2147483600;
  width: min(96vw,1080px);
  min-height: 58px;
  margin: 0;
  padding: 12px 64px 12px 18px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  box-shadow: 0 0 16px rgba(0,0,0,.58);
}

.mp-active-filters-panel[hidden] {
  display: none !important;
}

.mp-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--mp-color-primary);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-accent);
  color: var(--mp-color-primary);
  font: 700 var(--mp-font-size-sm)/1.15 var(--mp-font-sans);
  cursor: pointer;
}

.mp-filter-chip:hover,
.mp-filter-chip:focus-visible {
  background: #ffdf3d;
  outline: none;
}

.mp-filter-chip > span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
}

.mp-filter-chip .x {
  margin-left: 8px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.mp-active-filters-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,123,255,.20);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  box-shadow: 0 6px 14px rgba(0,123,255,.10);
  cursor: pointer;
}

.mp-active-filters-clear:hover,
.mp-active-filters-clear:focus-visible {
  background: var(--mp-color-surface-blue);
  outline: none;
}

.mp-active-filters-clear svg {
  width: 23px;
  height: 23px;
  display: block;
}

.mp-filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147481200;
  background: rgba(0,0,0,.32);
  pointer-events: auto;
  cursor: default;
}

.mp-filter-backdrop[hidden] {
  display: none !important;
}

.mp-filter-panel {
  position: fixed;
  top: var(--mp-filter-panel-top,90px);
  left: 50%;
  z-index: 2147481300;
  width: min(96vw,1080px);
  max-height: calc(100dvh - var(--mp-filter-panel-top,90px) - 12px);
  padding: 64px 16px 16px;
  transform: translateX(-50%) scale(.985);
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  box-shadow: 0 18px 20px rgba(0,0,0,.90);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mp-transition), transform var(--mp-transition);
}

@supports not (height:100dvh) {
  .mp-filter-panel { max-height: calc(100vh - var(--mp-filter-panel-top,90px) - 12px); }
}

.mp-filter-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.mp-filter-panel__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  box-shadow: 0 0 12px rgba(0,0,0,.45);
  cursor: pointer;
}

.mp-filter-panel__close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.mp-filter-panel__body {
  min-height: 0;
  max-height: none;
  padding: 0 0 10px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mp-filter-panel .mp-field {
  width: 100%;
  margin: 0 0 12px;
}

.mp-filter-panel .mp-input,
.mp-filter-panel .mp-select {
  min-height: 44px;
  padding: 11px 14px;
  color: var(--mp-color-text);
  font: 400 16px/1.3 var(--mp-font-sans);
}

.mp-filter-panel__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}

.mp-filter-panel__actions .mp-btn {
  width: 100%;
  min-height: 44px;
  margin: 0;
}

/* Ficha amplia de contenido */
.mp-detail-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 12px;
}

.mp-detail-card {
  display: grid;
  grid-template-columns: minmax(190px,320px) minmax(0,1fr);
  gap: 24px;
  padding: 18px;
  border: 1px solid rgba(0,15,255,.16);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  box-shadow: 0 0 18px rgba(0,123,255,.15), 0 8px 18px rgba(17,24,39,.06);
}

.mp-detail-media {
  text-align: center;
}

.mp-detail-image {
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: var(--mp-radius-lg);
  box-shadow: 0 0 14px rgba(0,123,255,.14), 0 8px 18px rgba(17,24,39,.08);
}

.mp-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.mp-soft-card {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(0,15,255,.12);
  border-radius: 12px;
  background: var(--mp-color-surface-soft);
}

/* Rejillas reutilizables para listados y mosaicos */
.mp-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.mp-grid--tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px;
}

/* Barra de filtros */
.mp-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-filterbar .mp-select {
  width: auto;
  min-width: 190px;
}

/* Indicador porcentual / progreso */
.mp-meter {
  height: 11px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--mp-radius-pill);
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px rgba(0, 15, 255, 0.08);
}

.mp-meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-primary);
  box-shadow: 0 0 10px rgba(0, 15, 255, 0.18);
}

/* Control range coherente con la identidad MP */
.mp-range {
  width: 100%;
  margin: 10px 0 2px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  accent-color: var(--mp-color-primary);
  cursor: pointer;
}

.mp-range::-webkit-slider-runnable-track {
  height: 12px;
  border-radius: var(--mp-radius-pill);
  background: #dbe4ff;
  box-shadow: inset 0 0 0 1px rgba(0, 15, 255, 0.18);
}

.mp-range::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -7px;
  -webkit-appearance: none;
  appearance: none;
  border: 3px solid #fff;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.mp-range::-moz-range-track {
  height: 12px;
  border-radius: var(--mp-radius-pill);
  background: #dbe4ff;
  box-shadow: inset 0 0 0 1px rgba(0, 15, 255, 0.18);
}

.mp-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* Paginación */
.mp-pagination {
  margin-top: 14px;
}

.mp-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-pagination .page-numbers a,
.mp-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  text-decoration: none;
}

.mp-pagination .page-numbers a:hover {
  border-color: rgba(0, 15, 255, 0.35);
  background: var(--mp-color-surface-blue);
}

.mp-pagination .page-numbers .current {
  border-color: rgba(0, 15, 255, 0.22);
  background: var(--mp-color-surface-blue);
  color: var(--mp-color-ink);
  font-weight: 800;
}

/* Tarjeta visual cuadrada para mosaicos y futuras selecciones */
.mp-media-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-2xl);
  background: var(--mp-color-surface);
  color: var(--mp-color-ink);
  box-shadow: var(--mp-shadow-card);
  text-decoration: none;
  transition: transform var(--mp-transition), box-shadow var(--mp-transition);
}

.mp-media-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--mp-shadow-card-hover);
  text-decoration: none;
}

.mp-media-tile__media {
  position: absolute;
  inset: 0;
  background: var(--mp-color-surface-muted);
}

.mp-media-tile__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mp-media-tile--overlay .mp-media-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.64), rgba(255,255,255,.18));
}

.mp-media-tile__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  text-align: center;
}

.mp-media-tile__content h3 {
  margin: 0 0 8px;
}

.mp-media-tile__content p {
  margin: 0;
}

.mp-media-tile--image-only .mp-media-tile__media::after,
.mp-media-tile--image-only .mp-media-tile__content {
  display: none;
}

/* Estado vacío */
.mp-empty-state {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  color: var(--mp-color-ink);
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 15, 255, 0.32), 0 5px 16px rgba(0, 15, 255, 0.12);
}

/* =========================================================
   5B. CONTENIDO COMPARTIBLE / DIÁLOGOS FLOTANTES
   ========================================================= */
.mp-list-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 48px;
  color: #111;
  font-family: var(--mp-font-sans);
}

.mp-grid--showcase {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.mp-media-card-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(0, 15, 255, .16);
  border-radius: var(--mp-radius-lg);
  background: #f3f5ff;
  box-shadow: 0 0 10px #fff;
}

.mp-card--share {
  gap: 12px;
}

.mp-card-meta--stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-stat-count {
  display: block;
  margin-top: 4px;
  color: #111;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}

.mp-card-actions--center {
  justify-content: center;
}

.mp-card-actions--share {
  margin-top: 2px;
}

.mp-btn--large {
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 11px;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
}

.mp-btn--block {
  width: 100%;
}

.mp-floating-action {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 99990;
  appearance: none;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  box-shadow: var(--mp-shadow-float);
  font: 700 15px/1.1 var(--mp-font-sans);
  cursor: pointer;
  transition: transform var(--mp-transition), color var(--mp-transition);
}

.mp-floating-action:hover {
  transform: translateY(-1px) scale(1.02);
}

.mp-floating-action.is-active {
  color: #666;
}

.mp-page-dim {
  position: fixed;
  inset: 0;
  z-index: 99970;
  background: rgba(0,0,0,.64) !important;
  pointer-events: none !important;
}

.mp-floating-close {
  position: absolute !important;
  top: -15px !important;
  right: -9px !important;
  z-index: 20 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.mp-floating-close svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 !important;
  stroke-width: 1.8 !important;
}

.mp-action-popover {
  position: fixed;
  z-index: 99996;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(420px,94vw);
  padding: 12px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface);
  color: #111;
  box-shadow: var(--mp-shadow-float);
  font: 500 14px/1.25 var(--mp-font-sans);
}

.mp-action-popover--inline {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto;
  max-width: min(560px,100%);
  margin: 0 auto;
  padding: 10px 46px 10px 12px;
  box-shadow: 0 0 18px rgba(0,0,0,.34),0 0 9px rgba(0,15,255,.18);
  pointer-events: auto;
}

.mp-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 99992;
  background: rgba(255,255,255,.34);
  backdrop-filter: blur(2px);
}

.mp-floating-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 99993;
  width: min(620px,94vw);
  max-height: 92vh;
  padding: 0;
  overflow: visible !important;
  transform: translate(-50%,-50%);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  color: #111;
  box-shadow: var(--mp-shadow-float);
  font-family: var(--mp-font-sans);
}

.mp-floating-dialog__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(92vh - 8px);
  padding: 22px 20px 20px;
  overflow-y: auto;
  overflow-x: hidden !important;
}

.mp-dialog-title {
  margin: 0 34px 10px !important;
  color: var(--mp-color-primary);
  font-size: 24px;
  line-height: 1.15;
  text-align: center;
}

.mp-dialog-help {
  max-width: 520px !important;
  margin: 0 auto 14px !important;
  color: #666;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.mp-status-message {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 1.25em !important;
  margin: 0 auto 10px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

.mp-status-message--success {
  color: #147a36 !important;
}

.mp-copy-box {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 16px !important;
  padding: 15px 16px;
  overflow-x: hidden;
  border: 1px solid rgba(0,15,255,.25) !important;
  border-radius: var(--mp-radius-lg);
  background: #f6f7ff;
  color: #111;
  box-shadow: inset 0 0 0 2px rgba(0,15,255,.04),0 0 12px rgba(0,15,255,.08) !important;
  font-size: 16px;
  line-height: 1.44;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mp-empty-state--soft {
  padding: 24px;
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface);
  box-shadow: 0 0 12px rgba(0,0,0,.12);
}

.mp-loading-inline {
  margin: 20px 0 0;
  padding: 0;
  color: var(--mp-color-primary);
  font-weight: 700;
  text-align: center;
}

.mp-share-visual {
  box-sizing: border-box;
  display: block;
  width: min(280px,72vw);
  max-width: 100%;
  height: auto;
  margin: 4px auto 18px !important;
  border-radius: var(--mp-radius-sm);
  box-shadow: 0 0 0 3px rgba(255,255,255,.96),0 0 22px rgba(255,255,255,.92),0 0 18px rgba(0,15,255,.18);
}

.mp-share-visual--large {
  width: min(430px,86vw);
  margin: 0 auto 20px !important;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(0,0,0,.22);
}

.mp-dialog-actions {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 16px !important;
}

.mp-legal-note {
  box-sizing: border-box;
  max-width: 100%;
  margin: 10px auto 12px !important;
  padding: 10px 12px;
  border: 1px solid rgba(0,15,255,.16);
  border-radius: 12px;
  background: #f6f7ff;
  color: #333;
  font: 500 12.5px/1.35 var(--mp-font-sans);
  text-align: left;
}

.mp-legal-note--warning {
  border-color: rgba(160,120,0,.28);
  background: #fff8d7;
  color: #4b3b00;
  font-weight: 650;
}

.mp-quote-detail-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 16px 70px;
  color: #111;
  font-family: var(--mp-font-sans);
}

.mp-quote-detail-card {
  padding: clamp(18px,4vw,34px);
  border-radius: var(--mp-radius-2xl);
  background: var(--mp-color-surface);
  box-shadow: 0 0 22px rgba(0,0,0,.18);
  text-align: center;
}

.mp-kicker {
  margin: 0 0 12px;
  color: var(--mp-color-primary);
  font-weight: 800;
  letter-spacing: .2px;
}

.mp-quote-display {
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 0;
  border: 0;
  color: #111;
  font-size: clamp(27px,4.6vw,48px);
  line-height: 1.18;
  font-weight: 850;
}

.mp-quote-detail-meta p {
  margin: 0 0 5px;
  color: #555;
}

.mp-quote-detail-meta h1 {
  margin: 0 0 8px;
  color: var(--mp-color-primary);
  font-size: clamp(24px,4vw,38px);
  line-height: 1.14;
}

.mp-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

/* =========================================================
   6. FORMULARIOS
   ========================================================= */
.mp-field {
  display: grid;
  gap: 6px;
}

.mp-label {
  color: var(--mp-color-ink);
  font-weight: 700;
  font-size: var(--mp-font-size-sm);
}

.mp-input,
.mp-select,
.mp-textarea,
.mp-ui input.mp-input,
.mp-ui select.mp-select,
.mp-ui textarea.mp-textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #d6dde4;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  color: var(--mp-color-ink);
  box-shadow: var(--mp-shadow-md);
  font: 500 var(--mp-font-size-sm)/1.4 var(--mp-font-sans);
  transition: border-color var(--mp-transition), box-shadow var(--mp-transition);
}

.mp-textarea {
  min-height: 120px;
  resize: vertical;
}

.mp-input:hover,
.mp-select:hover,
.mp-textarea:hover,
.mp-ui input.mp-input:hover,
.mp-ui select.mp-select:hover,
.mp-ui textarea.mp-textarea:hover {
  border-color: #c7d0da;
}

.mp-input:focus,
.mp-select:focus,
.mp-textarea:focus,
.mp-ui input.mp-input:focus,
.mp-ui select.mp-select:focus,
.mp-ui textarea.mp-textarea:focus {
  border-color: #9ebcff;
  outline: 2px solid rgba(0, 15, 255, 0.10);
  box-shadow: var(--mp-shadow-md), 0 0 0 1px rgba(0, 15, 255, 0.10);
}

.mp-help {
  color: var(--mp-color-muted);
  font-size: var(--mp-font-size-xs);
}

.mp-input[readonly],
.mp-ui input.mp-input[readonly] {
  background: var(--mp-color-surface-muted);
  color: var(--mp-color-muted);
  box-shadow: none;
}

.mp-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--mp-color-text);
  font-size: var(--mp-font-size-sm);
  line-height: 1.45;
  cursor: pointer;
}

.mp-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--mp-color-primary);
}

/* =========================================================
   7. CHIPS / FILTROS / ESTADOS
   ========================================================= */
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-ink);
  font: 700 var(--mp-font-size-xs)/1.2 var(--mp-font-sans);
  text-decoration: none;
}

.mp-chip.is-active,
.mp-chip[aria-pressed="true"] {
  background: var(--mp-color-accent);
  border-color: var(--mp-color-primary);
  color: var(--mp-color-primary);
  box-shadow: var(--mp-shadow-sm);
}

.mp-status-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-accent);
  box-shadow: 0 0 0 3px #fff;
}

/* =========================================================
   8. AVISOS
   ========================================================= */
.mp-notice {
  padding: 12px 14px;
  border: 1px solid var(--mp-color-border-soft);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface-soft);
  color: var(--mp-color-text);
}

.mp-notice--danger {
  border-color: rgba(214, 54, 56, 0.28);
  background: #fff6f6;
  color: #8a2022;
}

.mp-notice--success {
  border-color: rgba(23, 99, 58, 0.24);
  background: #f2fbf6;
  color: var(--mp-color-success);
}

.mp-notice--warning {
  border-color: #ead08c;
  background: #fffaf0;
  color: var(--mp-color-warning);
}

/* =========================================================
   9. MODAL BASE
   ========================================================= */
.mp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
}

.mp-overlay[hidden] {
  display: none;
}

.mp-modal {
  position: relative;
  width: min(620px, 96vw);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: var(--mp-space-6);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  color: var(--mp-color-text);
  box-shadow: var(--mp-shadow-float);
}

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

/* =========================================================
   11. RESPONSIVE BASE
   ========================================================= */
@media (max-width: 640px) {
  :root {
    --mp-space-8: 24px;
    --mp-space-10: 32px;
    --mp-space-12: 40px;
  }

  .mp-container {
    width: min(100% - 20px, var(--mp-content-width));
  }

  .mp-card {
    padding: var(--mp-space-4);
  }

  .mp-modal {
    width: 96vw;
    padding: var(--mp-space-5);
  }

  .mp-card--feature {
    padding: 12px;
    border-radius: 16px;
  }

  .mp-detail-card {
    grid-template-columns: 1fr;
  }

  .mp-detail-list > div {
    grid-template-columns: 1fr;
  }

  .mp-filter-panel {
    width: 96vw;
    padding: 62px 14px 14px;
  }

  .mp-filter-panel__close {
    top: -16px;
    right: -10px;
  }

  .mp-filter-panel .mp-input,
  .mp-filter-panel .mp-select {
    font-size: 15px;
  }

  .mp-active-filters-panel {
    width: 96vw;
    padding: 12px 60px 12px 12px;
  }
}


@media (max-width: 760px) {
  .mp-grid--showcase { grid-template-columns: 1fr; gap: 24px; }
  .mp-floating-action { right: 12px; bottom: 14px; padding: 12px 15px; font-size: 14px; }
  .mp-floating-dialog { width: 92vw; }
  .mp-floating-dialog__inner { padding: 22px 16px 18px; }
  .mp-copy-box { font-size: 15px; }
}

@media (max-width: 480px) {
  .mp-action-popover--inline {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    padding: 9px 42px 9px 9px;
  }
}

/* =========================================================
   5C. CONTENIDO EDITORIAL / ANÁLISIS Y FILTROS PORTAL
   Componentes incorporados con la migración de MP Observatorio.
   ========================================================= */
.mp-editorial-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.mp-editorial-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,123,255,.24);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-glow);
  scroll-margin-top: 24px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.mp-editorial-card:hover { box-shadow: var(--mp-shadow-glow-hover); }
.mp-editorial-card:focus-visible { outline: 3px solid rgba(0,123,255,.35); outline-offset: 5px; }

.mp-reading-panel {
  border-radius: var(--mp-radius-lg);
  padding: clamp(20px,3vw,28px);
}

.mp-reading-panel--dark {
  border: 0;
  background: linear-gradient(145deg,#111827 0%,#0a1221 58%,#08101d 100%);
  color: #f8fafc;
  box-shadow: inset 0 0 20px rgba(255,255,255,.84),0 10px 26px rgba(8,16,29,.24);
}

.mp-reading-panel--dark p {
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: clamp(17px,2vw,19px) !important;
  line-height: 1.58 !important;
  font-weight: 650 !important;
}

.mp-accordion-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e2ec;
  border-radius: var(--mp-radius-lg);
  background: #f7f9fc;
  box-shadow: 0 4px 13px rgba(15,23,42,.07);
}

.mp-accordion-toggle {
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #354151;
  text-align: center;
  cursor: pointer;
}

.mp-accordion-toggle:hover,
.mp-accordion-toggle:focus-visible { background: #eef4fa; outline: none; }
.mp-accordion-toggle:focus-visible { box-shadow: inset 0 0 0 2px rgba(0,15,255,.28); }

.mp-accordion-spacer { width: 42px; height: 42px; }

.mp-section-kicker {
  display: block;
  margin: 0 !important;
  color: #4f5d6d !important;
  font: 900 12px/1.25 var(--mp-font-sans) !important;
  letter-spacing: .085em;
  text-align: center !important;
  text-transform: uppercase;
}

.mp-accordion-icon {
  width: 38px;
  height: 38px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,15,255,.16);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  box-shadow: 0 2px 8px rgba(0,15,255,.10);
}

.mp-accordion-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.mp-accordion-toggle[aria-expanded="true"] .mp-accordion-icon svg { transform: rotate(180deg); }

.mp-content-title {
  margin: 0 !important;
  padding: 0 18px 16px !important;
  color: var(--mp-color-ink);
  font: 700 clamp(18px,2.15vw,23px)/1.28 var(--mp-font-sans) !important;
  text-align: center !important;
}

.mp-content-title a {
  color: var(--mp-color-primary) !important;
  text-decoration: none !important;
}

.mp-content-title a:hover,
.mp-content-title a:focus-visible { text-decoration: underline !important; text-underline-offset: 3px; }

.mp-accordion-panel {
  padding: 4px clamp(18px,2.7vw,27px) clamp(20px,2.8vw,28px);
  border-top: 1px solid rgba(15,23,42,.08);
}

.mp-accordion-panel[hidden] { display: none !important; }

.mp-reading-copy {
  margin: 0 !important;
  color: #202831 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.mp-reading-copy--paragraphs p {
  margin: 0 0 1em !important;
  color: #202831 !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}
.mp-reading-copy--paragraphs p:last-child { margin-bottom: 0 !important; }

.mp-reading-copy--justify,
.mp-reading-copy--justify p,
.mp-reading-panel--dark.mp-reading-copy--justify p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.mp-reading-subsection {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,123,255,.15);
}

.mp-reading-subsection > h4 {
  margin: 0 0 13px !important;
  color: #27313b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: center;
}

.mp-quote-list { display: grid; gap: 11px; }
.mp-quote-list blockquote {
  margin: 0 !important;
  padding: 14px 16px;
  border: 1px solid #d4e2ee;
  border-left: 4px solid var(--mp-color-primary);
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  color: #202832;
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
}

.mp-card-footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mp-card-actions-compact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}

.mp-report-link {
  flex: 1 1 auto;
  min-width: 0;
  color: #53606d !important;
  font: 600 12.5px/1.35 var(--mp-font-sans) !important;
  text-align: left !important;
  text-decoration: none !important;
}
.mp-report-link:hover,
.mp-report-link:focus-visible {
  color: var(--mp-color-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: none;
}

.mp-quiet-action {
  min-height: 38px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #53606d;
  font: 700 12.5px/1.2 var(--mp-font-sans);
  cursor: pointer;
}
.mp-quiet-action:hover,
.mp-quiet-action:focus-visible { background: var(--mp-color-surface-blue); color: var(--mp-color-primary); outline: none; }
.mp-quiet-action.is-active,
.mp-quiet-action.is-shared { color: var(--mp-color-primary); }
.mp-quiet-action__icon { display: block; width: 20px; height: 20px; }
.mp-quiet-action__icon svg { display: block; width: 100%; height: 100%; }

.mp-filter-action-btn {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--mp-radius-md);
  background: transparent;
  color: var(--mp-color-primary);
  cursor: pointer;
  text-shadow: 0 0 4px #fff,0 0 10px #fff,0 0 20px rgba(255,255,255,.98);
}
.mp-filter-action-btn svg { width: 25px; height: 25px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mp-filter-action-btn:hover,
.mp-filter-action-btn:focus-visible { background: var(--mp-color-surface-blue); outline: none; }
.mp-filter-action-btn.has-active-filters::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-accent);
  box-shadow: 0 0 0 3px #fff;
}

.mp-taxonomy-panel { width: 100%; padding-top: 2px; border-top: 1px solid #d8dde2; }
.mp-taxonomy-panel[hidden] { display: none !important; }
.mp-taxonomy-row {
  padding: 13px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mp-taxonomy-row + .mp-taxonomy-row { border-top: 1px solid #d8dde2; }
.mp-taxonomy-label {
  display: block;
  width: 100%;
  color: var(--mp-color-muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.mp-taxonomy-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; }
.mp-chip--taxonomy {
  min-height: 0;
  padding: 5px 10px;
  border-color: var(--mp-color-primary);
  color: var(--mp-color-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.mp-chip--taxonomy:hover,
.mp-chip--taxonomy:focus-visible { background: #eef2ff; outline: none; }
.mp-chip--taxonomy.is-active {
  background: var(--mp-color-accent) !important;
  border-color: var(--mp-color-primary) !important;
  color: var(--mp-color-primary) !important;
  box-shadow: var(--mp-shadow-sm) !important;
}
.mp-chip--taxonomy.is-active:hover,
.mp-chip--taxonomy.is-active:focus-visible { background: #ffdf3d !important; }
.mp-taxonomy-related { display:flex; justify-content:center; padding:13px 5px; border-top:1px solid #d8dde2; }
.mp-link-action {
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--mp-color-primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Ventana de filtros y bandeja de filtros activos sin dependencia de JS propia. */
.mp-portal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: rgba(0,0,0,.32);
}
.mp-portal-backdrop[hidden] { display:none !important; }

.mp-filter-dialog {
  position: fixed;
  left: 50%;
  top: 72px;
  z-index: 2147482100;
  width: min(1080px,96vw);
  max-width: 1080px;
  max-height: calc(100vh - 96px);
  padding: 64px 16px 16px;
  transform: translateX(-50%);
  overflow: visible;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-float);
}
.mp-filter-dialog[hidden] { display:none !important; }
.mp-filter-dialog__close {
  position: absolute !important;
  top: -14px !important;
  right: -8px !important;
  z-index: 3 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}
.mp-filter-dialog__close svg { width:21px !important; height:21px !important; display:block; }
.mp-filter-fields { display:grid; grid-template-columns:1fr; gap:12px; }
.mp-filter-field { position:relative; width:100%; }
.mp-filter-dialog .mp-input {
  width:100%;
  min-height:40px;
  height:44px;
  padding:9px 44px 9px 12px;
  border:1px solid #d6dde4;
  border-radius:var(--mp-radius-md);
  background:#fff;
  color:var(--mp-color-ink);
  box-shadow:var(--mp-shadow-md);
}
.mp-filter-dialog .mp-input:hover { border-color:#c7d0da; }
.mp-filter-dialog .mp-input:focus {
  border-color:#9ebcff;
  outline:2px solid rgba(0,15,255,.10);
  box-shadow:var(--mp-shadow-md),0 0 0 1px rgba(0,15,255,.10);
}
.mp-combobox__toggle {
  position:absolute;
  right:8px;
  top:8px;
  width:28px;
  height:28px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  color:var(--mp-color-muted);
  cursor:pointer;
}
.mp-combobox__toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.mp-combobox.is-open .mp-combobox__toggle svg { transform:rotate(180deg); }
.mp-combobox__list {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:2147482190;
  max-height:300px;
  padding:6px;
  overflow-y:auto;
  border:1px solid rgba(0,123,255,.28);
  border-radius:var(--mp-radius-lg);
  background:#fff;
  box-shadow:0 0 18px rgba(0,0,0,.22);
  scrollbar-color:var(--mp-color-link) var(--mp-color-surface-blue);
}
.mp-combobox__list.open { display:block; }
.mp-combobox__item {
  display:block;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:9px;
  background:#fff;
  color:#222;
  text-align:left;
  cursor:pointer;
}
.mp-combobox__item:hover,
.mp-combobox__item.is-active { background:var(--mp-color-surface-blue); color:var(--mp-color-primary); }

.mp-filter-dock {
  position:fixed;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:2147482200;
  width:min(1080px,96vw);
  transform:translateX(-50%);
  pointer-events:none;
}
.mp-filter-dock[hidden] { display:none !important; }
.mp-filter-dock__shell {
  position:relative;
  width:100%;
  min-height:56px;
  padding:12px 64px 12px 18px;
  border-radius:var(--mp-radius-md);
  background:#fff;
  box-shadow:var(--mp-shadow-float);
  pointer-events:auto;
}
.mp-filter-dock__chips {
  width:100%;
  min-height:36px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.mp-filter-dock .mp-filter-chip {
  min-height:0;
  padding:5px 11px;
  background:var(--mp-color-accent);
  color:var(--mp-color-primary);
  border:1px solid var(--mp-color-primary);
  box-shadow:var(--mp-shadow-sm);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.mp-filter-dock__clear {
  position:absolute;
  right:10px;
  top:50%;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d9dfe5;
  border-radius:var(--mp-radius-pill);
  background:#fff;
  color:var(--mp-color-primary);
  font-size:0;
  cursor:pointer;
}
.mp-filter-dock__clear svg { width:23px; height:23px; display:block; }

@media (max-width: 640px) {
  .mp-editorial-card { padding:10px; gap:11px; border-radius:16px; }
  .mp-reading-panel { padding:19px; }
  .mp-reading-panel--dark p { font-size:17px !important; }
  .mp-accordion-toggle { grid-template-columns:36px minmax(0,1fr) 36px; min-height:51px; padding:6px 8px; }
  .mp-accordion-spacer { width:36px; height:36px; }
  .mp-accordion-icon { width:34px; height:34px; }
  .mp-content-title { padding:0 14px 14px !important; font-size:19px !important; }
  .mp-accordion-panel { padding:4px 16px 20px; }
  .mp-reading-copy,
  .mp-reading-copy--paragraphs p { font-size:15.5px !important; }
  .mp-report-link { font-size:12px !important; }
  .mp-quiet-action { padding:6px; }
  .mp-quiet-action__label { display:none; }
  .mp-filter-dialog { width:96vw; max-width:96vw; padding:62px 14px 14px; }
  .mp-filter-dock { bottom:max(10px,env(safe-area-inset-bottom)); width:96vw; max-width:96vw; }
  .mp-filter-dock__shell { padding:10px 58px 10px 12px; }
}



/* =========================================================
   5D. USUARIOS / AUTORES / IDENTIDAD PÚBLICA
   ========================================================= */

/* Contenedor común para formularios y paneles de cuenta. */
.mp-form-shell {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--mp-space-5) !important;
  border: 1px solid rgba(0, 123, 255, .20) !important;
  border-radius: var(--mp-radius-lg) !important;
  background: var(--mp-color-surface) !important;
  box-shadow: 0 0 18px rgba(0,123,255,.16), 0 8px 18px rgba(17,24,39,.06) !important;
}

.mp-form-shell > h1,
.mp-form-shell > h2 {
  margin: 0 0 18px !important;
  color: var(--mp-color-text) !important;
  font: 900 30px/1.2 var(--mp-font-sans) !important;
  text-align: center !important;
}

.mp-form-shell .mp-field {
  display: block;
  margin-bottom: var(--mp-space-3);
}

.mp-form-shell .mp-field > span:first-child,
.mp-form-shell .mp-field > .mpu-field-label,
.mp-form-shell .mp-field > .mpu-field-title {
  display: block;
  margin: 0 0 6px;
  color: var(--mp-color-text);
  font-weight: 800;
  text-align: left;
}

.mp-form-shell .mp-field input[type="text"],
.mp-form-shell .mp-field input[type="email"],
.mp-form-shell .mp-field input[type="password"],
.mp-form-shell .mp-field input[type="url"],
.mp-form-shell .mp-field input[type="search"],
.mp-form-shell .mp-field input[type="number"],
.mp-form-shell .mp-field input[type="date"],
.mp-form-shell .mp-field select,
.mp-form-shell .mp-field textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 12px !important;
  border: 1px solid var(--mp-color-border) !important;
  border-radius: var(--mp-radius-md) !important;
  background: var(--mp-color-surface) !important;
  color: var(--mp-color-text) !important;
  font: 400 var(--mp-font-size-md)/1.4 var(--mp-font-sans) !important;
  box-shadow: none !important;
}

.mp-form-shell .mp-field textarea {
  min-height: 110px;
  resize: vertical;
}

.mp-form-shell .mp-field input:focus,
.mp-form-shell .mp-field select:focus,
.mp-form-shell .mp-field textarea:focus {
  outline: 2px solid rgba(0,15,255,.18) !important;
  outline-offset: 1px;
  border-color: #b7c2ff !important;
  box-shadow: none !important;
}

/* En la zona de usuario el botón estándar histórico es la acción principal. */
.mp-form-shell .mp-btn:not(.mp-btn--danger):not(.mp-btn--secondary):not(.mp-btn--outline):not(.mp-btn--ghost) {
  min-height: 50px !important;
  padding: 14px 22px !important;
  border: 1px solid var(--mp-color-primary) !important;
  border-radius: var(--mp-radius-md) !important;
  background: var(--mp-color-primary) !important;
  color: #fff !important;
  font-size: var(--mp-font-size-md) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0,15,255,.20) !important;
}

.mp-form-shell .mp-btn:not(.mp-btn--danger):not(.mp-btn--secondary):not(.mp-btn--outline):not(.mp-btn--ghost):hover {
  background: var(--mp-color-primary-hover) !important;
  border-color: var(--mp-color-primary-hover) !important;
  color: #fff !important;
}

/* Un botón desactivado debe conservar siempre el aspecto desactivado dentro
   de los formularios, incluso frente a la regla de acción principal anterior. */
.mp-form-shell .mp-btn:disabled,
.mp-form-shell .mp-btn[aria-disabled="true"],
.mp-form-shell .mp-btn.is-disabled {
  background: var(--mp-color-surface-muted) !important;
  border-color: var(--mp-color-border-soft) !important;
  color: var(--mp-color-disabled) !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.mp-form-shell .mp-btn:disabled:hover,
.mp-form-shell .mp-btn[aria-disabled="true"]:hover,
.mp-form-shell .mp-btn.is-disabled:hover {
  background: var(--mp-color-surface-muted) !important;
  border-color: var(--mp-color-border-soft) !important;
  color: var(--mp-color-disabled) !important;
  box-shadow: none !important;
}

.mp-form-shell .mp-btn.mp-btn--danger {
  min-height: 50px !important;
  padding: 14px 22px !important;
  border-color: var(--mp-color-danger) !important;
  background: var(--mp-color-danger) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(214,54,56,.20) !important;
}

.mp-form-shell .mp-btn.mp-btn--danger:hover {
  border-color: var(--mp-color-danger-hover) !important;
  background: var(--mp-color-danger-hover) !important;
}

/* Menú de usuario reutilizable. */
.mp-user-nav,
.mp-user-nav ul,
.mp-user-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-user-nav > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mp-user-nav__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid rgba(0,15,255,.20) !important;
  border-radius: var(--mp-radius-lg) !important;
  background: var(--mp-color-surface) !important;
  color: var(--mp-color-primary) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform var(--mp-transition), box-shadow var(--mp-transition), background var(--mp-transition);
}

.mp-user-nav__item:hover {
  transform: translateY(-1px);
  background: #fdfdff !important;
  box-shadow: 0 4px 10px rgba(0,15,255,.13);
}

.mp-user-nav__item.is-active {
  pointer-events: none;
  border-color: #ccc !important;
  background: #e6e6e6 !important;
  color: #666 !important;
  box-shadow: none !important;
}

.mp-user-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.mp-user-nav__icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
  stroke: currentColor;
}

.mp-user-nav__label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Directorios y tarjetas de identidad. */
.mp-directory-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mp-space-6);
}

.mp-directory-card {
  padding: 20px 22px !important;
  border: 1px solid rgba(0,123,255,.24) !important;
  border-radius: var(--mp-radius-xl) !important;
  background: var(--mp-color-surface) !important;
  box-shadow: var(--mp-shadow-glow) !important;
  transition: box-shadow var(--mp-transition), transform var(--mp-transition);
}

.mp-directory-card:hover {
  box-shadow: var(--mp-shadow-glow-hover) !important;
}

.mp-directory-card__head,
.mp-profile-identity {
  display: flex;
  align-items: center;
  gap: var(--mp-space-5);
}

.mp-directory-card h2,
.mp-directory-card h3 {
  margin: 0 0 6px;
  line-height: 1.2;
}

.mp-directory-card a {
  color: var(--mp-color-primary) !important;
  text-decoration: none;
}

.mp-directory-card a:hover {
  text-decoration: underline;
}

.mp-avatar {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border: 1px solid rgba(0,15,255,.18) !important;
  border-radius: var(--mp-radius-pill) !important;
  background: var(--mp-color-surface-soft);
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(17,24,39,.10);
}

.mp-avatar--md { width: 96px; height: 96px; }
.mp-avatar--lg { width: 140px; height: 140px; }
.mp-avatar--xl { width: 148px; height: 148px; }

.mp-profile-section {
  box-sizing: border-box;
  margin: 0 0 var(--mp-space-4) !important;
  padding: 18px !important;
  border: 1px solid rgba(0,15,255,.18) !important;
  border-radius: 16px !important;
  background: var(--mp-color-surface) !important;
  box-shadow: 0 0 14px rgba(0,123,255,.12), 0 6px 14px rgba(17,24,39,.04) !important;
}

.mp-profile-name {
  margin: 0;
  color: var(--mp-color-ink);
  font: 900 30px/1.15 var(--mp-font-sans);
}

.mp-profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
  margin-top: var(--mp-space-3);
}

.mp-profile-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px !important;
  border: 1px solid rgba(0,15,255,.16);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface-soft);
  color: var(--mp-color-primary) !important;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.25 !important;
  text-decoration: none;
}

.mp-profile-links a:hover {
  background: var(--mp-color-surface-blue);
  text-decoration: none;
}

/* Carrusel base: la lógica de desplazamiento sigue perteneciendo al plugin. */
.mp-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  width: 100%;
  max-width: 100%;
}

.mp-carousel__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.mp-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--mp-space-3);
  width: max-content;
  min-width: 100%;
}

.mp-carousel__button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0,15,255,.18);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary);
  cursor: pointer;
  box-shadow: var(--mp-shadow-sm);
}

.mp-carousel-card {
  border: 1px solid rgba(0,15,255,.16) !important;
  border-radius: var(--mp-radius-lg) !important;
  background: var(--mp-color-surface) !important;
  box-shadow: 0 0 12px rgba(0,123,255,.12), 0 5px 12px rgba(17,24,39,.04) !important;
}



/* Modal de gestión: variante amplia usada en paneles de usuario. */
.mp-management-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: 130px 14px 28px;
  overflow: auto;
  background: rgba(0,0,0,.62);
}

.mp-management-modal {
  position: relative;
  width: min(920px,96vw);
  max-height: calc(100vh - 170px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid rgba(0,15,255,.22);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface);
  box-shadow: 0 0 22px rgba(0,123,255,.55), 0 12px 36px rgba(0,0,0,.28);
}

.mp-management-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2147483001;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface);
  color: var(--mp-color-ink) !important;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: pointer;
}

.mp-management-close:hover {
  background: var(--mp-color-surface-muted);
  color: #000 !important;
}

@media (max-width: 720px) {
  .mp-management-overlay { padding: 92px 8px 18px; }
  .mp-management-modal { width: 98vw; max-height: calc(100vh - 118px); }
}

/* Estados compactos reutilizables. */
.mp-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-surface-muted);
  color: #454545;
  font: 800 var(--mp-font-size-xs)/18px var(--mp-font-sans);
}

.mp-status-pill.is-rejected { background:#ffd6d6; color:#8a1f1f; border-color:#f4c7c7; }
.mp-status-pill.is-progress,
.mp-status-pill.is-pending { background:#ffe9c8; color:#7a4b00; border-color:#ffd79a; }
.mp-status-pill.is-inactive { background:#e6e7e8; color:#454545; border-color:#d0d1d2; }
.mp-status-pill.is-quarantine { background:#ffd9b8; color:#7a3a00; border-color:#ffc18f; }
.mp-status-pill.is-publish,
.mp-status-pill.is-public { background:#d6f5dd; color:#1c6b2a; border-color:#bfe9c9; }
.mp-status-pill.is-anonymous { background:#eef0f3; color:#3b3f45; border-color:#d7dbe0; }
.mp-status-pill.is-author { background:#e7f0ff; color:#003ea8; border-color:#b8d2ff; }

/* Adaptación móvil de los componentes de identidad. */
@media (max-width: 640px) {
  .mp-form-shell {
    padding: var(--mp-space-4) !important;
    border-radius: 12px !important;
  }

  .mp-form-shell > h1,
  .mp-form-shell > h2 {
    font-size: 26px !important;
  }

  .mp-user-nav > ul { gap: 8px; }
  .mp-user-nav__item { min-height: 52px; padding: 10px; }
  .mp-user-nav__label { display: none !important; }

  .mp-directory-card { padding: 14px !important; }
  .mp-directory-card__head,
  .mp-profile-identity { align-items: flex-start; gap: var(--mp-space-3); }
  .mp-avatar--md { width: 72px; height: 72px; }
  .mp-avatar--lg { width: 116px; height: 116px; }
  .mp-avatar--xl { width: 116px; height: 116px; }
  .mp-profile-section { padding: 14px !important; }
  .mp-profile-name { font-size: 26px; }

  .mp-carousel { gap: 6px; }
  .mp-carousel__button { width: 36px; height: 36px; }
}

/* =========================================================
   9. PUBLICACIONES Y AUDIO
   Componentes incorporados con la migración de MP Podcast Player.
   Mantienen la personalidad visual del listado público, pero permiten
   reutilizar sus patrones en la futura portada y otros plugins.
   ========================================================= */

.mp-publication-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 32px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  justify-items: stretch;
}

.mp-publication-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,123,255,.24);
  border-radius: 18px;
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-glow);
  transition: box-shadow var(--mp-transition), transform var(--mp-transition);
}

.mp-publication-card:hover { box-shadow: var(--mp-shadow-glow-hover); }
.mp-publication-card:focus-visible {
  outline: 3px solid rgba(0,123,255,.35);
  outline-offset: 5px;
}

.mp-publication-media {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mp-color-surface-muted);
}

.mp-publication-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 24px 8px rgba(255,255,255,.30),
    inset 0 0 52px 18px rgba(255,255,255,.24),
    inset 0 0 86px 32px rgba(255,255,255,.18);
}

.mp-publication-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  background: var(--mp-color-surface-muted);
}

.mp-publication-title {
  margin: 0;
  color: var(--mp-color-primary);
  font: 900 clamp(1.35rem,2.6vw,2.05rem)/1.15 var(--mp-font-sans);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.mp-publication-title--overlay {
  position: absolute;
  z-index: 4;
  top: 18px;
  left: 18px;
  right: 18px;
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 20px rgba(255,255,255,.98),
    0 0 38px rgba(255,255,255,.96),
    0 0 62px rgba(255,255,255,.92),
    0 2px 6px rgba(255,255,255,.96);
}

.mp-publication-title a { color: inherit !important; text-decoration: none !important; }

.mp-audio-play-overlay {
  position: absolute;
  z-index: 5;
  left: 18px;
  bottom: 16px;
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mp-color-primary);
  font: 900 54px/1 var(--mp-font-sans);
  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,1),
    0 0 20px rgba(255,255,255,.98),
    0 0 38px rgba(255,255,255,.96),
    0 0 62px rgba(255,255,255,.92),
    0 2px 6px rgba(255,255,255,.96);
  cursor: pointer;
  transition: transform var(--mp-transition);
}
.mp-audio-play-overlay:hover,
.mp-audio-play-overlay:focus-visible { transform: scale(1.04); outline: none; }
.mp-audio-play-overlay.is-playing { font-size: 42px; }

.mp-audio-inline {
  display: none;
  width: 100%;
  padding: 14px 4px 0;
}
.mp-publication-card.is-audio-open .mp-audio-inline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}

.mp-audio-time {
  color: var(--mp-color-ink);
  font-weight: 700;
  font-size: .92rem;
  text-align: center;
}

.mp-audio-progress {
  --seek-fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: linear-gradient(to right,#a5b4ff 0 var(--seek-fill),#e5e7eb var(--seek-fill) 100%);
  outline: none;
  cursor: pointer;
}
.mp-audio-progress::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: var(--mp-radius-pill);
  background: linear-gradient(to right,#a5b4ff 0 var(--seek-fill),#e5e7eb var(--seek-fill) 100%);
}
.mp-audio-progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -5px;
  border: 2px solid var(--mp-color-primary);
  border-radius: var(--mp-radius-pill);
  background: #fff;
}
.mp-audio-progress::-moz-range-track { height:7px; border-radius:var(--mp-radius-pill); background:#e5e7eb; }
.mp-audio-progress::-moz-range-progress { height:7px; border-radius:var(--mp-radius-pill); background:#a5b4ff; }
.mp-audio-progress::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 2px solid var(--mp-color-primary);
  border-radius: var(--mp-radius-pill);
  background: #fff;
}
.mp-audio-progress:disabled { opacity:.38; cursor:not-allowed; }

.mp-publication-body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

.mp-publication-summary {
  margin: 0;
  color: var(--mp-color-muted);
  font-size: .95rem;
  line-height: 1.35;
  text-align: justify;
}

.mp-author-compact {
  margin: 0;
  min-height: 78px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,15,255,.16);
  border-radius: 14px;
  background: var(--mp-color-surface);
  box-shadow: 0 0 14px rgba(0,98,255,.22);
  text-align: center;
}
.mp-author-compact__identity {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.mp-avatar--publication {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
}
.mp-author-compact__text {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--mp-color-ink);
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 800;
}
.mp-author-compact__text a { color:var(--mp-color-primary) !important; font-weight:900; text-decoration:none; }
.mp-author-compact__text a:hover { text-decoration:underline; }

.mp-publication-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 42px;
}
.mp-publication-actions .mp-action-link { margin-right: auto; }

.mp-publication-icon-action {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mp-color-primary);
  cursor: pointer;
}
.mp-publication-icon-action:hover,
.mp-publication-icon-action:focus-visible { background:var(--mp-color-surface-blue); outline:none; }
.mp-publication-icon-action.is-active { background:var(--mp-color-accent); box-shadow:0 2px 8px rgba(0,15,255,.18); }
.mp-publication-icon-action svg { width:25px; height:25px; }

.mp-publication-filter-panel { display:none; }
.mp-publication-card.is-card-filters-open .mp-publication-filter-panel { display:block; }

.mp-taxonomy-list { display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; }
.mp-taxonomy-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 2px solid var(--mp-color-border);
}
.mp-taxonomy-row:last-child { border-bottom:2px solid var(--mp-color-border); }
.mp-taxonomy-label { color:var(--mp-color-muted); font-size:.9rem; font-weight:700; text-align:center; }
.mp-taxonomy-chips { width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.mp-tax-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--mp-color-primary);
  border-radius: var(--mp-radius-pill);
  background: #fff;
  color: var(--mp-color-primary);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.mp-tax-chip:hover,
.mp-tax-chip:focus-visible { background:var(--mp-color-surface-blue); outline:none; }
.mp-tax-chip.is-active { background:var(--mp-color-accent); }

/* Ventanas flotantes de publicaciones: la lógica y posición dinámica siguen en el plugin. */
.mp-publication-filter-window,
.mp-audio-queue-dock { font-family:var(--mp-font-sans); }

.mp-publication-filter-shell,
.mp-audio-queue-panel {
  border-radius: 10px;
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-float);
}

.mp-publication-filter-fields {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  align-items: end;
}

.mp-publication-filter-field { position:relative; min-width:0; }
.mp-publication-filter-field .mp-input { width:100%; min-height:44px; height:44px; }

.mp-active-filter-dock {
  border-radius: 10px;
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-float);
}

.mp-audio-queue-panel { overflow:visible; }
.mp-audio-player-head {
  margin: 0 18px 10px;
  color: var(--mp-color-ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.mp-audio-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-audio-control {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: transparent;
  color: var(--mp-color-primary);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.mp-audio-control:hover,
.mp-audio-control:focus-visible { background:var(--mp-color-surface-blue); outline:none; }
.mp-audio-control:disabled { opacity:.38; cursor:not-allowed; pointer-events:none; }
.mp-audio-rate { width:auto; min-width:72px; min-height:42px; color:var(--mp-color-primary); border-color:var(--mp-color-primary); }

.mp-queue-list { background:#fff; }
.mp-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-bottom: 1px dashed var(--mp-color-border);
  border-radius: 10px;
}
.mp-queue-item.is-active { background:var(--mp-color-accent); box-shadow:0 2px 8px rgba(0,15,255,.14); }
.mp-queue-title {
  flex:1 1 auto;
  min-width:0;
  padding:8px 6px;
  overflow:hidden;
  border:0;
  background:transparent;
  color:var(--mp-color-ink);
  font:600 15px/1.25 var(--mp-font-sans);
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.mp-queue-title:hover,
.mp-queue-title:focus-visible { color:var(--mp-color-primary); text-decoration:underline; outline:none; }
.mp-queue-remove {
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:var(--mp-radius-pill);
  background:#fff;
  color:var(--mp-color-primary);
  box-shadow:0 0 8px rgba(0,0,0,.22);
  cursor:pointer;
}
.mp-queue-remove svg { width:18px; height:18px; }

.mp-queue-empty {
  padding:18px 8px;
  color:var(--mp-color-muted);
  font-weight:600;
  text-align:center;
}

/* En MP Podcast Player estas reglas tienen prioridad sobre la capa histórica. */
.mp-ui.mp-publications-feed .mp-publication-grid { gap:32px; }
.mp-ui.mp-publications-feed .mp-publication-card { padding:14px; border-radius:18px; }
.mp-ui.mp-publications-feed .mp-publication-media { border-radius:14px; }
.mp-ui.mp-publications-feed .mp-publication-summary { color:var(--mp-color-muted); }

@media (min-width:900px) {
  .mp-publication-grid { grid-template-columns:minmax(0,60%); justify-content:center; }
}

@media (max-width:980px) {
  .mp-publication-filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px) {
  .mp-publication-grid { gap:28px; }
  .mp-publication-card { padding:12px; border-radius:16px; }
  .mp-publication-media { border-radius:12px; }
  .mp-publication-title--overlay { top:14px; left:14px; right:14px; }
  .mp-audio-play-overlay { left:14px; bottom:12px; }
  .mp-publication-filter-fields { grid-template-columns:1fr; }
  .mp-author-compact { padding:8px 10px; }
  .mp-avatar--publication { width:58px; height:58px; flex-basis:58px; }
  .mp-audio-player-controls { gap:7px; }
  .mp-audio-control { font-size:25px; padding:6px 8px; }
  .mp-audio-rate { min-width:66px; }
}

/* Muestras de la guía visual. */
.mp-styleguide-narrow-grid { max-width:560px; }
.mp-styleguide-publication-placeholder {
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,#eef6ff 0%,#dbe6ff 48%,#f7f9ff 100%);
}
.mp-styleguide-avatar-placeholder { background:linear-gradient(145deg,#eef6ff,#cfdcff); }
.mp-styleguide-audio-panel { max-width:560px; margin-top:18px; padding:16px; }




/* =========================================================
   18. LISTADOS, BÚSQUEDA Y TAXONOMÍAS
   ========================================================= */
.mp-catalog-wrap {
  width: 100%;
  margin: 2em 0;
  background: transparent;
}

.mp-catalog-wrap--compact {
  margin-top: .5em;
  margin-bottom: .5em;
}

.mp-catalog-search {
  margin: 1em 0;
}

.mp-search-field {
  position: relative;
  width: 100%;
}

.mp-ui .mp-search-input {
  width: 100%;
  margin: 20px 0 !important;
  padding-right: 52px !important;
}

.mp-search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: transparent;
  color: var(--mp-color-ink);
  font: 400 28px/1 var(--mp-font-sans);
  cursor: pointer;
}

.mp-search-submit:hover {
  background: var(--mp-color-surface-blue);
}

.mp-search-submit:focus-visible {
  outline: 2px solid var(--mp-color-primary);
  outline-offset: 2px;
}

.mp-content-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}

.mp-content-list > li {
  list-style: none !important;
}

.mp-content-list__item {
  margin: 0 !important;
}

.mp-content-list__title {
  margin: .2em 0;
  color: var(--mp-color-ink);
  font: 800 1.4em/1.3 var(--mp-font-sans);
}

.mp-content-list__title a {
  color: inherit !important;
  text-decoration: none !important;
}

.mp-content-list__title a:hover,
.mp-content-list__title a:focus-visible {
  text-decoration: underline !important;
}

.mp-content-list__summary {
  margin: .55em 0 .5em;
  color: #333;
  line-height: 1.55;
}

.mp-content-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: .2em 0;
  color: var(--mp-color-muted);
  font-size: .9em;
}

.mp-content-list__meta-item strong {
  font-weight: 800;
}

.mp-content-list__meta-item a {
  color: inherit;
  text-decoration: underline;
}

.mp-content-list__empty {
  margin: 0;
  list-style: none !important;
}

.mp-term-directory,
.mp-term-hub {
  width: 100%;
  max-width: var(--mp-content-width);
  margin: 28px auto;
}

.mp-term-hub {
  padding: 24px;
  overflow: visible;
  border: 1px solid rgba(0, 123, 255, .42);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-accent);
}

.mp-term-hub__header {
  margin: 0 0 18px;
  text-align: center;
}

.mp-term-hub__title {
  margin: 0 !important;
  color: var(--mp-color-primary) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.mp-term-hub__body {
  min-width: 0;
}

.mp-term-search,
.mp-ui .mp-term-search {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 20px !important;
  padding: 10px 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--mp-radius-md) !important;
  background: #fff !important;
  color: var(--mp-color-text) !important;
  box-shadow: var(--mp-shadow-md) !important;
  font: 400 var(--mp-font-size-md)/1.35 var(--mp-font-sans) !important;
}

.mp-term-search:focus {
  border-color: var(--mp-color-primary) !important;
  outline: none !important;
  box-shadow: var(--mp-focus-ring), var(--mp-shadow-md) !important;
}

.mp-term-list {
  display: grid !important;
  grid-template-columns: repeat(var(--mp-term-columns, 3), minmax(0, 1fr));
  gap: 9px 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  columns: auto !important;
}

.mp-term-item {
  min-width: 0;
  margin: 0 !important;
  list-style: none !important;
}

.mp-term-item[hidden] {
  display: none !important;
}

.mp-term-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #e1e7ef;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface-soft);
  color: var(--mp-color-primary) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(17,24,39,.05);
  transition: border-color var(--mp-transition), background var(--mp-transition), box-shadow var(--mp-transition), transform var(--mp-transition);
}

.mp-term-item a:hover,
.mp-term-item a:focus-visible {
  border-color: rgba(0, 15, 255, .5);
  background: var(--mp-color-surface-blue);
  color: var(--mp-color-primary) !important;
  text-decoration: none !important;
  box-shadow: var(--mp-shadow-sm);
  transform: translateY(-1px);
}

.mp-term-item__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mp-term-item__count {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 7px;
  border-radius: var(--mp-radius-pill);
  background: #fff;
  color: var(--mp-color-muted) !important;
  font-size: .86em;
  line-height: 1.35;
  text-align: center;
}

.mp-term-hub__nav,
.mp-theme-taxonomy-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 24px 0 0 !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid var(--mp-color-border-soft);
}

.mp-term-hub__nav-link,
.mp-theme-taxonomy-links > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 16px !important;
  border: 1.5px solid rgba(0,15,255,.42) !important;
  border-radius: var(--mp-radius-lg) !important;
  background: #fff !important;
  color: var(--mp-color-primary) !important;
  box-shadow: var(--mp-shadow-sm) !important;
  font-weight: 700 !important;
  text-align: center;
  text-decoration: none !important;
  transition: background var(--mp-transition), color var(--mp-transition), box-shadow var(--mp-transition), transform var(--mp-transition);
}

.mp-term-hub__nav-link:hover,
.mp-term-hub__nav-link:focus-visible,
.mp-theme-taxonomy-links > a:hover,
.mp-theme-taxonomy-links > a:focus-visible {
  background: var(--mp-color-surface-blue) !important;
  color: var(--mp-color-primary) !important;
  box-shadow: var(--mp-shadow-accent) !important;
  transform: translateY(-1px);
}

.mp-term-hub__nav-link.is-active,
.mp-term-hub__nav-link[aria-current="page"] {
  background: var(--mp-color-primary) !important;
  color: #fff !important;
  border-color: var(--mp-color-primary) !important;
}

/* Si el tema conserva temporalmente su navegación fallback, el directorio
   ya aporta la suya y evitamos mostrarla dos veces. */
.mp-term-hub + .mp-theme-taxonomy-links {
  display: none !important;
}

@media (max-width: 980px) {
  .mp-term-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 16px;
  }
}

@media (max-width: 640px) {
  .mp-term-hub {
    width: calc(100% - 24px);
    margin: 18px auto;
    padding: 16px;
  }

  .mp-term-hub__title {
    font-size: 26px !important;
  }

  .mp-term-list,
  .mp-term-hub__nav,
  .mp-theme-taxonomy-links {
    grid-template-columns: 1fr;
  }

  .mp-term-hub__nav,
  .mp-theme-taxonomy-links {
    gap: 10px;
  }
}

/* =========================================================
   19. NAVEGACIÓN GLOBAL / MP MENÚ
   ========================================================= */
.mp-global-nav {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  align-items: start;
  padding: 0 10px;
  overflow: visible;
  color: var(--mp-color-primary);
}
.mp-global-nav__lines {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-global-nav__row {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.mp-global-nav__row.is-collapsed { display:none !important; }

.mp-nav-tile {
  position: relative;
  min-width: 0;
  min-height: 66px;
  height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--mp-radius-md);
  background: var(--mp-color-surface);
  color: var(--mp-color-primary) !important;
  box-shadow: var(--mp-shadow-float);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
  transition: transform var(--mp-transition), background-color var(--mp-transition), color var(--mp-transition), opacity var(--mp-transition);
}
.mp-nav-tile:hover { text-decoration:none; }
.mp-nav-tile:hover .mp-nav-icon { transform:scale(1.07); }
.mp-nav-tile:active { transform:translateY(1px); }
.mp-nav-tile:focus-visible { outline:2px solid var(--mp-color-primary); outline-offset:2px; }
.mp-nav-tile--main { flex:1 1 0; }
.mp-nav-tile--context { flex:1 1 130px; background:var(--mp-color-primary); color:#fff !important; }
.mp-nav-tile.is-active,
.mp-nav-tile.is-open { background:#e6e6e6 !important; color:#666 !important; }
.mp-nav-tile.is-active { pointer-events:none; cursor:default; }
.mp-nav-tile--menu.is-open,
.mp-nav-tile--menu:focus,
.mp-nav-tile--menu:active { background:#fff !important; color:var(--mp-color-primary) !important; }

.mp-nav-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform var(--mp-transition);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mp-nav-icon--more { width:30px; height:30px; fill:currentColor; stroke:none; }
.mp-nav-label {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: inherit;
  font: 500 16px/1.05 var(--mp-font-sans);
  letter-spacing: .2px;
  text-align: center;
  overflow-wrap: break-word;
  opacity: .93;
}
.mp-nav-image {
  display: none;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--mp-radius-md);
}
.mp-nav-tile.has-active-filters::after,
.mp-nav-tile.has-active-queue::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-color-accent);
  box-shadow: 0 0 0 3px #fff;
}

.mp-global-nav__more-slot {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.mp-nav-tile--menu {
  width: 100%;
  min-height: 66px;
  height: 66px;
  flex: 0 0 64px;
  padding-left: 8px;
  padding-right: 8px;
  background: #fff;
  color: var(--mp-color-primary) !important;
}

.mp-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147481500;
  background: rgba(0,0,0,.32);
}
.mp-nav-backdrop[hidden],
.mp-nav-panel[hidden] { display:none !important; }
.mp-nav-panel {
  position: fixed;
  left: 50%;
  top: var(--mpm-more-panel-top, var(--mp-nav-panel-top,86px));
  z-index: 2147481600;
  width: min(480px,94vw);
  max-height: calc(100vh - var(--mpm-more-panel-top, var(--mp-nav-panel-top,86px)) - 18px);
  padding: 14px;
  overflow: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(0,123,255,.24);
  border-radius: var(--mp-radius-lg);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-float);
}
.mp-nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--mp-color-border-soft);
  color: var(--mp-color-text);
}
.mp-nav-panel__head strong { font-size:17px; }
.mp-nav-panel--no-title .mp-nav-panel__head { justify-content:flex-end; margin-bottom:4px; padding:0; border-bottom:0; }
.mp-nav-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-pill);
  background: #fff;
  color: var(--mp-color-primary);
  font: 400 28px/1 var(--mp-font-sans);
  cursor: pointer;
}
.mp-nav-close:focus-visible { outline:2px solid var(--mp-color-primary); outline-offset:2px; }
.mp-nav-panel__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
}
.mp-nav-panel__grid .mp-nav-tile {
  width: 100%;
  min-height: 68px;
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  text-align: left;
}
.mp-nav-panel__grid .mp-nav-icon { width:30px; height:30px; flex:0 0 30px; }
.mp-nav-panel__grid .mp-nav-label {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  white-space: normal;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  -webkit-line-clamp: unset;
}
.mp-nav-panel__grid .mp-nav-image { display:block; width:48px; height:48px; flex:0 0 48px; }
.mp-nav-panel__grid .has-custom-image .mp-nav-icon { display:none; }

@media (max-width:860px) {
  .mp-global-nav { grid-template-columns:minmax(0,1fr) 58px; gap:8px; padding:0 8px; }
  .mp-global-nav__lines,.mp-global-nav__row { gap:8px; }
  .mp-nav-tile { min-height:62px; height:62px; padding:8px 7px; }
  .mp-nav-tile--menu { min-height:62px; height:62px; flex-basis:58px; }
  .mp-nav-label { font-size:13.8px; }
  .mp-nav-icon { width:22px; height:22px; }
  .mp-nav-icon--more { width:28px; height:28px; }
}
@media (max-width:720px) {
  .mp-global-nav__row--main { display:none !important; }
  .mp-global-nav--no-context { grid-template-columns:1fr; }
  .mp-global-nav--no-context .mp-global-nav__lines { display:none; }
  .mp-global-nav--no-context .mp-global-nav__more-slot { grid-column:1; grid-row:1; justify-content:flex-end; }
  .mp-global-nav--no-context .mp-nav-tile--menu { width:auto; min-width:112px; flex:0 0 auto; flex-direction:row; gap:8px; padding-left:14px; padding-right:16px; }
  .mp-nav-panel { padding:12px; }
  .mp-nav-panel__grid .mp-nav-tile { min-height:64px; padding:9px 14px; }
  .mp-nav-panel__grid .mp-nav-image { width:44px; height:44px; flex-basis:44px; }
  .mp-nav-panel__grid .mp-nav-label { font-size:15px; }
}
@media (max-width:620px) {
  .mp-global-nav { grid-template-columns:minmax(0,1fr) 50px; gap:7px; padding:0 6px; }
  .mp-global-nav__lines,.mp-global-nav__row { gap:6px; }
  .mp-nav-tile { min-height:58px; height:58px; padding:6px 4px; border-radius:9px; }
  .mp-nav-tile--menu { min-height:58px; height:58px; flex-basis:50px; }
  .mp-nav-label { font-size:12px; line-height:1.02; }
  .mp-nav-icon { width:20px; height:20px; }
  .mp-nav-icon--more { width:26px; height:26px; }
  .mp-global-nav__row--context { display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
  .mp-nav-tile--context { width:100%; flex:none; }
}
@media (max-width:380px) {
  .mp-global-nav { grid-template-columns:minmax(0,1fr) 44px; gap:5px; padding:0 4px; }
  .mp-global-nav__lines,.mp-global-nav__row { gap:5px; }
  .mp-nav-tile { min-height:54px; height:54px; padding:5px 3px; }
  .mp-nav-tile--menu { min-height:54px; height:54px; flex-basis:44px; }
  .mp-nav-label { font-size:11.2px; }
  .mp-nav-icon { width:19px; height:19px; }
  .mp-nav-icon--more { width:25px; height:25px; }
  .mp-global-nav__row--context { grid-template-columns:repeat(auto-fit,minmax(55px,1fr)); }
}

/* Ajustes de navegación contextual que MP Menú utiliza en móvil. */
.mp-nav-menu-text { display:none; font:600 14px/1 var(--mp-font-sans); }
@media (max-width:720px) {
  .mp-global-nav__row--user {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .mp-global-nav__row--user .mp-nav-tile--context { width:100%; flex:none; gap:0; }
  .mp-global-nav__row--user .mp-nav-icon { display:none !important; }
  .mp-global-nav__row--user .mp-nav-label { font-size:14px; line-height:1.08; -webkit-line-clamp:2; }
  .mp-global-nav--no-context .mp-nav-menu-text { display:inline; }
}
@media (max-width:380px) {
  .mp-global-nav__row--user { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

/* =========================================================
   AUDIO INDEPENDIENTE / MP AUDIO
   ========================================================= */
.mp-audio-module {
  width: 100%;
  display: flex;
  justify-content: center;
  font-family: var(--mp-font-sans);
}

.mp-audio-frame {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(0, 123, 255, .22);
  border-radius: var(--mp-radius-xl);
  background: var(--mp-color-surface);
  box-shadow: var(--mp-shadow-accent);
}

.mp-audio-module--single .mp-audio-frame {
  padding: 20px;
}

.mp-audio-module__heading {
  margin: 0 0 18px;
  color: var(--mp-color-ink);
  font: 800 var(--mp-font-size-md)/1.3 var(--mp-font-sans);
  letter-spacing: .01em;
}

.mp-audio-native {
  display: block;
  width: min(100%, 620px);
  max-width: 620px;
  margin: 0 auto;
}

.mp-audio-current-title {
  width: min(100%, 620px);
  min-height: 1.4em;
  margin: 12px auto 18px;
  color: var(--mp-color-muted);
  font: 700 var(--mp-font-size-sm)/1.4 var(--mp-font-sans);
}

.mp-audio-module__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mp-audio-nav-btn {
  min-width: 112px;
}

.mp-styleguide-audio-standalone {
  max-width: 760px;
}

@media (max-width: 620px) {
  .mp-audio-frame {
    padding: 14px;
    border-radius: var(--mp-radius-lg);
  }
  .mp-audio-module--single .mp-audio-frame { padding: 16px; }
  .mp-audio-module__heading { margin-bottom: 14px; font-size: var(--mp-font-size-sm); }
  .mp-audio-current-title { margin: 10px auto 14px; }
  .mp-audio-module__controls { width: 100%; }
  .mp-audio-nav-btn { flex: 1 1 120px; min-width: 0; }
}



/* =========================================================
   PRIVACIDAD Y PREFERENCIAS DEL NAVEGADOR
   ========================================================= */
.mp-privacy-control {
  width: min(100%, var(--mp-reading-width));
  margin-inline: auto;
}
.mp-privacy-status {
  margin: 0;
  color: var(--mp-color-text);
  font: 600 var(--mp-font-size-md)/1.5 var(--mp-font-sans);
}
.mp-privacy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-3);
  margin-top: var(--mp-space-4);
}
.mp-privacy-noscript {
  margin: var(--mp-space-3) 0 0;
  color: var(--mp-color-muted);
  font-size: var(--mp-font-size-sm);
}
@media (max-width: 620px) {
  .mp-privacy-actions { align-items: stretch; }
  .mp-privacy-actions .mp-btn { width: 100%; }
}


/* =========================================================
   1.0.1 — NORMALIZACIÓN TRANSVERSAL DE FILTROS Y LECTURA
   ========================================================= */

/* Los filtros modales deben quedar por encima de la navegación global. */
.mp-filter-backdrop,
.mp-portal-backdrop {
  z-index: 2147482400 !important;
}
.mp-filter-panel,
.mp-filter-dialog {
  z-index: 2147482500 !important;
}
.mp-active-filters-panel,
.mp-filter-dock,
.mp-active-filter-dock {
  z-index: 2147482600 !important;
}

/* Campos de filtro: una sola escala y aspecto en toda la zona pública. */
.mp-filter-panel .mp-input,
.mp-filter-panel .mp-select,
.mp-ui .mp-filter-dialog .mp-input,
.mp-ui .mp-filter-dialog .mp-select,
.mp-ui .mp-publication-filter-window .mp-input,
.mp-ui .mp-publication-filter-window .mp-select,
.mp-ui .mp-select-combobox__input {
  min-height: 44px !important;
  height: 44px !important;
  padding: 10px 42px 10px 12px !important;
  border: 1px solid #d6dde4 !important;
  border-radius: var(--mp-radius-md) !important;
  background: #fff !important;
  color: var(--mp-color-ink) !important;
  box-shadow: var(--mp-shadow-md) !important;
  font: 500 15px/1.35 var(--mp-font-sans) !important;
  letter-spacing: 0 !important;
}
.mp-filter-panel .mp-input:focus,
.mp-filter-panel .mp-select:focus,
.mp-ui .mp-filter-dialog .mp-input:focus,
.mp-ui .mp-filter-dialog .mp-select:focus,
.mp-ui .mp-select-combobox__input:focus {
  border-color: #9ebcff !important;
  outline: 2px solid rgba(0,15,255,.10) !important;
  box-shadow: var(--mp-shadow-md), 0 0 0 1px rgba(0,15,255,.10) !important;
}

/* Lista desplegable común. Se fuerza sobre CSS heredado de los plugins. */
.mp-ui .mp-combobox__list,
.mp-ui .mp-select-combobox__list,
.mp-select-combobox__list,
.mp-pp.mp-ui .combo-list {
  padding: 6px !important;
  border: 1px solid rgba(0,123,255,.24) !important;
  border-radius: var(--mp-radius-md) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(17,24,39,.18) !important;
}
.mp-ui .mp-combobox__item,
.mp-filter-dialog .mp-combobox__item,
.mp-ui .mp-select-combobox__item,
.mp-select-combobox__item,
.mp-pp.mp-ui .combo-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #222 !important;
  font: 600 14px/1.3 var(--mp-font-sans) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.mp-ui .mp-combobox__item:hover,
.mp-ui .mp-combobox__item:focus-visible,
.mp-ui .mp-combobox__item.is-active,
.mp-ui .mp-combobox__item.active,
.mp-filter-dialog .mp-combobox__item:hover,
.mp-filter-dialog .mp-combobox__item:focus-visible,
.mp-filter-dialog .mp-combobox__item.is-active,
.mp-filter-dialog .mp-combobox__item.active,
.mp-ui .mp-select-combobox__item:hover,
.mp-ui .mp-select-combobox__item:focus-visible,
.mp-ui .mp-select-combobox__item.is-active,
.mp-select-combobox__item:hover,
.mp-select-combobox__item:focus-visible,
.mp-select-combobox__item.is-active,
.mp-pp.mp-ui .combo-item:hover,
.mp-pp.mp-ui .combo-item.active {
  background: var(--mp-color-surface-blue) !important;
  color: var(--mp-color-primary) !important;
  outline: none !important;
}
.mp-ui .mp-combobox__item[aria-selected="true"],
.mp-filter-dialog .mp-combobox__item[aria-selected="true"],
.mp-ui .mp-select-combobox__item[aria-selected="true"],
.mp-select-combobox__item[aria-selected="true"] {
  background: #e7efff !important;
  color: var(--mp-color-primary) !important;
  font-weight: 800 !important;
}

/* Mejora progresiva de select nativo: el select sigue presente para formularios/JS. */
.mp-select-combobox {
  position: relative;
  width: 100%;
}
.mp-select-combobox > select.mp-native-select--enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mp-select-combobox__input {
  padding-right: 44px !important;
  cursor: pointer !important;
  caret-color: transparent !important;
}
.mp-select-combobox .mp-combobox__toggle {
  top: 8px !important;
  right: 8px !important;
}
.mp-select-combobox__list {
  z-index: 2147482590 !important;
  max-height: 300px;
  overflow-y: auto;
}

/* Botón textual común para limpiar filtros. */
.mp-filter-clear-btn,
.mp-ui .mp-filter-clear-btn {
  width: auto;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid var(--mp-color-primary) !important;
  border-radius: var(--mp-radius-md) !important;
  background: #fff !important;
  color: var(--mp-color-primary) !important;
  box-shadow: none !important;
  font: 800 14px/1.2 var(--mp-font-sans) !important;
}
.mp-filter-clear-btn:hover,
.mp-filter-clear-btn:focus-visible {
  background: var(--mp-color-surface-blue) !important;
  color: var(--mp-color-primary) !important;
}
.mp-filter-panel .mp-filter-clear-btn,
.mp-filter-panel__actions .mp-filter-clear-btn {
  width: 100%;
}

/* Lectura larga: justificada. mp-prose es la clase explícita preferida. */
.mp-prose,
.mp-prose p,
.mp-ui .mp-card-copy,
.mp-ui .mp-reading-copy,
.mp-ui .mp-publication-summary,
.mp-ui .mp-content-list__summary {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Aplicación automática solo a textos realmente largos que ya estaban
   alineados a izquierda/start. La clase la asigna mp-estilos.js. */
.mp-auto-justify {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 640px) {
  .mp-ui .mp-combobox__item,
  .mp-ui .mp-select-combobox__item,
  .mp-select-combobox__item,
  .mp-pp.mp-ui .combo-item {
    min-height: 40px !important;
    font-size: 14px !important;
  }
}


/* =========================================================
   1.0.2 — MODALES DE FILTROS: SCROLL Y BLOQUEO SEGURO
   ========================================================= */
/* Reserva físicamente el carril del scrollbar y un pequeño margen interior.
   Evita que la barra vertical se superponga a la flecha/campo de los filtros. */
.mp-filter-panel__body,
.mp-filter-panel .mp-filter-panel__body,
.mp-filter-dialog__body,
.mp-publication-filter-window__body {
  box-sizing: border-box !important;
  scrollbar-gutter: stable !important;
  padding-right: 12px !important;
}

/* Chromium puede usar scrollbar superpuesto según plataforma; este margen
   adicional mantiene los controles alejados de su zona de arrastre. */
.mp-filter-panel__body .mp-field,
.mp-filter-panel__body .mp-select-combobox,
.mp-filter-panel__body .mp-input,
.mp-filter-panel__body .mp-select {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mp-filter-panel__body::-webkit-scrollbar,
.mp-filter-dialog__body::-webkit-scrollbar,
.mp-publication-filter-window__body::-webkit-scrollbar {
  width: 9px;
}
.mp-filter-panel__body::-webkit-scrollbar-track,
.mp-filter-dialog__body::-webkit-scrollbar-track,
.mp-publication-filter-window__body::-webkit-scrollbar-track {
  background: transparent;
}
.mp-filter-panel__body::-webkit-scrollbar-thumb,
.mp-filter-dialog__body::-webkit-scrollbar-thumb,
.mp-publication-filter-window__body::-webkit-scrollbar-thumb {
  background: rgba(79, 92, 105, .38);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Cuando un modal de filtros se porta a body debe cubrir toda interacción
   exterior, incluida la navegación superior. */
body > .mp-filter-backdrop:not([hidden]),
body > .mp-portal-backdrop:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

/* =========================================================
   1.1.0 — CONTRATO ÚNICO DE FILTROS PÚBLICOS
   ========================================================= */
/*
 * A partir de esta versión, Publicaciones, Observatorio, Autores y Libros
 * comparten una única gramática visual: opción normal, azul al pasar/seleccionar,
 * campo azul cuando contiene un filtro, espaciado lateral equivalente y listas
 * siempre por encima de la bandeja de filtros activos.
 */

/* Tipografía común: las opciones no se muestran en negrita. */
.mp-ui .mp-combobox__item,
.mp-ui .mp-select-combobox__item,
.mp-select-combobox__item,
.mp-pp.mp-ui .combo-item,
.mp-ui .mp-pp-search-suggest-item {
  font-family: var(--mp-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}
.mp-ui .mp-combobox__item[aria-selected="true"],
.mp-ui .mp-select-combobox__item[aria-selected="true"],
.mp-select-combobox__item[aria-selected="true"],
.mp-ui .mp-combobox__item.is-active,
.mp-ui .mp-select-combobox__item.is-active,
.mp-pp.mp-ui .combo-item.active {
  font-weight: 400 !important;
}

/* Un único color de interacción: azul claro + texto azul. */
.mp-ui .mp-combobox__item:hover,
.mp-ui .mp-combobox__item:focus-visible,
.mp-ui .mp-combobox__item.is-active,
.mp-ui .mp-combobox__item.active,
.mp-ui .mp-select-combobox__item:hover,
.mp-ui .mp-select-combobox__item:focus-visible,
.mp-ui .mp-select-combobox__item.is-active,
.mp-select-combobox__item:hover,
.mp-select-combobox__item:focus-visible,
.mp-select-combobox__item.is-active,
.mp-pp.mp-ui .combo-item:hover,
.mp-pp.mp-ui .combo-item:focus-visible,
.mp-pp.mp-ui .combo-item.active,
.mp-pp.mp-ui .mp-pp-search-suggest-item:hover,
.mp-pp.mp-ui .mp-pp-search-suggest-item:focus-visible,
.mp-pp.mp-ui .mp-pp-search-suggest-item.is-active {
  background: var(--mp-color-surface-blue) !important;
  color: var(--mp-color-primary) !important;
  outline: none !important;
}
.mp-pp.mp-ui .mp-pp-search-suggest-item:hover .mp-pp-search-suggest-kind,
.mp-pp.mp-ui .mp-pp-search-suggest-item:focus-visible .mp-pp-search-suggest-kind,
.mp-pp.mp-ui .mp-pp-search-suggest-item.is-active .mp-pp-search-suggest-kind {
  color: var(--mp-color-primary) !important;
}

/* El texto de los campos de filtro utiliza el mismo peso normal en todas las páginas. */
.mp-filter-panel .mp-input,
.mp-filter-panel .mp-select,
.mp-filter-dialog .mp-input,
.mp-filter-dialog .mp-select,
.mp-publication-filter-window .mp-input,
.mp-publication-filter-window .mp-select,
.mp-select-combobox__input {
  font-weight: 400 !important;
}

/* El campo que ya contiene un filtro conserva una señal azul, esté abierto o no. */
.mp-ui .mp-combobox.has-value > .mp-input,
.mp-ui .mp-combobox.is-open > .mp-input,
.mp-filter-dialog .mp-combobox.has-value > .mp-input,
.mp-filter-dialog .mp-combobox.is-open > .mp-input,
.mp-ui .mp-select-combobox.has-value > .mp-select-combobox__input,
.mp-ui .mp-select-combobox.is-open > .mp-select-combobox__input,
.mp-select-combobox.has-value > .mp-select-combobox__input,
.mp-select-combobox.is-open > .mp-select-combobox__input {
  border-color: #9ebcff !important;
  color: var(--mp-color-primary) !important;
  box-shadow: var(--mp-shadow-md), 0 0 0 1px rgba(0,15,255,.10) !important;
}

/* Los paneles desplazables reservan el mismo margen útil a ambos lados. */
.mp-filter-panel__body,
.mp-filter-panel .mp-filter-panel__body,
.mp-filter-dialog__body,
.mp-publication-filter-window__body {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Publicaciones y Observatorio todavía conservan contenedores históricos;
   se iguala aquí su sangría total con los paneles comunes de Autores/Libros. */
.mp-pp.mp-ui .mp-pp-filters-shell .mp-pp-filters-panel {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.mp-ui.mpo-observatorio .mpo-filter-modal .mpo-filter-fields,
.mpo-filter-modal.mp-filter-dialog .mpo-filter-fields {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Una lista desplegable portalizada debe estar por encima de la bandeja de
   filtros seleccionados. Esto corrige especialmente el catálogo de Libros. */
body > .mp-select-combobox__list,
body > .mp-combobox__list.mp-select-combobox__list {
  z-index: 2147482800 !important;
}

/* Si un combobox propio (Observatorio/Publicaciones) está abierto, su ventana
   sube temporalmente de capa para que la lista no pueda quedar tapada. */
.mp-filter-dialog.has-open-combo,
.mp-publication-filter-window.has-open-combo {
  z-index: 2147482750 !important;
}

@media (max-width: 640px) {
  .mp-filter-panel__body,
  .mp-filter-panel .mp-filter-panel__body,
  .mp-filter-dialog__body,
  .mp-publication-filter-window__body {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .mp-pp.mp-ui .mp-pp-filters-shell .mp-pp-filters-panel {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mp-ui.mpo-observatorio .mpo-filter-modal .mpo-filter-fields,
  .mpo-filter-modal.mp-filter-dialog .mpo-filter-fields {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   1.1.1 — RESERVA REAL PARA LA BANDEJA DE FILTROS ACTIVOS
   =========================================================
   La bandeja inferior es fija. Cuando está visible, las ventanas de filtros
   deben terminar antes de ella en vez de quedar físicamente por detrás.
   MP Estilos calcula --mp-filter-bottom-reserve desde JavaScript.
*/
:root {
  --mp-filter-bottom-reserve: 12px;
}

.mp-filter-panel {
  max-height: calc(100dvh - var(--mp-filter-panel-top,90px) - var(--mp-filter-bottom-reserve,12px)) !important;
}

@supports not (height:100dvh) {
  .mp-filter-panel {
    max-height: calc(100vh - var(--mp-filter-panel-top,90px) - var(--mp-filter-bottom-reserve,12px)) !important;
  }
}

/* El contenido desplazable acaba dentro de la propia ventana. La bandeja
   activa queda fuera de su área útil y nunca puede tapar el último filtro. */
.mp-filter-panel__body,
.mp-filter-panel .mp-filter-panel__body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}



/* =========================================================
   1.1.2 — FILTROS AUTORITATIVOS, INCLUSO PORTALIZADOS A BODY
   =========================================================
   Las ventanas de Observatorio/Autores/Libros se mueven a <body> para evitar
   contextos de apilado de Divi. Por ello, las reglas visuales comunes no deben
   depender de un ancestro .mp-ui. Estas reglas son la autoridad final.
*/
.mp-combobox__item,
.mp-select-combobox__item,
.mp-filter-dialog .mp-combobox__item,
.mp-filter-panel .mp-combobox__item,
.mp-publication-filter-window .mp-combobox__item,
.mp-pp .combo-item,
.mp-pp-search-suggest-item {
  font-family: var(--mp-font-sans) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

.mp-combobox__item[aria-selected="true"],
.mp-select-combobox__item[aria-selected="true"],
.mp-combobox__item.is-active,
.mp-combobox__item.active,
.mp-select-combobox__item.is-active,
.mp-pp .combo-item.active {
  font-weight: 400 !important;
}

.mp-filter-dialog .mp-input,
.mp-filter-dialog .mp-select,
.mp-filter-panel .mp-input,
.mp-filter-panel .mp-select,
.mp-publication-filter-window .mp-input,
.mp-publication-filter-window .mp-select,
.mp-select-combobox__input {
  font-family: var(--mp-font-sans) !important;
  font-weight: 400 !important;
}

/* Posición común de paneles del sistema MP: JS calcula esta variable desde la
   navegación/cabecera visible y deja siempre 10 px de separación. */
:root { --mp-common-filter-gap: 10px; }


/* =========================================================
   1.1.3 — GEOMETRÍA ÚNICA DE LOS FILTROS
   =========================================================
   Unifica la estructura interna completa, no solo colores/tipografía.
   Los plugins aportan campos; MP Estilos decide ancho, sangría y separación.
*/
:root {
  --mp-filter-inline: 12px;
  --mp-filter-gap: 12px;
  --mp-filter-bottom-space: 16px;
  --mp-filter-top-space: 64px;
}

/* Mismo ancho exterior en las cuatro interfaces públicas principales. */
.mp-filter-panel,
.mp-filter-dialog,
.mp-publication-filter-window {
  width: min(96vw, 1080px) !important;
  max-width: 1080px !important;
  box-sizing: border-box !important;
}

/* Autores, Libros y Observatorio: el marco exterior solo reserva la cabecera
   del modal. Toda la sangría horizontal pasa al viewport común interior. */
.mp-filter-panel,
.mp-filter-dialog {
  padding: var(--mp-filter-top-space) 0 0 !important;
}

/* Un único viewport interior. Reservar gutter a ambos lados mantiene los
   campos centrados y con la misma distancia al borde aunque haya scrollbar. */
.mp-filter-panel__body,
.mp-filter-panel .mp-filter-panel__body,
.mp-filter-dialog__body {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 var(--mp-filter-inline) var(--mp-filter-bottom-space) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--mp-filter-gap) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges !important;
}

/* Publicaciones tiene un contenedor histórico distinto; se le aplica la misma
   geometría efectiva que al viewport común. */
.mp-publication-filter-window .mp-pp-filters-panel,
.mp-pp.mp-ui .mp-pp-filters-shell .mp-pp-filters-panel {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--mp-filter-top-space) var(--mp-filter-inline) var(--mp-filter-bottom-space) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable both-edges !important;
}
.mp-publication-filter-window .filters,
.mp-pp.mp-ui .mp-pp-filters-shell .filters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--mp-filter-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Evita dobles separaciones: antes Autores sumaba gap 12 + margin 12. */
.mp-filter-panel__body > .mp-field,
.mp-filter-panel__body > .mp-filter-field,
.mp-filter-dialog__body > .mp-field,
.mp-filter-dialog__body > .mp-filter-field,
.mp-filter-panel .mp-field,
.mp-filter-dialog .mp-filter-field,
.mp-publication-filter-window .filters > .field,
.mp-publication-filter-window .filters > .mp-filter-field {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Las acciones forman parte de la misma cadencia vertical. */
.mp-filter-panel__actions,
.mp-filter-panel__body > .mp-filter-clear-btn,
.mp-filter-dialog__body > .mp-filter-clear-btn {
  margin: 0 !important;
}

/* Los wrappers de combobox nunca añaden anchura/margen por su cuenta. */
.mp-filter-panel .mp-select-combobox,
.mp-filter-dialog .mp-select-combobox,
.mp-publication-filter-window .mp-combobox,
.mp-publication-filter-window .mp-select-combobox {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  :root {
    --mp-filter-inline: 10px;
    --mp-filter-gap: 10px;
    --mp-filter-bottom-space: 14px;
    --mp-filter-top-space: 62px;
  }
}


/* =========================================================
   1.1.4 — VENTANAS FLOTANTES SEGURAS CON EL TEMA PROPIO
   ========================================================= */
:root { --mp-filter-panel-safe-top: 30px; }
.mp-filter-panel {
  top: max(var(--mp-filter-panel-safe-top), var(--mp-filter-panel-top,90px)) !important;
}


/* =========================================================
   1.1.5 — MÁRGENES SEGUROS PARA TODAS LAS VENTANAS FLOTANTES
   ========================================================= */
:root {
  --mp-floating-safe-x: 32px;
  --mp-floating-safe-y: 30px;
  --mp-floating-safe-inline-total: 64px;
}

/* Los paneles de filtros de todos los plugins comparten una única caja segura.
   El ancho deja margen suficiente para botones de cierre que sobresalen. */
.mp-filter-panel,
.mp-filter-dialog,
.mp-publication-filter-window,
.mp-pp-queue-dock {
  width: min(1080px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: calc(100vw - var(--mp-floating-safe-inline-total)) !important;
  box-sizing: border-box !important;
}

.mp-filter-panel,
.mp-filter-dialog,
.mp-publication-filter-window,
.mp-pp-queue-dock {
  top: max(var(--mp-floating-safe-y), var(--mp-common-filter-top, var(--mp-filter-panel-top, 90px))) !important;
  max-height: calc(100dvh - max(var(--mp-floating-safe-y), var(--mp-common-filter-top, var(--mp-filter-panel-top, 90px))) - var(--mp-filter-bottom-reserve, var(--mp-floating-safe-y))) !important;
}

@supports not (height: 100dvh) {
  .mp-filter-panel,
  .mp-filter-dialog,
  .mp-publication-filter-window,
  .mp-pp-queue-dock {
    max-height: calc(100vh - max(var(--mp-floating-safe-y), var(--mp-common-filter-top, var(--mp-filter-panel-top, 90px))) - var(--mp-filter-bottom-reserve, var(--mp-floating-safe-y))) !important;
  }
}

/* Diálogos centrados: nunca alcanzan los cuatro límites del viewport. */
.mp-floating-dialog {
  width: min(620px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: calc(100vw - var(--mp-floating-safe-inline-total)) !important;
  max-height: calc(100dvh - 60px) !important;
}
.mp-floating-dialog__inner {
  max-height: calc(100dvh - 68px) !important;
}

.mp-overlay {
  padding: var(--mp-floating-safe-y) var(--mp-floating-safe-x) !important;
}
.mp-modal {
  width: min(620px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 60px) !important;
}

.mp-management-overlay {
  padding-left: var(--mp-floating-safe-x) !important;
  padding-right: var(--mp-floating-safe-x) !important;
  padding-bottom: var(--mp-floating-safe-y) !important;
}
.mp-management-modal {
  width: min(920px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: 100% !important;
}

/* Menú flotante de MP Menú: mismo margen lateral y superior que el resto. */
.mp-nav-panel,
.mpm-more-panel {
  width: min(480px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: calc(100vw - var(--mp-floating-safe-inline-total)) !important;
  top: max(var(--mp-floating-safe-y), var(--mpm-more-panel-top, var(--mp-nav-panel-top, 86px))) !important;
  max-height: calc(100dvh - max(var(--mp-floating-safe-y), var(--mpm-more-panel-top, var(--mp-nav-panel-top, 86px))) - var(--mp-floating-safe-y)) !important;
}

/* Bandejas inferiores y acciones flotantes también respetan los laterales. */
.mp-active-filters-panel,
.mp-filter-dock,
.mp-active-filter-dock,
.mp-pp-active-filters-dock {
  width: min(1080px, calc(100vw - var(--mp-floating-safe-inline-total))) !important;
  max-width: calc(100vw - var(--mp-floating-safe-inline-total)) !important;
}
.mp-floating-action {
  right: max(var(--mp-floating-safe-x), env(safe-area-inset-right)) !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
}

@media (max-width: 640px) {
  :root {
    --mp-floating-safe-x: 28px;
    --mp-floating-safe-y: 26px;
    --mp-floating-safe-inline-total: 56px;
  }

  .mp-floating-dialog,
  .mp-modal {
    max-height: calc(100dvh - 52px) !important;
  }
  .mp-floating-dialog__inner {
    max-height: calc(100dvh - 60px) !important;
  }
  .mp-management-overlay {
    padding-top: max(92px, calc(var(--mp-common-filter-top, 66px) + 18px)) !important;
  }
}