/*!
 * Creators MX — Purple UI 2.3
 * Sistema visual unificado, accesible y preconfigurado.
 *
 * Esta hoja se carga después de app.css y de las variables administrables.
 * Reemplaza las capas visuales anteriores sin alterar la lógica de negocio.
 */

/* ==========================================================================
   1. TOKENS OFICIALES Y BASE
   ========================================================================== */

:root {
  color-scheme: light;
  --cmx-purple-950: #23083f;
  --cmx-purple-900: #32105a;
  --cmx-purple-800: #4b1d82;
  --cmx-purple-700: #6530c9;
  --cmx-purple-600: #6d28d9;
  --cmx-purple-500: #8b5cf6;
  --cmx-purple-400: #a855f7;
  --cmx-purple-300: #c4b5fd;
  --cmx-purple-200: #ddd2ff;
  --cmx-purple-100: #eee9ff;
  --cmx-purple-50: #f7f4fb;
  --cmx-ink: #21152f;
  --cmx-ink-soft: #6c617a;
  --cmx-white: #fff;
  --cmx-success: #047857;
  --cmx-warning: #b45309;
  --cmx-danger: #be123c;
  --cmx-info: #5b21b6;
  --cmx-container: min(var(--shell, 1280px), calc(100vw - 40px));
  --cmx-panel-shadow: 0 20px 54px rgba(32, 7, 55, .15);
  --cmx-floating-shadow: 0 26px 80px rgba(25, 5, 45, .22);
  --cmx-control-shadow: 0 2px 8px rgba(38, 10, 62, .05);
  --cmx-transition: 180ms cubic-bezier(.2, .75, .25, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html,
body.cmx-app {
  min-height: 100%;
}

html {
  background: #23083f;
}

body.cmx-app {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--page-background) !important;
  background-color: var(--gradient-bottom) !important;
  background-attachment: fixed !important;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.cmx-app::before,
body.cmx-app::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}

body.cmx-app::before {
  top: -260px;
  left: -250px;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .06) 40%, transparent 72%);
}

body.cmx-app::after {
  right: -300px;
  bottom: -320px;
  width: 850px;
  height: 850px;
  background: radial-gradient(circle, rgba(168, 85, 247, .20) 0%, rgba(109, 40, 217, .08) 44%, transparent 72%);
}

body.cmx-app main {
  position: relative;
  z-index: 1;
  display: block;
  min-height: calc(100vh - 78px);
}

body.cmx-app img,
body.cmx-app svg {
  max-width: 100%;
}

body.cmx-app a {
  color: var(--teal);
  text-decoration: none;
}

body.cmx-app a,
body.cmx-app button,
body.cmx-app input,
body.cmx-app select,
body.cmx-app textarea,
body.cmx-app summary {
  transition:
    color var(--cmx-transition),
    background-color var(--cmx-transition),
    border-color var(--cmx-transition),
    box-shadow var(--cmx-transition),
    opacity var(--cmx-transition);
}

body.cmx-app :focus-visible {
  outline: 3px solid rgba(168, 85, 247, .48);
  outline-offset: 3px;
}

body.cmx-app [hidden] {
  display: none !important;
}

body.cmx-app h1,
body.cmx-app h2,
body.cmx-app h3,
body.cmx-app h4,
body.cmx-app h5,
body.cmx-app p {
  margin-top: 0;
}

body.cmx-app h1,
body.cmx-app h2,
body.cmx-app h3,
body.cmx-app h4 {
  color: inherit;
  letter-spacing: -.025em;
}

body.cmx-app button,
body.cmx-app input,
body.cmx-app textarea,
body.cmx-app select {
  font: inherit;
}

/* ==========================================================================
   2. NAVEGACIÓN SUPERIOR
   ========================================================================== */

body.cmx-app .cmx-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  min-height: 78px;
  height: auto;
  color: var(--text);
  background: var(--nav-glass);
  border: 0;
  border-bottom: 1px solid rgba(78, 46, 103, .12);
  box-shadow: 0 8px 30px rgba(34, 7, 58, .08);
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(145%);
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(145%);
}

body.cmx-app .cmx-nav-inner {
  width: var(--cmx-container);
  min-height: 78px;
  margin: 0 auto;
  padding: 10px 2px;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
}

body.cmx-app .cmx-nav-brand {
  min-width: 0;
  display: flex;
  align-items: center;
}

body.cmx-app .cmx-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--text);
  font-weight: 900;
  letter-spacing: -.025em;
}

body.cmx-app .cmx-logo-img,
body.cmx-app .cmx-nav-brand img {
  display: block;
  width: auto;
  max-width: min(255px, 26vw);
  height: var(--cmx-logo-nav-height, 48px);
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

body.cmx-app .cmx-nav > .cmx-nav-inner > nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 12px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a:hover,
body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a.is-active,
body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a[aria-current="page"] {
  color: var(--teal);
  background: rgba(109, 40, 217, .09);
}

body.cmx-app .cmx-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: max-content;
}

body.cmx-app .cmx-theme-toggle,
body.cmx-app .cmx-bell,
body.cmx-app .cmx-menu-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: none;
  cursor: pointer;
}

body.cmx-app .cmx-theme-toggle:hover,
body.cmx-app .cmx-bell:hover,
body.cmx-app .cmx-menu-toggle:hover {
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-color: rgba(109, 40, 217, .28);
  transform: none;
}

body.cmx-app .cmx-theme-toggle:active,
body.cmx-app .cmx-bell:active,
body.cmx-app .cmx-menu-toggle:active {
  transform: none;
}

body.cmx-app .cmx-theme-toggle .cmx-theme-sun,
body.cmx-app .cmx-theme-toggle .cmx-theme-moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

body.cmx-app .cmx-theme-toggle .cmx-theme-moon {
  opacity: 0;
  transform: scale(.72);
}

html[data-theme="dark"] body.cmx-app .cmx-theme-toggle .cmx-theme-sun {
  opacity: 0;
  transform: scale(.72);
}

html[data-theme="dark"] body.cmx-app .cmx-theme-toggle .cmx-theme-moon {
  opacity: 1;
  transform: scale(1);
}

body.cmx-app .cmx-bell .cmx-nav-badge,
body.cmx-app .cmx-tab-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: #fff;
  background: linear-gradient(135deg, #c026d3, #7c3aed);
  border: 2px solid var(--nav-bg);
  border-radius: 999px;
  font-size: .61rem;
  font-weight: 900;
  line-height: 1;
}

body.cmx-app .cmx-bell .cmx-nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
}

body.cmx-app .cmx-menu-toggle {
  display: none;
  width: auto;
  min-width: 42px;
  padding-inline: 12px;
  gap: 8px;
}

body.cmx-app .cmx-menu-label {
  display: none;
  font-size: .75rem;
  font-weight: 850;
}

body.cmx-app .cmx-burger {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

body.cmx-app .cmx-burger i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
}

body.cmx-app .cmx-burger i:first-child {
  top: 3px;
}

body.cmx-app .cmx-burger i:last-child {
  bottom: 3px;
}

body.cmx-app .cmx-menu-shade {
  position: fixed;
  inset: 0;
  z-index: 880;
  pointer-events: none;
  opacity: 0;
  background: rgba(20, 5, 35, .52);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ==========================================================================
   3. CONTENEDORES, TARJETAS Y JERARQUÍA
   ========================================================================== */

body.cmx-app .cmx-workspace,
body.cmx-app .cmx-gateway,
body.cmx-app .cmx-auth-screen,
body.cmx-app .cmx-creator-onboarding,
body.cmx-app .cmx-info-page {
  width: var(--cmx-container);
  margin-inline: auto;
}

body.cmx-app .cmx-workspace {
  padding: 28px 0 54px;
}

body.cmx-app .cmx-dashboard {
  width: 100%;
  min-width: 0;
}

body.cmx-app .cmx-card,
body.cmx-app .cmx-inbox-card,
body.cmx-app .cmx-profile-edit-card,
body.cmx-app .cmx-company-profile-card,
body.cmx-app .cmx-referral-card,
body.cmx-app .cmx-finance-box,
body.cmx-app .cmx-bank-editor,
body.cmx-app .cmx-course-card,
body.cmx-app .cmx-plan-card,
body.cmx-app .cmx-campaign-editor,
body.cmx-app .cmx-manager-campaign,
body.cmx-app .cmx-admin-campaign-item,
body.cmx-app .cmx-user-row,
body.cmx-app .cmx-thread-row,
body.cmx-app .cmx-notification-list,
body.cmx-app .cmx-registration-summary {
  min-width: 0;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--cmx-panel-shadow);
}

body.cmx-app .cmx-card,
body.cmx-app .cmx-inbox-card,
body.cmx-app .cmx-profile-edit-card,
body.cmx-app .cmx-company-profile-card,
body.cmx-app .cmx-referral-card,
body.cmx-app .cmx-finance-box,
body.cmx-app .cmx-bank-editor,
body.cmx-app .cmx-course-card,
body.cmx-app .cmx-plan-card,
body.cmx-app .cmx-campaign-editor {
  padding: 24px;
}

body.cmx-app .cmx-card + .cmx-card,
body.cmx-app .cmx-panel-intro + .cmx-card,
body.cmx-app .cmx-panel-intro + .cmx-grid-2,
body.cmx-app .cmx-panel-intro + .cmx-inbox-grid,
body.cmx-app .cmx-panel-intro + form,
body.cmx-app .cmx-stat-row + .cmx-grid-2,
body.cmx-app .cmx-stat-row + .cmx-card {
  margin-top: 18px;
}

body.cmx-app .cmx-card-heading,
body.cmx-app .cmx-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

body.cmx-app .cmx-card-title h2,
body.cmx-app .cmx-card-title h3,
body.cmx-app .cmx-card-heading h2,
body.cmx-app .cmx-card-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 850;
}

body.cmx-app .cmx-card-title a,
body.cmx-app .cmx-card-heading a {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 850;
}

body.cmx-app .cmx-card-title a:hover,
body.cmx-app .cmx-card-heading a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.cmx-app .cmx-grid-2,
body.cmx-app .cmx-grid-profile,
body.cmx-app .cmx-finance-grid,
body.cmx-app .cmx-plan-grid,
body.cmx-app .cmx-inbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

body.cmx-app .cmx-panel-intro {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 23px 25px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(35, 8, 63, .74), rgba(77, 26, 135, .52)),
    rgba(35, 8, 63, .38);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 44px rgba(25, 5, 45, .14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.cmx-app .cmx-panel-intro::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -110px;
  width: 240px;
  height: 240px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 68%);
}

body.cmx-app .cmx-panel-intro h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 4px;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 900;
}

body.cmx-app .cmx-panel-intro p {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  font-weight: 600;
}

body.cmx-app .cmx-kicker,
body.cmx-app .cmx-section-pill,
body.cmx-app .cmx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #fff;
  background: rgba(35, 8, 63, .36);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
}

body.cmx-app .cmx-pill {
  padding: 8px 13px;
}

body.cmx-app .cmx-pill i {
  width: 7px;
  height: 7px;
  background: #d8b4fe;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(216, 180, 254, .14);
}

/* ==========================================================================
   4. PESTAÑAS Y NAVEGACIÓN DE PANELES
   ========================================================================== */

body.cmx-app .cmx-tabs {
  width: 100%;
  margin: 0 0 18px;
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--cmx-panel-shadow);
}

body.cmx-app .cmx-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 13px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: .76rem;
  font-weight: 820;
  white-space: nowrap;
}

body.cmx-app .cmx-tab svg {
  width: 18px;
  height: 18px;
}

body.cmx-app .cmx-tab:hover {
  color: var(--teal);
  background: rgba(109, 40, 217, .08);
}

body.cmx-app .cmx-tab.is-active,
body.cmx-app .cmx-tab[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 8px 18px rgba(109, 40, 217, .24);
}

body.cmx-app .cmx-tab.is-active .cmx-tab-badge,
body.cmx-app .cmx-tab[aria-current="page"] .cmx-tab-badge {
  color: #6d28d9;
  background: #fff;
  border-color: transparent;
}

body.cmx-app .cmx-bottomnav {
  display: none;
}

/* ==========================================================================
   5. BOTONES Y ACCIONES
   ========================================================================== */

body.cmx-app .cmx-btn,
body.cmx-app .cmx-button-ghost,
body.cmx-app .cmx-button-link,
body.cmx-app button.cmx-btn,
body.cmx-app a.cmx-btn,
body.cmx-app .cmx-demo-btn,
body.cmx-app .cmx-pdf-btn,
body.cmx-app .cmx-file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-size: .79rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

