/* ============================================================
   APEX INTELLIGENCE — el cerebro visible de APEX

   TODA regla de esta hoja empieza por `.ix-`. Es una capa NUEVA y
   transversal a los cuatro planes, así que —a diferencia de max.css—
   NO cuelga de html[data-tier="max"]: hacerlo la habría vuelto
   invisible para Free y Pro, que es justo lo contrario de lo que esta
   pantalla tiene que ser.

   No se define ni un color nuevo. Fondo, superficies, texto, verde,
   rojo y ámbar son los tokens de base.css, así que la pantalla se ve
   bien en claro y en oscuro sin una sola regla duplicada y sin forzar
   un tema: el tema es del usuario, aquí también.

   El rojo de marca es ACENTO: el filo del hero, el número de sección y
   poco más. Nunca relleno.
   ============================================================ */

.ix-root{
  max-width:860px;
  margin:0 auto;
  padding:var(--space-page-top) var(--space-5) var(--space-page-bottom);
}

/* ---------- HERO ---------- */
.ix-hero{
  padding:0 0 var(--space-8);
  border-bottom:1px solid var(--border-soft);
  margin-bottom:var(--space-8);
}
.ix-hero-eyebrow{
  font-size:var(--text-label-size);
  font-weight:var(--text-label-weight);
  letter-spacing:var(--text-label-ls);
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 var(--space-3);
}
.ix-hero-title{
  font-family:var(--font-display);
  font-size:var(--text-display-size);
  font-weight:var(--text-display-weight);
  line-height:var(--text-display-lh);
  letter-spacing:var(--text-display-ls);
  color:var(--text);
  margin:0;
  max-width:16ch;
}
.ix-hero-synth{
  font-size:clamp(16px,2.1vw,19px);
  line-height:1.62;
  color:var(--muted);
  margin:var(--space-5) 0 0;
  max-width:60ch;
}
.ix-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
  margin-top:var(--space-6);
}
.ix-hero-meta-item{
  font-size:var(--text-caption-size);
  color:var(--muted2);
}
.ix-hero-meta-item strong{ color:var(--muted); font-weight:600; text-transform:capitalize; }
.ix-conf-alta strong{ color:var(--green); }
.ix-conf-media strong{ color:var(--amber); }
.ix-hero-basis{
  font-size:var(--text-caption-size);
  color:var(--muted2);
  margin:var(--space-2) 0 0;
  max-width:62ch;
}

/* ---------- APEX APRENDIÓ ----------
   Solo se pinta cuando hay un evento real detrás (ver aprendizajeHtml).
   El destello ocurre UNA vez al aparecer; nada late en bucle. */
.ix-learned{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-5);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  margin-bottom:var(--space-7);
}
.ix-learned-spark{
  flex:none;
  width:8px; height:8px;
  margin-top:7px;
  border-radius:50%;
  background:var(--blue);
  animation:ix-spark .9s var(--ease) 1;
}
@keyframes ix-spark{
  0%{ transform:scale(.4); opacity:0; box-shadow:0 0 0 0 var(--blue-soft); }
  60%{ transform:scale(1); opacity:1; box-shadow:0 0 0 7px var(--blue-soft); }
  100%{ transform:scale(1); opacity:1; box-shadow:0 0 0 0 transparent; }
}
.ix-learned-body{ display:grid; gap:var(--space-3); }
.ix-learned-item{
  margin:0;
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--muted);
}
.ix-learned-item strong{ color:var(--text); font-weight:650; }
.ix-learned-when{
  display:block;
  font-size:var(--text-caption-size);
  color:var(--muted2);
  margin-top:2px;
}

