/* Página de curso: Administrador Power BI. Identidad propia: consola de administración del servicio,
   acento naranja de "llave" y etiquetas de paso en versalitas, como en un panel de control. */
.c-administrador-power-bi {
  --ad: #c2570f; --ad-soft: #fbe3cf; --ad-ink: #7a3406; --ad-ok: #1a8f55;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-administrador-power-bi { --ad: #f39a56; --ad-soft: #4a2a12; --ad-ink: #ffd2ad; --ad-ok: #52d18f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-administrador-power-bi { --ad: #f39a56; --ad-soft: #4a2a12; --ad-ink: #ffd2ad; --ad-ok: #52d18f; }
}
.c-administrador-power-bi .c-hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.6rem); max-width: 17ch; }
.c-administrador-power-bi .c-hero h1 em,
.c-administrador-power-bi .section-head h2 em,
.c-administrador-power-bi .cs-path h2 em { color: var(--ad); }
.c-administrador-power-bi .cs-step-n { font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ad); }
.c-administrador-power-bi .cs-step-n::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ad); vertical-align: 1px; }
.c-administrador-power-bi .gain-list span { -webkit-text-stroke-color: var(--ad); }

/* ---------- Portada: consola de actualización y candado RLS ---------- */
.ad-console {
  position: absolute; left: -24px; bottom: -26px; width: min(64%, 290px); padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .8rem;
  animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.ad-console header { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ad-led { width: 8px; height: 8px; border-radius: 50%; background: var(--ad-ok); animation: ad-pulse 1.8s ease-in-out infinite; }
.ad-console ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ad-console li { display: grid; grid-template-columns: 1fr auto 18px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--bg); }
.ad-console b { font-family: var(--mono); font-weight: 500; font-size: .74rem; color: var(--muted); }
.ad-console i { font-style: normal; text-align: center; color: var(--faint); }
.ad-console .done i { color: var(--ad-ok); font-weight: 700; }
.ad-console .run { outline: 1.5px solid color-mix(in srgb, var(--ad) 55%, transparent); }
.ad-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ad) 30%, transparent); border-top-color: var(--ad); animation: c-spin 1s linear infinite; justify-self: center; }
.ad-lock {
  position: absolute; right: -12px; top: -16px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--ad); color: #fff; font-weight: 700; font-size: .84rem; box-shadow: var(--shadow);
  animation: c-in .7s .85s cubic-bezier(.2, .8, .2, 1) both, c-bob 5s 1.6s ease-in-out infinite;
}
:root[data-theme="dark"] .ad-lock { color: #2a1404; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ad-lock { color: #2a1404; } }
@keyframes ad-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ad-ok) 0%, transparent); } 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ad-ok) 45%, transparent); } }

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