body.cmx-app .cmx-btn:hover,
body.cmx-app .cmx-button-ghost:hover,
body.cmx-app .cmx-button-link:hover,
body.cmx-app .cmx-demo-btn:hover,
body.cmx-app .cmx-pdf-btn:hover,
body.cmx-app .cmx-file-btn:hover {
  transform: none;
}

body.cmx-app .cmx-btn-primary,
body.cmx-app button:not([class]):not(.cmx-password-toggle):not(.cmx-preview-theme-button):not([data-step-target]),
body.cmx-app .cmx-wizard-next,
body.cmx-app .cmx-wizard-submit,
body.cmx-app .cmx-btn-pink {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 52%, #a855f7 100%);
  border-color: rgba(109, 40, 217, .2);
  box-shadow: 0 10px 24px rgba(109, 40, 217, .24);
}

body.cmx-app .cmx-btn-primary:hover,
body.cmx-app .cmx-wizard-next:hover,
body.cmx-app .cmx-wizard-submit:hover,
body.cmx-app .cmx-btn-pink:hover {
  color: #fff;
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #9333ea 100%);
  box-shadow: 0 14px 30px rgba(91, 33, 182, .29);
}

body.cmx-app .cmx-btn-ghost,
body.cmx-app .cmx-button-ghost,
body.cmx-app .cmx-wizard-back,
body.cmx-app .cmx-campaign-cancel-edit {
  color: var(--text);
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--cmx-control-shadow);
}

body.cmx-app .cmx-btn-ghost:hover,
body.cmx-app .cmx-button-ghost:hover,
body.cmx-app .cmx-wizard-back:hover,
body.cmx-app .cmx-campaign-cancel-edit:hover {
  color: var(--teal);
  background: var(--soft);
  border-color: rgba(109, 40, 217, .30);
}

body.cmx-app .cmx-btn-small {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: .7rem;
}

body.cmx-app .cmx-btn svg,
body.cmx-app .cmx-button-ghost svg,
body.cmx-app .cmx-button-link svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

body.cmx-app .cmx-action-list {
  display: grid;
  gap: 10px;
}

body.cmx-app .cmx-action-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  padding: 11px 12px;
  color: var(--text);
  background: var(--soft);
  border: 1px solid transparent;
  border-radius: 15px;
}

body.cmx-app .cmx-action-item:hover {
  color: var(--text);
  background: rgba(109, 40, 217, .08);
  border-color: rgba(109, 40, 217, .22);
}

body.cmx-app .cmx-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: rgba(109, 40, 217, .11);
  border-radius: 13px;
}

body.cmx-app .cmx-action-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-action-copy strong {
  color: var(--text);
  font-size: .83rem;
}

body.cmx-app .cmx-action-copy small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}

/* ==========================================================================
   6. FORMULARIOS UNIFICADOS
   ========================================================================== */

body.cmx-app .cmx-form,
body.cmx-app .cmx-profile-edit-form,
body.cmx-app .cmx-inline-form,
body.cmx-app .cmx-payments-form,
body.cmx-app .cmx-thread-form,
body.cmx-app .cmx-msg-form,
body.cmx-app .cmx-editor-form {
  min-width: 0;
  color: var(--text);
}

body.cmx-app .cmx-form label,
body.cmx-app .cmx-profile-edit-form label,
body.cmx-app .cmx-inline-form label,
body.cmx-app .cmx-payments-form label,
body.cmx-app .cmx-thread-form label,
body.cmx-app .cmx-msg-form label,
body.cmx-app .cmx-editor-form label {
  min-width: 0;
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.35;
}

body.cmx-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.cmx-app select,
body.cmx-app textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 7px 0 0;
  padding: 12px 14px;
  color: var(--text);
  caret-color: var(--teal);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: var(--input-radius);
  outline: 0;
  box-shadow: var(--cmx-control-shadow);
}

body.cmx-app textarea {
  min-height: 124px;
  resize: vertical;
  line-height: 1.55;
}

body.cmx-app select {
  padding-right: 38px;
  cursor: pointer;
}

body.cmx-app input::placeholder,
body.cmx-app textarea::placeholder {
  color: var(--muted);
  opacity: .68;
}

body.cmx-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):hover,
body.cmx-app select:hover,
body.cmx-app textarea:hover {
  border-color: rgba(109, 40, 217, .34);
}

body.cmx-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
body.cmx-app select:focus,
body.cmx-app textarea:focus {
  border-color: var(--teal);
  box-shadow: var(--ring), var(--cmx-control-shadow);
}

body.cmx-app input[type="checkbox"],
body.cmx-app input[type="radio"] {
  accent-color: var(--teal);
}

body.cmx-app .cmx-step-fields,
body.cmx-app .cmx-step-fields-secondary,
body.cmx-app .cmx-profile-edit-grid,
body.cmx-app .cmx-editor-grid,
body.cmx-app .cmx-social-fields,
body.cmx-app .cmx-bank-editor-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 17px 18px;
}

body.cmx-app .cmx-field-wide,
body.cmx-app .cmx-editor-wide,
body.cmx-app .cmx-referral-field,
body.cmx-app .cmx-password-pair,
body.cmx-app .cmx-form-section {
  grid-column: 1 / -1;
}

body.cmx-app .cmx-form-section {
  margin-top: 2px;
  padding: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
}

body.cmx-app .cmx-form-note,
body.cmx-app label > small,
body.cmx-app .cmx-control-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 600;
  line-height: 1.45;
}

body.cmx-app .cmx-check,
body.cmx-app .cmx-terms-check,
body.cmx-app .cmx-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

body.cmx-app .cmx-check input,
body.cmx-app .cmx-terms-check input,
body.cmx-app .cmx-switch-row input {
  flex: 0 0 auto;
  margin-top: 3px;
}

/* Contraseñas: ambos campos ocupan exactamente el mismo espacio. */
body.cmx-app .cmx-password-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 17px 18px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.cmx-app .cmx-password-label {
  display: grid !important;
  min-width: 0 !important;
  gap: 0 !important;
}

body.cmx-app .cmx-password-control,
body.cmx-app .cmx-password-field {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 7px !important;
}

body.cmx-app .cmx-password-control > input,
body.cmx-app .cmx-password-field > input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding-right: 50px !important;
  box-sizing: border-box !important;
}

body.cmx-app .cmx-password-control .cmx-password-toggle,
body.cmx-app .cmx-password-field .cmx-password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  scale: 1 !important;
  animation: none !important;
}

body.cmx-app .cmx-password-control .cmx-password-toggle:hover,
body.cmx-app .cmx-password-control .cmx-password-toggle:focus,
body.cmx-app .cmx-password-control .cmx-password-toggle:active,
body.cmx-app .cmx-password-field .cmx-password-toggle:hover,
body.cmx-app .cmx-password-field .cmx-password-toggle:focus,
body.cmx-app .cmx-password-field .cmx-password-toggle:active {
  top: 50% !important;
  color: var(--teal) !important;
  background: rgba(109, 40, 217, .10) !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  scale: 1 !important;
}

body.cmx-app .cmx-password-control .cmx-password-toggle:focus-visible,
body.cmx-app .cmx-password-field .cmx-password-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .18) !important;
}

body.cmx-app .cmx-password-control .cmx-password-toggle::before,
body.cmx-app .cmx-password-control .cmx-password-toggle::after,
body.cmx-app .cmx-password-field .cmx-password-toggle::before,
body.cmx-app .cmx-password-field .cmx-password-toggle::after {
  display: none !important;
  content: none !important;
}

body.cmx-app .cmx-password-toggle svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  color: currentColor !important;
  fill: none !important;
  stroke: currentColor !important;
  transform: none !important;
  pointer-events: none !important;
}

body.cmx-app .cmx-password-toggle .cmx-eye-open {
  display: block !important;
}

body.cmx-app .cmx-password-toggle .cmx-eye-closed {
  display: none !important;
}

body.cmx-app .cmx-password-toggle.is-visible .cmx-eye-open {
  display: none !important;
}

body.cmx-app .cmx-password-toggle.is-visible .cmx-eye-closed {
  display: block !important;
}

body.cmx-app .cmx-password-toggle.is-visible {
  color: var(--teal) !important;
  background: rgba(109, 40, 217, .10) !important;
}

body.cmx-app .cmx-password-status {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: -2px 0 0;
  padding: 0;
  font-size: .71rem;
  font-weight: 750;
}

body.cmx-app .cmx-validation,
body.cmx-app .cmx-password-status {
  color: var(--muted);
}

body.cmx-app .cmx-validation-ok {
  color: #047857;
}

body.cmx-app .cmx-validation-fail {
  color: #be123c;
}

body.cmx-app input.is-valid-password {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12) !important;
}

body.cmx-app input.is-invalid-password {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12) !important;
}

/* Selectores, chips y opciones. */
body.cmx-app .cmx-social-selector,
body.cmx-app .cmx-tag-picker,
body.cmx-app .cmx-campaign-interest-picker,
body.cmx-app .cmx-campaign-network-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

body.cmx-app .cmx-social-choice,
body.cmx-app .cmx-choice-card,
body.cmx-app .cmx-radio-stack label {
  color: var(--text);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

body.cmx-app .cmx-social-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  cursor: pointer;
}

body.cmx-app .cmx-social-choice:hover,
body.cmx-app .cmx-choice-card:hover {
  border-color: rgba(109, 40, 217, .38);
  background: rgba(109, 40, 217, .07);
}

body.cmx-app .cmx-social-choice:has(input:checked),
body.cmx-app .cmx-choice-card:has(input:checked) {
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-color: rgba(109, 40, 217, .42);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, .08);
}

body.cmx-app .cmx-social-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-radius: 9px;
}

/* ==========================================================================
   7. REGISTRO, WIZARDS E INICIO DE SESIÓN
   ========================================================================== */

body.cmx-app .cmx-auth-screen {
  min-height: calc(100vh - 78px);
  padding: 46px 0 64px;
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(440px, 1.12fr);
  align-items: center;
  gap: clamp(28px, 6vw, 82px);
}

body.cmx-app .cmx-auth-copy {
  color: #fff;
}

body.cmx-app .cmx-auth-copy h1 {
  max-width: 660px;
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 4.7rem);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.055em;
}

body.cmx-app .cmx-auth-copy p {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 255, 255, .80);
  font-size: clamp(.95rem, 1.7vw, 1.12rem);
  font-weight: 600;
}

body.cmx-app .cmx-auth-card,
body.cmx-app .cmx-login-box {
  width: 100%;
  max-width: 620px;
  justify-self: end;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 28px;
  box-shadow: var(--cmx-floating-shadow);
}

body.cmx-app .cmx-auth-card {
  padding: clamp(24px, 4vw, 42px);
}

body.cmx-app .cmx-login-box {
  padding: 0;
  border: 0;
  box-shadow: none;
}

body.cmx-app .cmx-login-box h2,
body.cmx-app .cmx-login-form h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.55rem;
  font-weight: 900;
}

body.cmx-app .cmx-login-form {
  display: grid;
  gap: 17px;
}

body.cmx-app .cmx-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

body.cmx-app .cmx-creator-onboarding {
  padding: 34px 0 64px;
}

body.cmx-app .cmx-creator-register-wizard,
body.cmx-app .cmx-brand-register-wizard,
body.cmx-app .cmx-campaign-wizard {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 36px);
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 28px;
  box-shadow: var(--cmx-floating-shadow);
}

body.cmx-app .cmx-wizard-heading {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

body.cmx-app .cmx-wizard-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--teal);
  background: rgba(109, 40, 217, .09);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.cmx-app .cmx-wizard-heading h2 {
  margin: 12px 0 5px;
  color: var(--text);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 900;
}

body.cmx-app .cmx-wizard-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

body.cmx-app .cmx-wizard-progress {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 24px;
  padding: 7px;
  overflow-x: auto;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
}

body.cmx-app .cmx-wizard-progress button {
  flex: 1 0 124px;
  min-height: 47px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  cursor: default;
}

body.cmx-app .cmx-wizard-progress button b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: .7rem;
}

body.cmx-app .cmx-wizard-progress button span {
  font-size: .7rem;
  font-weight: 820;
}

body.cmx-app .cmx-wizard-progress button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  box-shadow: 0 8px 20px rgba(109, 40, 217, .18);
}

body.cmx-app .cmx-wizard-progress button.is-active b {
  color: #6d28d9;
  background: #fff;
  border-color: #fff;
}

body.cmx-app .cmx-wizard-step {
  display: none;
  min-width: 0;
}