/* ---------- ÍNDICE ---------- */
.ix-index{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-9);
}
.ix-index-chip{
  appearance:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  border-radius:var(--r-pill);
  padding:7px 14px;
  font-size:var(--text-caption-size);
  font-weight:500;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ix-index-chip:hover{ color:var(--text); border-color:var(--muted2); }

/* ---------- BLOQUES ---------- */
.ix-block{ margin-bottom:var(--space-11); scroll-margin-top:var(--space-7); }
.ix-sec-head{
  display:flex;
  gap:var(--space-4);
  align-items:baseline;
  margin-bottom:var(--space-6);
  scroll-margin-top:var(--space-7);
}
.ix-sec-n{
  flex:none;
  font-family:var(--font-mono);
  font-size:var(--text-caption-size);
  color:var(--blue);
  padding-top:3px;
}
.ix-sec-title{
  font-family:var(--font-display);
  font-size:var(--text-h2-size);
  font-weight:var(--text-h2-weight);
  line-height:var(--text-h2-lh);
  letter-spacing:var(--text-h2-ls);
  color:var(--text);
  margin:0;
}
.ix-sec-sub{
  font-size:var(--text-body-sm-size);
  color:var(--muted2);
  margin:var(--space-1) 0 0;
  max-width:52ch;
}

.ix-note{
  font-size:var(--text-caption-size);
  line-height:var(--text-caption-lh);
  color:var(--muted2);
  margin:var(--space-4) 0 0;
  max-width:62ch;
}
.ix-dim{ color:var(--muted2); }

/* ---------- TARJETAS ---------- */
.ix-card{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:var(--space-6);
  margin-bottom:var(--space-4);
}
.ix-card-title{
  font-size:var(--text-h4-size);
  font-weight:var(--text-h4-weight);
  color:var(--text);
  margin:0 0 var(--space-4);
}
.ix-card-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
}
.ix-card-split > .ix-note{ grid-column:1 / -1; margin-top:var(--space-2); }
.ix-two-line{
  margin:0 0 var(--space-2);
  font-size:var(--text-body-sm-size);
  line-height:var(--text-body-sm-lh);
  color:var(--muted);
}
.ix-two-line strong{ color:var(--text); font-weight:650; }

.ix-vals{ display:flex; flex-wrap:wrap; gap:var(--space-7); }
.ix-val{ display:grid; gap:2px; }
.ix-val-label{
  font-size:var(--text-label-size);
  letter-spacing:var(--text-label-ls);
  text-transform:uppercase;
  color:var(--muted2);
}
.ix-val-value{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--text);
}
.ix-val-note{ font-size:var(--text-caption-size); color:var(--muted2); }