/* Escena 1: bandeja de entrada */
.ad-stage .s1 { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--ad) 5%, transparent) 14px 15px); }
.ad-inbox { position: absolute; left: 7%; top: 9%; width: 70%; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.ad-inbox header { padding: 9px 14px; font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ad-inbox p { margin: 0; padding: 8px 14px; display: grid; gap: 1px; border-top: 1px solid var(--line); }
.ad-inbox p:first-of-type { border-top: 0; }
.ad-inbox b { font-size: .82rem; }
.ad-inbox span { font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.ad-inbox p:nth-of-type(2) { --d: .1s; }
.ad-warn { position: absolute; padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: .8rem; color: #fff; background: var(--bad); box-shadow: var(--shadow); }
.ad-warn.w1 { right: 6%; top: 40%; --d: .3s; transform: rotate(3deg); }
.ad-warn.w2 { right: 12%; bottom: 8%; --d: .5s; background: var(--ink); color: var(--bg); transform: rotate(-2deg); }
.cs-stage:not([data-step="1"]) .ad-inbox { opacity: 0; transform: translateY(24px); }
.cs-stage:not([data-step="1"]) .ad-warn { opacity: 0; transform: scale(.8); }

/* Escena 2: usuarios y licencias */
.ad-panel { border-radius: 16px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.ad-panel header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ad-panel header span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ad-panel header b { font-size: .95rem; }
.ad-u { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); transition: opacity .5s, transform .5s; }
.ad-u:first-of-type { border-top: 0; }
.ad-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 700; color: #fff; background: var(--brand); }
.ad-av.b { background: var(--teal); }
.ad-u:nth-of-type(2) .ad-av { background: var(--teal); } .ad-u:nth-of-type(3) .ad-av { background: var(--ad); } .ad-u:nth-of-type(4) .ad-av { background: var(--muted); }
.ad-u em { position: relative; font-style: normal; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--muted); background: var(--sky); border: 1px solid var(--line); min-width: 62px; text-align: center; }
.ad-u em.pro { color: var(--ad-ink); background: var(--ad-soft); border-color: transparent; }
.ad-u em.lic s, .ad-u em.lic u { text-decoration: none; transition: opacity .4s 1s; }
.ad-u em.lic u { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; color: var(--ad-ink); background: var(--ad-soft); opacity: 0; }
.cs-stage[data-step="2"] .ad-u em.lic u { opacity: 1; }
.cs-stage[data-step="2"] .ad-u-new { background: color-mix(in srgb, var(--ad) 9%, transparent); transition: background-color .4s 1s; }
.ad-panel footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); font-size: .74rem; color: var(--muted); }
.ad-panel footer b { color: var(--ink); font-family: var(--mono); }
.ad-meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.ad-meter i { display: block; height: 100%; width: 70%; background: var(--ad); transition: width .5s 1.1s; }
.cs-stage[data-step="2"] .ad-meter i { width: 80%; }
.cs-stage:not([data-step="2"]) .s2 .ad-panel { opacity: 0; transform: translateY(20px); }

/* Escena 3: área de trabajo y panel */
.ad-ws { border-radius: 16px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); }
.ad-ws header { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.ad-ws-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ad); color: #fff; font-size: .8rem; }
.ad-roles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ad-roles li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: .9rem; }
.ad-roles b { font-family: var(--f-body); font-size: .66rem; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-dash { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); --d: .2s; }
.ad-dash small { font-size: .74rem; color: var(--muted); }
.ad-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.ad-tiles > span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.ad-tiles b { font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); }
.ad-tile-ch { display: flex !important; align-items: flex-end; gap: 4px; min-height: 48px; }
.ad-tile-ch i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--ad); opacity: .8; }
.ad-qa { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--ad); font-size: .8rem; color: var(--ink); }
.ad-qa span { font-size: .64rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--ad-soft); color: var(--ad-ink); }
.ad-qa::after { content: ""; width: 2px; height: 1em; background: var(--ad); animation: ad-blink 1s steps(1) infinite; }
@keyframes ad-blink { 50% { opacity: 0; } }
.cs-stage:not([data-step="3"]) .ad-ws { opacity: 0; transform: translateY(-14px); }
.cs-stage:not([data-step="3"]) .ad-dash { opacity: 0; transform: translateY(20px); }