body.cmx-app .cmx-wizard-step.is-active {
  display: block;
}

body.cmx-app .cmx-step-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
}

body.cmx-app .cmx-step-title > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  border-radius: 14px;
  font-size: .75rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(109, 40, 217, .20);
}

body.cmx-app .cmx-step-title h3 {
  margin: 1px 0 3px;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 900;
}

body.cmx-app .cmx-step-title p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

body.cmx-app .cmx-wizard-actions,
body.cmx-app .cmx-campaign-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

body.cmx-app .cmx-wizard-actions .cmx-wizard-back:first-child {
  margin-right: auto;
}

/* ==========================================================================
   8. PORTADA / GATEWAY
   ========================================================================== */

body.cmx-app .cmx-gateway {
  min-height: calc(100vh - 78px);
  padding: clamp(48px, 8vw, 100px) 0 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.cmx-app .cmx-gateway-v2 {
  max-width: min(1140px, calc(100vw - 40px));
}

body.cmx-app .cmx-gateway-welcome {
  margin: 24px 0 7px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.78rem, 1.5vw, .96rem);
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.cmx-app .cmx-gateway-brand-logo {
  display: block;
  width: min(var(--cmx-logo-home-width, 340px), 78vw);
  max-height: 180px;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(22, 4, 42, .22));
}

body.cmx-app .cmx-gateway-brand-text {
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(3rem, 9vw, 7.2rem);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.07em;
  text-shadow: 0 16px 40px rgba(20, 3, 38, .28);
}

body.cmx-app .cmx-gateway-description {
  max-width: 790px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(.96rem, 1.8vw, 1.14rem);
  font-weight: 600;
  line-height: 1.65;
}

body.cmx-app .cmx-gateway-description strong,
body.cmx-app .cmx-gateway-description b {
  color: #fff;
}

body.cmx-app .cmx-gateway-grid {
  width: 100%;
  margin-top: clamp(34px, 6vw, 58px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

body.cmx-app .cmx-gateway-card {
  position: relative;
  min-width: 0;
  min-height: 232px;
  padding: 24px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  gap: 11px;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 23px;
  box-shadow: var(--cmx-floating-shadow);
}

body.cmx-app .cmx-gateway-card::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -64px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(109, 40, 217, .12), transparent 70%);
}

body.cmx-app .cmx-gateway-card:hover {
  color: var(--text);
  border-color: rgba(196, 181, 253, .85);
  box-shadow: 0 30px 82px rgba(25, 5, 45, .28);
  transform: translateY(-3px);
}

body.cmx-app .cmx-gateway-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  border-radius: 15px;
  box-shadow: 0 12px 25px rgba(109, 40, 217, .22);
}

body.cmx-app .cmx-gateway-company .cmx-gateway-icon {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
}

body.cmx-app .cmx-gateway-login .cmx-gateway-icon {
  background: linear-gradient(135deg, #4b1d82, #6d28d9);
}

body.cmx-app .cmx-gateway-card strong {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 900;
}

body.cmx-app .cmx-gateway-card small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.55;
}

body.cmx-app .cmx-gateway-card b {
  position: relative;
  z-index: 1;
  color: var(--teal);
  font-size: .76rem;
  font-weight: 900;
}

/* ==========================================================================
   9. DASHBOARDS, HÉROES Y ESTADÍSTICAS
   ========================================================================== */

body.cmx-app .cmx-profile-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}

body.cmx-app .cmx-hero-cover {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 255, 255, .22), transparent 23%),
    linear-gradient(135deg, #23083f 0%, #6530c9 56%, #a855f7 100%);
}

body.cmx-app .cmx-panel-company .cmx-hero-cover {
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 255, 255, .20), transparent 23%),
    linear-gradient(135deg, #312e81 0%, #5b5bd6 50%, #8b5cf6 100%);
}

body.cmx-app .cmx-panel-admin .cmx-hero-cover {
  background:
    radial-gradient(circle at 82% 25%, rgba(255, 255, 255, .20), transparent 23%),
    linear-gradient(135deg, #4a044e 0%, #86198f 48%, #c026d3 100%);
}

body.cmx-app .cmx-hero-cover i {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

body.cmx-app .cmx-hero-cover i:nth-child(1) {
  right: 7%;
  top: -35px;
  width: 150px;
  height: 150px;
}

body.cmx-app .cmx-hero-cover i:nth-child(2) {
  right: 17%;
  top: 48px;
  width: 78px;
  height: 78px;
}

body.cmx-app .cmx-hero-cover i:nth-child(3) {
  left: 8%;
  bottom: -72px;
  width: 190px;
  height: 190px;
}

body.cmx-app .cmx-hero-cover i:nth-child(4) {
  left: 38%;
  top: 26px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, .16);
}

body.cmx-app .cmx-hero-body {
  position: relative;
  min-height: 118px;
  margin-top: -42px;
  padding: 0 25px 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}

body.cmx-app .cmx-hero-avatar,
body.cmx-app .cmx-creator-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  overflow: visible;
  color: var(--teal);
  background: var(--soft);
  border: 5px solid var(--card);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(31, 7, 53, .16);
}

body.cmx-app .cmx-creator-avatar img,
body.cmx-app .cmx-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 19px;
}

body.cmx-app .cmx-avatar-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

body.cmx-app .cmx-hero-avatar > b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  background: #6d28d9;
  border: 3px solid var(--card);
  border-radius: 50%;
  font-size: .7rem;
}

body.cmx-app .cmx-hero-meta {
  min-width: 0;
  padding-bottom: 5px;
}

body.cmx-app .cmx-hero-meta h2 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 900;
}

body.cmx-app .cmx-hero-meta p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

body.cmx-app .cmx-hero-chips,
body.cmx-app .cmx-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.cmx-app .cmx-hero-chips span,
body.cmx-app .cmx-hero-pills span {
  padding: 5px 8px;
  color: var(--teal);
  background: rgba(109, 40, 217, .09);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 800;
}

body.cmx-app .cmx-hero-action {
  align-self: end;
  margin-bottom: 4px;
}

body.cmx-app .cmx-stat-row,
body.cmx-app .cmx-stat-row-2,
body.cmx-app .cmx-creator-stat-grid {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.cmx-app .cmx-stat-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.cmx-app .cmx-stat-card {
  min-width: 0;
  min-height: 126px;
  padding: 17px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px 12px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--cmx-panel-shadow);
}

body.cmx-app .cmx-stat-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-radius: 13px;
}

body.cmx-app .cmx-panel-company .cmx-stat-icon {
  color: var(--blue);
  background: rgba(91, 91, 214, .11);
}

body.cmx-app .cmx-panel-admin .cmx-stat-icon {
  color: var(--pink);
  background: rgba(192, 38, 211, .10);
}

body.cmx-app .cmx-stat-card strong {
  min-width: 0;
  color: var(--text);
  font-size: clamp(1.18rem, 2.3vw, 1.55rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

body.cmx-app .cmx-stat-card small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ==========================================================================
   10. LISTAS, CAMPAÑAS, POSTULACIONES Y USUARIOS
   ========================================================================== */

body.cmx-app .cmx-list-item,
body.cmx-app .cmx-campaign-item,
body.cmx-app .cmx-manager-app,
body.cmx-app .cmx-referral-row,
body.cmx-app .cmx-notification-copy,
body.cmx-app .cmx-thread-message {
  min-width: 0;
}

body.cmx-app .cmx-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

body.cmx-app .cmx-list-item:last-child {
  border-bottom: 0;
}

body.cmx-app .cmx-list-item > div {
  min-width: 0;
}

body.cmx-app .cmx-list-item strong {
  display: block;
  color: var(--text);
  font-size: .79rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

body.cmx-app .cmx-list-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 600;
}

body.cmx-app .cmx-app-mini img,
body.cmx-app .cmx-user-avatar,
body.cmx-app .cmx-referral-person img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 13px;
}

body.cmx-app .cmx-campaign-thumb,
body.cmx-app .cmx-thumb-fallback {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border: 1px solid rgba(109, 40, 217, .16);
  border-radius: 14px;
}

body.cmx-app img.cmx-campaign-thumb {
  object-fit: cover;
}

body.cmx-app .cmx-campaign-item,
body.cmx-app .cmx-admin-campaign-item,
body.cmx-app .cmx-manager-campaign {
  margin-top: 12px;
  padding: 17px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 9px 26px rgba(32, 7, 55, .07);
}

body.cmx-app .cmx-campaign-item:first-child,
body.cmx-app .cmx-admin-campaign-item:first-child {
  margin-top: 0;
}

body.cmx-app .cmx-campaign-item-head,
body.cmx-app .cmx-admin-campaign-item > header,
body.cmx-app .cmx-manager-campaign-head,
body.cmx-app .cmx-manager-app-head,
body.cmx-app .cmx-user-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

body.cmx-app .cmx-campaign-heading,
body.cmx-app .cmx-manager-campaign-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.cmx-app .cmx-campaign-heading h3,
body.cmx-app .cmx-manager-campaign-title h3,
body.cmx-app .cmx-admin-campaign-item h3 {
  margin: 0;
  color: var(--text);
  font-size: .96rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body.cmx-app .cmx-brief-meta,
body.cmx-app .cmx-status-pills,
body.cmx-app .cmx-hero-pills,
body.cmx-app .cmx-campaign-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.cmx-app .cmx-brief-meta {
  margin-top: 10px;
}

body.cmx-app .cmx-brief-meta span,
body.cmx-app .cmx-brief-row,
body.cmx-app .cmx-user-tag,
body.cmx-app .cmx-match-badge,
body.cmx-app .cmx-applied-pill,
body.cmx-app .cmx-status-pill,
body.cmx-app .cmx-empty-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 27px;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 800;
  line-height: 1;
}

body.cmx-app .cmx-campaign-detail,
body.cmx-app .cmx-thread-details,
body.cmx-app .cmx-campaign-rules,
body.cmx-app .cmx-campaign-self-check,
body.cmx-app .cmx-budget-panel,
body.cmx-app .cmx-budget-summary,
body.cmx-app .cmx-advance-note {
  margin-top: 13px;
  padding: 14px;
  color: var(--text);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
}

body.cmx-app .cmx-campaign-rules {
  border-left: 4px solid #a855f7;
}

body.cmx-app .cmx-campaign-rules strong,
body.cmx-app .cmx-campaign-self-check strong {
  color: var(--text);
}

body.cmx-app .cmx-campaign-rules span,
body.cmx-app .cmx-campaign-self-check span,
body.cmx-app .cmx-campaign-detail p,
body.cmx-app .cmx-thread-details p {
  color: var(--muted);
}

body.cmx-app .cmx-user-filters,
body.cmx-app .cmx-date-filter,
body.cmx-app .cmx-export-links {
  margin-bottom: 14px;
  padding: 13px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 15px;
}

body.cmx-app .cmx-user-filters input,
body.cmx-app .cmx-user-filters select,
body.cmx-app .cmx-date-filter input,
body.cmx-app .cmx-date-filter select {
  min-height: 42px;
  margin-top: 4px;
}

body.cmx-app .cmx-user-list,
body.cmx-app .cmx-admin-campaigns,
body.cmx-app .cmx-manager-apps {
  display: grid;
  gap: 11px;
}

body.cmx-app .cmx-user-row {
  padding: 14px;
}

body.cmx-app .cmx-user-main {
  align-items: center;
}

body.cmx-app .cmx-user-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-user-info strong {
  color: var(--text);
  font-size: .8rem;
  font-weight: 850;
}

body.cmx-app .cmx-user-info small {
  color: var(--muted);
  font-size: .67rem;
}

body.cmx-app .cmx-user-actions,
body.cmx-app .cmx-referral-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

/* ==========================================================================
   11. MENSAJES, NOTIFICACIONES Y REFERIDOS
   ========================================================================== */

body.cmx-app .cmx-inbox-grid {
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
}

body.cmx-app .cmx-inbox-card {
  padding: 18px;
}

body.cmx-app .cmx-inbox-results,
body.cmx-app .cmx-msg-list,
body.cmx-app .cmx-thread-list,
body.cmx-app .cmx-notification-list {
  display: grid;
  gap: 9px;
}

body.cmx-app .cmx-thread-row,
body.cmx-app .cmx-notification-list > *,
body.cmx-app .cmx-msg {
  padding: 13px;
}

body.cmx-app .cmx-thread-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

body.cmx-app .cmx-thread-row:hover {
  border-color: rgba(109, 40, 217, .30);
  box-shadow: 0 12px 30px rgba(32, 7, 55, .10);
}

body.cmx-app .cmx-thread-message,
body.cmx-app .cmx-msg {
  color: var(--text);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 15px;
}

body.cmx-app .cmx-thread-message.is-mine,
body.cmx-app .cmx-msg.is-mine {
  margin-left: auto;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  border-color: transparent;
}

body.cmx-app .cmx-thread-message.is-mine small,
body.cmx-app .cmx-msg.is-mine small {
  color: rgba(255, 255, 255, .74);
}

body.cmx-app .cmx-notification-copy {
  display: grid;
  gap: 3px;
}

body.cmx-app .cmx-notification-copy strong {
  color: var(--text);
  font-size: .79rem;
}

body.cmx-app .cmx-notification-copy small {
  color: var(--muted);
  font-size: .67rem;
}

body.cmx-app .cmx-notification-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-radius: 12px;
}

