/* ============================================================
   APEX — BRAND EVOLUTION 2026.2

   A small, late-loading alignment layer. It does not create routes,
   components or data: it makes the existing shell and Intelligence
   surface read like the official APEX system.

   Brand decisions used here:
   · one Indigo field for one meaningful Intelligence signal;
   · live data and navigation use rules and grouping, not card chrome;
   · the user keeps control, so no new automated action is introduced.
   ============================================================ */

/* The sidebar is product chrome, not a stack of tiles. The selected
   destination is ONE quiet surface: a whisper of Indigo, a hairline and
   the icon in the brand colour. The label stays in Ink — the accent is
   the signal, not the whole row.

   This used to be two rules in two layers that fought each other (a
   2px rule with square corners here, a 1px ring from refinement.css on
   top): the result read as a stray focus ring, not as navigation. Now
   the active state lives here, once, and refinement.css no longer
   touches it. */
.sidebar-nav .tab,
.sidebar-extra .nav-external{
  border-radius:var(--r-sm);
}
.sidebar-nav .tab.active{
  background:color-mix(in srgb, var(--blue) 7%, var(--surface));
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent);
}
.sidebar-nav .tab.active svg{color:var(--blue);}
html[data-theme="dark"] .sidebar-nav .tab.active{
  background:color-mix(in srgb, var(--blue) 14%, var(--surface));
}

/* APEX Intelligence already has evidence, progressive disclosure and
   user control in its markup. The field makes that single signal legible
   before the evidence list begins. */
/* The field is `--blue-fill`, not `--blue`: in dark mode `--blue` is a
   lavender made for TEXT on a dark canvas, and white on it measured
   3.12:1. The small lines keep a quieter voice through opacity, but
   never below 4.5:1 on the field (.86 measures 5.03:1; .7 was 3.84:1).
   It takes the material radius like every other container: a square
   field inside a rounded system read as an embedded banner. */
/* Sin sangrado: su borde cae en la columna, como el de cualquier otra
   tarjeta de la pantalla. Sangraba 20 px cuando la columna estaba
   centrada y traía su propio relleno lateral; alineada a la izquierda,
   ese sangrado se salía al margen de `main` (y en móvil, de la
   pantalla). */
.ix-hero{
  margin-inline:0;
  padding:var(--space-7) var(--space-6) var(--space-8);
  border:0;
  border-radius:var(--r-lg);
  background:var(--blue-fill);
}
/* The eyebrow is the one hero class that also lives OUTSIDE the field:
   the empty screens (`pantallaVacia`) open with it on the canvas. White
   there measured 1.1:1 in light mode — the label vanished. So its white
   is scoped to the field; elsewhere it keeps the Indigo text colour that
   intelligence.css gives it. */
.ix-hero .ix-hero-eyebrow,
.ix-hero-title,
.ix-hero-synth,
.ix-hero-meta-item,
.ix-hero-basis{color:#fff;}
.ix-hero .ix-hero-eyebrow{opacity:.86;}
.ix-hero-synth{opacity:.94;}
.ix-hero-meta-item{opacity:.86;}
.ix-hero-meta-item strong{color:#fff;}
.ix-hero-basis{opacity:.86;}

/* Intelligence cards keep the material that intelligence.css gives them
   (radius, padding, surface): refinement.css owns their depth. This
   layer used to strip their padding and radius while refinement.css
   gave them a surface and a shadow back — the result was a white card
   with its text glued to the edge. */
.ix-learned{
  border-radius:0;
  border-left:3px solid var(--blue);
  border-top:0;
  background:var(--blue-soft);
}

@media (max-width:640px){
  /* En la columna también en móvil: `main` deja 14 px de margen y un
     sangrado de 20 desbordaba la pantalla. */
  .ix-hero{margin-inline:0;padding-inline:var(--space-5);}
}

@media (prefers-reduced-motion:reduce){
  .ix-learned-spark{animation:none;}
}