/* ============================================================
   PANEL — centro de mando de la sesión, para Free, Pro y Max

   Nació como la pantalla exclusiva de Max ("public/js/max/dashboard.js")
   y ahora es la vista de entrada de los TRES planes: trade activo,
   Trading Score / APEX Insight, aprendizaje pendiente, tus últimos
   análisis y accesos rápidos. Free y Pro ven exactamente el mismo
   contenido; lo que no han desbloqueado (Trading Score, APEX Insight,
   tus dimensiones, tus patrones) se sirve real pero difuminado detrás
   del overlay premium de siempre (ver ui/premium-overlay.js y
   app.css), el mismo patrón que ya usa la vista Progreso.

   Esta hoja es la base VISUAL del Panel: tarjetas, tipografía, cifras,
   score, insight, dimensiones, patrones, últimos análisis y accesos.
   Se carga para los tres planes. Lo que sigue siendo exclusivo de
   Max — insignias, orden de navegación, Intelligence, Evolución, APEX
   VIEW en Trade Tracker — vive en max.css, detrás de
   html[data-tier="max"].

   El champán (--mx-gold) se declara aquí, no en max.css: las dos
   tarjetas premium (Score, Insight) lo usan y se sirven —difuminadas—
   también a Free/Pro como parte del propio overlay de "esto se
   desbloquea con Max". Sigue apareciendo en dosis mínimas: un filo,
   un anillo, un rótulo. Nunca como relleno.
   ============================================================ */

:root{
  --mx-gold:#8A6E32;
  --mx-gold-hi:#A98A47;
  --mx-gold-soft:rgba(138,110,50,.10);
  --mx-gold-line:rgba(138,110,50,.28);
  --mx-gold-glow:rgba(138,110,50,.13);
  --mx-block:var(--space-9);
}
html[data-theme="dark"]{
  --mx-gold:#D9B879;
  --mx-gold-hi:#EFD9A9;
  --mx-gold-soft:rgba(217,184,121,.11);
  --mx-gold-line:rgba(217,184,121,.28);
  --mx-gold-glow:rgba(217,184,121,.12);
}

/* ============================================================
   ESTRUCTURA DE VISTA
   ============================================================ */
.mx-view{display:flex;flex-direction:column;gap:var(--mx-block);padding-bottom:var(--space-8);}
.mx-view > *{animation:revealUp .5s var(--ease) both;}
.mx-view > *:nth-child(1){animation-delay:0s;}
.mx-view > *:nth-child(2){animation-delay:.05s;}
.mx-view > *:nth-child(3){animation-delay:.1s;}
.mx-view > *:nth-child(4){animation-delay:.15s;}
.mx-view > *:nth-child(n+5){animation-delay:.2s;}

/* Agrupa Score/Insight/Dimensiones/Patrones para poder difuminarlos
   como una sola unidad detrás del overlay premium (ver dashboard.js).
   Mismo espaciado vertical que .mx-view, solo que un nivel más adentro. */
.mx-premium-group{display:flex;flex-direction:column;gap:var(--mx-block);}
/* renderPremiumOverlay (app.css) mueve los hijos reales a un
   .premium-locked-content interno: sin flex propio ahí perdían el
   espaciado entre las cuatro tarjetas mientras estaban difuminadas. */
.mx-premium-group.premium-locked > .premium-locked-content{display:flex;flex-direction:column;gap:var(--mx-block);}

/* ---- Cabecera de página ---- */
.mx-page-head{display:flex;flex-direction:column;gap:var(--space-3);}
.mx-page-title{
  font-family:var(--font-display);font-size:var(--text-h1-size);font-weight:var(--text-h1-weight);
  line-height:var(--text-h1-lh);letter-spacing:var(--text-h1-ls);margin:0;color:var(--text);
}
.mx-page-sub{margin:0;font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--muted);max-width:58ch;}

/* ---- Rótulo de sección ---- */
.mx-eyebrow{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
}

/* ============================================================
   SUPERFICIES — la tarjeta de APEX, en tres niveles

   .mx-card            = la tarjeta de siempre (.card de APEX)
   .mx-card.is-premium = la misma tarjeta con el filo de champán.
                         Se reserva para lo que se desbloquea con Max.
   ============================================================ */
.mx-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  padding:var(--space-7);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.mx-card.is-premium{
  border-color:var(--mx-gold-line);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.mx-card.is-premium::before{
  content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg, transparent, var(--mx-gold-hi) 20%, var(--mx-gold) 52%, transparent 92%);
  opacity:.85;
}
.mx-card-glow{
  position:absolute;left:-80px;top:-120px;width:340px;height:300px;pointer-events:none;
  background:radial-gradient(closest-side, var(--mx-gold-glow), transparent 72%);
}