/* ---------- RASGOS ---------- */
.ix-traits{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
.ix-trait{ padding-left:var(--space-4); border-left:2px solid var(--border); }
.ix-trait-bien{ border-left-color:var(--green); }
.ix-trait-mal{ border-left-color:var(--amber); }
.ix-trait-label{
  display:block;
  font-size:var(--text-body-size);
  line-height:1.5;
  color:var(--text);
}
.ix-trait-ev{
  display:block;
  font-size:var(--text-caption-size);
  color:var(--muted2);
  margin-top:3px;
}

/* ---------- PATRONES ---------- */
.ix-patterns{ display:grid; gap:var(--space-4); }
.ix-pattern{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:var(--space-6);
  transition:border-color var(--dur-med) var(--ease);
}
.ix-pattern.is-open{ border-color:var(--muted2); }
.ix-pattern-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.ix-chip{
  font-size:var(--text-label-size);
  font-weight:var(--text-label-weight);
  letter-spacing:var(--text-label-ls);
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  color:var(--muted2);
  white-space:nowrap;
}
.ix-tono-alerta{ color:var(--amber); border-color:var(--amber-soft-border); background:var(--amber-soft); }
.ix-tono-bien{ color:var(--green); border-color:var(--green-soft-border); background:var(--green-soft); }
.ix-tono-neutro{ color:var(--muted); }
.ix-mad-consolidado{ color:var(--text); border-color:var(--muted2); }
.ix-chip-kind{ opacity:.75; }

.ix-pattern-statement{
  margin:0;
  font-size:var(--text-body-size);
  line-height:1.58;
  color:var(--text);
  max-width:64ch;
}
.ix-pattern-meta{
  margin:var(--space-3) 0 0;
  font-size:var(--text-caption-size);
  color:var(--muted2);
}

/* ---------- EVIDENCIA ---------- */
.ix-ev-toggle{
  appearance:none;
  background:transparent;
  border:0;
  padding:var(--space-4) 0 0;
  color:var(--blue);
  font-size:var(--text-body-sm-size);
  font-weight:600;
  cursor:pointer;
}
.ix-ev-toggle:hover{ text-decoration:underline; }
.ix-ev-panel{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--border-soft);
}
.ix-ev-count{
  margin:0 0 var(--space-3);
  font-size:var(--text-body-sm-size);
  color:var(--muted);
}
.ix-ev-count strong{ color:var(--text); }
.ix-ev-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.ix-ev-item{
  display:grid;
  /* La fecha lleva su propia columna HOLGADA y `nowrap`: con una pista
     estrecha, "12 sept 2026" se partía en tres líneas y se entrelazaba
     con la descripción de al lado, dejando ilegible justo la pantalla
     que tiene que demostrar por qué APEX afirma algo. */
  grid-template-columns:10px minmax(112px, auto) 1fr auto;
  gap:var(--space-3);
  align-items:baseline;
  font-size:var(--text-caption-size);
  color:var(--muted);
}
.ix-ev-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  transform:translateY(-1px);
}
.ix-ev-en_contra .ix-ev-dot{ background:var(--green); }
.ix-ev-date{ color:var(--muted2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ix-ev-what{ color:var(--text); }
.ix-ev-unres{ color:var(--muted2); }
.ix-ev-sign{ color:var(--muted2); }
.ix-ev-origin{
  margin:var(--space-4) 0 0;
  font-size:var(--text-caption-size);
  color:var(--muted2);
}
.ix-ev-empty{ margin:0; font-size:var(--text-caption-size); color:var(--muted2); }

/* ---------- MEMORIA ---------- */
.ix-memory{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6); }
.ix-mem{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:var(--space-5);
}
.ix-mem-date{
  font-family:var(--font-mono);
  font-size:var(--text-caption-size);
  color:var(--muted2);
  padding-top:2px;
  white-space:nowrap;
}
.ix-mem-body{ border-left:1px solid var(--border); padding-left:var(--space-5); }
.ix-mem-what{
  margin:0;
  font-size:var(--text-body-size);
  color:var(--text);
}
.ix-mem-asset{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.ix-mem-ref,
.ix-mem-origin{
  margin:3px 0 0;
  font-size:var(--text-caption-size);
  color:var(--muted2);
}
.ix-mem-link{
  margin:var(--space-3) 0 0;
  font-size:var(--text-caption-size);
  color:var(--muted);
}
.ix-mem-link span{ display:block; color:var(--text); margin-top:2px; }

/* ---------- TIMELINE ---------- */
.ix-timeline{ list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; gap:var(--space-6); }
.ix-tl{
  display:grid;
  grid-template-columns:70px 12px 1fr;
  gap:var(--space-4);
  align-items:start;
}
.ix-tl-date{
  font-family:var(--font-mono);
  font-size:var(--text-caption-size);
  color:var(--muted2);
  white-space:nowrap;
  padding-top:1px;
}
.ix-tl-mark{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--muted2);
  margin-top:4px;
}
.ix-tl-superado .ix-tl-mark{ border-color:var(--green); background:var(--green); }
.ix-tl-detectado .ix-tl-mark{ border-color:var(--amber); }
.ix-tl-leccion .ix-tl-mark{ border-color:var(--blue); }
.ix-tl-title{ margin:0; font-size:var(--text-body-size); color:var(--text); font-weight:600; }
.ix-tl-text{ margin:2px 0 0; font-size:var(--text-body-sm-size); color:var(--muted); line-height:1.5; max-width:58ch; }

/* ---------- OBSERVACIONES ---------- */
.ix-obs{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-5); }
.ix-ob{ padding-left:var(--space-5); border-left:2px solid var(--border); }
.ix-ob-statement{
  margin:0;
  font-size:var(--text-body-size);
  line-height:1.55;
  color:var(--text);
  max-width:62ch;
}
.ix-ob-meta{ margin:var(--space-2) 0 0; font-size:var(--text-caption-size); color:var(--muted2); }

/* ---------- REGLAS ---------- */
.ix-rules{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
.ix-rule{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:var(--space-5);
}
.ix-rule-text{ margin:0; font-size:var(--text-body-size); line-height:1.5; color:var(--text); max-width:62ch; }
.ix-rule-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin:var(--space-3) 0 0; }
.ix-rule-rate{ font-size:var(--text-caption-size); color:var(--muted2); }
.ix-rule-rate strong{ color:var(--green); }

/* ---------- ESTADOS VACÍOS ----------
   Dos formas distintas, a propósito: "sigo aprendiendo" (falta muestra)
   y "esta capa no la sirve tu plan" (existe, no llega). */
.ix-learning{
  display:flex;
  gap:var(--space-4);
  padding:var(--space-6);
  border:1px dashed var(--border);
  border-radius:var(--r-lg);
  background:transparent;
}
.ix-learning-pulse{ display:flex; gap:4px; flex:none; padding-top:7px; }
.ix-learning-pulse span{
  width:5px; height:5px; border-radius:50%;
  background:var(--muted2);
  animation:ix-pulse 1.5s var(--ease) infinite;
}
.ix-learning-pulse span:nth-child(2){ animation-delay:.2s; }
.ix-learning-pulse span:nth-child(3){ animation-delay:.4s; }
@keyframes ix-pulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.ix-learning-title{ margin:0; font-size:var(--text-h4-size); font-weight:600; color:var(--text); }
.ix-learning-text{ margin:var(--space-2) 0 0; font-size:var(--text-body-sm-size); line-height:1.55; color:var(--muted); max-width:58ch; }

