/*!
 * Creators MX — app.css · estructura base 2.3
 * Sistema de diseño mobile-first estructura funcional de paneles por módulos con pestañas,
 * navegación inferior en móvil, tarjetas y grillas que aprovechan la pantalla.
 * Los colores se personalizan desde el panel (variables :root inyectadas después).
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root {
  --bg: #F7F4FB;
  --text: #21152F;
  --muted: #6C617A;
  --line: #E6DDED;
  --card: #ffffff;
  --soft: #F3EDF8;
  --teal: #6D28D9;
  --cyan: #A855F7;
  --blue: #5B5BD6;
  --pink: #C026D3;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --pill: 999px;

  --sh-xs: 0 1px 3px rgba(14, 28, 51, .07);
  --sh-sm: 0 4px 18px rgba(14, 28, 51, .09);
  --sh-md: 0 14px 40px rgba(14, 28, 51, .13);
  --sh-lg: 0 28px 70px rgba(14, 28, 51, .18);
  --ring: 0 0 0 4px rgba(109, 40, 217, .2);

  --grad: linear-gradient(135deg, var(--teal), var(--cyan));
  --grad-deep: linear-gradient(135deg, #3B0F68, var(--teal) 45%, var(--cyan));
  --pink-grad: linear-gradient(135deg, #D946EF, #86198F);

  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shell: 1180px;
  --nav-h: 64px;

  --accent: var(--teal);
  --accent-soft: rgba(109, 40, 217, .12);
  --nav-glass: rgba(255, 255, 255, .86);
  --glass: rgba(255, 255, 255, .92);
}

/* Modo oscuro (toggle en la barra; colores editables desde el panel) */
[data-theme="dark"] {
  --bg: #0B0611;
  --text: #f3f5fa;
  --muted: #C1B5CF;
  --line: #3A2A49;
  --card: #17101E;
  --soft: #22172C;
  --nav-glass: rgba(10, 13, 20, .9);
  --glass: rgba(15, 20, 30, .94);
  --sh-xs: 0 1px 3px rgba(0, 0, 0, .4);
  --sh-sm: 0 4px 18px rgba(0, 0, 0, .45);
  --sh-md: 0 14px 40px rgba(0, 0, 0, .55);
  --sh-lg: 0 28px 70px rgba(0, 0, 0, .65);
}
[data-theme="dark"] body.cmx-app {
  background:
    radial-gradient(900px 480px at 8% -6%, rgba(109, 40, 217, .1), transparent 60%),
    radial-gradient(820px 460px at 96% 4%, rgba(91, 91, 214, .12), transparent 60%),
    var(--bg);
}
[data-theme="dark"] .cmx-info { background: rgba(109, 40, 217, .12); color: #D8B4FE; border-color: rgba(109, 40, 217, .3); }
[data-theme="dark"] .cmx-error { background: rgba(192, 38, 211, .14); color: #ff8fb0; border-color: rgba(192, 38, 211, .35); }
[data-theme="dark"] .cmx-warning { background: rgba(245, 158, 11, .13); color: #fbbf24; border-color: rgba(245, 158, 11, .3); }
[data-theme="dark"] .cmx-success { background: rgba(16, 185, 129, .13); color: #6ee7b7; border-color: rgba(16, 185, 129, .3); }
[data-theme="dark"] .cmx-status-pill.is-ok, [data-theme="dark"] .cmx-applied-pill { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
[data-theme="dark"] .cmx-status-pill.is-wait, [data-theme="dark"] .cmx-user-status-paused { background: rgba(245, 158, 11, .15); color: #fbbf24; }
[data-theme="dark"] .cmx-status-pill.is-off { background: rgba(148, 160, 184, .14); color: #B7AAC6; }
[data-theme="dark"] .cmx-user-status-active { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
[data-theme="dark"] .cmx-user-delete { background: rgba(192, 38, 211, .14) !important; color: #ff8fb0 !important; border-color: rgba(192, 38, 211, .35) !important; }
[data-theme="dark"] .cmx-campaign-rules { background: rgba(245, 158, 11, .08); }
[data-theme="dark"] .cmx-campaign-rules strong { color: #fbbf24; }
[data-theme="dark"] .cmx-campaign-rules span { color: #d7b168; }
[data-theme="dark"] .cmx-advance-chip { background: rgba(245, 158, 11, .12) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, .35) !important; }
[data-theme="dark"] .cmx-fee-tag small { color: var(--muted); }
[data-theme="dark"] .cmx-finance-box { background: rgba(255, 59, 115, .07); border-color: rgba(255, 59, 115, .3); }
[data-theme="dark"] .cmx-bank-details { background: rgba(168, 85, 247, .08); border-color: rgba(168, 85, 247, .3); }
[data-theme="dark"] .cmx-finance-example, [data-theme="dark"] .cmx-registration-summary { background: rgba(168, 85, 247, .07); border-color: rgba(168, 85, 247, .28); }
[data-theme="dark"] .cmx-referral-code { background: rgba(168, 85, 247, .07); }

/* Acento por rol: cada panel tiene su color dominante (no todo teal) */
.cmx-panel-creator { --accent: var(--teal); --accent-soft: rgba(109, 40, 217, .12); }
.cmx-panel-company { --accent: var(--blue); --accent-soft: rgba(91, 91, 214, .12); }
.cmx-panel-admin { --accent: var(--pink); --accent-soft: rgba(192, 38, 211, .1); }
.cmx-panel-company .cmx-hero-cover { background: linear-gradient(135deg, #312E81, var(--blue) 45%, #818CF8); }
.cmx-panel-admin .cmx-hero-cover { background: linear-gradient(135deg, #701A75, var(--pink) 55%, #E879F9); }

/* =========================================================================
   2. Base
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.cmx-app {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  background:
    radial-gradient(900px 480px at 8% -6%, rgba(109, 40, 217, .13), transparent 60%),
    radial-gradient(820px 460px at 96% 4%, rgba(91, 91, 214, .1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.cmx-app a { color: inherit; text-decoration: none; }
body.cmx-app img { max-width: 100%; display: block; }
body.cmx-app h1, body.cmx-app h2, body.cmx-app h3, body.cmx-app h4 {
  margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;
}
body.cmx-app p { margin: 0; }
.cmx-i { flex: 0 0 auto; }
.cmx-app :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Aparición al hacer scroll (JS añade .cmx-reveal / .in) */
.cmx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.cmx-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cmx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   3. Botones
   ========================================================================= */
.cmx-app .cmx-btn,
.cmx-app .cmx-button-link,
.cmx-app button:not(.cmx-menu-toggle):not([data-choice-value]):not([data-stepper]):not([data-step-tab]):not([data-step-target]):not(.cmx-copy-code):not(.cmx-theme-toggle):not(.cmx-user-chip):not(.cmx-bn-arrow) {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: var(--pill);
  padding: 13px 22px;
  font-family: var(--font); font-weight: 700; font-size: .95rem; line-height: 1.1;
  cursor: pointer; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease, border-color .16s ease;
}
.cmx-app .cmx-btn-primary,
.cmx-app .cmx-button-link,
.cmx-app button:not(.cmx-menu-toggle):not([data-choice-value]):not([data-stepper]):not([data-step-tab]):not([data-step-target]):not(.cmx-copy-code):not(.cmx-theme-toggle):not(.cmx-user-chip):not(.cmx-bn-arrow):not(.cmx-btn-ghost):not(.cmx-button-ghost):not(.cmx-wizard-back) {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 24px rgba(109, 40, 217, .28), inset 0 1px 0 rgba(255,255,255,.22);
}
.cmx-app .cmx-btn:hover,
.cmx-app .cmx-button-link:hover,
.cmx-app button:not(.cmx-menu-toggle):not([data-choice-value]):not([data-stepper]):not([data-step-tab]):not([data-step-target]):not(.cmx-copy-code):not(.cmx-theme-toggle):not(.cmx-user-chip):not(.cmx-bn-arrow):not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(109, 40, 217, .32); }
.cmx-app .cmx-btn-ghost,
.cmx-app .cmx-button-ghost,
.cmx-app .cmx-wizard-back {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--sh-xs);
}
.cmx-app .cmx-btn-ghost:hover { border-color: var(--teal); box-shadow: var(--sh-sm); }
.cmx-app .cmx-btn-pink { background: var(--pink-grad); color: #fff; box-shadow: 0 10px 24px rgba(192, 38, 211, .26); }
.cmx-app button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.cmx-app [hidden] { display: none !important; }

/* =========================================================================
   4. Barra superior
   ========================================================================= */
.cmx-nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--nav-h); padding: 0 16px;
  background: var(--nav-glass);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
/* Grupo de marca: logo + campana + conmutador de tema, pegados a la izquierda */
.cmx-nav-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmx-nav-brand .cmx-logo { margin-right: 6px; }
.cmx-logo-img img { max-height: 38px; width: auto; }
.cmx-theme-toggle {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.cmx-theme-toggle:hover { color: var(--teal); border-color: var(--teal); transform: rotate(12deg); }
.cmx-theme-toggle .cmx-theme-sun { display: none; }
[data-theme="dark"] .cmx-theme-toggle .cmx-theme-sun { display: grid; }
[data-theme="dark"] .cmx-theme-toggle .cmx-theme-moon { display: none; }
.cmx-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.cmx-logo span {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
  display: grid; place-items: center; color: #fff; font-weight: 900;
  background: var(--grad-deep); box-shadow: 0 6px 14px rgba(109, 40, 217, .32);
}
.cmx-menu-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card); color: var(--text); cursor: pointer; font-weight: 700; font-size: .85rem;
  line-height: 1; box-shadow: var(--sh-xs); transition: box-shadow .18s ease, border-color .18s ease;
}
.cmx-menu-toggle:hover { border-color: var(--teal); box-shadow: var(--sh-sm); }
.cmx-burger { display: grid; gap: 4px; }
.cmx-burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--teal); transition: transform .22s ease; }
.cmx-menu-toggle[aria-expanded="true"] .cmx-burger i:first-child { transform: translateY(3px) rotate(45deg); }
.cmx-menu-toggle[aria-expanded="true"] .cmx-burger i:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
.cmx-nav nav {
  position: fixed; top: calc(var(--nav-h) + 6px); left: 12px; right: 12px;
  display: grid; gap: 5px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--sh-lg);
  transform: translateY(-8px) scale(.99); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
  max-height: calc(100vh - 100px); overflow: auto;
}
.cmx-menu-open .cmx-nav nav { transform: none; opacity: 1; pointer-events: auto; }
.cmx-nav nav a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 13px; font-weight: 600; color: var(--muted); }
.cmx-nav nav a:hover { background: var(--soft); color: var(--text); }
.cmx-nav nav a.active { background: rgba(109, 40, 217, .1); color: var(--teal); font-weight: 700; }
.cmx-nav nav a.nav-login { background: var(--grad); color: #fff; justify-content: center; font-weight: 700; }
.cmx-nav nav a.nav-logout { border: 1px solid var(--line); justify-content: center; }
.cmx-menu-shade { position: fixed; inset: var(--nav-h) 0 0; z-index: 70; background: rgba(14, 28, 51, .3); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.cmx-menu-open .cmx-menu-shade { opacity: 1; pointer-events: auto; }

/* Chip de sesión */
.cmx-user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 4px;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 14px; background: var(--soft);
  color: var(--text); /* el <button> no hereda color: fijarlo evita texto perdido en oscuro */
}
.cmx-user-chip strong { color: var(--text); }
.cmx-user-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px; }
.cmx-user-chip span { display: grid; gap: 1px; min-width: 0; }
.cmx-user-chip strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmx-user-chip small { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cmx-role-creator.cmx-user-chip { border-left-color: var(--teal); }
.cmx-role-company.cmx-user-chip { border-left-color: var(--blue); }
.cmx-role-admin.cmx-user-chip { border-left-color: var(--pink); }
.cmx-role-creator small { color: var(--teal); }
.cmx-role-company small { color: var(--blue); }
.cmx-role-admin small { color: var(--pink); }

/* =========================================================================
   5. Pestañas de módulos + navegación inferior (estilo app)
   ========================================================================= */
.cmx-tabs { display: none; }
.cmx-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  /* Máximo 5 iconos visibles: cada ítem ocupa 1/5 del ancho disponible
     (descontando el padding lateral); a partir del sexto se desliza en scroll. */
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 16px) / 5);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.cmx-bottomnav::-webkit-scrollbar { display: none; }
.cmx-bottomnav-item { scroll-snap-align: start; }
.cmx-bottomnav-item {
  display: grid; justify-items: center; gap: 3px;
  padding: 7px 2px 6px; border-radius: 14px;
  color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .01em;
  transition: color .15s ease, background .15s ease;
}

/* Flechas de paginación de la barra inferior (solo móvil, con >5 pestañas).
   Ocupan el slot del borde: la derecha avanza; al llegar al final aparece la
   izquierda para regresar. Cubren el ítem del borde para leerse como control. */
.cmx-bn-arrow { display: none; }
.cmx-bn-arrow[hidden] { display: none !important; }
.cmx-app .cmx-bn-arrow {
  border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none;
}
@media (max-width: 979px) {
  .cmx-app .cmx-bn-arrow {
    position: fixed; bottom: 0; z-index: 76;
    display: grid; place-items: center;
    width: calc((100vw - 16px) / 5); min-height: 58px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    color: var(--accent); cursor: pointer;
  }
  .cmx-app .cmx-bn-prev { left: 0; border-right: 1px solid var(--line); box-shadow: 12px 0 20px -8px rgba(14, 28, 51, .22); }
  .cmx-app .cmx-bn-next { right: 0; border-left: 1px solid var(--line); box-shadow: -12px 0 20px -8px rgba(14, 28, 51, .22); }
  .cmx-app .cmx-bn-arrow:active { color: var(--text); }
}
.cmx-bottomnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmx-bottomnav-item.is-active { color: var(--accent); background: var(--accent-soft); }
body.cmx-app:has(.cmx-bottomnav) main { padding-bottom: 84px; }

/* =========================================================================
   6. Contenedores
   ========================================================================= */
.cmx-app main > section,
.cmx-hero, .cmx-brands, .cmx-process, .cmx-testimonials, .cmx-panel, .cmx-cta,
.cmx-auth-screen, .cmx-creator-onboarding, .cmx-workspace {
  width: min(var(--shell), calc(100% - 32px));
  margin-inline: auto;
}
.cmx-hero, .cmx-process, .cmx-testimonials, .cmx-panel, .cmx-cta { padding: 44px 0; }
.cmx-workspace { padding: 20px 0 60px; }
.cmx-section-pill, .cmx-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal); box-shadow: var(--sh-xs); width: max-content;
}
.cmx-pill i, .cmx-section-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }

/* =========================================================================
   7. Landing
   ========================================================================= */
.cmx-hero { display: grid; gap: 28px; }
.cmx-hero-copy { display: grid; gap: 16px; }
.cmx-hero h1 { font-size: clamp(2.3rem, 9vw, 3.6rem); letter-spacing: -.045em; line-height: 1.02; }
.cmx-hero h1 span, .cmx-cta h2 span, .cmx-panel-heading h2 span, .cmx-auth-copy h1 span {
  background: linear-gradient(120deg, var(--teal), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cmx-hero p { color: var(--muted); font-size: 1.05rem; max-width: 560px; }
.cmx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cmx-social-proof { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.cmx-social-proof span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); margin-right: -8px; background: var(--grad); }
.cmx-social-proof strong { margin-left: 14px; color: var(--text); }
.cmx-hero-visual { position: relative; display: grid; gap: 14px; }
.cmx-window, .cmx-float-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 20px; }
.cmx-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.cmx-dots span { width: 9px; height: 9px; border-radius: 50%; background: #40d391; }
.cmx-dots span:nth-child(2) { background: #ffb42a; }
.cmx-dots span:nth-child(3) { background: #ff5570; }
.cmx-window small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.cmx-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.cmx-stat-grid div { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-stat-grid b { display: block; font-size: 1.3rem; }
.cmx-stat-grid em { font-style: normal; color: var(--muted); font-size: .76rem; font-weight: 700; }
.cmx-chart { display: flex; align-items: flex-end; gap: 7px; height: 60px; padding: 10px; background: var(--soft); border-radius: var(--r-md); }
.cmx-chart span { flex: 1; background: #cdd8e5; height: 26px; border-radius: 4px; }
.cmx-chart span:nth-child(4), .cmx-chart span:nth-child(2) { background: var(--teal); height: 44px; }
.cmx-campaign-card strong { color: var(--teal); font-size: .72rem; font-weight: 800; }
.cmx-campaign-card b { display: block; margin: 8px 0; }
.cmx-campaign-card span { color: var(--teal); font-size: 1.2rem; font-weight: 900; }
.cmx-selected-card b { color: var(--pink); }
.cmx-float-card small { color: var(--muted); font-size: .8rem; }
.cmx-brands { text-align: center; padding: 30px 0; border-block: 1px solid var(--line); }
.cmx-brands p { font-size: .7rem; letter-spacing: .16em; color: var(--muted); font-weight: 800; }
.cmx-brands div { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 14px; color: var(--muted); font-weight: 800; }
.cmx-process { text-align: center; }
.cmx-process h2, .cmx-cta h2, .cmx-panel-heading h2 { font-size: clamp(1.9rem, 6vw, 2.9rem); margin: 16px 0 10px; }
.cmx-process > p, .cmx-cta p, .cmx-panel-heading p { color: var(--muted); max-width: 640px; margin-inline: auto; }
.cmx-step-grid { display: grid; gap: 16px; margin-top: 30px; text-align: left; }
.cmx-step-grid article { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.cmx-step-grid article:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cmx-step-grid b { font-size: 2.2rem; color: #c1ccdb; font-weight: 900; }
.cmx-step-grid span { display: grid; place-items: center; width: 44px; height: 44px; margin: 14px 0; border-radius: 13px; background: rgba(109, 40, 217, .1); color: var(--teal); }
.cmx-step-grid h3 { margin-bottom: 6px; }
.cmx-step-grid p { color: var(--muted); }
.cmx-testimonial-grid { display: grid; gap: 14px; margin-top: 24px; }
.cmx-testimonial-grid article { padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-sm); }
.cmx-testimonial-grid blockquote { margin: 0 0 18px; font-weight: 600; line-height: 1.6; }
.cmx-testimonial-grid strong { display: block; }
.cmx-testimonial-grid small { color: var(--muted); }
.cmx-panel-heading { text-align: center; margin-bottom: 30px; }
.cmx-cta { text-align: center; }
.cmx-cta div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* =========================================================================
   8. Footer
   ========================================================================= */
.cmx-footer { margin-top: 40px; padding: 38px 16px 20px; border-top: 1px solid var(--line); background: var(--card); }
.cmx-footer-grid { width: min(var(--shell), 100%); margin-inline: auto; display: grid; gap: 26px; }
.cmx-footer-col { display: grid; gap: 9px; align-content: start; justify-items: start; }
.cmx-footer-col > strong { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text); margin-bottom: 2px; }
.cmx-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.cmx-footer-brand span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-deep); color: #fff; }
.cmx-footer-brand img { max-height: 34px; width: auto; }
.cmx-footer-about p { color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 320px; }
.cmx-footer-col a { color: var(--muted); font-weight: 600; font-size: .92rem; }
.cmx-footer-col a:hover { color: var(--teal); }
.cmx-footer-legal { width: min(var(--shell), 100%); margin: 26px auto 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }

/* Menú del perfil: el cierre de sesión vive en el hover/click del chip */
.cmx-user-menu { position: relative; }
.cmx-user-chip { width: 100%; cursor: pointer; font-family: var(--font); text-align: left; }
.cmx-chip-caret { color: var(--muted); font-size: .7rem; margin-left: 2px; }
.cmx-user-dropdown {
  display: grid; gap: 2px; margin-top: 6px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--sh-lg);
}
.cmx-nav nav .cmx-user-dropdown a, .cmx-user-dropdown a { display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--muted); font-size: .9rem; }
.cmx-user-dropdown a:hover { background: var(--soft); color: var(--text); }
.cmx-dropdown-logout { color: var(--pink) !important; }
.cmx-dropdown-logout:hover { background: rgba(192, 38, 211, .08) !important; }

/* En móvil el chip vive dentro del menú hamburguesa, que ya lista el panel y
   el cierre de sesión: el desplegable sería redundante, así que el chip queda
   solo como encabezado de identidad (sin popup ni caret). */
@media (max-width: 979px) {
  .cmx-user-dropdown { display: none; }
  .cmx-chip-caret { display: none; }
  .cmx-user-chip { cursor: default; }
}

/* Tarjetas de planes (Suscripciones / IA Studio) */
.cmx-info-page { display: grid; gap: 16px; }
.cmx-plan-grid { display: grid; gap: 14px; }
.cmx-plan-card { position: relative; display: grid; gap: 12px; align-content: start; }
.cmx-plan-card.is-featured { border-color: var(--teal); box-shadow: 0 14px 40px rgba(109, 40, 217, .16); }
.cmx-plan-flag { position: absolute; top: -11px; left: 18px; padding: 4px 12px; border-radius: var(--pill); background: var(--grad); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.cmx-plan-price { color: var(--teal); font-size: 1.3rem; font-weight: 800; }
.cmx-plan-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cmx-plan-card li { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.cmx-plan-card li .cmx-i { color: var(--teal); margin-top: 3px; }
.cmx-plan-card .cmx-btn { justify-self: start; }
.cmx-plan-course { max-width: 560px; }

/* Suscripción editable en la fila de usuario (admin) */
.cmx-user-subscription { display: flex !important; align-items: center; gap: 8px; font-size: .78rem !important; }
.cmx-user-subscription select { width: auto; min-height: 40px; padding: 8px 10px; font-size: .85rem; }
.cmx-user-free { font-size: .8rem !important; color: var(--muted); }
.cmx-user-referral code { padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* =========================================================================
   9. Auth
   ========================================================================= */
.cmx-auth-screen { display: grid; gap: 20px; padding: 26px 0 50px; }
.cmx-auth-copy { display: grid; gap: 12px; }
.cmx-auth-copy h1 { font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -.04em; }
.cmx-auth-copy p { color: var(--muted); }
.cmx-creator-onboarding, .cmx-brand-onboarding { padding: 24px 0 54px; }
.cmx-recaptcha { margin: 4px 0; }


/* =========================================================================
   10. Formularios base
   ========================================================================= */
.cmx-form, .cmx-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 24px;
}
.cmx-card { transition: box-shadow .2s ease, transform .2s ease; }
.cmx-card:hover { box-shadow: var(--sh-md); }
/* Los módulos internos de una tarjeta se separan con superficie y borde
   propios para que el contenido no se sienta amontonado. */
.cmx-card .cmx-card { box-shadow: var(--sh-xs); }
.cmx-form { display: grid; gap: 15px; }
.cmx-form label, .cmx-card label { display: grid; gap: 7px; margin: 0; font-size: .82rem; font-weight: 700; color: var(--text); }
.cmx-form label small, .cmx-card label small { color: var(--muted); font-weight: 500; font-size: .74rem; }
.cmx-form input, .cmx-form select, .cmx-form textarea,
.cmx-card input, .cmx-card select, .cmx-card textarea {
  width: 100%; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--text);
  padding: 12px 14px; font-family: var(--font); font-size: .95rem; font-weight: 500;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.cmx-form textarea, .cmx-card textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.cmx-form input:focus, .cmx-form select:focus, .cmx-form textarea:focus,
.cmx-card input:focus, .cmx-card select:focus, .cmx-card textarea:focus { border-color: var(--teal); box-shadow: var(--ring); }
.cmx-form input[type="file"] { padding: 10px; background: var(--soft); cursor: pointer; }
.cmx-check { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none; }
.cmx-check input { width: auto; min-height: auto; }
.cmx-form-note { color: var(--muted); font-size: .88rem; }
.cmx-login-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cmx-login-form h2, .cmx-login-box h2 { margin-bottom: 4px; font-size: 1.5rem; }
.cmx-email-suffix { display: flex; align-items: center; gap: 6px; }
.cmx-email-suffix input { flex: 1; }
.cmx-email-suffix b { color: var(--muted); font-weight: 700; white-space: nowrap; }
.cmx-field-wide { grid-column: 1 / -1; }

.cmx-notice { border-radius: var(--r-sm); padding: 13px 15px; font-weight: 600; font-size: .92rem; border: 1px solid transparent; }
.cmx-info { background: #ecfeff; color: #0f766e; border-color: #b6ebef; }
.cmx-error { background: #fef2f4; color: #be123c; border-color: #f7cdd6; }
.cmx-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.cmx-success { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }

/* Chips de categorías (desliza en móvil) */
.cmx-tag-picker { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cmx-tag-picker label { cursor: pointer; scroll-snap-align: start; flex: 0 0 auto; }
.cmx-tag-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cmx-tag-picker span {
  display: inline-flex; padding: 10px 15px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  font-size: .85rem; font-weight: 700; transition: all .15s ease; box-shadow: var(--sh-xs);
}
.cmx-tag-picker input:checked + span { background: rgba(109, 40, 217, .12); border-color: var(--teal); color: var(--teal); }
.cmx-tag-picker input:focus-visible + span { box-shadow: var(--ring); }
.cmx-form-section { display: grid; gap: 6px; }
.cmx-form-section strong { font-size: .95rem; }
.cmx-form-section span { color: var(--muted); font-size: .85rem; }

/* =========================================================================
   11. Wizard de registro (segmentado, estilo app)
   ========================================================================= */
.cmx-creator-register-wizard {
  display: block; width: 100%; max-width: 860px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 22px;
}
.cmx-wizard-heading { display: grid; gap: 6px; margin-bottom: 18px; text-align: center; }
.cmx-wizard-heading > span { color: var(--teal); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-inline: auto; }
.cmx-wizard-heading h2 { font-size: 1.75rem; }
.cmx-wizard-heading p { color: var(--muted); font-size: .92rem; max-width: 480px; margin-inline: auto; }
.cmx-wizard-progress {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 4px;
  margin-bottom: 22px; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--soft);
}
.cmx-wizard-progress i { display: none; }
.cmx-wizard-progress > button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 6px; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .8rem;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cmx-wizard-progress b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .68rem; font-weight: 800; }
.cmx-wizard-progress span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmx-wizard-progress button.is-active { background: var(--card); color: var(--text); box-shadow: var(--sh-sm); }
.cmx-wizard-progress button.is-active b { background: var(--teal); border-color: var(--teal); color: #fff; }
.cmx-wizard-progress button.is-complete { color: var(--teal); }
.cmx-wizard-progress button.is-complete b { background: var(--teal); border-color: var(--teal); color: #fff; }
.cmx-wizard-step { display: grid; gap: 16px; }
.cmx-wizard-step[hidden] { display: none; }
.cmx-step-title { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-step-title > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: var(--grad-deep); color: #fff; font-size: .72rem; font-weight: 800; }
.cmx-step-title h3 { font-size: 1.05rem; margin-bottom: 3px; }
.cmx-step-title p { color: var(--muted); font-size: .86rem; }
.cmx-step-fields { display: grid; gap: 14px; }
.cmx-wizard-tags { display: grid; gap: 8px; }
.cmx-wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.cmx-portfolio-list { display: grid; gap: 13px; }
.cmx-portfolio-list label > span { display: flex; justify-content: space-between; gap: 10px; }
.cmx-portfolio-list label b, .cmx-referral-field small { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.cmx-referral-field { display: grid; gap: 7px; }
.cmx-registration-summary { display: grid; gap: 5px; padding: 15px; border: 1px solid rgba(109, 40, 217, .28); border-radius: var(--r-md); background: rgba(109, 40, 217, .07); }
.cmx-registration-summary strong { color: var(--text); }
.cmx-registration-summary span { color: var(--muted); font-size: .85rem; }

/* Selector de redes sociales */
.cmx-social-selector { display: grid; gap: 10px; }
.cmx-social-choice { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.cmx-social-choice:hover { box-shadow: var(--sh-sm); }
.cmx-social-choice.is-selected { border-color: var(--teal); background: rgba(109, 40, 217, .05); }
.cmx-social-toggle { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; align-items: center; gap: 1px 12px; margin: 0; padding: 13px; cursor: pointer; }
.cmx-social-toggle input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.cmx-social-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #111827; color: #fff; font-size: .95rem; font-weight: 900; }
.cmx-social-toggle strong { color: var(--text); font-size: .9rem; }
.cmx-social-toggle small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.cmx-social-choice.is-selected .cmx-social-toggle small { color: var(--teal); }
.cmx-social-fields { display: none; gap: 12px; padding: 0 13px 14px; }
.cmx-social-choice.is-selected .cmx-social-fields { display: grid; }
.cmx-social-selection-error { margin: 6px 0 0; color: var(--pink); font-size: .84rem; font-weight: 700; }
.cmx-social-icon-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.cmx-social-icon-tiktok { background: #111; }
.cmx-social-icon-youtube { background: #e11d2e; }
.cmx-social-icon-facebook { background: #1877f2; }
.cmx-social-icon-x-twitter, .cmx-social-icon-threads { background: #050505; }
.cmx-social-icon-twitch { background: #9146ff; }
.cmx-social-icon-kick { background: #53fc18; color: #071006; }
.cmx-social-icon-linkedin { background: #0a66c2; }
.cmx-social-icon-pinterest { background: #e60023; }
.cmx-social-icon-snapchat { background: #fffc00; color: #111; }
.cmx-social-icon-discord { background: #5865f2; }
.cmx-social-icon-spotify { background: #1db954; color: #071006; }
.cmx-social-icon-apple-podcasts { background: #8f55e7; }
.cmx-social-icon-blog-web { background: var(--teal); }
.cmx-social-icon-other { background: #64748b; }

/* =========================================================================
   12. Wizard de campaña
   ========================================================================= */
.cmx-campaign-wizard { display: block; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 22px; }
.cmx-campaign-heading { display: grid; gap: 8px; margin-bottom: 18px; }
.cmx-campaign-heading > span { width: max-content; padding: 7px 11px; border-radius: var(--pill); background: rgba(109, 40, 217, .12); color: var(--teal); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cmx-campaign-heading h3 { font-size: clamp(1.5rem, 5vw, 2rem); }
.cmx-campaign-heading p { color: var(--muted); }
.cmx-campaign-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 20px; padding: 5px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--soft); }
.cmx-campaign-progress button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font); font-weight: 700; font-size: .78rem; transition: background .18s ease, color .18s ease; }
.cmx-campaign-progress button b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .64rem; }
.cmx-campaign-progress button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmx-campaign-progress button.is-active { background: var(--card); color: var(--text); box-shadow: var(--sh-sm); }
.cmx-campaign-progress button.is-active b, .cmx-campaign-progress button.is-complete b { background: var(--teal); border-color: var(--teal); color: #fff; }
.cmx-campaign-progress button.is-complete { color: var(--teal); }
.cmx-campaign-step { display: grid; gap: 16px; }
.cmx-campaign-step[hidden] { display: none; }
.cmx-campaign-wizard .cmx-step-fields { display: grid; gap: 14px; }
.cmx-campaign-rules { display: grid; gap: 5px; padding: 14px; border: 1px solid rgba(245, 158, 11, .28); border-radius: var(--r-md); background: rgba(245, 158, 11, .07); }
.cmx-campaign-rules strong { color: #b45309; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.cmx-campaign-rules span { color: #92400e; font-size: .88rem; }
.cmx-content-builder { display: grid; gap: 10px; }
.cmx-content-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-content-row strong { grid-column: 1 / -1; font-size: .92rem; }
.cmx-content-row label { font-size: .76rem; }
.cmx-content-row b { grid-column: 1 / -1; display: grid; place-items: center; min-height: 44px; border-radius: var(--r-sm); background: var(--card); color: var(--teal); font-weight: 800; }
.cmx-budget-panel { display: grid; gap: 14px; margin-top: 4px; }
.cmx-stepper-field span { display: grid; grid-template-columns: 46px 1fr 46px; gap: 8px; }
.cmx-stepper-field button[data-stepper] { min-height: 48px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.cmx-campaign-wizard .cmx-exchange-field { display: none; }
.cmx-campaign-wizard.is-exchange .cmx-exchange-field, .cmx-campaign-wizard.is-mixed .cmx-exchange-field { display: grid; }
.cmx-budget-summary { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 18px; border: 1px solid rgba(109, 40, 217, .28); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(109, 40, 217, .1), rgba(91, 91, 214, .06)); }
.cmx-budget-summary span { color: var(--muted); font-size: .82rem; font-weight: 700; align-self: center; }
.cmx-budget-summary strong { font-size: 1.35rem; text-align: right; }
.cmx-budget-summary small { grid-column: 1 / -1; color: var(--teal); font-weight: 700; }
.cmx-campaign-interest-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cmx-campaign-interest-picker label { cursor: pointer; }
.cmx-campaign-interest-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cmx-campaign-interest-picker span { display: inline-flex; padding: 9px 14px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .84rem; font-weight: 700; box-shadow: var(--sh-xs); }
.cmx-campaign-interest-picker input:checked + span { background: rgba(109, 40, 217, .12); border-color: var(--teal); color: var(--teal); }
.cmx-payment-options { display: grid; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-payment-options strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.cmx-payment-options span { color: var(--muted); font-size: .88rem; }
.cmx-file-field small { color: var(--muted); }

/* =========================================================================
   13. Paneles (módulos)
   ========================================================================= */
.cmx-dashboard { display: grid; gap: 20px; }
.cmx-panel-intro { display: grid; gap: 4px; margin: 6px 0 2px; }
.cmx-panel-intro h2 { font-size: clamp(1.45rem, 4.6vw, 1.9rem); letter-spacing: -.03em; }
.cmx-panel-intro p { color: var(--muted); font-size: .95rem; max-width: 640px; }
.cmx-card h3 { font-size: 1.15rem; }
.cmx-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cmx-card-title a { color: var(--accent); font-weight: 700; font-size: .86rem; }
.cmx-export-links { color: var(--muted); font-size: .84rem; }
.cmx-export-links a { color: var(--accent); font-weight: 700; }
.cmx-export-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmx-card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmx-card-heading { display: grid; gap: 6px; margin-bottom: 16px; }
.cmx-card-heading span { width: max-content; padding: 6px 10px; border-radius: var(--pill); background: rgba(109, 40, 217, .1); color: var(--teal); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Hero de perfil */
.cmx-profile-hero { position: relative; padding: 0; overflow: hidden; }
.cmx-hero-cover { height: 118px; background: var(--grad-deep); position: relative; overflow: hidden; }
.cmx-hero-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(460px 110px at 82% 130%, rgba(255,255,255,.3), transparent 60%); }
/* Polígonos flotantes en movimiento: la portada deja de verse plana. */
.cmx-hero-cover::before {
  content: ""; position: absolute; width: 130px; height: 130px; left: 6%; top: -34px;
  background: rgba(255, 255, 255, .16);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: cmxPolyDrift 11s ease-in-out infinite;
}
.cmx-hero-cover i { position: absolute; display: block; pointer-events: none; background: rgba(255, 255, 255, .14); }
.cmx-hero-cover i:nth-child(1) { width: 90px; height: 90px; left: 34%; bottom: -28px; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation: cmxPolyDrift 9s ease-in-out infinite reverse; }
.cmx-hero-cover i:nth-child(2) { width: 64px; height: 64px; right: 26%; top: 10px; background: rgba(255, 255, 255, .2); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation: cmxPolySpin 13s linear infinite; }
.cmx-hero-cover i:nth-child(3) { width: 150px; height: 150px; right: -34px; top: -46px; background: rgba(255, 255, 255, .1); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); animation: cmxPolyDrift 14s ease-in-out infinite; animation-delay: -4s; }
.cmx-hero-cover i:nth-child(4) { width: 44px; height: 44px; left: 58%; top: 22px; background: rgba(255, 255, 255, .24); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); animation: cmxPolySpin 17s linear infinite reverse; }
@keyframes cmxPolyDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(16px, 10px, 0) rotate(14deg); }
}
@keyframes cmxPolySpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cmx-hero-cover::before, .cmx-hero-cover i { animation: none !important; }
}
.cmx-hero-body { display: grid; gap: 12px; padding: 0 20px 20px; }
.cmx-hero-avatar { width: 88px; height: 88px; margin-top: -46px; }
.cmx-hero-avatar img { width: 88px; height: 88px; }
/* La marca usa el mismo avatar circular que el creador; si no ha subido su
   logo, se muestra un marcador sólido con icono de imagen (nunca se funde
   con la portada). El cuerpo siempre queda por encima de la portada. */
.cmx-hero-body { position: relative; z-index: 1; }
.cmx-avatar-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: #c3cddc; color: #fff;
  border: 3px solid var(--card); box-shadow: var(--sh-md);
}
[data-theme="dark"] .cmx-avatar-placeholder { background: #34405a; color: #93a3c2; }
.cmx-hero-meta h2 { font-size: 1.45rem; }
.cmx-hero-meta p { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.cmx-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cmx-hero-chips span { padding: 5px 11px; border-radius: var(--pill); background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: .76rem; font-weight: 700; }
.cmx-hero-action { justify-self: start; }

/* Tarjetas de estadística */
.cmx-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmx-stat-row-2 { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.cmx-stat-card { display: grid; gap: 2px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: transform .18s ease, box-shadow .18s ease; }
.cmx-stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.cmx-stat-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.cmx-stat-row .cmx-stat-card:nth-child(2) .cmx-stat-icon { background: rgba(91, 91, 214, .11); color: var(--blue); }
.cmx-stat-row .cmx-stat-card:nth-child(3) .cmx-stat-icon { background: rgba(245, 158, 11, .13); color: #d97706; }
.cmx-stat-row .cmx-stat-card:nth-child(4) .cmx-stat-icon { background: rgba(192, 38, 211, .1); color: var(--pink); }
.cmx-stat-card strong { font-size: 1.35rem; letter-spacing: -.02em; }
.cmx-stat-card small { color: var(--muted); font-size: .76rem; font-weight: 600; }

/* Grillas de módulos */
.cmx-grid-2 { display: grid; gap: 16px; align-items: start; }

/* Lista de acciones */
.cmx-action-list { display: grid; gap: 8px; }
.cmx-action-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.cmx-action-item:hover { border-color: var(--accent); transform: translateX(3px); background: var(--card); }
.cmx-action-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--accent); border: 1px solid var(--line); }
.cmx-action-list .cmx-action-item:nth-child(2) .cmx-action-icon { color: var(--blue); }
.cmx-action-list .cmx-action-item:nth-child(3) .cmx-action-icon { color: var(--pink); }
.cmx-action-copy { flex: 1; display: grid; gap: 1px; min-width: 0; }
.cmx-action-copy strong { font-size: .92rem; }
.cmx-action-copy small { color: var(--muted); font-size: .8rem; }
.cmx-action-item b { color: var(--muted); font-size: 1.3rem; line-height: 1; }

/* Elementos de campaña / postulación: cada uno es un módulo con superficie
   propia (mismo tratamiento visual que las filas del panel admin). */
.cmx-campaign-item {
  padding: 14px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft);
  display: grid; gap: 8px;
}
.cmx-campaign-item:first-of-type { margin-top: 0; }
.cmx-campaign-item .cmx-requirements,
.cmx-campaign-item .cmx-mini-profile,
.cmx-campaign-item .cmx-subitem,
.cmx-campaign-item .cmx-campaign-thread { background: var(--card); }
.cmx-campaign-item .cmx-thread-message { background: var(--soft); }
.cmx-campaign-item-head { display: flex; align-items: center; gap: 11px; }
.cmx-campaign-item-head > div { flex: 1; min-width: 0; }
.cmx-campaign-item-head h4 { font-size: .97rem; }
.cmx-campaign-item-head p { color: var(--muted); font-size: .82rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmx-campaign-thumb { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; flex: 0 0 42px; }
.cmx-thumb-fallback { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cmx-match-badge { flex: 0 0 auto; font-style: normal; padding: 5px 10px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); font-size: .76rem; font-weight: 800; }
.cmx-requirements { color: var(--muted); font-size: .8rem; line-height: 1.5; padding: 9px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); }
.cmx-campaign-item form { margin: 0; }
.cmx-campaign-item form button { padding: 11px 18px; font-size: .88rem; width: max-content; }
.cmx-applied-pill { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 8px 14px; border-radius: var(--pill); background: #ecfdf5; color: #047857; font-size: .84rem; font-weight: 700; }
.cmx-status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cmx-status-pill { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: var(--pill); font-size: .76rem; font-weight: 700; }
.cmx-status-pill.is-ok { background: #ecfdf5; color: #047857; }
.cmx-status-pill.is-wait { background: #fffbeb; color: #b45309; }
.cmx-status-pill.is-off { background: #f4f5f7; color: #6b7280; }
.cmx-app-mini { display: flex; align-items: center; gap: 12px; }
.cmx-app-mini > div { flex: 1; min-width: 0; display: grid; }
.cmx-app-mini small { color: var(--muted); font-size: .8rem; }
.cmx-list-item { padding: 12px 14px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-list-item:first-of-type { margin-top: 0; }
.cmx-empty, .cmx-subitem, .cmx-mini-profile { display: block; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--soft); color: var(--muted); font-size: .88rem; line-height: 1.5; }
.cmx-empty strong { display: block; color: var(--text); }
.cmx-inline-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cmx-inline-form button { padding: 10px 16px !important; font-size: .85rem !important; }

/* Referidos */
.cmx-referral-card p { color: var(--muted); font-size: .9rem; }
.cmx-referral-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; border: 1px dashed var(--teal); border-radius: var(--r-md); background: rgba(109, 40, 217, .06); }
.cmx-referral-code code { flex: 1; font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; color: var(--teal); }
.cmx-referral-row { display: flex; align-items: center; gap: 10px; }
.cmx-referral-row strong { flex: 1; }
.cmx-copy-code { padding: 8px 14px !important; border-radius: var(--pill) !important; background: var(--teal) !important; color: #fff !important; font-size: .8rem !important; font-weight: 700 !important; border: 0 !important; cursor: pointer; box-shadow: none !important; }
.cmx-copy-code:hover { opacity: .9; }

/* Perfil del creador */
.cmx-creator-identity-card { text-align: center; }
.cmx-creator-avatar { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.cmx-creator-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); box-shadow: var(--sh-md); }
.cmx-creator-avatar b { position: absolute; right: 0; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: .8rem; border: 2px solid var(--card); }
.cmx-hero-avatar { margin: 0; }
.cmx-creator-handle { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.cmx-creator-bio { color: var(--muted); margin-top: 8px; }
.cmx-social-metric-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.cmx-social-metric-row a { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--line); min-width: 84px; transition: border-color .15s ease, transform .15s ease; }
.cmx-social-metric-row a:hover { border-color: var(--teal); transform: translateY(-2px); }
.cmx-social-metric-row a span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.cmx-social-metric-row a strong { font-size: 1.05rem; }
.cmx-empty-pill { padding: 8px 14px; border-radius: var(--pill); background: var(--soft); color: var(--muted); font-size: .84rem; }
.cmx-creator-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cmx-creator-stat-grid div { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-creator-stat-grid strong { display: block; font-size: 1.4rem; }
.cmx-creator-stat-grid span { color: var(--muted); font-size: .76rem; }
.cmx-creator-tags-form { display: grid; gap: 10px; margin-top: 16px; text-align: left; }
.cmx-agency-preview .cmx-preview-note { color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
.cmx-preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); background: var(--soft); }
.cmx-preview-head strong { display: block; }
.cmx-preview-head span { color: var(--muted); font-size: .82rem; }
.cmx-preview-head b { color: var(--teal); font-size: .72rem; text-transform: uppercase; }
.cmx-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.cmx-profile-grid span { display: block; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); font-size: .85rem; line-height: 1.5; }

/* Perfil de empresa */
.cmx-company-profile-grid { display: grid; gap: 12px; }
.cmx-company-profile-grid p { display: grid; gap: 5px; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-company-profile-grid strong { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cmx-company-profile-grid span { font-weight: 600; }

/* Gestión de campañas (marca) */
.cmx-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cmx-manager-head span { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-size: .8rem; font-weight: 800; }
.cmx-manager-head span i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.cmx-campaign-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.cmx-campaign-row > div { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; }
.cmx-campaign-tag { padding: 5px 10px; border-radius: var(--pill); background: var(--soft); border: 1px solid var(--line); font-size: .74rem; font-weight: 700; color: var(--muted); }
.cmx-campaign-row b { font-weight: 800; }
.cmx-campaign-row em { font-style: normal; padding: 5px 10px; border-radius: var(--pill); background: rgba(109, 40, 217, .1); color: var(--teal); font-size: .74rem; font-weight: 800; }
.cmx-campaign-detail { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cmx-campaign-detail span { padding: 6px 10px; border-radius: var(--r-sm); background: var(--soft); border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.cmx-manager-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.cmx-manager-stats div { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); text-align: center; }
.cmx-manager-stats strong { display: block; font-size: 1.2rem; }
.cmx-manager-stats span { color: var(--muted); font-size: .74rem; }
.cmx-application-row { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); margin-top: 8px; font-size: .9rem; }

/* Hilo interno */
.cmx-campaign-thread { margin-top: 12px; padding: 15px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-campaign-thread > strong { display: block; }
.cmx-campaign-thread > p { color: var(--muted); font-size: .84rem; margin: 4px 0 12px; }
.cmx-thread-list { display: grid; gap: 8px; margin-bottom: 12px; }
.cmx-thread-message { padding: 10px 12px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.cmx-thread-message small { color: var(--muted); font-size: .74rem; }
.cmx-thread-form { display: grid; gap: 10px; }
.cmx-thread-form button { justify-self: start; padding: 10px 18px !important; font-size: .86rem !important; }

/* Gestión de usuarios (admin) */
.cmx-user-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cmx-user-filters input[type="search"] { flex: 1 1 180px; min-height: 44px; }
.cmx-user-filters select { flex: 0 0 auto; min-height: 44px; width: auto; }
.cmx-user-filters button { flex: 0 0 auto; padding: 11px 18px; }
.cmx-user-list { display: grid; gap: 12px; }
.cmx-user-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-user-main { display: flex; align-items: center; gap: 12px; }
.cmx-user-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; border: 2px solid var(--card); }
.cmx-user-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cmx-user-info strong { display: flex; align-items: center; gap: 6px; }
.cmx-user-info span { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; }
.cmx-user-info small { color: var(--muted); font-size: .78rem; }
.cmx-user-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--pill); background: rgba(109, 40, 217, .12); color: var(--teal); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
/* Distinción clara por rol en la gestión de usuarios: cada fila lleva el
   color de su rol (creador = teal, marca = azul) en borde, avatar y etiqueta. */
.cmx-tag-creator { background: rgba(109, 40, 217, .14); color: var(--teal); }
.cmx-tag-company { background: rgba(91, 91, 214, .14); color: var(--blue); }
.cmx-user-row-creator { border-left: 4px solid var(--teal); background: linear-gradient(90deg, rgba(109, 40, 217, .06), var(--soft) 220px); }
.cmx-user-row-company { border-left: 4px solid var(--blue); background: linear-gradient(90deg, rgba(91, 91, 214, .07), var(--soft) 220px); }
.cmx-user-row-creator .cmx-user-avatar { border-color: var(--teal); }
.cmx-user-row-company .cmx-user-avatar { border-color: var(--blue); }
.cmx-user-row-company .cmx-user-referral code { background: rgba(91, 91, 214, .12); color: var(--blue); }
[data-theme="dark"] .cmx-user-row-creator { background: linear-gradient(90deg, rgba(168, 85, 247, .09), var(--soft) 220px); }
[data-theme="dark"] .cmx-user-row-company { background: linear-gradient(90deg, rgba(52, 145, 255, .1), var(--soft) 220px); }
.cmx-user-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .62rem; }
.cmx-user-status { font-style: normal; padding: 5px 10px; border-radius: var(--pill); font-size: .72rem; font-weight: 800; }
.cmx-user-status-active { background: #ecfdf5; color: #047857; }
.cmx-user-status-paused { background: #fffbeb; color: #b45309; }
.cmx-user-actions form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cmx-user-actions button { font-size: .82rem !important; padding: 10px 14px !important; }
.cmx-user-delete { background: #fef2f4 !important; color: #be123c !important; border: 1px solid #f7cdd6 !important; box-shadow: none !important; }
.cmx-user-delete:hover { background: #be123c !important; color: #fff !important; }

/* Panel de personalización (admin) */
.cmx-editor-panel details { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; background: var(--soft); }
.cmx-editor-panel summary { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; cursor: pointer; list-style: none; }
.cmx-editor-panel summary::-webkit-details-marker { display: none; }
.cmx-editor-panel summary strong { font-size: .95rem; }
.cmx-editor-panel summary span { color: var(--muted); font-size: .8rem; }
.cmx-editor-section { padding: 16px; background: var(--card); border-top: 1px solid var(--line); display: grid; gap: 14px; }
.cmx-editor-grid { display: grid; gap: 12px; }
.cmx-editor-wide { grid-column: 1 / -1; }
.cmx-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.cmx-color-grid label { display: grid; gap: 5px; }
.cmx-color-grid input[type="color"] { min-height: 40px; padding: 3px; }
.cmx-color-grid code { color: var(--muted); font-size: .72rem; }
.cmx-editor-repeat-grid, .cmx-editor-testimonials, .cmx-custom-text-list { display: grid; gap: 12px; }
.cmx-editor-repeat-grid > div, .cmx-editor-testimonials > div, .cmx-custom-text-list > div { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--soft); }
.cmx-editor-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cmx-editor-savebar span { color: var(--muted); font-size: .85rem; }
.cmx-editor-intro { color: var(--muted); margin-bottom: 14px; }

/* =========================================================================
   13a-bis. Puerta de acceso (la home ya no es landing: solo 3 accesos)
   ========================================================================= */
.cmx-gateway {
  display: grid; justify-items: center; align-content: center; text-align: center;
  gap: 14px; padding: 56px 0 80px;
  min-height: calc(100vh - var(--nav-h) - 420px);
}
.cmx-gateway h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); letter-spacing: -.045em; line-height: 1.02; }
.cmx-gateway h1 span {
  background: linear-gradient(120deg, var(--teal), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cmx-gateway > p { color: var(--muted); font-size: 1.02rem; max-width: 520px; }
.cmx-gateway-grid { display: grid; gap: 14px; width: 100%; max-width: 1020px; margin-top: 20px; }
.cmx-gateway-card {
  display: grid; gap: 9px; justify-items: center; align-content: start;
  padding: 34px 24px 28px;
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gw-accent, var(--teal));
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cmx-gateway-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gw-accent, var(--teal)); }
.cmx-gateway-login { --gw-accent: var(--text); }
.cmx-gateway-creator { --gw-accent: var(--teal); }
.cmx-gateway-company { --gw-accent: var(--blue); }
.cmx-gateway-icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px;
  border-radius: 18px; background: var(--soft); border: 1px solid var(--line); color: var(--gw-accent, var(--teal));
}
.cmx-gateway-card strong { font-size: 1.12rem; letter-spacing: -.02em; }
.cmx-gateway-card small { color: var(--muted); font-size: .86rem; line-height: 1.5; max-width: 260px; }
.cmx-gateway-card b { margin-top: 6px; color: var(--gw-accent, var(--teal)); font-size: .9rem; font-weight: 800; }
[data-theme="dark"] .cmx-gateway-login { --gw-accent: #f3f5fa; }

/* Botones de archivo: descarga de PDF privado y exportaciones CSV */
.cmx-pdf-btn, .cmx-file-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--pill);
  font-size: .84rem; font-weight: 800; line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.cmx-pdf-btn { background: rgba(225, 29, 46, .1); color: #c01324; border: 1px solid rgba(225, 29, 46, .3); }
.cmx-pdf-btn:hover { background: #e11d2e; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(225, 29, 46, .25); }
.cmx-file-btn { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; }
.cmx-file-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.cmx-brief-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cmx-brief-meta { color: var(--muted); font-size: .82rem; font-weight: 600; }
[data-theme="dark"] .cmx-pdf-btn { background: rgba(255, 90, 105, .12); color: #ff8fa0; border-color: rgba(255, 90, 105, .35); }
[data-theme="dark"] .cmx-pdf-btn:hover { background: #e11d2e; color: #fff; }

/* Casilla obligatoria de términos y condiciones en el registro */
.cmx-terms-check { padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-terms-check input { accent-color: var(--teal); width: 17px; height: 17px; flex: 0 0 auto; }
.cmx-terms-check span { font-weight: 600; font-size: .9rem; color: var(--text); }
.cmx-terms-check a { color: var(--teal); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cmx-terms-check a:hover { color: var(--blue); }

/* =========================================================================
   13b. Notificaciones, mensajes y finanzas
   ========================================================================= */
/* Campana con contador (fondo rojo) en la barra superior */
.cmx-bell {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--muted);
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
.cmx-bell:hover { color: var(--teal); border-color: var(--teal); transform: translateY(-1px); }
.cmx-nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--pill); background: #e11d2e; color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 1; font-style: normal;
}
.cmx-bell .cmx-nav-badge { position: absolute; top: -4px; right: -5px; border: 2px solid var(--bg); }
.cmx-tab-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--pill); background: #e11d2e; color: #fff;
  font-size: .6rem; font-weight: 800; line-height: 1;
}
.cmx-bottomnav-icon { position: relative; display: grid; place-items: center; }
.cmx-bottomnav-icon .cmx-tab-badge { position: absolute; top: -4px; right: -10px; }

/* Lista de notificaciones */
.cmx-notification-list { display: grid; gap: 8px; }
.cmx-notification-item {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft);
  transition: border-color .15s ease, transform .15s ease;
}
.cmx-notification-item:hover { border-color: var(--accent); transform: translateX(3px); }
.cmx-notification-item.is-unread { background: var(--card); border-color: var(--accent); box-shadow: var(--sh-xs); }
.cmx-notification-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.cmx-notification-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cmx-notification-copy strong { font-size: .9rem; font-weight: 600; line-height: 1.4; }
.cmx-notification-item.is-unread .cmx-notification-copy strong { font-weight: 750; }
.cmx-notification-copy small { color: var(--muted); font-size: .76rem; }
.cmx-unread-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #e11d2e; }

/* Inbox de mensajes */
.cmx-msg-list { display: grid; gap: 8px; margin: 14px 0; max-height: 430px; overflow-y: auto; padding: 4px; }
.cmx-msg {
  justify-self: start; max-width: 85%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; background: var(--soft);
  display: grid; gap: 3px;
}
.cmx-msg.is-mine { justify-self: end; border-radius: 16px 16px 5px 16px; background: var(--accent-soft); border-color: transparent; }
.cmx-msg p { font-size: .92rem; line-height: 1.5; white-space: pre-line; }
.cmx-msg small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.cmx-msg-form { display: grid; gap: 10px; margin-top: 12px; }
.cmx-msg-form button { justify-self: end; padding: 11px 18px !important; font-size: .88rem !important; }
.cmx-thread-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft);
  transition: border-color .15s ease, background .15s ease;
}
.cmx-thread-row:hover, .cmx-thread-row.is-active { border-color: var(--accent); background: var(--card); }
.cmx-thread-row span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cmx-thread-row strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmx-thread-row small { color: var(--muted); font-size: .76rem; }
.cmx-thread-row > b:not(.cmx-nav-badge) { color: var(--accent); font-size: .78rem; font-weight: 800; }
.cmx-inbox-results { display: grid; gap: 4px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md); margin-bottom: 10px; }
.cmx-inbox-results > strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Fee visible para el creador (monto completo publicado) */
.cmx-fee-row { display: grid; gap: 4px; justify-items: start; }
.cmx-fee-tag {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px;
  border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
}
.cmx-fee-tag small { font-size: .74rem; font-weight: 700; color: var(--muted); }
.cmx-fee-exchange { display: inline-flex; align-items: center; font-size: .9rem; }
.cmx-fee-note { color: var(--muted); font-size: .72rem; }

/* Gestión de campañas de la marca: una tarjeta clara por campaña */
.cmx-manager-summary { margin-bottom: 4px; }
.cmx-manager-campaign { display: grid; gap: 14px; }
.cmx-manager-campaign-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmx-manager-campaign-head .cmx-campaign-thumb { width: 52px; height: 52px; flex: 0 0 52px; }
.cmx-manager-campaign-title { flex: 1; min-width: 160px; }
.cmx-manager-campaign-title h4 { font-size: 1.08rem; }
.cmx-manager-campaign-title small { color: var(--muted); font-weight: 600; }
.cmx-manager-campaign-side { display: flex; align-items: center; gap: 10px; }
.cmx-manager-campaign-side b { font-size: 1.05rem; font-weight: 800; }
.cmx-advance-chip { border-color: rgba(245, 158, 11, .4) !important; background: rgba(245, 158, 11, .08) !important; color: #92400e !important; font-weight: 700; }
.cmx-manager-apps { display: grid; gap: 10px; }
.cmx-manager-apps > strong { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cmx-manager-app { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-manager-app-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.cmx-manager-app-head > div { flex: 1; min-width: 140px; display: grid; gap: 1px; }
.cmx-manager-app-head small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.cmx-manager-app .cmx-mini-profile { background: var(--card); }
.cmx-thread-details { border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-thread-details > summary {
  display: flex; align-items: center; gap: 8px; padding: 13px 15px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: .9rem; color: var(--muted);
}
.cmx-thread-details > summary::-webkit-details-marker { display: none; }
.cmx-thread-details[open] > summary { color: var(--text); border-bottom: 1px dashed var(--line); }
.cmx-thread-details .cmx-campaign-thread { border: 0; margin: 0; background: transparent; }

/* Datos bancarios automáticos según la cuenta elegida */
.cmx-bank-details {
  padding: 15px 16px; border: 1px solid rgba(109, 40, 217, .3); border-radius: var(--r-md);
  background: rgba(109, 40, 217, .06); color: var(--text);
  font-size: .92rem; font-weight: 600; line-height: 1.65; white-space: pre-line;
}

/* Sub-pestañas internas (referidos del admin) */
.cmx-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cmx-subtabs a {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card); color: var(--muted); font-size: .84rem; font-weight: 700;
  box-shadow: var(--sh-xs); transition: all .15s ease;
}
.cmx-subtabs a:hover { border-color: var(--accent); color: var(--text); }
.cmx-subtabs a.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Referidos (admin): filas con código, fecha y edición de monto/estado */
.cmx-referral-admin-row {
  display: grid; gap: 12px; padding: 14px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft);
}
.cmx-referral-admin-info { display: grid; gap: 3px; }
.cmx-referral-admin-info small { color: var(--muted); font-size: .8rem; }
.cmx-referral-admin-info code { padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.cmx-referral-admin-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0; }
.cmx-referral-admin-actions label { font-size: .74rem !important; }
.cmx-referral-admin-actions input, .cmx-referral-admin-actions select { min-height: 42px; width: 130px; }
.cmx-referral-admin-actions button { padding: 10px 16px !important; font-size: .84rem !important; }
.cmx-referral-admin-actions > b { font-size: 1.1rem; font-weight: 800; align-self: center; }
.cmx-date-filter { display: grid; gap: 4px; font-size: .72rem !important; font-weight: 700; color: var(--muted); }
.cmx-date-filter input { min-height: 44px; width: auto; }

/* Desglose financiero interno (solo admin) */
.cmx-finance-box {
  display: grid; gap: 10px; padding: 15px; margin: 4px 0;
  border: 1px solid rgba(192, 38, 211, .25); border-radius: var(--r-md);
  background: rgba(192, 38, 211, .04);
}
.cmx-finance-box > strong { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }
.cmx-finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cmx-finance-grid div { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.cmx-finance-grid small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.cmx-finance-grid strong { font-size: 1rem; }
.cmx-finance-config { display: grid; gap: 14px; }
.cmx-finance-example { display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(109, 40, 217, .28); border-radius: var(--r-md); background: rgba(109, 40, 217, .07); }
.cmx-finance-example strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.cmx-finance-example span { color: var(--muted); font-size: .88rem; }
.cmx-payments-form { display: grid; gap: 16px; }
.cmx-payments-subtitle { margin-top: 6px; }
.cmx-bank-editor { display: grid; gap: 12px; }
.cmx-bank-editor-row { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.cmx-advance-note { grid-column: 1 / -1; color: var(--muted); font-weight: 600; }

/* Edición de perfil (creador y marca) */
.cmx-profile-edit-form { display: grid; gap: 14px; margin-top: 4px; text-align: left; }
.cmx-profile-edit-grid { display: grid; gap: 13px; }
.cmx-profile-edit-details { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); text-align: left; }
.cmx-profile-edit-details > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 15px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem; color: var(--accent);
}
.cmx-profile-edit-details > summary::-webkit-details-marker { display: none; }
.cmx-profile-edit-details[open] > summary { border-bottom: 1px solid var(--line); }
.cmx-profile-edit-details .cmx-profile-edit-form { padding: 15px; }
.cmx-new-tags-field { margin-top: 4px; }

/* =========================================================================
   14. Breakpoints
   ========================================================================= */
@media (min-width: 640px) {
  .cmx-step-fields { grid-template-columns: 1fr 1fr; }
  .cmx-step-fields label:first-child { grid-column: 1 / -1; }
  .cmx-social-selector { grid-template-columns: 1fr 1fr; }
  .cmx-social-choice.is-selected { grid-column: 1 / -1; }
  .cmx-social-fields { grid-template-columns: 1fr 1fr; }
  .cmx-portfolio-list { grid-template-columns: 1fr 1fr; }
  .cmx-portfolio-list label:first-child { grid-column: 1 / -1; }
  .cmx-content-row { grid-template-columns: 1.4fr 1fr 1fr auto; }
  .cmx-content-row strong { grid-column: auto; }
  .cmx-content-row b { grid-column: auto; min-width: 88px; }
  .cmx-budget-panel { grid-template-columns: 1fr 1fr; }
  .cmx-budget-summary, .cmx-exchange-field { grid-column: 1 / -1; }
  .cmx-company-profile-grid { grid-template-columns: 1fr 1fr; }
  .cmx-user-row { grid-template-columns: 1fr; }
  .cmx-user-actions form { justify-content: flex-start; align-items: center; }
  .cmx-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .cmx-plan-grid { grid-template-columns: repeat(3, 1fr); }
  .cmx-stat-row { grid-template-columns: repeat(4, 1fr); }
  .cmx-stat-row-2 { grid-template-columns: repeat(2, max-content); gap: 12px; }
  .cmx-editor-grid { grid-template-columns: 1fr 1fr; }
  .cmx-editor-repeat-grid { grid-template-columns: repeat(3, 1fr); }
  .cmx-editor-testimonials { grid-template-columns: repeat(3, 1fr); }
  .cmx-custom-text-list { grid-template-columns: 1fr 1fr; }
  .cmx-tag-picker { flex-wrap: wrap; overflow: visible; }
  .cmx-gateway-grid { grid-template-columns: repeat(3, 1fr); }
  .cmx-hero-body { grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 22px 20px; }
  .cmx-hero-action { align-self: center; }
  .cmx-profile-edit-grid { grid-template-columns: 1fr 1fr; }
  .cmx-referral-admin-row { grid-template-columns: 1fr auto; align-items: center; }
  .cmx-finance-config { grid-template-columns: 1fr 1fr; }
  .cmx-bank-editor-row { grid-template-columns: .8fr 1.2fr; align-items: start; }
}

@media (min-width: 900px) {
  .cmx-grid-2 { grid-template-columns: 1fr 1fr; }
  .cmx-grid-profile { grid-template-columns: .9fr 1.1fr; }
}

@media (min-width: 980px) {
  .cmx-nav { padding: 0 max(20px, calc((100vw - var(--shell)) / 2)); }
  .cmx-menu-toggle { display: none; }
  .cmx-nav nav { position: static; display: flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; transform: none; opacity: 1; pointer-events: auto; max-height: none; overflow: visible; }
  .cmx-nav nav a { padding: 10px 14px; color: var(--muted); }
  .cmx-nav nav a.nav-login { padding: 10px 18px; }
  .cmx-nav nav a.nav-logout { display: none; } /* en escritorio vive en el menú del perfil */
  .cmx-user-menu { order: 9; margin-left: 8px; }
  .cmx-user-chip { max-width: 240px; padding: 6px 12px 6px 8px; margin: 0; }
  .cmx-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; margin: 0;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    /* Pequeño retraso al cerrar: da tiempo de cruzar hacia el submenú. */
    transition: opacity .18s ease .22s, transform .2s ease .22s;
  }
  /* Puente invisible que cubre el hueco entre el chip y el submenú para que
     el hover no se pierda al bajar el cursor. */
  .cmx-user-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .cmx-user-menu:hover .cmx-user-dropdown,
  .cmx-user-menu:focus-within .cmx-user-dropdown,
  .cmx-user-menu.is-open .cmx-user-dropdown { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .cmx-menu-shade { display: none; }

  /* Pestañas arriba en escritorio, sin barra inferior */
  .cmx-tabs {
    position: sticky; top: var(--nav-h); z-index: 60;
    display: flex; gap: 4px; padding: 6px;
    background: var(--glass);
    border: 1px solid var(--line); border-radius: var(--pill);
    box-shadow: var(--sh-sm); width: max-content; max-width: 100%;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow-x: auto;
  }
  .cmx-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--pill); color: var(--muted); font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
  .cmx-tab:hover { color: var(--text); background: var(--soft); }
  .cmx-tab.is-active { background: var(--accent); color: #fff; box-shadow: 0 8px 18px var(--accent-soft); }
  .cmx-bottomnav { display: none; }
  body.cmx-app:has(.cmx-bottomnav) main { padding-bottom: 0; }

  .cmx-hero { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; padding: 72px 0; }
  .cmx-hero h1 { font-size: clamp(3rem, 4.4vw, 4.3rem); }
  .cmx-step-grid { grid-template-columns: repeat(3, 1fr); }
  .cmx-testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .cmx-auth-screen { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 54px; min-height: calc(100vh - var(--nav-h)); padding: 60px 0; }
  .cmx-social-selector { grid-template-columns: repeat(3, 1fr); }
  .cmx-creator-register-wizard, .cmx-campaign-wizard { padding: 30px; }
  .cmx-manager-stats { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .cmx-app *, .cmx-nav nav { transition: none !important; }
}

/* =========================================================
   Validación de contraseñas
   ========================================================= */

.cmx-password-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    transition: color 0.2s ease;
}

.cmx-password-status.is-error {
    color: #e11d48 !important;
    font-weight: 700 !important;
}

.cmx-password-status.is-success {
    color: #059669 !important;
    font-weight: 700 !important;
}

.cmx-password-status.is-error::before {
    content: "×";
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #ffffff;
    background: #e11d48;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
}

.cmx-password-status.is-success::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: #ffffff;
    background: #059669;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
}

.cmx-form input.is-invalid-password {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.cmx-form input.is-valid-password {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* =========================================================
   CORRECCIÓN COMPLETA: CURSO DE CREACIÓN DE CONTENIDO
   ========================================================= */

.cmx-course-option {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.cmx-course-title {
    display: block;
    margin-bottom: 7px;
    color: var(--text, #152033);
    font-size: 0.84rem;
    font-weight: 800;
}

/* Tarjeta principal */
.cmx-course-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;

    background: var(--card, #ffffff);
    border: 1px solid var(--line, #dce4eb);
    border-radius: 15px;

    cursor: pointer;
    overflow: hidden;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Estado seleccionado */
.cmx-course-card:has(input:checked) {
    background: rgba(109, 40, 217, 0.055);
    border-color: var(--teal, #6D28D9);
    box-shadow: 0 8px 25px rgba(0, 120, 120, 0.08);
}

/* Checkbox real oculto */
.cmx-course-card > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Checkbox visual */
.cmx-course-checkbox {
    position: relative;
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    box-sizing: border-box;

    background: #ffffff;
    border: 2px solid #9caab6;
    border-radius: 9px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.cmx-course-checkbox::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;

    width: 6px;
    height: 11px;

    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;

    opacity: 0;
    transform: rotate(45deg) scale(0.5);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.cmx-course-card > input:checked + .cmx-course-checkbox {
    background: var(--teal, #6D28D9);
    border-color: var(--teal, #6D28D9);
    transform: scale(1.04);
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12);
}

.cmx-course-card > input:checked + .cmx-course-checkbox::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* Texto principal */
.cmx-course-copy {
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.cmx-course-main-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 10px !important;
    width: 100% !important;
}

.cmx-course-main-line > strong {
    color: var(--text, #152033);
    font-size: 0.92rem;
    font-weight: 850;
    line-height: 1.3;
}

.cmx-course-short-description {
    display: block;
    margin: 0 !important;
    color: var(--muted, #657184) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1.45;
}

/* Precio */
.cmx-course-price {
    display: inline-flex !important;
    align-items: baseline;
    gap: 4px;

    padding: 6px 10px;
    white-space: nowrap;

    color: var(--teal, #6D28D9);
    background: rgba(109, 40, 217, 0.09);
    border: 1px solid rgba(109, 40, 217, 0.25);
    border-radius: 999px;
}

.cmx-course-price b {
    color: inherit;
    font-size: 0.9rem;
    font-weight: 900;
}

.cmx-course-price small {
    color: inherit !important;
    font-size: 0.58rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em;
}

/* Etiqueta No / Sí */
.cmx-course-answer {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    min-height: 29px;
    padding: 5px 10px;

    color: var(--muted, #657184);
    background: rgba(100, 115, 130, 0.07);
    border: 1px solid var(--line, #dce4eb);
    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 850;
}

.cmx-course-answer::before {
    content: "No";
}

.cmx-course-card > input:checked ~ .cmx-course-answer {
    color: var(--teal, #6D28D9);
    background: rgba(109, 40, 217, 0.1);
    border-color: var(--teal, #6D28D9);
}

.cmx-course-card > input:checked ~ .cmx-course-answer::before {
    content: "Sí";
}

/* =========================================================
   PANEL DESPLEGABLE
   La propiedad grid-column corrige el problema de anchura
   ========================================================= */

.cmx-personalized-email-panel {
    grid-column: 1 / -1 !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 14px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    cursor: default;
    animation: cmx-course-panel-open 0.25s ease both;
}

.cmx-personalized-email-panel[hidden] {
    display: none !important;
}

/* Información general del curso */
.cmx-course-information {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 18px !important;
    box-sizing: border-box !important;

    background: var(--card, #ffffff);
    border: 1px solid rgba(109, 40, 217, 0.22);
    border-radius: 14px;
}

/* Cabecera del panel */
.cmx-course-information-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    margin-bottom: 15px;
}

.cmx-course-information-header > span:last-child {
    display: grid !important;
    gap: 2px;
    min-width: 0;
}

.cmx-course-information-header strong {
    color: var(--text, #152033);
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.3;
}

.cmx-course-information-header small {
    color: var(--teal, #6D28D9);
    font-size: 0.76rem;
    font-weight: 750;
}

.cmx-course-information-icon {
    display: grid !important;
    place-items: center;

    flex: 0 0 38px;
    width: 38px !important;
    height: 38px !important;

    color: #ffffff;
    background: var(--teal, #6D28D9);
    border-radius: 11px;

    font-size: 1rem;
    font-weight: 900;
}

/* Texto de introducción */
.cmx-course-information-content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.cmx-course-information-content > p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 15px !important;

    color: var(--muted, #657184);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.65;
}

.cmx-course-information-content > p strong {
    color: var(--text, #152033);
}

/* Pasos del curso */
.cmx-course-process {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
}

.cmx-course-process-item {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    background: rgba(109, 40, 217, 0.035);
    border: 1px solid rgba(109, 40, 217, 0.15);
    border-radius: 11px;
}

.cmx-course-process-item > span {
    display: grid !important;
    place-items: center;

    width: 28px !important;
    height: 28px !important;

    color: #ffffff;
    background: var(--teal, #6D28D9);
    border-radius: 50%;

    font-size: 0.72rem;
    font-weight: 900;
}

.cmx-course-process-item p {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 2px 0 0 !important;

    color: var(--muted, #657184);
    font-size: 0.77rem;
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cmx-course-process-item p strong {
    color: var(--text, #152033);
}

/* =========================================================
   SECCIÓN DEL CORREO PERSONALIZADO
   ========================================================= */

.cmx-personalized-email-heading {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;

    width: 100% !important;
    margin: 14px 0 10px !important;
    padding-top: 14px;

    border-top: 1px solid var(--line, #dce4eb);
}

.cmx-personalized-email-heading > span:last-child {
    display: grid !important;
    gap: 2px;
}

.cmx-personalized-email-heading strong {
    color: var(--text, #152033);
    font-size: 0.9rem;
    font-weight: 850;
}

.cmx-personalized-email-heading small {
    color: var(--muted, #657184);
    font-size: 0.74rem;
}

.cmx-personalized-email-icon {
    display: grid !important;
    place-items: center;

    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;

    color: #ffffff;
    background: var(--teal, #6D28D9);
    border-radius: 10px;

    font-weight: 900;
}

.cmx-personalized-email-field {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
}

.cmx-personalized-email-field .cmx-email-suffix {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: hidden;

    background: var(--card, #ffffff);
    border: 1px solid var(--line, #dce4eb);
    border-radius: 11px;
}

.cmx-personalized-email-field .cmx-email-suffix:focus-within {
    border-color: var(--teal, #6D28D9);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.12);
}

.cmx-personalized-email-field .cmx-email-suffix input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cmx-personalized-email-field .cmx-email-suffix b {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;

    padding: 0 14px;

    color: var(--teal, #6D28D9);
    background: rgba(109, 40, 217, 0.08);
    border-left: 1px solid rgba(109, 40, 217, 0.18);

    font-size: 0.84rem;
    font-weight: 850;
    white-space: nowrap;
}

@keyframes cmx-course-panel-open {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   TABLET Y CELULAR
   ========================================================= */

@media (max-width: 700px) {
    .cmx-course-process {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 520px) {
    .cmx-course-card {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        padding: 14px !important;
    }

    .cmx-course-answer {
        grid-column: 2;
        justify-self: start;
    }

    .cmx-course-main-line {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 7px !important;
    }

    .cmx-course-price {
        align-self: flex-start;
    }

    .cmx-course-information {
        padding: 14px !important;
    }

    .cmx-personalized-email-field .cmx-email-suffix {
        display: grid !important;
    }

    .cmx-personalized-email-field .cmx-email-suffix b {
        min-height: 40px;
        border-top: 1px solid rgba(109, 40, 217, 0.18);
        border-left: 0;
    }
}
/* =========================================================
   CAMPO DE CONTRASEÑA CON OJITO — VERSIÓN CORREGIDA
   ========================================================= */

/* Contenedor del input y del botón */
.cmx-password-field {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Espacio para que el texto no quede debajo del ojito */
.cmx-password-field > input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 52px !important;
    box-sizing: border-box !important;
}

/* Botón del ojito */
.cmx-password-field .cmx-password-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #667085 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 9px !important;

    outline: none !important;
    box-shadow: none !important;

    cursor: pointer !important;

    transform: translateY(-50%) !important;
    translate: none !important;
    scale: 1 !important;
    rotate: 0deg !important;

    animation: none !important;
    transition:
        color 0.15s ease,
        background-color 0.15s ease !important;
}

/* Elimina adornos o animaciones generales de otros botones */
.cmx-password-field .cmx-password-toggle::before,
.cmx-password-field .cmx-password-toggle::after {
    content: none !important;
    display: none !important;
}

/* Hover sin movimiento */
.cmx-password-field .cmx-password-toggle:hover {
    color: var(--teal, #7C3AED) !important;
    background: rgba(109, 40, 217, 0.1) !important;
    background-image: none !important;

    box-shadow: none !important;
    transform: translateY(-50%) !important;
    scale: 1 !important;
    animation: none !important;
}

/* Al presionar tampoco debe moverse */
.cmx-password-field .cmx-password-toggle:active {
    color: var(--teal, #7C3AED) !important;
    background: rgba(109, 40, 217, 0.14) !important;

    box-shadow: none !important;
    transform: translateY(-50%) !important;
    scale: 1 !important;
    animation: none !important;
}

/* Foco normal */
.cmx-password-field .cmx-password-toggle:focus {
    transform: translateY(-50%) !important;
    animation: none !important;
}

/* Foco mediante teclado */
.cmx-password-field .cmx-password-toggle:focus-visible {
    color: var(--teal, #7C3AED) !important;
    background: rgba(109, 40, 217, 0.1) !important;

    outline: none !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.16) !important;

    transform: translateY(-50%) !important;
}

/* SVG del ojo */
.cmx-password-field .cmx-password-toggle svg {
    display: block;
    width: 21px !important;
    height: 21px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: currentColor !important;
    fill: none !important;
    stroke: currentColor !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    animation: none !important;

    pointer-events: none !important;
}

/* Líneas internas del SVG */
.cmx-password-field .cmx-password-toggle svg path,
.cmx-password-field .cmx-password-toggle svg circle {
    stroke: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Estado inicial: mostrar ojo abierto */
.cmx-password-field
.cmx-password-toggle
.cmx-eye-open {
    display: block !important;
}

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

/* Contraseña visible: mostrar ojo tachado */
.cmx-password-field
.cmx-password-toggle.is-visible
.cmx-eye-open {
    display: none !important;
}

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

/* Color cuando la contraseña está visible */
.cmx-password-field .cmx-password-toggle.is-visible {
    color: var(--teal, #7C3AED) !important;
    background: rgba(109, 40, 217, 0.1) !important;

    transform: translateY(-50%) !important;
    animation: none !important;
}

/* Mantener validación visual del input */
.cmx-password-field > input.is-invalid-password {
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12) !important;
}

.cmx-password-field > input.is-valid-password {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1) !important;
}

/* Ajuste para celular */
@media (max-width: 520px) {
    .cmx-password-field > input {
        padding-right: 48px !important;
    }

    .cmx-password-field .cmx-password-toggle {
        right: 6px !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .cmx-password-field .cmx-password-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }
}
/* =========================================================
   Código de referido en registro de marcas
   ========================================================= */

.cmx-brand-register-wizard .cmx-referral-field {
    display: grid;
    grid-column: 1 / -1;
    gap: 7px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;

    background: rgba(109, 40, 217, 0.05);
    border: 1px solid rgba(109, 40, 217, 0.22);
    border-radius: var(--r-md, 14px);
}

.cmx-brand-register-wizard .cmx-referral-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--text, #152033);
    font-size: 0.84rem;
    font-weight: 800;
}

.cmx-brand-register-wizard .cmx-referral-field > span small {
    padding: 4px 8px;

    color: var(--teal, #6D28D9);
    background: rgba(109, 40, 217, 0.1);
    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.cmx-brand-register-wizard .cmx-referral-field input {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 750;
}

.cmx-brand-register-wizard .cmx-referral-help {
    color: var(--muted, #667085);
    font-size: 0.73rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
}