/* Página de curso: DAX Avanzado. Identidad propia: barra de fórmulas y contexto de filtro.
   Acento índigo, monoespaciada en todo lo que es código y numeración "fx" en los pasos. */
.c-dax-avanzado {
  --dx: #3b4cc0; --dx-soft: #e2e6fb; --dx-ink: #1f2a7a; --dx-fn: #b4317a; --dx-ok: #1a8f55;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-dax-avanzado { --dx: #9aa8ff; --dx-soft: #1f2650; --dx-ink: #d4daff; --dx-fn: #f08ac0; --dx-ok: #52d18f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-dax-avanzado { --dx: #9aa8ff; --dx-soft: #1f2650; --dx-ink: #d4daff; --dx-fn: #f08ac0; --dx-ok: #52d18f; }
}
.c-dax-avanzado .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.6rem); max-width: 16ch; }
.c-dax-avanzado .c-hero h1 em, .c-dax-avanzado .section-head h2 em, .c-dax-avanzado .cs-path h2 em, .c-dax-avanzado .who h2 em { color: var(--dx); }
.c-dax-avanzado .who h2 em { color: var(--on-deep-accent); }
.c-dax-avanzado .cs-step-n { font-family: var(--mono); font-style: italic; font-weight: 600; font-size: .9rem; color: var(--dx); }
.c-dax-avanzado .gain-list span { font-family: var(--mono); -webkit-text-stroke-color: var(--dx); }
.c-dax-avanzado code { font-family: var(--mono); }

/* ---------- Portada: barra de fórmulas flotante ---------- */
.dx-fx { position: absolute; left: -26px; right: 4%; bottom: -30px; display: grid; gap: 8px; animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both; }
.dx-fx-bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.dx-fx-ico { flex: none; font-family: var(--mono); font-style: italic; font-weight: 700; font-size: .8rem; color: var(--dx); padding-right: 10px; border-right: 1px solid var(--line); }
.dx-fx-bar code { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); transition: opacity .35s; }
.dx-fx-bar code b { color: var(--dx); font-weight: 700; } .dx-fx-bar code i { font-style: normal; color: var(--dx-fn); }
.dx-card { justify-self: start; display: grid; gap: 2px; padding: 10px 16px; border-radius: 14px; background: var(--dx); color: #fff; box-shadow: var(--shadow); transition: opacity .35s, transform .35s; }
:root[data-theme="dark"] .dx-card { color: #10163d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dx-card { color: #10163d; } }
.dx-card small { font-size: .7rem; opacity: .85; } .dx-card strong { font-family: var(--f-display); font-size: 1.4rem; }
.dx-fx.swap code { opacity: 0; } .dx-fx.swap .dx-card { opacity: 0; transform: translateY(6px); }

/* ---------- Historia ---------- */
.dx-stage { font-size: .86rem; }
.c-dax-avanzado .s2, .c-dax-avanzado .s4 { display: block; }
.c-dax-avanzado .s5 { padding: 7%; }

/* Matriz */
.dx-mx { border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; font-size: .8rem; }
.dx-mx .r { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dx-mx .r span:not(:first-child) { text-align: right; font-family: var(--mono); font-size: .76rem; }
.dx-mx .r.h { border-top: 0; font-weight: 700; background: var(--surface); font-size: .74rem; }
.dx-mx .r.h span { font-family: var(--f-body) !important; }
.dx-mx .r.t { font-weight: 700; background: var(--surface); }
.dx-mx .bad { color: var(--bad); font-weight: 700; text-decoration: underline wavy; text-underline-offset: 3px; }
.dx-mx .good { color: var(--dx-ok); font-weight: 700; }
.dx-mx .r.on { background: var(--dx-soft); box-shadow: inset 3px 0 0 var(--dx); }
.dx-err { position: absolute; left: 7%; right: 7%; bottom: 7%; display: grid; gap: 4px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bad) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); font-size: .78rem; line-height: 1.4; --d: .35s; }
.dx-err b { color: var(--bad); }
.cs-stage:not([data-step="1"]) .s1 .dx-mx { opacity: 0; transform: translateY(18px); }
.cs-stage:not([data-step="1"]) .dx-err { opacity: 0; transform: translateY(16px); }

/* Escena 2: código con variables */
.dx-code { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: .76rem; line-height: 1.65; white-space: pre-wrap; }
.dx-code b { color: #c3cbff; } .dx-code i { font-style: normal; color: #f5a8cf; font-weight: 600; } .dx-code u { text-decoration: none; color: #8fe6dc; }
.dx-watch { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; --d: .3s; }
.dx-watch li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--dx); }
.dx-watch span { font-family: var(--mono); font-size: .66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dx-watch b { font-family: var(--mono); font-size: .8rem; color: var(--dx); }
.dx-tip { position: absolute; left: 7%; right: 7%; bottom: 7%; margin: 0; font-size: .78rem; color: var(--muted); --d: .5s; }
.cs-stage:not([data-step="2"]) .dx-code { opacity: 0; transform: translateY(-12px); }
.cs-stage:not([data-step="2"]) .dx-watch, .cs-stage:not([data-step="2"]) .dx-tip { opacity: 0; transform: translateY(14px); }

/* Escena 3: contexto de filtro */
.dx-ctx { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--dx); }
.dx-ctx small { font-size: .72rem; font-weight: 700; color: var(--muted); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dx-chips span { position: relative; padding: 4px 10px; border-radius: 8px; font-family: var(--mono); font-size: .72rem; background: var(--dx-soft); color: var(--dx-ink); }
.dx-chips span.x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--bad); transform: scaleX(0); transform-origin: left; transition: transform .5s .9s; }
.cs-stage[data-step="3"] .dx-chips span.x::after { transform: scaleX(1); }
.cs-stage[data-step="3"] .dx-chips span.x { opacity: .55; transition: opacity .4s .9s; }
.dx-ctx code { font-size: .72rem; color: var(--ink); }
.dx-ctx code u { text-decoration: none; color: var(--dx-fn); font-weight: 700; }
.dx-mx2 { margin-top: 12px; --d: .25s; }
.dx-checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; --d: .45s; }
.dx-checks li code { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: .68rem; color: var(--dx-fn); background: color-mix(in srgb, var(--dx-fn) 12%, var(--surface)); }
.cs-stage:not([data-step="3"]) .dx-ctx { opacity: 0; transform: translateY(-14px); }
.cs-stage:not([data-step="3"]) .dx-mx2, .cs-stage:not([data-step="3"]) .dx-checks { opacity: 0; transform: translateY(14px); }