/* Escena 4: puerta de enlace */
.ad-gw { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto; align-items: center; margin-top: 4%; }
.ad-node { display: grid; justify-items: center; gap: 6px; width: 92px; text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); }
.ad-node svg { width: 50px; height: 50px; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); box-sizing: border-box; }
.ad-node-gw svg { background: var(--ad); color: #fff; border-color: var(--ad); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ad) 18%, transparent); }
.ad-wire { width: 100%; height: 10px; overflow: visible; }
.ad-wire path { stroke: var(--ad); stroke-width: 2.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: c-flow 1s linear infinite; fill: none; }
.ad-sched { margin-top: 8%; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 10px; --d: .25s; }
.ad-sched small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ad-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ad-days span { display: grid; place-items: center; height: 28px; border-radius: 8px; font-size: .74rem; font-weight: 700; color: var(--faint); border: 1px solid var(--line); }
.ad-days .on { background: var(--ad-soft); color: var(--ad-ink); border-color: transparent; }
.ad-hours { display: flex; gap: 8px; }
.ad-hours span { font-family: var(--mono); font-size: .8rem; padding: 4px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.ad-ok { position: absolute; left: 7%; bottom: 7%; padding: 9px 14px; border-radius: 12px; background: var(--ad-ok); color: #fff; font-weight: 700; font-size: .8rem; --d: .5s; }
:root[data-theme="dark"] .ad-ok { color: #06281a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ad-ok { color: #06281a; } }
.cs-stage:not([data-step="4"]) .ad-gw { opacity: 0; transform: scale(.92); }
.cs-stage:not([data-step="4"]) .ad-sched, .cs-stage:not([data-step="4"]) .ad-ok { opacity: 0; transform: translateY(16px); }

/* Escena 5: seguridad a nivel de filas */
.ad-rule { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 12px; background: var(--deep); color: var(--on-deep); font-size: .8rem; }
.ad-rule span { font-weight: 700; }
.ad-rule code { font-family: var(--mono); font-size: .78rem; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--on-deep) 12%, transparent); color: #ffc999; }
.ad-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ad-view { border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; font-size: .78rem; --d: .2s; }
.ad-view + .ad-view { --d: .35s; }
.ad-view header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-weight: 700; background: var(--surface); border-bottom: 1px solid var(--line); }
.ad-view .ad-av { width: 24px; height: 24px; font-size: .6rem; }
.ad-view .r { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .74rem; }
.ad-view .r:first-of-type { border-top: 0; }
.ad-view .r.off { color: var(--faint); background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); }
.ad-view .r:not(.off) span:last-child { color: var(--ad); font-weight: 700; }
.ad-valid { position: absolute; left: 7%; bottom: 7%; margin: 0; font-size: .8rem; font-weight: 700; color: var(--ad-ok); --d: .55s; }
.cs-stage:not([data-step="5"]) .ad-rule { opacity: 0; transform: translateY(-12px); }
.cs-stage:not([data-step="5"]) .ad-view, .cs-stage:not([data-step="5"]) .ad-valid { opacity: 0; transform: translateY(16px); }

/* ---------- Programa y recorrido ---------- */
.c-administrador-power-bi .unit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-administrador-power-bi .unit-n { font-family: var(--f-body); font-weight: 700; letter-spacing: .16em; color: var(--ad); }
.c-administrador-power-bi .unit li::before { background: var(--ad); border-radius: 2px; }
.c-administrador-power-bi .unit:last-child { border-top: 3px solid var(--ad); }
.ad-road { grid-template-columns: 1.4fr 1fr 1fr; }
.ad-road .dots { grid-template-columns: repeat(4, 22px); gap: 8px; }
.c-administrador-power-bi .road-classes.on .dots i { background: var(--ad); }
.c-administrador-power-bi .road-line i { background: linear-gradient(90deg, var(--ad), var(--accent)); }

@media (max-width: 1000px) { .c-administrador-power-bi .unit-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ad-console { left: -10px; bottom: -22px; }
  .ad-road { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ad-stage { font-size: .76rem; }
  .ad-console { width: 70%; font-size: .72rem; padding: 9px 10px; } .ad-console li { padding: 4px 6px; }
  .ad-lock { font-size: .74rem; padding: 7px 11px; right: -6px; }
  .ad-inbox { width: 84%; top: 6%; } .ad-inbox p { padding: 5px 10px; } .ad-inbox b { font-size: .7rem; } .ad-inbox span { font-size: .6rem; }
  .ad-inbox p:nth-of-type(4) { display: none; }
  .ad-warn { font-size: .68rem; padding: 6px 10px; } .ad-warn.w1 { top: auto; bottom: 22%; right: 4%; } .ad-warn.w2 { bottom: 6%; }
  .ad-panel header { padding: 7px 10px; } .ad-u { padding: 5px 10px; gap: 8px; } .ad-av { width: 22px; height: 22px; font-size: .56rem; }
  .ad-u em { font-size: .62rem; min-width: 54px; padding: 2px 6px; } .ad-panel footer { padding: 6px 10px; font-size: .64rem; }
  .ad-ws { padding: 8px 10px; } .ad-roles { margin-top: 6px; gap: 4px; } .ad-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-roles li { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 7px; font-size: .7rem; } .ad-roles b { font-size: .6rem; }
  .ad-dash { margin-top: 8px; padding: 8px 10px; } .ad-tiles { gap: 5px; margin-top: 5px; } .ad-tiles > span { padding: 5px 6px; font-size: .6rem; } .ad-tiles b { font-size: .86rem; } .ad-tile-ch { min-height: 34px; }
  .ad-qa { margin-top: 6px; padding: 5px 8px; font-size: .68rem; }
  .ad-node { width: 64px; font-size: .58rem; } .ad-node svg { width: 40px; height: 40px; padding: 9px; }
  .ad-sched { margin-top: 5%; padding: 8px 10px; gap: 6px; } .ad-days span { height: 22px; font-size: .64rem; } .ad-hours span { font-size: .68rem; }
  .ad-ok { font-size: .68rem; padding: 6px 10px; }
  .ad-rule { padding: 7px 9px; font-size: .68rem; } .ad-rule code { font-size: .66rem; }
  .ad-views { gap: 8px; margin-top: 8px; } .ad-view header { padding: 6px 8px; font-size: .68rem; } .ad-view .r { padding: 4px 8px; font-size: .64rem; }
  .ad-valid { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-console, .ad-lock, .ad-led, .ad-spin, .ad-wire path, .ad-qa::after { animation: none !important; }
  .ad-u em.lic s, .ad-u em.lic u, .ad-meter i, .ad-u { transition: none !important; }
}