/* Página de curso: Power BI Avanzado. Identidad propia: rendimiento y "motor" del modelo.
   Acento verde de "optimizado", números de paso en monoespaciada tipo cronómetro (01 / 05). */
.c-power-bi-avanzado {
  --av: #0f7a55; --av-soft: #d3f1e3; --av-ink: #0a4a34; --av-slow: #c2462e; --av-y: #e8a700;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-power-bi-avanzado { --av: #4fd39c; --av-soft: #143b2c; --av-ink: #b6f3d8; --av-slow: #ef7a62; --av-y: #f5c84a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-power-bi-avanzado { --av: #4fd39c; --av-soft: #143b2c; --av-ink: #b6f3d8; --av-slow: #ef7a62; --av-y: #f5c84a; }
}
.c-power-bi-avanzado .c-hero h1 em, .c-power-bi-avanzado .section-head h2 em, .c-power-bi-avanzado .cs-path h2 em { color: var(--av); }
.c-power-bi-avanzado .cs-step-n { font-family: var(--mono); font-size: .86rem; letter-spacing: .02em; color: var(--av); }
.c-power-bi-avanzado .cs-step-n::after { content: ""; display: inline-block; width: 46px; height: 2px; margin-left: 10px; vertical-align: middle; background: linear-gradient(90deg, var(--av), transparent); }
.c-power-bi-avanzado .gain-list span { font-family: var(--mono); font-weight: 600; -webkit-text-stroke-color: var(--av); }