body.cmx-app .cmx-referral-code {
  margin-top: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--text);
  background: linear-gradient(135deg, rgba(109, 40, 217, .09), rgba(168, 85, 247, .07));
  border: 1px dashed rgba(109, 40, 217, .34);
  border-radius: 15px;
}

body.cmx-app .cmx-referral-code strong {
  color: var(--teal);
  font-size: 1.15rem;
  letter-spacing: .08em;
}

body.cmx-app .cmx-referral-row {
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

body.cmx-app .cmx-referral-row:last-child {
  border-bottom: 0;
}

body.cmx-app .cmx-referral-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.cmx-app .cmx-referral-person strong {
  color: var(--text);
}

body.cmx-app .cmx-referral-person small {
  color: var(--muted);
}

/* ==========================================================================
   12. PAGOS, CURSOS Y BLOQUES ESPECIALES
   ========================================================================== */

body.cmx-app .cmx-finance-box,
body.cmx-app .cmx-bank-details,
body.cmx-app .cmx-finance-example,
body.cmx-app .cmx-registration-summary,
body.cmx-app .cmx-personalized-email-panel,
body.cmx-app .cmx-course-information,
body.cmx-app .cmx-course-process,
body.cmx-app .cmx-fee-exchange {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

body.cmx-app .cmx-bank-details,
body.cmx-app .cmx-finance-example,
body.cmx-app .cmx-registration-summary,
body.cmx-app .cmx-personalized-email-panel,
body.cmx-app .cmx-course-information,
body.cmx-app .cmx-course-process,
body.cmx-app .cmx-fee-exchange {
  padding: 17px;
}

body.cmx-app .cmx-finance-box {
  border-top: 4px solid #a855f7;
}

body.cmx-app .cmx-bank-details {
  background: rgba(109, 40, 217, .06);
  border-color: rgba(109, 40, 217, .20);
}

body.cmx-app .cmx-course-information-header,
body.cmx-app .cmx-personalized-email-heading,
body.cmx-app .cmx-course-process-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.cmx-app .cmx-course-information-icon,
body.cmx-app .cmx-personalized-email-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: rgba(109, 40, 217, .10);
  border-radius: 13px;
}

body.cmx-app .cmx-plan-card {
  position: relative;
  overflow: hidden;
}

body.cmx-app .cmx-plan-card.is-featured,
body.cmx-app .cmx-plan-course {
  border-color: rgba(109, 40, 217, .34);
  box-shadow: 0 24px 60px rgba(70, 19, 117, .17);
}

body.cmx-app .cmx-plan-flag {
  display: inline-flex;
  padding: 6px 10px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 900;
}

body.cmx-app .cmx-plan-price {
  color: var(--text);
  font-size: 2rem;
  font-weight: 950;
}

/* ==========================================================================
   13. ESTADOS, AVISOS Y VACÍOS
   ========================================================================== */

body.cmx-app .cmx-notice,
body.cmx-app .cmx-error,
body.cmx-app .cmx-warning,
body.cmx-app .cmx-success,
body.cmx-app .cmx-info {
  margin: 0 0 16px;
  padding: 13px 15px;
  color: var(--notice-info-text);
  background: var(--notice-info-bg);
  border: 1px solid var(--notice-info-border);
  border-left-width: 4px;
  border-radius: 14px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 8px 22px rgba(32, 7, 55, .05);
}

body.cmx-app .cmx-success {
  color: var(--notice-success-text);
  background: var(--notice-success-bg);
  border-color: var(--notice-success-border);
}

body.cmx-app .cmx-warning {
  color: var(--notice-warning-text);
  background: var(--notice-warning-bg);
  border-color: var(--notice-warning-border);
}

body.cmx-app .cmx-error {
  color: var(--notice-danger-text);
  background: var(--notice-danger-bg);
  border-color: var(--notice-danger-border);
}

body.cmx-app .cmx-status-pill.is-ok,
body.cmx-app .cmx-applied-pill,
body.cmx-app .cmx-user-status-active {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

body.cmx-app .cmx-status-pill.is-wait,
body.cmx-app .cmx-user-status-paused,
body.cmx-app .cmx-advance-chip {
  color: #92400e;
  background: #fff8eb;
  border-color: #fcd9a5;
}

body.cmx-app .cmx-status-pill.is-off,
body.cmx-app .cmx-user-status-cancelled {
  color: #5f536b;
  background: #f2edf5;
  border-color: #ddd4e4;
}

body.cmx-app .cmx-status-pill.is-danger,
body.cmx-app .cmx-user-delete {
  color: #be123c !important;
  background: #fff1f4 !important;
  border-color: #fecdd7 !important;
}

body.cmx-app .cmx-match-badge {
  color: #5b21b6;
  background: #f1ecff;
  border-color: #d8ccff;
}

body.cmx-app .cmx-empty {
  min-height: 130px;
  padding: 28px 20px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  color: var(--muted);
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: 16px;
}

body.cmx-app .cmx-empty strong {
  color: var(--text);
  font-size: .87rem;
  font-weight: 850;
}

body.cmx-app .cmx-empty span {
  max-width: 460px;
  color: var(--muted);
  font-size: .72rem;
}

/* ==========================================================================
   14. ESTUDIO DE APARIENCIA — AISLADO DEL TEMA GLOBAL
   ========================================================================== */

/*
 * El editor siempre utiliza su propia superficie clara. El botón claro/oscuro
 * solo cambia la maqueta de vista previa, nunca vuelve invisibles los controles.
 */
body.cmx-app .cmx-appearance-studio,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio {
  color-scheme: light !important;
  --studio-bg: #f7f4fb;
  --studio-panel: #ffffff;
  --studio-soft: #f2edf8;
  --studio-text: #21152f;
  --studio-muted: #6c617a;
  --studio-line: #e4dbea;
  --studio-primary: #6d28d9;
  --studio-secondary: #a855f7;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 22px;
  color: var(--studio-text) !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 26px !important;
  box-shadow: var(--cmx-floating-shadow) !important;
}

body.cmx-app .cmx-appearance-studio *,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio * {
  box-sizing: border-box;
}

body.cmx-app .cmx-appearance-studio h1,
body.cmx-app .cmx-appearance-studio h2,
body.cmx-app .cmx-appearance-studio h3,
body.cmx-app .cmx-appearance-studio h4,
body.cmx-app .cmx-appearance-studio strong,
body.cmx-app .cmx-appearance-studio label,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio h1,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio h2,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio h3,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio h4,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio strong,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio label {
  color: var(--studio-text) !important;
}

body.cmx-app .cmx-appearance-studio p,
body.cmx-app .cmx-appearance-studio small,
body.cmx-app .cmx-appearance-studio .cmx-control-note,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio p,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio small,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-control-note {
  color: var(--studio-muted) !important;
}

body.cmx-app .cmx-studio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
  padding: 4px 3px 18px;
  border-bottom: 1px solid var(--studio-line);
}

body.cmx-app .cmx-studio-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--studio-primary) !important;
  font-size: .69rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.cmx-app .cmx-studio-heading h2 {
  margin: 0 0 5px;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 950;
}

body.cmx-app .cmx-studio-heading p {
  max-width: 760px;
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
}

body.cmx-app .cmx-studio-version {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #5b21b6;
  background: #f1ecff;
  border: 1px solid #d8ccff;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 900;
}

body.cmx-app .cmx-official-theme-banner {
  margin-bottom: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--studio-text);
  background:
    linear-gradient(135deg, rgba(109, 40, 217, .08), rgba(168, 85, 247, .05)),
    #fff;
  border: 1px solid #d9cdf0;
  border-radius: 17px;
}

body.cmx-app .cmx-official-theme-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  border-radius: 13px;
  box-shadow: 0 9px 22px rgba(109, 40, 217, .20);
}

body.cmx-app .cmx-official-theme-banner > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-official-theme-banner strong {
  font-size: .79rem;
  font-weight: 900;
}

body.cmx-app .cmx-official-theme-banner small {
  font-size: .68rem;
  line-height: 1.4;
}

body.cmx-app .cmx-official-theme-banner .cmx-btn {
  color: #5b21b6 !important;
  background: #fff !important;
  border-color: #d8ccff !important;
}

body.cmx-app .cmx-official-theme-banner .cmx-btn.is-confirmed {
  color: #047857 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

body.cmx-app .cmx-appearance-workbench {
  display: grid;
  grid-template-columns: minmax(310px, 390px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

body.cmx-app .cmx-appearance-sidebar,
body.cmx-app .cmx-appearance-canvas,
body.cmx-app .cmx-appearance-savebar,
html[data-theme="dark"] body.cmx-app .cmx-appearance-sidebar,
html[data-theme="dark"] body.cmx-app .cmx-appearance-canvas,
html[data-theme="dark"] body.cmx-app .cmx-appearance-savebar {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: var(--studio-text) !important;
}

body.cmx-app .cmx-appearance-sidebar {
  min-width: 0;
  padding: 13px;
  background: var(--studio-bg) !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 20px;
}

body.cmx-app .cmx-sidebar-toolbar {
  margin-bottom: 11px;
  display: grid;
  gap: 9px;
}

body.cmx-app .cmx-appearance-search {
  position: relative;
  display: block;
}

body.cmx-app .cmx-appearance-search > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 2;
  width: 17px;
  height: 17px;
  color: #78698a;
  transform: translateY(-50%);
}

body.cmx-app .cmx-appearance-search input,
html[data-theme="dark"] body.cmx-app .cmx-appearance-search input {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px 10px 40px !important;
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

body.cmx-app .cmx-editor-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-inline: 3px;
  color: #746781;
  font-size: .65rem;
  font-weight: 800;
}

body.cmx-app .cmx-editor-state i {
  width: 7px;
  height: 7px;
  background: #a99bb6;
  border-radius: 50%;
}

body.cmx-app .cmx-editor-state.is-dirty {
  color: #7c3aed;
}

body.cmx-app .cmx-editor-state.is-dirty i {
  background: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}

body.cmx-app .cmx-appearance-panels {
  display: grid;
  gap: 8px;
}

body.cmx-app .cmx-editor-accordion,
html[data-theme="dark"] body.cmx-app .cmx-editor-accordion {
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 15px !important;
  overflow: clip;
}

body.cmx-app .cmx-editor-accordion[open] {
  box-shadow: 0 8px 22px rgba(45, 16, 70, .06);
}

body.cmx-app .cmx-editor-accordion > summary {
  position: relative;
  min-height: 62px;
  padding: 11px 38px 11px 11px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 0 !important;
  cursor: pointer;
  list-style: none;
}

body.cmx-app .cmx-editor-accordion > summary::-webkit-details-marker {
  display: none;
}

body.cmx-app .cmx-editor-accordion > summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #78698a;
  border-bottom: 2px solid #78698a;
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--cmx-transition);
}

body.cmx-app .cmx-editor-accordion[open] > summary::after {
  transform: translateY(-25%) rotate(225deg);
}

body.cmx-app .cmx-accordion-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #6d28d9 !important;
  background: #f1ecff !important;
  border-radius: 11px;
}

body.cmx-app .cmx-editor-accordion > summary > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-editor-accordion > summary strong {
  font-size: .74rem;
  font-weight: 900;
}

body.cmx-app .cmx-editor-accordion > summary small {
  font-size: .61rem;
  line-height: 1.35;
}

body.cmx-app .cmx-editor-section {
  padding: 14px;
  border-top: 1px solid var(--studio-line);
  background: #fff;
}

body.cmx-app .cmx-editor-section.cmx-editor-grid,
body.cmx-app .cmx-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

body.cmx-app .cmx-editor-section label,
body.cmx-app .cmx-editor-form label {
  color: var(--studio-text) !important;
  font-size: .68rem;
  font-weight: 820;
}