.mx-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;
}
.mx-card-head-txt{display:flex;flex-direction:column;gap:6px;min-width:0;}
.mx-card-title{
  font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);
  letter-spacing:var(--text-h3-ls);line-height:var(--text-h3-lh);margin:0;color:var(--text);
}
.mx-card-sub{margin:0;font-size:var(--text-caption-size);line-height:1.5;color:var(--muted);max-width:60ch;}

.mx-note{
  display:flex;align-items:flex-start;gap:8px;
  margin:var(--space-5) 0 0;padding-top:var(--space-4);
  border-top:1px solid var(--border-soft);
  font-size:var(--text-caption-size);line-height:1.55;color:var(--muted2);
}
.mx-note svg{flex-shrink:0;margin-top:2px;opacity:.8;}

/* ============================================================
   ENLACES Y BOTONES
   ============================================================ */
.mx-link{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  min-height:32px;padding:4px 0;
  font-family:var(--font-body);font-size:var(--text-caption-size);font-weight:650;color:var(--blue);
  transition:gap var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.mx-link:hover{gap:9px;opacity:.8;}
.mx-link:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--r-2xs);}

.mx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  width:auto;margin-top:var(--space-6);
  padding:12px var(--space-6);border-radius:var(--r-pill);border:none;cursor:pointer;
  background:var(--blue);color:#fff;
  font-family:var(--font-body);font-size:var(--text-body-sm-size);font-weight:600;letter-spacing:-0.01em;
  transition:filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mx-btn:hover{filter:brightness(1.08);}
.mx-btn:active{transform:scale(.975);}
.mx-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.mx-btn.is-ghost{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
}
.mx-btn.is-ghost:hover{background:var(--surface3);filter:none;}

/* ============================================================
   TRADING SCORE
   ============================================================ */
.mx-score-card{overflow:hidden;}
.mx-score{
  position:relative;display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;
}
.mx-score-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);flex-shrink:0;}
.mx-score-dial{position:relative;width:176px;height:176px;flex-shrink:0;}
.mx-ring{position:absolute;inset:0;transform:rotate(-90deg);}
.mx-ring-track{fill:none;stroke:var(--surface3);stroke-width:7;}
.mx-ring-fill{
  fill:none;stroke:var(--mx-gold);stroke-width:7;stroke-linecap:round;
  animation:mxRingFill 1.1s var(--ease) .15s forwards;
}
@keyframes mxRingFill{to{stroke-dashoffset:var(--mx-ring-offset);}}
.mx-score-num{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
}
.mx-score-value{
  font-family:var(--font-display);font-size:56px;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.mx-score-value .of{font-size:19px;font-weight:600;color:var(--muted2);letter-spacing:-.02em;}
.mx-score-value.is-empty{color:var(--muted2);font-size:42px;}
.mx-score-label{
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);
}

.mx-score-meta{display:flex;flex-direction:column;gap:var(--space-4);min-width:220px;flex:1;}
.mx-score-level-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);}
.mx-score-level-name{
  font-family:var(--font-display);font-size:var(--text-h3-size);font-weight:var(--text-h3-weight);
  letter-spacing:var(--text-h3-ls);color:var(--text);
}
.mx-score-level-pct{font-family:var(--font-mono);font-size:var(--text-caption-size);color:var(--muted2);}
.mx-level-track,
.mx-dim-track{height:6px;border-radius:6px;background:var(--surface3);overflow:hidden;}
.mx-level-fill{
  display:block;height:100%;width:var(--mx-lvl-w,0%);border-radius:6px;
  background:linear-gradient(90deg, var(--mx-gold), var(--mx-gold-hi));
  animation:mxBarGrow .9s var(--ease) .15s both;
}
@keyframes mxBarGrow{from{transform:scaleX(0);transform-origin:left;}to{transform:scaleX(1);}}
.mx-score-level-note{margin:0;font-size:var(--text-body-sm-size);line-height:1.55;color:var(--muted);}
.mx-score-pending{flex:1;min-width:240px;}