/* ---------- Portada: analizador de rendimiento (antes y después) ---------- */
.av-perf { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px 16px; font-size: .84rem; display: grid; gap: 4px; }
.av-perf header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.av-perf-t { font-weight: 700; }
.av-perf-tag, .av-perf-row b, .av-mode { position: relative; display: inline-grid; }
.av-perf-tag > i, .av-perf-row b > i, .av-mode > i { grid-area: 1 / 1; font-style: normal; animation: av-a 9s infinite; }
.av-perf-tag > .av-b, .av-perf-row b > .av-b, .av-mode > .av-b { animation-name: av-b; }
.av-perf-tag i { padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--av-slow); text-align: center; }
.av-perf-tag i.av-b { background: var(--av); }
:root[data-theme="dark"] .av-perf-tag i { color: #0c1824; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-perf-tag i { color: #0c1824; } }
.av-perf-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 76px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.av-perf-row span { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-bar { display: block; height: 10px; border-radius: 6px; background: var(--av-slow); width: var(--a); animation: av-bar 9s infinite; }
.av-perf-row b { justify-items: end; font-family: var(--mono); font-weight: 500; font-size: .76rem; }
.av-perf-row b .av-a { color: var(--av-slow); } .av-perf-row b .av-b { color: var(--av); }
.av-perf footer { display: flex; gap: 10px; align-items: center; padding-top: 8px; font-size: .74rem; color: var(--muted); }
.av-mode i { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.av-fold {
  position: absolute; right: -14px; top: -40px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px;
  background: var(--deep); color: var(--on-deep); font-weight: 600; font-size: .86rem; box-shadow: var(--shadow);
  animation: c-in .7s .7s cubic-bezier(.2, .8, .2, 1) both, c-bob 5s 1.6s ease-in-out infinite;
}
.av-fold b { color: #6ee7b0; }
.av-fold-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #6ee7b0; color: #06281a; font-weight: 800; }
@keyframes av-a { 0%, 42% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes av-b { 0%, 42% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes av-bar { 0%, 40% { width: var(--a); background: var(--av-slow); } 50%, 92% { width: var(--b); background: var(--av); } 100% { width: var(--a); background: var(--av-slow); } }

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

/* Escena 1: reporte lento */
.av-report { border-radius: 16px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.av-report header { display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; font-weight: 700; background: var(--surface); border-bottom: 1px solid var(--line); }
.av-report header em { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--av-slow); }
.av-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.av-load { position: relative; height: 62px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; align-content: center; gap: 6px; }
.av-load.wide { grid-column: 1 / -1; height: 104px; }
.av-load i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--av-y); animation: c-spin .9s linear infinite; }
.av-load small { font-size: .72rem; color: var(--muted); }
.av-clock { position: absolute; left: 7%; bottom: 8%; padding: 9px 13px; border-radius: 12px; background: var(--av-slow); color: #fff; font-weight: 600; font-size: .8rem; --d: .25s; }
:root[data-theme="dark"] .av-clock { color: #2a0d06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-clock { color: #2a0d06; } }
.av-ask { position: absolute; right: 7%; bottom: 8%; max-width: 46%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--bg); font-size: .78rem; line-height: 1.35; --d: .45s; }
.av-ask b { display: block; font-weight: 600; opacity: .7; }
.cs-stage:not([data-step="1"]) .av-report { opacity: 0; transform: translateY(20px); }
.cs-stage:not([data-step="1"]) .av-clock, .cs-stage:not([data-step="1"]) .av-ask { opacity: 0; transform: scale(.85); }

/* Escena 2: modos de conexión */
.av-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.av-modes span { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .7rem; color: var(--muted); transition: border-color .4s .6s, background-color .4s .6s; }
.av-modes b { font-size: .86rem; color: var(--ink); }
.cs-stage[data-step="2"] .av-modes span:first-child { border-color: var(--av); background: var(--av-soft); }
.cs-stage[data-step="2"] .av-modes span.on { opacity: .6; }
.av-incr { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); --d: .2s; }
.av-incr small { font-size: .72rem; font-weight: 700; color: var(--muted); }
.av-years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 4px; margin-top: 8px; }
.av-years i { font-style: normal; display: grid; place-items: center; height: 40px; border-radius: 8px; font-family: var(--mono); font-size: .7rem; color: var(--muted); background: repeating-linear-gradient(90deg, var(--sky) 0 6px, var(--bg) 6px 8px); border: 1px solid var(--line); }
.av-years i.hot { color: var(--av-ink); background: var(--av-soft); border-color: var(--av); font-family: var(--f-body); font-weight: 700; text-align: center; line-height: 1.1; animation: av-hot 1.6s ease-in-out infinite; }
@keyframes av-hot { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--av) 22%, transparent); } }
.av-incr p { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: .68rem; color: var(--muted); }
.av-incr p span { width: 10px; height: 10px; border-radius: 3px; background: var(--sky); border: 1px solid var(--line); }
.av-incr p .k2 { margin-left: 8px; background: var(--av-soft); border-color: var(--av); }
.av-param { position: absolute; left: 7%; bottom: 7%; padding: 6px 10px; border-radius: 8px; font-family: var(--mono); font-size: .74rem; background: var(--deep); color: #b6f3d8; --d: .45s; }
.cs-stage:not([data-step="2"]) .av-modes, .cs-stage:not([data-step="2"]) .av-incr, .cs-stage:not([data-step="2"]) .av-param { opacity: 0; transform: translateY(16px); }

/* Escena 3: plegado de consultas */
.av-steps { position: absolute; left: 7%; top: 7%; width: 46%; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.av-steps header { padding: 8px 12px; font-size: .74rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface); }
.av-steps p { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: .78rem; }
.av-steps p:first-of-type { border-top: 0; }
.av-steps b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; }
.av-steps b.y { color: var(--av-ink); background: var(--av-soft); }
.av-steps b.n { color: #fff; background: var(--av-slow); }
.av-steps .moved { background: color-mix(in srgb, var(--av-slow) 9%, transparent); }
.cs-stage[data-step="3"] .av-steps .moved { animation: av-drop .9s .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes av-drop { from { transform: translateY(-140%); } }
.av-native { position: absolute; right: 7%; top: 18%; width: 40%; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: .72rem; line-height: 1.5; white-space: pre-wrap; box-shadow: var(--shadow); --d: .3s; }
.av-native small { display: block; margin-bottom: 6px; font-family: var(--f-body); font-weight: 700; font-size: .68rem; color: #6ee7b0; }
.av-native b { color: #6ee7b0; font-weight: 600; }
.av-note { position: absolute; right: 7%; bottom: 8%; width: 40%; margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.35; --d: .5s; }
.cs-stage:not([data-step="3"]) .av-steps { opacity: 0; transform: translateX(-18px); }
.cs-stage:not([data-step="3"]) .av-native, .cs-stage:not([data-step="3"]) .av-note { opacity: 0; transform: translateX(18px); }

/* Escena 4: modelo con dimensión de rol */
.av-rel { position: absolute; inset: 0; width: 100%; height: 100%; }
.av-rel path { fill: none; stroke: var(--av); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s .4s; }
.av-rel path.ina { stroke-dasharray: 6 5; stroke: var(--muted); }
.cs-stage[data-step="4"] .av-rel path { opacity: 1; }
.av-t { position: absolute; width: 27%; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 12px 26px -18px rgba(16, 42, 67, .5); font-size: .74rem; display: grid; }
.av-t header { padding: 6px 10px; font-weight: 700; background: var(--sky); border-bottom: 1px solid var(--line); }
.av-t span { display: flex; justify-content: space-between; gap: 4px; padding: 3px 10px; color: var(--muted); font-family: var(--mono); font-size: .66rem; }
.av-t span:last-child { padding-bottom: 7px; }
.av-t em { font-style: normal; font-family: var(--f-body); font-weight: 700; font-size: .58rem; color: var(--av); }
.av-t em.i { color: var(--muted); }
.av-fact { left: 36%; top: 42%; width: 33%; border-color: var(--av); box-shadow: 0 0 0 3px color-mix(in srgb, var(--av) 18%, transparent); z-index: 1; }
.av-fact header { background: var(--av); color: #fff; }
:root[data-theme="dark"] .av-fact header { color: #06281a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-fact header { color: #06281a; } }
.av-cal { left: 4%; top: 14%; --d: .1s; } .av-prod { right: 4%; top: 18%; --d: .2s; } .av-stock { right: 4%; top: 70%; --d: .3s; }
.av-dax { position: absolute; left: 4%; right: 4%; bottom: 5%; padding: 7px 10px; border-radius: 10px; font-family: var(--mono); font-size: .66rem; background: var(--deep); color: var(--on-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --d: .5s; }
.cs-stage:not([data-step="4"]) .av-t:not(.av-fact), .cs-stage:not([data-step="4"]) .av-dax { opacity: 0; transform: scale(.88); }

/* Escena 5: clusters, atípicos y canalización */
.av-scatter { position: relative; padding: 12px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.av-scatter small { font-size: .74rem; color: var(--muted); }
.av-scatter svg { display: block; width: 100%; height: 150px; margin-top: 6px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.av-scatter circle { transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-box: fill-box; transform-origin: center; }
.av-scatter .c1 circle { fill: var(--accent); } .av-scatter .c2 circle { fill: var(--av); } .av-scatter .c3 circle { fill: var(--av-y); }
.av-scatter .out { fill: var(--av-slow); }
.av-scatter .ring { fill: none; stroke: var(--av-slow); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.cs-stage:not([data-step="5"]) .av-scatter circle { transform: scale(0); }
.av-out-l { position: absolute; left: 36%; top: 30px; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--av-slow); }
.av-pipe { list-style: none; margin: 14px 0 0; padding: 0; display: flex; align-items: center; gap: 0; --d: .3s; }
.av-pipe li { flex: 1; padding: 8px 6px; border-radius: 10px; text-align: center; font-size: .74rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.av-pipe li + li { margin-left: 18px; position: relative; }
.av-pipe li + li::before { content: "→"; position: absolute; left: -15px; top: 50%; translate: 0 -50%; color: var(--av); }
.av-pipe li.on { background: var(--av); border-color: var(--av); color: #fff; }
:root[data-theme="dark"] .av-pipe li.on { color: #06281a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-pipe li.on { color: #06281a; } }
.av-cert { position: absolute; left: 7%; bottom: 7%; margin: 0; font-size: .8rem; font-weight: 700; color: var(--av); --d: .5s; }
.cs-stage:not([data-step="5"]) .av-pipe, .cs-stage:not([data-step="5"]) .av-cert { opacity: 0; transform: translateY(14px); }

/* ---------- Programa ---------- */
.av-units { grid-auto-flow: dense; }
.av-tall { grid-row: span 2; }
.av-span2 { grid-column: span 2; }
.c-power-bi-avanzado .unit-n { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--av); }
.c-power-bi-avanzado .unit li::before { background: var(--av); }
.c-power-bi-avanzado .av-unit-ia { background: color-mix(in srgb, #8a5cf6 7%, var(--surface)); border-color: color-mix(in srgb, #8a5cf6 30%, var(--line)); }
.c-power-bi-avanzado .av-unit-ia ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.c-power-bi-avanzado .av-unit-ia li::before { background: #8a5cf6; }
.av-road { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.av-road .dots { grid-template-columns: repeat(10, 1fr); }
.c-power-bi-avanzado .road-classes.on .dots i { background: var(--av); }
.c-power-bi-avanzado .road-line i { background: linear-gradient(90deg, var(--av-slow), var(--av-y), var(--av)); }

@media (max-width: 1000px) { .av-tall { grid-row: auto; } }
@media (max-width: 900px) {
  .av-hero-art { margin-bottom: 20px; }
  .av-road { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .av-span2 { grid-column: auto; }
  .c-power-bi-avanzado .av-unit-ia ul { grid-template-columns: minmax(0, 1fr); }
  .av-perf { padding: 12px 12px 10px; } .av-perf-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 64px; gap: 8px; padding: 6px 0; } .av-perf-row span { font-size: .68rem; } .av-perf-row b { font-size: .66rem; }
  .av-perf footer { font-size: .64rem; } .av-mode i { font-size: .62rem; }
  .av-fold { right: -6px; font-size: .74rem; padding: 8px 12px; }
  .av-stage { font-size: .76rem; }
  .av-report header { padding: 7px 10px; font-size: .78rem; } .av-tiles { gap: 6px; padding: 8px; } .av-load { height: 40px; } .av-load.wide { height: 60px; } .av-load i { width: 16px; height: 16px; }
  .av-clock { font-size: .68rem; padding: 6px 9px; bottom: 6%; } .av-ask { font-size: .66rem; padding: 6px 9px; bottom: 6%; max-width: 50%; }
  .av-modes span { padding: 6px; font-size: .58rem; } .av-modes b { font-size: .7rem; }
  .av-incr { margin-top: 8px; padding: 8px 10px; } .av-years i { height: 28px; font-size: .56rem; } .av-incr p { font-size: .58rem; margin-top: 5px; }
  .av-param { font-size: .6rem; bottom: 5%; }
  .av-steps { width: 52%; top: 5%; left: 5%; } .av-steps p { padding: 4px 8px; font-size: .64rem; } .av-steps header { padding: 5px 8px; font-size: .64rem; } .av-steps b { width: 16px; height: 16px; font-size: .58rem; }
  .av-native { width: 38%; right: 5%; top: 8%; font-size: .56rem; padding: 7px 8px; } .av-note { display: none; }
  .av-t { font-size: .62rem; } .av-t header { padding: 4px 7px; } .av-t span { padding: 2px 7px; font-size: .54rem; } .av-t em { font-size: .48rem; }
  .av-fact { left: 34%; width: 36%; top: 34%; } .av-cal { top: 6%; } .av-prod { top: 8%; } .av-stock { top: 62%; } .av-dax { font-size: .54rem; padding: 5px 8px; }
  .av-scatter { padding: 8px 10px; } .av-scatter svg { height: 92px; } .av-out-l { font-size: .6rem; top: 22px; }
  .av-pipe { margin-top: 8px; } .av-pipe li { font-size: .6rem; padding: 5px 4px; } .av-cert { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .av-perf-tag > i, .av-perf-row b > i, .av-mode > i, .av-bar, .av-fold, .av-load i, .av-years i.hot, .av-steps .moved { animation: none !important; }
  .av-perf-tag > .av-a, .av-perf-row b > .av-a, .av-mode > .av-a { opacity: 0; }
  .av-bar { width: var(--b); background: var(--av); }
  .av-scatter circle, .av-rel path, .av-modes span { transition: none !important; }
}