.ix-locked{
  margin-top:var(--space-4);
  padding:var(--space-5);
  border:1px solid var(--border-soft);
  border-radius:var(--r-md);
  background:var(--surface2);
}
.ix-locked-head{
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-h4-size); font-weight:600; color:var(--text);
}
.ix-locked-head svg{ color:var(--muted2); }
.ix-locked-text{ margin:var(--space-2) 0 0; font-size:var(--text-body-sm-size); line-height:1.55; color:var(--muted); max-width:60ch; }
.ix-locked-note{ margin:var(--space-2) 0 0; font-size:var(--text-caption-size); color:var(--muted2); }
.ix-locked-cta{
  appearance:none; background:transparent; border:0; padding:var(--space-3) 0 0;
  color:var(--blue); font-size:var(--text-body-sm-size); font-weight:600; cursor:pointer;
}
.ix-locked-cta:hover{ text-decoration:underline; }

/* ---------- PANTALLA VACÍA ---------- */
.ix-empty{
  max-width:560px;
  margin:0 auto;
  padding:clamp(64px,14vh,140px) var(--space-5) var(--space-page-bottom);
  text-align:left;
}
.ix-empty-title{
  font-family:var(--font-display);
  font-size:var(--text-h1-size);
  font-weight:var(--text-h1-weight);
  letter-spacing:var(--text-h1-ls);
  color:var(--text);
  margin:0;
}
.ix-empty-text{
  margin:var(--space-4) 0 0;
  font-size:var(--text-body-size);
  line-height:1.62;
  color:var(--muted);
}
.ix-empty-cta{
  appearance:none;
  margin-top:var(--space-6);
  padding:11px 20px;
  border-radius:var(--r-pill);
  border:0;
  background:var(--blue);
  color:#fff;
  font-size:var(--text-body-sm-size);
  font-weight:600;
  cursor:pointer;
}

/* ---------- PIE ---------- */
.ix-foot{
  padding-top:var(--space-7);
  border-top:1px solid var(--border-soft);
}
.ix-foot p{
  margin:0;
  font-size:var(--text-caption-size);
  line-height:1.6;
  color:var(--muted2);
  max-width:66ch;
}

/* ---------- ESQUELETO ----------
   La forma de lo que va a llegar, con el mismo grano. Nunca un spinner. */
.ix-skel{
  max-width:860px;
  margin:0 auto;
  padding:var(--space-page-top) var(--space-5);
  display:grid;
  gap:var(--space-4);
}
.ix-skel-line,
.ix-skel-cards span{
  display:block;
  height:16px;
  border-radius:var(--r-2xs);
  background:var(--surface2);
  animation:ix-shimmer 1.5s var(--ease) infinite;
}
.ix-skel-cards{ display:grid; gap:var(--space-4); margin-top:var(--space-6); }
.ix-skel-cards span{ height:96px; border-radius:var(--r-lg); }
.ix-skel-cards span:nth-child(2){ animation-delay:.12s; }
.ix-skel-cards span:nth-child(3){ animation-delay:.24s; }
@keyframes ix-shimmer{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---------- MÓVIL ---------- */
@media (max-width:760px){
  .ix-root{ padding-left:var(--space-4); padding-right:var(--space-4); }
  .ix-card-split{ grid-template-columns:1fr; gap:var(--space-5); }
  .ix-vals{ gap:var(--space-5); }
  .ix-ev-item{ grid-template-columns:10px 1fr; }
  .ix-ev-date{ grid-column:2; }
  .ix-ev-what,
  .ix-ev-sign{ grid-column:2; }
  .ix-mem{ grid-template-columns:1fr; gap:var(--space-2); }
  .ix-mem-body{ border-left:0; padding-left:0; }
  .ix-tl{ grid-template-columns:58px 10px 1fr; gap:var(--space-3); }
}

/* Respeta la preferencia del sistema: ninguna de estas señales es
   información, así que quitarlas no cuesta nada. */
@media (prefers-reduced-motion:reduce){
  .ix-learned-spark,
  .ix-learning-pulse span,
  .ix-skel-line,
  .ix-skel-cards span{ animation:none; }
}