/* ---- Píldora de variación ---- */
.mx-delta{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:650;
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mx-delta.is-up{color:var(--green);background:var(--green-soft);border-color:var(--green-soft-border);}
.mx-delta.is-down{color:var(--red);background:var(--red-soft);border-color:var(--red-soft-border);}
.mx-delta.is-flat{color:var(--muted2);background:var(--surface2);border-color:var(--border-soft);}
.mx-delta-lbl{font-family:var(--font-body);font-weight:500;opacity:.8;letter-spacing:0;}

/* ============================================================
   APEX INSIGHT
   ============================================================ */
.mx-insight-top{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:var(--space-5);}
.mx-insight-mark{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--mx-gold);
  background:var(--mx-gold-soft);border:1px solid var(--mx-gold-line);
}
.mx-insight-mark svg{width:18px;height:18px;}
.mx-insight-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mx-insight-name{
  font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mx-gold);
}
.mx-insight-meta{font-size:var(--text-caption-size);color:var(--muted2);}
.mx-priority{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--text-label-size);font-weight:650;letter-spacing:.02em;
  color:var(--muted);background:var(--surface2);border:1px solid var(--border-soft);
}
.mx-priority::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.mx-priority.is-alta{color:var(--red);background:var(--red-soft);border-color:var(--red-soft-border);}
.mx-priority.is-media{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-soft-border);}
.mx-priority.is-informativa{color:var(--green);background:var(--green-soft);border-color:var(--green-soft-border);}

.mx-insight-title{
  position:relative;margin:0 0 var(--space-3);
  font-family:var(--font-display);font-size:var(--text-h2-size);font-weight:var(--text-h2-weight);
  letter-spacing:var(--text-h2-ls);line-height:var(--text-h2-lh);color:var(--text);
}
.mx-insight-body{
  position:relative;margin:0;max-width:64ch;
  font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text);
}
.mx-insight-action{
  position:relative;margin-top:var(--space-5);padding:var(--space-4) var(--space-5);
  border-radius:var(--r-md);background:var(--surface2);border:1px solid var(--border-soft);
}
.mx-insight-action-lbl{
  display:block;font-size:var(--text-label-size);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px;
}
.mx-insight-action p{margin:0;font-size:var(--text-body-sm-size);line-height:1.6;color:var(--text);font-weight:560;}

/* ============================================================
   MÉTRICAS — rejilla de cifras
   ============================================================ */
.mx-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.mx-stat{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--space-4) var(--space-5);
  background:var(--surface2);border:1px solid var(--border-soft);border-radius:var(--r-md);
  animation:revealUp .45s var(--ease) both;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.mx-stat:nth-child(2){animation-delay:.04s;}
.mx-stat:nth-child(3){animation-delay:.08s;}
.mx-stat:nth-child(4){animation-delay:.12s;}
.mx-stat:nth-child(5){animation-delay:.16s;}
.mx-stat:nth-child(6){animation-delay:.2s;}
.mx-stat:hover{border-color:var(--border);}
.mx-stat-lbl{
  font-size:var(--text-label-size);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);
}
.mx-stat-val{
  font-family:var(--font-display);font-size:22px;font-weight:650;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2;
}
.mx-stat-note{font-size:var(--text-caption-size);line-height:1.45;color:var(--muted);}

.mx-stat.is-pos .mx-stat-val{color:var(--green);}
.mx-stat.is-neg .mx-stat-val{color:var(--red);}
.mx-stat.is-pos .mx-stat-note,
.mx-stat.is-neg .mx-stat-note{font-weight:650;}
.mx-stat.is-pos .mx-stat-note{color:var(--green);}
.mx-stat.is-neg .mx-stat-note{color:var(--red);}

.mx-mini-lbl{
  display:block;font-size:var(--text-label-size);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px;
}
.mx-mini-val{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);}
.mx-mini-val.is-good{color:var(--green);}
.mx-mini-val.is-warn{color:var(--amber);}

/* ============================================================
   DIMENSIONES
   ============================================================ */
.mx-dim-list{display:flex;flex-direction:column;gap:var(--space-5);}
.mx-dim{display:flex;flex-direction:column;gap:8px;}
.mx-dim-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);}
.mx-dim-label{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);}
.mx-dim-value{
  font-family:var(--font-mono);font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.mx-dim-max{font-size:var(--text-label-size);color:var(--muted2);margin-left:2px;font-weight:500;}
.mx-dim-fill{
  display:block;height:100%;width:var(--mx-dim-w,0%);border-radius:6px;
  background:var(--amber);
  animation:mxBarGrow .8s var(--ease) .1s both;
}
.mx-dim.is-high .mx-dim-fill{background:var(--green);}
.mx-dim-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
.mx-dim-hint{font-size:var(--text-caption-size);color:var(--muted);line-height:1.45;}
.mx-dim-split{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);
  margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-soft);
}