body.cmx-app .cmx-editor-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.cmx-app .cmx-editor-section select,
body.cmx-app .cmx-editor-section textarea,
body.cmx-app .cmx-editor-form > * input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] body.cmx-app .cmx-editor-section input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] body.cmx-app .cmx-editor-section select,
html[data-theme="dark"] body.cmx-app .cmx-editor-section textarea {
  min-height: 42px;
  margin-top: 6px;
  padding: 9px 11px;
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

body.cmx-app .cmx-editor-section input:focus,
body.cmx-app .cmx-editor-section select:focus,
body.cmx-app .cmx-editor-section textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
}

body.cmx-app .cmx-control-heading {
  margin: 3px 0 10px;
}

body.cmx-app .cmx-control-heading:not(:first-child) {
  margin-top: 18px;
}

body.cmx-app .cmx-control-heading h4 {
  margin: 0 0 3px;
  font-size: .75rem;
  font-weight: 900;
}

body.cmx-app .cmx-control-heading p {
  margin: 0;
  font-size: .63rem;
  line-height: 1.45;
}

body.cmx-app .cmx-gradient-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.cmx-app .cmx-gradient-preset {
  min-width: 0;
  min-height: 76px;
  padding: 8px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  text-align: left;
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  cursor: pointer;
}

body.cmx-app .cmx-gradient-preset:hover,
body.cmx-app .cmx-gradient-preset.is-active {
  border-color: #a78bfa !important;
  background: #faf8ff !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .08) !important;
  transform: none !important;
}

body.cmx-app .cmx-preset-swatch {
  display: block;
  width: 42px;
  height: 54px;
  background: linear-gradient(0deg, var(--preset-c), var(--preset-b) 52%, var(--preset-a));
  border: 2px solid #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(38, 9, 63, .15);
}

body.cmx-app .cmx-gradient-preset > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-gradient-preset strong {
  font-size: .65rem;
  font-weight: 900;
}

body.cmx-app .cmx-gradient-preset small {
  font-size: .56rem;
  line-height: 1.35;
}

body.cmx-app .cmx-segmented-control {
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: var(--studio-soft);
  border: 1px solid var(--studio-line);
  border-radius: 12px;
}

body.cmx-app .cmx-segmented-control.cmx-segmented-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.cmx-app .cmx-segmented-control label {
  margin: 0;
  cursor: pointer;
}

body.cmx-app .cmx-segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.cmx-app .cmx-segmented-control span {
  min-height: 36px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #746781;
  background: transparent;
  border-radius: 9px;
  font-size: .63rem;
  font-weight: 850;
}

body.cmx-app .cmx-segmented-control input:checked + span {
  color: #5b21b6;
  background: #fff;
  box-shadow: 0 3px 10px rgba(46, 15, 75, .08);
}

body.cmx-app .cmx-range-control {
  display: grid;
  gap: 8px;
  margin-top: 11px;
  padding: 11px;
  background: var(--studio-soft);
  border: 1px solid var(--studio-line);
  border-radius: 12px;
}

body.cmx-app .cmx-control-copy {
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-control-copy strong {
  font-size: .66rem;
}

body.cmx-app .cmx-control-copy small {
  font-size: .58rem;
}

body.cmx-app .cmx-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49px;
  align-items: center;
  gap: 9px;
}

body.cmx-app .cmx-range-row input[type="range"] {
  width: 100%;
  accent-color: #6d28d9;
}

body.cmx-app .cmx-range-row output {
  color: #5b21b6;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  font-size: .59rem;
  font-weight: 900;
  text-align: center;
  line-height: 29px;
}

body.cmx-app .cmx-color-stack,
body.cmx-app .cmx-color-grid,
body.cmx-app .cmx-notice-color-groups,
body.cmx-app .cmx-editor-repeat-grid {
  display: grid;
  gap: 8px;
}

body.cmx-app .cmx-color-grid,
body.cmx-app .cmx-notice-color-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.cmx-app .cmx-color-control {
  padding: 9px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--studio-text);
  background: var(--studio-soft);
  border: 1px solid var(--studio-line);
  border-radius: 11px;
}

body.cmx-app .cmx-color-control input[type="color"] {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 10px;
  cursor: pointer;
}

body.cmx-app .cmx-color-inputs {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.cmx-app .cmx-color-inputs span {
  font-size: .62rem;
  font-weight: 850;
}

body.cmx-app .cmx-color-inputs input {
  min-height: 31px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  font-size: .6rem !important;
  text-transform: uppercase;
}

body.cmx-app .cmx-logo-upload {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--studio-text);
  background: var(--studio-soft);
  border: 1px dashed #bfaee0;
  border-radius: 13px;
  cursor: pointer;
}

body.cmx-app .cmx-logo-upload:hover {
  background: #f8f5ff;
  border-color: #8b5cf6;
}

body.cmx-app .cmx-logo-upload-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #6d28d9;
  background: #fff;
  border-radius: 11px;
}

body.cmx-app .cmx-logo-upload > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-logo-upload input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  overflow: hidden;
}

body.cmx-app .cmx-rich-editor {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 12px;
}

body.cmx-app .cmx-rich-toolbar {
  padding: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--studio-soft);
  border-bottom: 1px solid var(--studio-line);
}

body.cmx-app .cmx-rich-toolbar button {
  min-width: 30px;
  min-height: 30px;
  padding: 5px 7px;
  color: var(--studio-text) !important;
  background: #fff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.cmx-app .cmx-rich-surface,
html[data-theme="dark"] body.cmx-app .cmx-rich-surface {
  min-height: 90px;
  padding: 11px;
  color: var(--studio-text) !important;
  background: #fff !important;
  outline: 0;
  font-size: .7rem;
}

body.cmx-app .cmx-appearance-canvas {
  min-width: 0;
  padding: 13px;
  background: var(--studio-soft) !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 20px;
}

body.cmx-app .cmx-canvas-toolbar {
  margin-bottom: 11px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--studio-line);
  border-radius: 13px;
}

body.cmx-app .cmx-canvas-scenes,
body.cmx-app .cmx-canvas-devices {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.cmx-app .cmx-canvas-toolbar button {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #746781 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: .61rem;
  font-weight: 850;
  cursor: pointer;
}

body.cmx-app .cmx-canvas-toolbar button:hover,
body.cmx-app .cmx-canvas-toolbar button.is-active {
  color: #5b21b6 !important;
  background: #f1ecff !important;
}

body.cmx-app .cmx-canvas-devices button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

body.cmx-app .cmx-preview-theme-button .cmx-preview-theme-moon {
  display: none;
}

body.cmx-app .cmx-preview-theme-button.is-dark .cmx-preview-theme-sun {
  display: none;
}

body.cmx-app .cmx-preview-theme-button.is-dark .cmx-preview-theme-moon {
  display: inline;
}

body.cmx-app .cmx-preview-stage {
  min-height: 540px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(109, 40, 217, .035) 25%, transparent 25%, transparent 75%, rgba(109, 40, 217, .035) 75%),
    linear-gradient(45deg, rgba(109, 40, 217, .035) 25%, transparent 25%, transparent 75%, rgba(109, 40, 217, .035) 75%),
    #ebe5f2;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  border: 1px solid #ded4e8;
  border-radius: 15px;
}

body.cmx-app .cmx-preview-frame {
  width: 100%;
  min-width: 0;
  transition: width 220ms ease;
}

body.cmx-app .cmx-preview-frame[data-device="tablet"] {
  width: 690px;
  max-width: 100%;
}

body.cmx-app .cmx-preview-frame[data-device="mobile"] {
  width: 390px;
  max-width: 100%;
}

body.cmx-app .cmx-live-preview {
  --preview-bg: linear-gradient(0deg, #23083f, #6530c9 48%, #9270fa);
  --preview-primary: #6d28d9;
  --preview-secondary: #a855f7;
  --preview-text: #21152f;
  --preview-muted: #6c617a;
  --preview-card: rgba(255, 255, 255, .99);
  --preview-soft: #f3edf8;
  --preview-line: #e6dded;
  --preview-input: #fcfaff;
  --preview-nav: rgba(255, 255, 255, .97);
  --preview-radius: 20px;
  --preview-input-radius: 13px;
  --preview-button-radius: 13px;
  --preview-shadow: 0 20px 55px rgba(25, 7, 48, .16);
  --preview-font: "Plus Jakarta Sans", "Inter", sans-serif;
  width: 100%;
  min-height: 490px;
  overflow: hidden;
  color: var(--preview-text);
  background: #fff;
  border: 1px solid rgba(51, 21, 75, .16);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(39, 10, 64, .18);
  font-family: var(--preview-font);
}

body.cmx-app .cmx-live-preview.is-dark-preview {
  color-scheme: dark;
}

body.cmx-app .cmx-preview-browserbar {
  height: 29px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #756782;
  background: #f5f1f8;
  border-bottom: 1px solid #e2d9e9;
}

body.cmx-app .cmx-preview-browserbar i {
  width: 7px;
  height: 7px;
  background: #c7bbcF;
  border-radius: 50%;
}

body.cmx-app .cmx-preview-browserbar i:first-child {
  background: #fb7185;
}

body.cmx-app .cmx-preview-browserbar i:nth-child(2) {
  background: #fbbf24;
}

body.cmx-app .cmx-preview-browserbar i:nth-child(3) {
  background: #34d399;
}

body.cmx-app .cmx-preview-browserbar span {
  margin-left: 5px;
  font-size: 8px;
  font-weight: 750;
}

body.cmx-app .cmx-preview-page {
  min-height: 461px;
  color: var(--preview-text);
  background: var(--preview-bg);
}

body.cmx-app .cmx-preview-topbar {
  min-height: 48px;
  padding: 7px 13px;
  display: grid;
  grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--preview-text);
  background: var(--preview-nav);
  border-bottom: 1px solid var(--preview-line);
  -webkit-backdrop-filter: blur(var(--preview-blur, 16px));
  backdrop-filter: blur(var(--preview-blur, 16px));
}

body.cmx-app .cmx-preview-brand {
  min-width: 0;
  display: flex;
  align-items: center;
}

body.cmx-app .cmx-preview-brand img {
  display: block;
  width: auto;
  max-width: 120px;
  height: 25px;
  object-fit: contain;
}

body.cmx-app .cmx-preview-brand strong {
  color: var(--preview-text) !important;
  font-size: 9px;
  font-weight: 900;
}

body.cmx-app .cmx-preview-navlinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--preview-muted);
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}

body.cmx-app .cmx-preview-navlinks b {
  color: var(--preview-primary);
}

body.cmx-app .cmx-preview-navlinks i {
  font-style: normal;
}

body.cmx-app .cmx-preview-header-actions {
  display: flex;
  gap: 5px;
}

body.cmx-app .cmx-preview-header-actions i {
  width: 19px;
  height: 19px;
  background: var(--preview-soft);
  border: 1px solid var(--preview-line);
  border-radius: 6px;
}

body.cmx-app .cmx-preview-scene {
  min-height: 413px;
  padding: 27px 22px;
}

body.cmx-app .cmx-preview-home-hero {
  max-width: 530px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

body.cmx-app .cmx-preview-home-hero small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.cmx-app .cmx-preview-home-logo {
  display: block;
  width: min(210px, 65%);
  max-height: 80px;
  margin: 0 auto 7px;
  object-fit: contain;
}

body.cmx-app .cmx-preview-home-hero h3 {
  margin: 0 0 7px;
  color: #fff !important;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 950;
  line-height: 1;
}

body.cmx-app .cmx-preview-home-hero p {
  max-width: 460px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 9px;
  line-height: 1.55;
}

body.cmx-app .cmx-preview-home-hero button,
body.cmx-app .cmx-preview-form-card > button {
  min-height: 34px;
  margin-top: 15px;
  padding: 8px 13px;
  color: #5b21b6 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--preview-button-radius) !important;
  box-shadow: 0 8px 20px rgba(35, 8, 63, .18) !important;
  font-size: 8px;
  font-weight: 900;
}

body.cmx-app .cmx-preview-card-grid {
  max-width: 650px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.cmx-app .cmx-preview-card-grid article {
  min-width: 0;
  min-height: 90px;
  padding: 11px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 4px;
  color: var(--preview-text);
  background: var(--preview-card);
  border: 1px solid var(--preview-line);
  border-radius: var(--preview-radius);
  box-shadow: var(--preview-shadow);
}

body.cmx-app .cmx-preview-card-grid article > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--preview-primary);
  background: var(--preview-soft);
  border-radius: 8px;
}