/* Escena 4: períodos del negocio */
.dx-year small, .dx-run small { font-size: .72rem; font-weight: 700; color: var(--muted); }
.dx-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 6px; }
.dx-months i { font-style: normal; display: grid; place-items: center; height: 30px; border-radius: 6px; font-size: .62rem; font-weight: 700; color: var(--dx-ink); background: var(--dx-soft); }
.dx-months i:nth-child(n+7) { background: color-mix(in srgb, var(--dx) 30%, var(--dx-soft)); }
.dx-weeks { display: flex; gap: 4px; margin-top: 6px; }
.dx-weeks span { padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: .64rem; border: 1px solid var(--line); color: var(--muted); }
.dx-weeks span.on { border-color: var(--dx); color: var(--dx); font-weight: 700; }
.dx-run { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); --d: .2s; }
.dx-run svg { display: block; width: 100%; height: 110px; margin-top: 6px; }
.dx-area { fill: color-mix(in srgb, var(--dx) 16%, transparent); stroke: none; }
.dx-line { fill: none; stroke: var(--dx); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s .4s ease; }
.cs-stage[data-step="4"] .dx-line { stroke-dashoffset: 0; }
.dx-snip { position: absolute; left: 7%; right: 7%; bottom: 7%; padding: 7px 10px; border-radius: 10px; background: var(--deep); color: var(--on-deep); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --d: .5s; }
.dx-snip u { text-decoration: none; color: #f5a8cf; }
.cs-stage:not([data-step="4"]) .s4 > * { opacity: 0; transform: translateY(14px); }

/* Escena 5: tabla virtual y parámetro */
.dx-param { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-param small { font-size: .72rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.dx-param span { padding: 6px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); }
.dx-param span.on { background: var(--dx); border-color: var(--dx); color: #fff; }
:root[data-theme="dark"] .dx-param span.on { color: #10163d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dx-param span.on { color: #10163d; } }
.dx-virtual { margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--dx) 55%, transparent); background: color-mix(in srgb, var(--dx-soft) 50%, var(--surface)); display: grid; gap: 8px; --d: .2s; }
.dx-virtual header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dx-virtual header code { font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-virtual header code u { text-decoration: none; color: var(--dx-fn); font-weight: 700; }
.dx-virtual header em { flex: none; font-style: normal; font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--dx); color: #fff; }
:root[data-theme="dark"] .dx-virtual header em { color: #10163d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dx-virtual header em { color: #10163d; } }
.dx-vb { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; font-size: .74rem; }
.dx-vb i { height: 18px; width: var(--w); border-radius: 0 6px 6px 0; background: var(--dx); transform-origin: left; transition: transform .8s .4s cubic-bezier(.2, .8, .2, 1); }
.cs-stage:not([data-step="5"]) .dx-vb i { transform: scaleX(0); }
.cs-stage[data-step="5"] .dx-param span.on { animation: dx-pick 1s .3s both; }
@keyframes dx-pick { from { background: var(--surface); color: var(--ink); border-color: var(--line); } }
.cs-stage:not([data-step="5"]) .s5 > * { opacity: 0; transform: translateY(14px); }

/* ---------- Programa y recorrido ---------- */
.c-dax-avanzado .unit-n { font-family: var(--mono); font-style: italic; letter-spacing: 0; text-transform: none; color: var(--dx); }
.c-dax-avanzado .unit li::before { background: var(--dx); border-radius: 1px; }
.c-dax-avanzado .unit code { font-size: .84em; padding: 1px 5px; border-radius: 5px; color: var(--dx-ink); background: var(--dx-soft); }
.dx-road { grid-template-columns: 1.4fr 1fr 1fr; }
.dx-road .dots { grid-template-columns: repeat(7, 1fr); max-width: 220px; }
.c-dax-avanzado .road-classes.on .dots i { background: var(--dx); }
.c-dax-avanzado .road-line i { background: linear-gradient(90deg, var(--dx), var(--dx-fn)); }

@media (max-width: 900px) { .dx-road { grid-template-columns: minmax(0, 1fr); } .dx-fx { left: -10px; right: 6%; } }
@media (max-width: 560px) {
  .dx-fx-bar code { font-size: .62rem; } .dx-card strong { font-size: 1.1rem; } .dx-card { padding: 7px 12px; }
  .dx-stage { font-size: .76rem; }
  .dx-mx { font-size: .66rem; } .dx-mx .r { padding: 5px 10px; gap: 4px; } .dx-mx .r span:not(:first-child) { font-size: .62rem; } .dx-mx .r.h { font-size: .6rem; }
  .dx-err { font-size: .64rem; padding: 7px 10px; gap: 2px; bottom: 5%; left: 5%; right: 5%; }
  .dx-code { font-size: .58rem; padding: 9px 10px; line-height: 1.5; }
  .dx-watch { margin-top: 8px; gap: 5px; } .dx-watch li { padding: 5px 6px; } .dx-watch span { font-size: .52rem; } .dx-watch b { font-size: .62rem; }
  .dx-tip { display: none; }
  .dx-ctx { padding: 7px 10px; } .dx-ctx small { font-size: .6rem; } .dx-chips { margin: 5px 0; } .dx-chips span { font-size: .6rem; padding: 3px 7px; } .dx-ctx code { font-size: .6rem; }
  .dx-mx2 { margin-top: 7px; } .dx-checks { margin-top: 6px; } .dx-checks li code { font-size: .56rem; }
  .dx-months i { height: 22px; font-size: .5rem; } .dx-weeks span { font-size: .54rem; padding: 2px 5px; }
  .dx-run { margin-top: 8px; padding: 7px 9px; } .dx-run svg { height: 60px; } .dx-snip { font-size: .6rem; bottom: 5%; left: 5%; right: 5%; }
  .dx-param span { padding: 4px 9px; font-size: .62rem; } .dx-virtual { margin-top: 8px; padding: 8px 10px; gap: 6px; } .dx-virtual header code { font-size: .58rem; } .dx-vb { grid-template-columns: 62px 1fr; font-size: .62rem; } .dx-vb i { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-fx { animation: none !important; }
  .dx-line { transition: none !important; stroke-dashoffset: 0; }
  .dx-vb i, .dx-chips span.x::after, .dx-fx-bar code, .dx-card { transition: none !important; }
  .cs-stage[data-step="5"] .dx-param span.on { animation: none; }
}