/* ============================================================
   PATRONES
   ============================================================ */
.mx-pattern-list{display:flex;flex-direction:column;gap:var(--space-3);}
.mx-pattern{
  position:relative;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-md);padding:var(--space-5) var(--space-6);overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.mx-pattern::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted2);}
.mx-pattern.is-warn::before{background:var(--amber);}
.mx-pattern.is-bad::before{background:var(--red);}
.mx-pattern.is-good::before{background:var(--green);}
.mx-pattern.is-info::before{background:var(--blue);}
.mx-pattern:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:var(--shadow-sm);}
.mx-pattern-top{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);flex-wrap:wrap;}
.mx-pattern-cat{
  font-size:var(--text-label-size);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-2xs);
  color:var(--muted);background:var(--surface2);
}
.mx-pattern.is-warn .mx-pattern-cat{color:var(--amber);background:var(--amber-soft);}
.mx-pattern.is-bad .mx-pattern-cat{color:var(--red);background:var(--red-soft);}
.mx-pattern.is-good .mx-pattern-cat{color:var(--green);background:var(--green-soft);}
.mx-pattern.is-info .mx-pattern-cat{color:var(--blue);background:var(--blue-soft);}
.mx-pattern-src{font-size:var(--text-label-size);color:var(--muted2);margin-left:auto;}
.mx-pattern-title{
  font-family:var(--font-display);font-size:var(--text-h4-size);font-weight:650;letter-spacing:-.01em;
  margin:0 0 6px;color:var(--text);line-height:1.35;
}
.mx-pattern-text{margin:0;font-size:var(--text-body-sm-size);line-height:1.6;color:var(--muted);}

/* ============================================================
   ÚLTIMOS ANÁLISIS
   ============================================================ */
.mx-recent-list{display:flex;flex-direction:column;}
.mx-recent-row{
  display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;cursor:pointer;
  padding:var(--space-3) 0;background:none;border:none;border-top:1px solid var(--border-soft);
  font-family:var(--font-body);
}
.mx-recent-list .mx-recent-row:first-child{border-top:none;}
.mx-recent-ic{font-size:16px;flex-shrink:0;width:20px;text-align:center;}
.mx-recent-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mx-recent-asset{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mx-recent-meta{font-size:var(--text-caption-size);color:var(--muted);}
.mx-recent-score{font-size:var(--text-caption-size);font-weight:650;color:var(--muted);flex-shrink:0;
  padding:3px 9px;border-radius:var(--r-2xs);background:var(--surface2);}

/* ============================================================
   MARKET PULSE — primer bloque del Panel (ver dashboard.js /
   market-pulse.js). Tarjeta normal (.mx-card, sin filo de champán):
   es contenido general de mercado, no una función exclusiva de Max.
   ============================================================ */
.mx-pulse-state{margin:0 0 var(--space-4);font-size:var(--text-body-sm-size);font-weight:600;color:var(--text);}
.mx-pulse-catalyst{
  padding:var(--space-4) var(--space-5);border-radius:var(--r-md);
  background:var(--surface2);border:1px solid var(--border-soft);margin-bottom:var(--space-4);
}
.mx-pulse-catalyst-lbl{
  display:block;font-size:var(--text-label-size);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px;
}
.mx-pulse-catalyst-title{margin:0 0 4px;font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);line-height:1.4;}
.mx-pulse-catalyst-sum{margin:0 0 8px;font-size:var(--text-caption-size);color:var(--muted);line-height:1.55;}
.mx-pulse-impact{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  font-size:var(--text-label-size);font-weight:650;color:var(--muted);background:var(--surface3);
}
.mx-pulse-impact.is-high{color:var(--red);background:var(--red-soft);}
.mx-pulse-impact.is-medium{color:var(--amber);background:var(--amber-soft);}
.mx-pulse-impact.is-low{color:var(--green);background:var(--green-soft);}
.mx-pulse-chips{display:flex;flex-wrap:wrap;gap:8px;}
.mx-pulse-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--surface2);border:1px solid var(--border-soft);
  font-family:var(--font-mono);font-size:var(--text-label-size);font-weight:650;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.mx-pulse-chip svg{flex-shrink:0;}
.mx-pulse-chip.is-up{color:var(--green);}
.mx-pulse-chip.is-down{color:var(--red);}
.mx-pulse-chip.is-flat{color:var(--muted2);}