body.cmx-app .cmx-preview-card-grid strong {
  color: var(--preview-text) !important;
  font-size: 8px;
  font-weight: 900;
}

body.cmx-app .cmx-preview-card-grid small {
  color: var(--preview-muted) !important;
  font-size: 6px;
}

body.cmx-app .cmx-preview-form-card,
body.cmx-app .cmx-preview-dashboard {
  max-width: 630px;
  margin: 0 auto;
  padding: 18px;
  color: var(--preview-text);
  background: var(--preview-card);
  border: 1px solid var(--preview-line);
  border-radius: var(--preview-radius);
  box-shadow: var(--preview-shadow);
}

body.cmx-app .cmx-preview-form-card header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

body.cmx-app .cmx-preview-form-card header > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  color: #fff;
  background: linear-gradient(135deg, var(--preview-primary), var(--preview-secondary));
  border-radius: 9px;
  font-size: 7px;
  font-weight: 900;
}

body.cmx-app .cmx-preview-form-card header h3 {
  margin: 1px 0 2px;
  color: var(--preview-text) !important;
  font-size: 12px;
  font-weight: 900;
}

body.cmx-app .cmx-preview-form-card header small,
body.cmx-app .cmx-preview-form-card header p {
  margin: 0;
  color: var(--preview-muted) !important;
  font-size: 6px;
}

body.cmx-app .cmx-preview-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.cmx-app .cmx-preview-form-grid label {
  color: var(--preview-text) !important;
  font-size: 6px;
  font-weight: 850;
}

body.cmx-app .cmx-preview-form-grid label > span {
  min-height: 31px;
  margin-top: 4px;
  padding: 8px;
  display: flex;
  align-items: center;
  color: var(--preview-muted);
  background: var(--preview-input);
  border: 1px solid var(--preview-line);
  border-radius: var(--preview-input-radius);
  font-size: 7px;
  font-weight: 650;
}

body.cmx-app .cmx-preview-password {
  justify-content: space-between;
}

body.cmx-app .cmx-preview-password i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: var(--preview-muted);
  font-style: normal;
}

body.cmx-app .cmx-preview-password svg {
  width: 12px !important;
  height: 12px !important;
}

body.cmx-app .cmx-preview-password-ok {
  margin-top: 8px;
  color: #047857;
  font-size: 7px;
  font-weight: 800;
}

body.cmx-app .cmx-preview-tabs {
  padding: 4px;
  display: flex;
  gap: 4px;
  overflow: hidden;
  background: var(--preview-soft);
  border: 1px solid var(--preview-line);
  border-radius: 10px;
}

body.cmx-app .cmx-preview-tabs span {
  padding: 6px 8px;
  color: var(--preview-muted);
  border-radius: 7px;
  font-size: 6px;
  font-weight: 800;
}

body.cmx-app .cmx-preview-tabs span.is-active {
  color: #fff;
  background: var(--preview-primary);
}

body.cmx-app .cmx-preview-stats {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body.cmx-app .cmx-preview-stats article {
  min-width: 0;
  padding: 9px;
  display: grid;
  gap: 2px;
  background: var(--preview-soft);
  border: 1px solid var(--preview-line);
  border-radius: 10px;
}

body.cmx-app .cmx-preview-stats small,
body.cmx-app .cmx-preview-stats i {
  color: var(--preview-muted) !important;
  font-size: 5px;
  font-style: normal;
}

body.cmx-app .cmx-preview-stats strong {
  color: var(--preview-text) !important;
  font-size: 14px;
  font-weight: 950;
}

body.cmx-app .cmx-preview-campaign {
  margin-top: 9px;
  padding: 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  background: var(--preview-soft);
  border: 1px solid var(--preview-line);
  border-radius: 10px;
}

body.cmx-app .cmx-preview-campaign > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--preview-primary);
  background: var(--preview-card);
  border-radius: 8px;
}

body.cmx-app .cmx-preview-campaign div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body.cmx-app .cmx-preview-campaign strong {
  color: var(--preview-text) !important;
  font-size: 7px;
}

body.cmx-app .cmx-preview-campaign small {
  color: var(--preview-muted) !important;
  font-size: 5px;
}

body.cmx-app .cmx-preview-campaign b {
  padding: 4px 6px;
  color: #047857 !important;
  background: #ecfdf5;
  border-radius: 999px;
  font-size: 5px;
}

body.cmx-app .cmx-live-preview.is-dark-preview .cmx-preview-browserbar {
  color: #c1b5cf;
  background: #100817;
  border-color: #3a2a49;
}

body.cmx-app .cmx-live-preview.is-dark-preview .cmx-preview-page {
  color: var(--preview-text);
}

body.cmx-app .cmx-live-preview.is-dark-preview .cmx-preview-campaign b {
  color: #6ee7b7 !important;
  background: rgba(16, 185, 129, .14);
}

body.cmx-app .cmx-canvas-help {
  margin: 9px 2px 0;
  color: #746781 !important;
  font-size: .62rem;
  font-weight: 700;
}

body.cmx-app .cmx-canvas-help span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #10b981;
  border-radius: 50%;
}

body.cmx-app .cmx-appearance-savebar {
  margin-top: 18px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--studio-text) !important;
  background: var(--studio-soft) !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 17px;
}

body.cmx-app .cmx-appearance-savebar > div:first-child {
  display: grid;
  gap: 2px;
}

body.cmx-app .cmx-appearance-savebar strong {
  font-size: .74rem;
  font-weight: 900;
}

body.cmx-app .cmx-appearance-savebar span {
  color: var(--studio-muted);
  font-size: .64rem;
}

body.cmx-app .cmx-save-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   15. PIE DE PÁGINA
   ========================================================================== */

body.cmx-app .cmx-footer {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding: 40px max(20px, calc((100vw - var(--shell, 1280px)) / 2)) 22px;
  color: rgba(255, 255, 255, .84);
  background: rgba(18, 4, 32, .48);
  border-top: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.cmx-app .cmx-footer-grid {
  width: 100%;
  max-width: var(--shell, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(150px, .7fr));
  gap: 34px;
}

body.cmx-app .cmx-footer-col {
  display: grid;
  align-content: start;
  gap: 9px;
}

body.cmx-app .cmx-footer-col > strong {
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
}

body.cmx-app .cmx-footer-col a {
  width: fit-content;
  color: rgba(255, 255, 255, .72);
  font-size: .73rem;
  font-weight: 650;
}

body.cmx-app .cmx-footer-col a:hover {
  color: #fff;
}

body.cmx-app .cmx-footer-about p {
  max-width: 470px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .66);
  font-size: .75rem;
}

body.cmx-app .cmx-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-weight: 900;
}

body.cmx-app .cmx-footer-brand img {
  width: auto;
  max-width: 210px;
  height: 44px;
  object-fit: contain;
}

body.cmx-app .cmx-footer-brand > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #5b21b6;
  background: #fff;
  border-radius: 12px;
}

body.cmx-app .cmx-footer-legal {
  width: 100%;
  max-width: var(--shell, 1280px);
  margin: 28px auto 0;
  padding-top: 16px;
  color: rgba(255, 255, 255, .54);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .67rem;
}

/* ==========================================================================
   16. MODO OSCURO
   ========================================================================== */

html[data-theme="dark"] body.cmx-app {
  color: var(--text);
}

html[data-theme="dark"] body.cmx-app .cmx-nav {
  border-bottom-color: rgba(216, 180, 254, .12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a:hover,
html[data-theme="dark"] body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a.is-active,
html[data-theme="dark"] body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a[aria-current="page"] {
  color: #d8b4fe;
  background: rgba(167, 139, 250, .13);
}

html[data-theme="dark"] body.cmx-app .cmx-theme-toggle,
html[data-theme="dark"] body.cmx-app .cmx-bell,
html[data-theme="dark"] body.cmx-app .cmx-menu-toggle {
  color: var(--text);
  background: var(--soft);
  border-color: var(--line);
}

html[data-theme="dark"] body.cmx-app .cmx-card,
html[data-theme="dark"] body.cmx-app .cmx-inbox-card,
html[data-theme="dark"] body.cmx-app .cmx-profile-edit-card,
html[data-theme="dark"] body.cmx-app .cmx-company-profile-card,
html[data-theme="dark"] body.cmx-app .cmx-referral-card,
html[data-theme="dark"] body.cmx-app .cmx-finance-box,
html[data-theme="dark"] body.cmx-app .cmx-bank-editor,
html[data-theme="dark"] body.cmx-app .cmx-course-card,
html[data-theme="dark"] body.cmx-app .cmx-plan-card,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor,
html[data-theme="dark"] body.cmx-app .cmx-manager-campaign,
html[data-theme="dark"] body.cmx-app .cmx-admin-campaign-item,
html[data-theme="dark"] body.cmx-app .cmx-user-row,
html[data-theme="dark"] body.cmx-app .cmx-thread-row,
html[data-theme="dark"] body.cmx-app .cmx-notification-list,
html[data-theme="dark"] body.cmx-app .cmx-registration-summary,
html[data-theme="dark"] body.cmx-app .cmx-auth-card,
html[data-theme="dark"] body.cmx-app .cmx-creator-register-wizard,
html[data-theme="dark"] body.cmx-app .cmx-brand-register-wizard,
html[data-theme="dark"] body.cmx-app .cmx-campaign-wizard,
html[data-theme="dark"] body.cmx-app .cmx-gateway-card {
  color: var(--text);
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] body.cmx-app .cmx-tabs,
html[data-theme="dark"] body.cmx-app .cmx-stat-card {
  color: var(--text);
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .25);
}

html[data-theme="dark"] body.cmx-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] body.cmx-app select,
html[data-theme="dark"] body.cmx-app textarea {
  color: var(--text);
  background: var(--input-bg);
  border-color: var(--line);
}

html[data-theme="dark"] body.cmx-app .cmx-form-section,
html[data-theme="dark"] body.cmx-app .cmx-action-item,
html[data-theme="dark"] body.cmx-app .cmx-social-choice,
html[data-theme="dark"] body.cmx-app .cmx-choice-card,
html[data-theme="dark"] body.cmx-app .cmx-campaign-detail,
html[data-theme="dark"] body.cmx-app .cmx-thread-details,
html[data-theme="dark"] body.cmx-app .cmx-campaign-rules,
html[data-theme="dark"] body.cmx-app .cmx-campaign-self-check,
html[data-theme="dark"] body.cmx-app .cmx-budget-panel,
html[data-theme="dark"] body.cmx-app .cmx-budget-summary,
html[data-theme="dark"] body.cmx-app .cmx-empty,
html[data-theme="dark"] body.cmx-app .cmx-thread-message,
html[data-theme="dark"] body.cmx-app .cmx-msg {
  color: var(--text);
  background: var(--soft);
  border-color: var(--line);
}

html[data-theme="dark"] body.cmx-app .cmx-btn-ghost,
html[data-theme="dark"] body.cmx-app .cmx-button-ghost,
html[data-theme="dark"] body.cmx-app .cmx-wizard-back,
html[data-theme="dark"] body.cmx-app .cmx-campaign-cancel-edit {
  color: var(--text);
  background: var(--soft);
  border-color: var(--line);
}

html[data-theme="dark"] body.cmx-app .cmx-status-pill.is-ok,
html[data-theme="dark"] body.cmx-app .cmx-applied-pill,
html[data-theme="dark"] body.cmx-app .cmx-user-status-active {
  color: #6ee7b7;
  background: rgba(16, 185, 129, .13);
  border-color: rgba(110, 231, 183, .24);
}

html[data-theme="dark"] body.cmx-app .cmx-status-pill.is-wait,
html[data-theme="dark"] body.cmx-app .cmx-user-status-paused,
html[data-theme="dark"] body.cmx-app .cmx-advance-chip {
  color: #fcd34d;
  background: rgba(245, 158, 11, .13);
  border-color: rgba(252, 211, 77, .24);
}

html[data-theme="dark"] body.cmx-app .cmx-status-pill.is-off {
  color: #c1b5cf;
  background: rgba(193, 181, 207, .10);
  border-color: rgba(193, 181, 207, .18);
}

html[data-theme="dark"] body.cmx-app .cmx-status-pill.is-danger,
html[data-theme="dark"] body.cmx-app .cmx-user-delete {
  color: #fda4af !important;
  background: rgba(225, 29, 72, .14) !important;
  border-color: rgba(253, 164, 175, .24) !important;
}

html[data-theme="dark"] body.cmx-app .cmx-match-badge {
  color: #d8b4fe;
  background: rgba(167, 139, 250, .13);
  border-color: rgba(216, 180, 254, .22);
}