/* ============================================================
   PARA MAX — envoltorio del grupo premium (Trading Score + APEX
   Insight). El dorado se reserva al propio rótulo: el resto de la
   sección sigue vistiendo las tarjetas .is-premium de siempre.
   ============================================================ */
.mx-para-max{display:flex;flex-direction:column;gap:var(--space-5);}
.mx-para-max-eyebrow{color:var(--mx-gold);}

/* ============================================================
   ACCESOS RÁPIDOS
   ============================================================ */
.mx-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.mx-action{
  display:flex;align-items:center;gap:var(--space-4);text-align:left;cursor:pointer;
  padding:var(--space-5);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-xs);font-family:var(--font-body);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mx-action:hover{border-color:var(--border);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.mx-action:active{transform:scale(.99);}
.mx-action:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.mx-action-ic{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border-soft);color:var(--blue);
}
.mx-action-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.mx-action-name{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);}
.mx-action-desc{font-size:var(--text-caption-size);color:var(--muted);line-height:1.45;}

/* ============================================================
   ESTADOS — calibrando, vacío, esqueleto
   ============================================================ */
.mx-calibrating{
  display:flex;gap:14px;align-items:flex-start;
  padding:var(--space-5) var(--space-6);border-radius:var(--r-md);
  background:var(--surface2);border:1px dashed var(--border);
}
.mx-calibrating-mark{display:flex;gap:4px;align-items:center;padding-top:6px;flex-shrink:0;}
.mx-calibrating-mark span{
  width:5px;height:5px;border-radius:50%;background:var(--mx-gold);opacity:.35;
  animation:mxPulseDots 1.5s ease-in-out infinite;
}
.mx-calibrating-mark span:nth-child(2){animation-delay:.2s;}
.mx-calibrating-mark span:nth-child(3){animation-delay:.4s;}
@keyframes mxPulseDots{0%,100%{opacity:.25;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
.mx-calibrating-title{font-size:var(--text-body-sm-size);font-weight:650;color:var(--text);margin-bottom:5px;}
.mx-calibrating-text{margin:0 0 var(--space-2);font-size:var(--text-caption-size);line-height:1.6;color:var(--muted);max-width:62ch;}

.mx-empty{text-align:center;padding:var(--space-8) var(--space-6);}
.mx-empty-title{font-family:var(--font-display);font-size:var(--text-h4-size);font-weight:650;margin-bottom:8px;}
.mx-empty-text{margin:0;font-size:var(--text-body-sm-size);color:var(--muted);line-height:1.6;}

.mx-skel{
  border-radius:var(--r-lg);border:1px solid var(--border-soft);background:var(--surface);
  padding:var(--space-7);margin-bottom:var(--space-5);
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-xs);
}
.mx-skel-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.mx-skel-row .mx-skel{margin-bottom:0;}
.mx-skel-line{
  display:block;height:12px;border-radius:var(--r-2xs);
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:tpShimmer 1.4s ease infinite;
}
.mx-skel-line.mx-skel-xl{height:36px;border-radius:var(--r-sm);}

/* ============================================================
   RESPONSIVE — mismos cortes que el resto de APEX (900 / 640 / 480)
   ============================================================ */
@media(max-width:900px){
  .mx-actions{grid-template-columns:1fr 1fr;}
}

@media(max-width:640px){
  .mx-view{gap:var(--space-8);}
  .mx-card{padding:var(--space-5);border-radius:var(--r-md);}
  .mx-stat-grid{grid-template-columns:1fr 1fr;gap:var(--space-2);}
  .mx-actions{grid-template-columns:1fr;}
  .mx-dim-split{grid-template-columns:1fr;gap:var(--space-4);}
  .mx-skel-row{grid-template-columns:1fr;}

  .mx-score{flex-direction:column;align-items:stretch;gap:var(--space-6);}
  .mx-score-col{align-self:center;}
  .mx-score-meta{min-width:0;width:100%;}
}

@media(max-width:480px){
  .mx-score-dial{width:152px;height:152px;}
  .mx-score-value{font-size:46px;}
  .mx-score-value .of{font-size:16px;}
  .mx-pattern{padding:var(--space-4) var(--space-5);}
}

@media(max-width:380px){
  .mx-stat-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .mx-view > *,.mx-stat{animation:none;opacity:1;transform:none;}
  .mx-ring-fill{animation:none;stroke-dashoffset:var(--mx-ring-offset);}
  .mx-level-fill,.mx-dim-fill{animation:none;transform:none;}
  .mx-pattern:hover,.mx-action:hover{transform:none;}
}