html[data-theme="dark"] body.cmx-app .cmx-panel-intro {
  background:
    linear-gradient(135deg, rgba(7, 3, 11, .82), rgba(55, 18, 91, .66)),
    rgba(7, 3, 11, .54);
  border-color: rgba(216, 180, 254, .17);
}

html[data-theme="dark"] body.cmx-app .cmx-gateway-card small,
html[data-theme="dark"] body.cmx-app .cmx-list-item small,
html[data-theme="dark"] body.cmx-app .cmx-action-copy small {
  color: var(--muted);
}


/* La maqueta interna conserva sus propios colores incluso si el administrador
   tiene activado el tema oscuro de la plataforma. */
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-live-preview,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-page,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-topbar,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-card,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-dashboard,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-card-grid article {
  color: var(--preview-text) !important;
}

html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-brand strong,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-card-grid strong,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-card h3,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-stats strong,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-campaign strong {
  color: var(--preview-text) !important;
}

html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-navlinks,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-card-grid small,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-card header small,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-card header p,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-grid label,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-form-grid label > span,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-stats small,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-stats i,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-campaign small {
  color: var(--preview-muted) !important;
}

html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-home-hero,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-home-hero h3 {
  color: #fff !important;
}

html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-home-hero p,
html[data-theme="dark"] body.cmx-app .cmx-appearance-studio .cmx-preview-home-hero small {
  color: rgba(255, 255, 255, .82) !important;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  :root {
    --cmx-container: min(var(--shell, 1280px), calc(100vw - 30px));
  }

  body.cmx-app .cmx-nav-inner {
    gap: 14px;
  }

  body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a {
    padding-inline: 10px;
    font-size: .74rem;
  }

  body.cmx-app .cmx-stat-row,
  body.cmx-app .cmx-creator-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.cmx-app .cmx-appearance-workbench {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-appearance-sidebar,
  body.cmx-app .cmx-appearance-canvas {
    width: 100%;
  }
}

@media (max-width: 980px) {
  body.cmx-app .cmx-nav > .cmx-nav-inner > nav {
    position: fixed;
    top: 78px;
    right: 15px;
    z-index: 910;
    width: min(340px, calc(100vw - 30px));
    max-height: calc(100vh - 96px);
    padding: 10px;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--cmx-floating-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--cmx-transition), transform var(--cmx-transition);
  }

  body.cmx-app.is-menu-open .cmx-nav > .cmx-nav-inner > nav,
  body.cmx-app.menu-open .cmx-nav > .cmx-nav-inner > nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.cmx-app .cmx-nav > .cmx-nav-inner > nav > a {
    width: 100%;
    justify-content: flex-start;
    min-height: 46px;
    padding: 10px 12px;
  }

  body.cmx-app .cmx-menu-toggle {
    display: inline-flex;
  }

  body.cmx-app.is-menu-open .cmx-menu-shade,
  body.cmx-app.menu-open .cmx-menu-shade {
    opacity: 1;
    pointer-events: auto;
  }

  body.cmx-app .cmx-auth-screen {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 34px;
  }

  body.cmx-app .cmx-auth-copy {
    max-width: 760px;
    text-align: center;
    justify-self: center;
  }

  body.cmx-app .cmx-auth-copy .cmx-section-pill {
    margin-inline: auto;
  }

  body.cmx-app .cmx-auth-card {
    max-width: 720px;
    justify-self: center;
  }

  body.cmx-app .cmx-gateway-grid {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  body.cmx-app .cmx-gateway-card {
    min-height: 170px;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 14px;
  }

  body.cmx-app .cmx-gateway-card .cmx-gateway-icon {
    grid-row: 1 / 4;
  }

  body.cmx-app .cmx-gateway-card strong,
  body.cmx-app .cmx-gateway-card small,
  body.cmx-app .cmx-gateway-card b {
    grid-column: 2;
  }

  body.cmx-app .cmx-grid-2,
  body.cmx-app .cmx-grid-profile,
  body.cmx-app .cmx-finance-grid,
  body.cmx-app .cmx-plan-grid,
  body.cmx-app .cmx-inbox-grid {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-tabs {
    border-radius: 16px;
  }
}

@media (max-width: 760px) {
  :root {
    --cmx-container: calc(100vw - 22px);
  }

  body.cmx-app {
    font-size: 14px;
  }

  body.cmx-app main {
    min-height: calc(100vh - 68px);
  }

  body.cmx-app .cmx-nav {
    min-height: 68px;
  }

  body.cmx-app .cmx-nav-inner {
    min-height: 68px;
    padding-block: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  body.cmx-app .cmx-nav-brand img,
  body.cmx-app .cmx-logo-img {
    height: min(var(--cmx-logo-nav-height, 48px), 50px);
    max-width: min(230px, 54vw);
  }

  body.cmx-app .cmx-nav > .cmx-nav-inner > nav {
    top: 68px;
    right: 11px;
    width: calc(100vw - 22px);
  }

  body.cmx-app .cmx-nav-actions {
    gap: 6px;
  }

  body.cmx-app .cmx-theme-toggle,
  body.cmx-app .cmx-bell,
  body.cmx-app .cmx-menu-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  body.cmx-app .cmx-workspace {
    padding: 18px 0 92px;
  }

  body.cmx-app .cmx-tabs {
    display: none;
  }

  body.cmx-app .cmx-bottomnav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 850;
    min-height: 64px;
    padding: 6px 7px;
    display: flex;
    align-items: stretch;
    gap: 3px;
    overflow-x: auto;
    color: var(--text);
    background: var(--nav-glass);
    border: 1px solid var(--line);
    border-radius: 19px;
    box-shadow: 0 18px 54px rgba(25, 5, 45, .28);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }

  body.cmx-app .cmx-bottomnav-item {
    position: relative;
    flex: 1 0 calc((100% - 12px) / 5);
    min-width: 58px;
    padding: 5px 3px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: var(--muted);
    border-radius: 13px;
    font-size: .56rem;
    font-weight: 800;
    text-align: center;
  }

  body.cmx-app .cmx-bottomnav-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  }

  body.cmx-app .cmx-bottomnav-icon {
    position: relative;
    display: grid;
    place-items: center;
  }

  body.cmx-app .cmx-bottomnav-icon svg {
    width: 20px;
    height: 20px;
  }

  body.cmx-app .cmx-bottomnav .cmx-tab-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    border-color: var(--nav-bg);
  }

  body.cmx-app .cmx-bn-arrow {
    position: sticky;
    right: 0;
    flex: 0 0 36px;
    min-width: 36px;
    height: 50px;
    align-self: center;
    color: #fff;
    background: #6d28d9;
    border: 0;
    border-radius: 12px;
  }

  body.cmx-app .cmx-panel-intro {
    padding: 19px;
    border-radius: 18px;
  }

  body.cmx-app .cmx-card,
  body.cmx-app .cmx-inbox-card,
  body.cmx-app .cmx-profile-edit-card,
  body.cmx-app .cmx-company-profile-card,
  body.cmx-app .cmx-referral-card,
  body.cmx-app .cmx-finance-box,
  body.cmx-app .cmx-bank-editor,
  body.cmx-app .cmx-course-card,
  body.cmx-app .cmx-plan-card,
  body.cmx-app .cmx-campaign-editor {
    padding: 18px;
    border-radius: 18px;
  }

  body.cmx-app .cmx-auth-screen {
    min-height: auto;
    padding: 28px 0 48px;
  }

  body.cmx-app .cmx-auth-copy h1 {
    font-size: clamp(2rem, 12vw, 3.25rem);
  }

  body.cmx-app .cmx-auth-card,
  body.cmx-app .cmx-creator-register-wizard,
  body.cmx-app .cmx-brand-register-wizard,
  body.cmx-app .cmx-campaign-wizard {
    padding: 19px;
    border-radius: 21px;
  }

  body.cmx-app .cmx-creator-onboarding {
    padding: 18px 0 48px;
  }

  body.cmx-app .cmx-step-fields,
  body.cmx-app .cmx-step-fields-secondary,
  body.cmx-app .cmx-profile-edit-grid,
  body.cmx-app .cmx-editor-grid,
  body.cmx-app .cmx-social-fields,
  body.cmx-app .cmx-bank-editor-row,
  body.cmx-app .cmx-password-pair {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.cmx-app .cmx-field-wide,
  body.cmx-app .cmx-editor-wide,
  body.cmx-app .cmx-referral-field,
  body.cmx-app .cmx-password-pair,
  body.cmx-app .cmx-form-section {
    grid-column: 1;
  }

  body.cmx-app .cmx-password-status {
    grid-column: 1;
  }

  body.cmx-app .cmx-stat-row,
  body.cmx-app .cmx-stat-row-2,
  body.cmx-app .cmx-creator-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.cmx-app .cmx-stat-card {
    min-height: 108px;
    padding: 13px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 2px 9px;
    border-radius: 15px;
  }

  body.cmx-app .cmx-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  body.cmx-app .cmx-hero-cover {
    min-height: 116px;
  }

  body.cmx-app .cmx-hero-body {
    margin-top: -34px;
    padding: 0 17px 18px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 12px;
  }

  body.cmx-app .cmx-hero-avatar,
  body.cmx-app .cmx-creator-avatar {
    width: 76px;
    height: 76px;
    border-width: 4px;
    border-radius: 20px;
  }

  body.cmx-app .cmx-hero-avatar img,
  body.cmx-app .cmx-creator-avatar img {
    border-radius: 16px;
  }

  body.cmx-app .cmx-hero-action {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 6px;
  }

  body.cmx-app .cmx-campaign-item-head,
  body.cmx-app .cmx-admin-campaign-item > header,
  body.cmx-app .cmx-manager-campaign-head,
  body.cmx-app .cmx-manager-app-head,
  body.cmx-app .cmx-user-main {
    flex-direction: column;
  }

  body.cmx-app .cmx-user-actions,
  body.cmx-app .cmx-referral-admin-actions,
  body.cmx-app .cmx-campaign-controls {
    width: 100%;
    justify-content: flex-start;
  }

  body.cmx-app .cmx-official-theme-banner {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  body.cmx-app .cmx-official-theme-banner .cmx-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.cmx-app .cmx-appearance-studio {
    padding: 14px;
    border-radius: 20px !important;
  }

  body.cmx-app .cmx-studio-heading,
  body.cmx-app .cmx-appearance-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  body.cmx-app .cmx-studio-heading {
    display: grid;
  }

  body.cmx-app .cmx-studio-version {
    justify-self: start;
  }

  body.cmx-app .cmx-appearance-savebar {
    display: grid;
  }

  body.cmx-app .cmx-save-actions {
    width: 100%;
  }

  body.cmx-app .cmx-save-actions .cmx-btn {
    flex: 1;
  }

  body.cmx-app .cmx-gradient-presets,
  body.cmx-app .cmx-color-grid,
  body.cmx-app .cmx-notice-color-groups {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-canvas-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.cmx-app .cmx-canvas-scenes,
  body.cmx-app .cmx-canvas-devices {
    justify-content: center;
    flex-wrap: wrap;
  }

  body.cmx-app .cmx-preview-stage {
    min-height: 460px;
    padding: 8px;
  }

  body.cmx-app .cmx-preview-scene {
    padding: 20px 13px;
  }

  body.cmx-app .cmx-preview-card-grid {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-preview-form-grid {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-footer {
    padding-bottom: 94px;
  }

  body.cmx-app .cmx-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 520px) {
  :root {
    --cmx-container: calc(100vw - 16px);
  }

  body.cmx-app .cmx-nav-inner {
    width: calc(100vw - 16px);
  }

  body.cmx-app .cmx-nav-brand img,
  body.cmx-app .cmx-logo-img {
    max-width: 48vw;
    height: min(var(--cmx-logo-nav-height, 46px), 46px);
  }

  body.cmx-app .cmx-gateway {
    padding-top: 38px;
  }

  body.cmx-app .cmx-gateway-v2 {
    max-width: calc(100vw - 20px);
  }

  body.cmx-app .cmx-gateway-card {
    min-height: 190px;
    padding: 19px;
  }

  body.cmx-app .cmx-stat-row,
  body.cmx-app .cmx-stat-row-2,
  body.cmx-app .cmx-creator-stat-grid {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-stat-card {
    min-height: 92px;
  }

  body.cmx-app .cmx-login-actions,
  body.cmx-app .cmx-wizard-actions,
  body.cmx-app .cmx-campaign-controls {
    align-items: stretch;
    flex-direction: column;
  }

  body.cmx-app .cmx-login-actions .cmx-btn,
  body.cmx-app .cmx-wizard-actions .cmx-btn,
  body.cmx-app .cmx-wizard-actions button,
  body.cmx-app .cmx-campaign-controls .cmx-btn,
  body.cmx-app .cmx-campaign-controls button {
    width: 100%;
  }

  body.cmx-app .cmx-wizard-actions .cmx-wizard-back:first-child {
    margin-right: 0;
  }

  body.cmx-app .cmx-referral-code {
    align-items: stretch;
    flex-direction: column;
  }

  body.cmx-app .cmx-referral-code .cmx-btn {
    width: 100%;
  }

  body.cmx-app .cmx-save-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-segmented-control.cmx-segmented-three {
    grid-template-columns: 1fr;
  }

  body.cmx-app .cmx-preview-stage {
    min-height: 420px;
  }
}

/* ==========================================================================
   18. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.cmx-app *,
  body.cmx-app *::before,
  body.cmx-app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body.cmx-app {
    color: #21152f !important;
    background: #fff !important;
  }

  body.cmx-app .cmx-nav,
  body.cmx-app .cmx-bottomnav,
  body.cmx-app .cmx-footer,
  body.cmx-app .cmx-menu-shade {
    display: none !important;
  }

  body.cmx-app .cmx-card,
  body.cmx-app .cmx-stat-card,
  body.cmx-app .cmx-campaign-item {
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* ==========================================================================
   19. CREATORS MX 2.3 — PANELES PREMIUM Y WIZARD DE CAMPAÑA ROBUSTO
   ========================================================================== */

/* El paso visible depende primero del atributo hidden y no de JavaScript.
   Así el formulario conserva contenido útil incluso si un optimizador retrasa
   o combina app.js. JavaScript agrega is-active para navegación y animación. */
body.cmx-app .cmx-campaign-wizard .cmx-wizard-step {
  display: block;
  min-width: 0;
}

body.cmx-app .cmx-campaign-wizard .cmx-wizard-step[hidden] {
  display: none !important;
}

body.cmx-app .cmx-campaign-wizard .cmx-wizard-step.is-active:not([hidden]) {
  display: block;
  animation: cmx-step-enter .28s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes cmx-step-enter {
  from { opacity: .35; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* Base de panel más limpia: bordes legibles, profundidad contenida y la misma
   jerarquía visual en marca, creador y administración. */
body.cmx-app .cmx-dashboard {
  position: relative;
  isolation: isolate;
}

body.cmx-app .cmx-dashboard :where(
  .cmx-card,
  .cmx-stat-card,
  .cmx-manager-campaign,
  .cmx-admin-campaign-item,
  .cmx-inbox-card,
  .cmx-profile-edit-card,
  .cmx-company-profile-card,
  .cmx-referral-card,
  .cmx-finance-box,
  .cmx-bank-editor,
  .cmx-user-row,
  .cmx-thread-row
) {
  border-color: var(--line);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.cmx-app .cmx-dashboard :where(
  .cmx-card,
  .cmx-stat-card,
  .cmx-manager-campaign,
  .cmx-admin-campaign-item,
  .cmx-inbox-card,
  .cmx-profile-edit-card,
  .cmx-company-profile-card,
  .cmx-referral-card,
  .cmx-finance-box,
  .cmx-bank-editor
):hover {
  border-color: rgba(167, 139, 250, .34);
  box-shadow: 0 22px 58px rgba(22, 5, 38, .16);
}

body.cmx-app .cmx-panel-intro {
  padding: clamp(22px, 3vw, 30px);
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 180, 254, .22), transparent 31%),
    linear-gradient(135deg, rgba(31, 8, 54, .94), rgba(91, 33, 182, .82) 58%, rgba(126, 34, 206, .72));
  border-color: rgba(233, 213, 255, .25);
  box-shadow: 0 24px 60px rgba(21, 4, 38, .22);
}

body.cmx-app .cmx-panel-intro::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #d8b4fe, #8b5cf6 55%, #6d28d9);
}

body.cmx-app .cmx-panel-intro h2 {
  letter-spacing: -.035em;
}

body.cmx-app .cmx-tabs {
  padding: 8px;
  gap: 6px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 18px 48px rgba(26, 6, 46, .11);
}

body.cmx-app .cmx-tab {
  min-height: 46px;
  padding-inline: 15px;
  border: 1px solid transparent;
}

body.cmx-app .cmx-tab:hover {
  border-color: rgba(139, 92, 246, .14);
}

body.cmx-app .cmx-tab.is-active,
body.cmx-app .cmx-tab[aria-current="page"] {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #a855f7 100%);
  box-shadow: 0 10px 24px rgba(91, 33, 182, .30);
}

body.cmx-app .cmx-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 19px;
}

body.cmx-app .cmx-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  opacity: .88;
  background: linear-gradient(90deg, #6d28d9, #a855f7 58%, #d8b4fe);
}

body.cmx-app .cmx-stat-icon {
  border: 1px solid rgba(139, 92, 246, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* El encabezado del editor tenía una regla compartida con las tarjetas de
   campañas que lo convertía en una fila. Aquí recupera una jerarquía vertical. */
body.cmx-app .cmx-campaign-editor {
  position: relative;
  overflow: hidden;
  max-width: 1180px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(24, 5, 43, .20);
}

body.cmx-app .cmx-campaign-editor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #5b21b6, #8b5cf6 52%, #d8b4fe);
}

body.cmx-app .cmx-campaign-editor > .cmx-campaign-heading {
  display: grid;
  align-items: start;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}

body.cmx-app .cmx-campaign-editor > .cmx-campaign-heading > span:first-child {
  display: inline-flex;
  width: fit-content;
  min-height: 29px;
  align-items: center;
  padding: 5px 10px;
  color: var(--teal);
  background: rgba(139, 92, 246, .11);
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}

body.cmx-app .cmx-campaign-editor > .cmx-campaign-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -.045em;
}

body.cmx-app .cmx-campaign-editor > .cmx-campaign-heading p {
  max-width: 790px;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 620;
  line-height: 1.65;
}

body.cmx-app .cmx-campaign-progress {
  margin: 0 0 28px;
  padding: 8px;
  border-radius: 18px;
  background: var(--soft);
  border-color: var(--line);
}

body.cmx-app .cmx-campaign-progress button {
  min-width: 0;
  cursor: pointer;
  border: 1px solid transparent;
}

body.cmx-app .cmx-campaign-progress button:not(.is-active):hover {
  color: var(--text);
  background: var(--card);
  border-color: var(--line);
}

body.cmx-app .cmx-campaign-progress button.is-complete:not(.is-active) {
  color: var(--teal);
  background: rgba(139, 92, 246, .07);
}

body.cmx-app .cmx-step-title {
  margin-bottom: 22px;
}

body.cmx-app .cmx-step-title > div {
  min-width: 0;
}

body.cmx-app .cmx-step-title h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: -.025em;
}

body.cmx-app .cmx-step-title p {
  max-width: 760px;
  line-height: 1.55;
}

body.cmx-app .cmx-campaign-editor .cmx-step-fields {
  gap: 16px;
}

body.cmx-app .cmx-campaign-editor .cmx-step-fields > label,
body.cmx-app .cmx-campaign-editor .cmx-form-section,
body.cmx-app .cmx-campaign-editor fieldset {
  min-width: 0;
}

body.cmx-app .cmx-campaign-editor input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.cmx-app .cmx-campaign-editor select,
body.cmx-app .cmx-campaign-editor textarea {
  min-height: 50px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.cmx-app .cmx-campaign-editor textarea {
  min-height: 120px;
  resize: vertical;
}

body.cmx-app .cmx-campaign-editor input:focus,
body.cmx-app .cmx-campaign-editor select:focus,
body.cmx-app .cmx-campaign-editor textarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
}

body.cmx-app .cmx-campaign-editor .cmx-file-field,
body.cmx-app .cmx-campaign-editor .cmx-form-section,
body.cmx-app .cmx-campaign-editor .cmx-territory-selector,
body.cmx-app .cmx-campaign-editor .cmx-content-row,
body.cmx-app .cmx-campaign-editor .cmx-budget-panel {
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
}

body.cmx-app .cmx-campaign-editor .cmx-content-builder {
  gap: 12px;
}

body.cmx-app .cmx-campaign-editor .cmx-content-row {
  margin: 0;
  background: var(--soft);
}

body.cmx-app .cmx-campaign-editor .cmx-content-row b {
  min-height: 50px;
  color: var(--teal);
  background: var(--card);
  border: 1px solid var(--line);
}

body.cmx-app .cmx-campaign-editor .cmx-budget-summary {
  background:
    radial-gradient(circle at 100% 0, rgba(216, 180, 254, .12), transparent 38%),
    linear-gradient(135deg, rgba(109, 40, 217, .10), rgba(139, 92, 246, .04));
  border-color: rgba(139, 92, 246, .24);
}

body.cmx-app .cmx-wizard-actions {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

body.cmx-app :where(button, a, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, .24);
}

/* Tarjetas operativas: lectura rápida de estado y acciones en una sola línea
   cuando existe espacio, con apilamiento seguro en móvil. */
body.cmx-app .cmx-manager-campaign,
body.cmx-app .cmx-admin-campaign-item {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

body.cmx-app .cmx-manager-campaign::before,
body.cmx-app .cmx-admin-campaign-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
}

body.cmx-app .cmx-manager-campaign-head,
body.cmx-app .cmx-admin-campaign-item > header {
  align-items: center;
}

body.cmx-app .cmx-campaign-controls {
  align-items: center;
  margin-top: 14px;
}

body.cmx-app .cmx-user-filters,
body.cmx-app .cmx-date-filter,
body.cmx-app .cmx-export-links {
  background: var(--card);
  box-shadow: 0 12px 34px rgba(25, 5, 45, .08);
}

/* Modo oscuro de alta legibilidad. */
html[data-theme="dark"] body.cmx-app .cmx-tabs,
html[data-theme="dark"] body.cmx-app .cmx-stat-card,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor,
html[data-theme="dark"] body.cmx-app .cmx-manager-campaign,
html[data-theme="dark"] body.cmx-app .cmx-admin-campaign-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 42%),
    var(--card);
  border-color: rgba(216, 180, 254, .14);
}

html[data-theme="dark"] body.cmx-app .cmx-campaign-editor .cmx-file-field,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor .cmx-form-section,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor .cmx-territory-selector,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor .cmx-content-row,
html[data-theme="dark"] body.cmx-app .cmx-campaign-editor .cmx-budget-panel,
html[data-theme="dark"] body.cmx-app .cmx-campaign-progress {
  background: rgba(255, 255, 255, .026);
  border-color: rgba(216, 180, 254, .12);
}

html[data-theme="dark"] body.cmx-app .cmx-dashboard :where(
  .cmx-card,
  .cmx-stat-card,
  .cmx-manager-campaign,
  .cmx-admin-campaign-item,
  .cmx-inbox-card,
  .cmx-profile-edit-card,
  .cmx-company-profile-card,
  .cmx-referral-card,
  .cmx-finance-box,
  .cmx-bank-editor
):hover {
  border-color: rgba(216, 180, 254, .26);
  box-shadow: 0 26px 66px rgba(0, 0, 0, .31);
}

@media (min-width: 820px) {
  body.cmx-app .cmx-campaign-editor .cmx-step-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.cmx-app .cmx-campaign-editor .cmx-step-fields > :where(
    .cmx-form-section,
    .cmx-territory-selector,
    .cmx-territory-regional,
    [data-bank-details]
  ),
  body.cmx-app .cmx-campaign-editor .cmx-step-fields > label:has(textarea),
  body.cmx-app .cmx-campaign-editor .cmx-step-fields > label.cmx-file-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.cmx-app .cmx-campaign-editor {
    padding: 19px;
    border-radius: 22px;
  }

  body.cmx-app .cmx-campaign-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  body.cmx-app .cmx-campaign-progress button {
    min-width: 0;
    min-height: 62px;
    padding: 7px 3px;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  body.cmx-app .cmx-campaign-progress button b {
    width: 26px;
    height: 26px;
  }

  body.cmx-app .cmx-campaign-progress button span {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(.54rem, 2.2vw, .64rem);
    line-height: 1.05;
    text-overflow: clip;
  }

  body.cmx-app .cmx-manager-campaign-head,
  body.cmx-app .cmx-admin-campaign-item > header {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cmx-app .cmx-campaign-wizard .cmx-wizard-step.is-active:not([hidden]) {
    animation: none;
  }
}