/* Página de curso: Analista en base de datos (solo para empresas). Identidad propia: un plano técnico (blueprint)
   del recorrido de los datos, de la base al tablero, con amarillo Power BI y rótulos tipo plano (A-01, B-02). */
.c-analista-base-datos {
  --ad: #c48a00; --ad-hi: #f2c811; --ad-soft: #fdf3cf; --ad-ink: #6b4b00;
  --bp: #0e3a63; --bp-2: #124a7c; --bp-line: rgba(160, 205, 245, .22); --bp-ink: #e6f1fb; --bp-dim: #9cc0e0;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-analista-base-datos { --ad: #f2c811; --ad-soft: #3a3110; --ad-ink: #ffe68a; --bp: #0b2a48; --bp-2: #10365b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-analista-base-datos { --ad: #f2c811; --ad-soft: #3a3110; --ad-ink: #ffe68a; --bp: #0b2a48; --bp-2: #10365b; }
}
.c-analista-base-datos h1 em, .c-analista-base-datos h2 em { color: var(--ad); }
.c-analista-base-datos .c-hero h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); max-width: 17ch; }
.c-analista-base-datos .cs-step-n, .c-analista-base-datos .unit-n { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ad); }
.c-analista-base-datos .gain-list span { -webkit-text-stroke-color: var(--ad); }
.c-analista-base-datos code { font-family: var(--mono); }

.c-solo-emp { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ad-ink); background: var(--ad-soft); border: 1px solid color-mix(in srgb, var(--ad) 40%, transparent); }
.c-solo-emp::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--ad); }

/* Fondo de plano reutilizable */
.ad-cover, .ad-stage {
  background-color: var(--bp); color: var(--bp-ink);
  background-image: linear-gradient(var(--bp-line) 1px, transparent 1px), linear-gradient(90deg, var(--bp-line) 1px, transparent 1px),
    linear-gradient(rgba(160, 205, 245, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 205, 245, .08) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  border-color: transparent;
}

/* ---------- Portada: el plano animado ---------- */
.ad-cover { aspect-ratio: 3 / 2; display: grid; place-items: center; }
.ad-plan { width: 100%; height: 100%; }
.ad-plan * { vector-effect: non-scaling-stroke; }
.ad-db ellipse, .ad-db path, .ad-box rect, .ad-dash > rect:first-child { fill: none; stroke: var(--bp-ink); stroke-width: 1.6; }
.ad-dash .k { fill: rgba(230, 241, 251, .1); stroke: var(--bp-dim); stroke-width: 1; }
.ad-dash .b { fill: var(--ad-hi); transform-box: fill-box; transform-origin: bottom; animation: ad-grow 4s ease-in-out infinite; }
.ad-dash .b2 { animation-delay: .2s; } .ad-dash .b3 { animation-delay: .4s; } .ad-dash .b4 { animation-delay: .6s; }
.ad-dash .m { fill: rgba(242, 200, 17, .55); stroke: var(--ad-hi); stroke-width: 1; }
.ad-code { font: 600 14px var(--mono); fill: var(--ad-hi); }
.ad-lbl { font: 600 11px var(--mono); letter-spacing: .14em; fill: var(--bp-dim); text-anchor: middle; }
.ad-wire { fill: none; stroke: var(--bp-dim); stroke-width: 1.5; }
.ad-flow { fill: none; stroke: var(--ad-hi); stroke-width: 3; stroke-dasharray: 10 18; animation: ad-flow 1.4s linear infinite; }
.ad-dim { fill: none; stroke: var(--bp-dim); stroke-width: 1; }
@keyframes ad-flow { to { stroke-dashoffset: -56; } }
@keyframes ad-grow { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.ad-chip { position: absolute; right: -14px; top: -16px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: .84rem; color: var(--ad-ink); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: c-in .7s .7s cubic-bezier(.2, .8, .2, 1) both; }
.ad-chip svg { color: var(--ad); animation: c-spin 3s linear infinite; }

/* ---------- Historia ---------- */
.ad-stage { font-size: .86rem; }
.c-analista-base-datos .s1 { background: none; }
.c-analista-base-datos .s2, .c-analista-base-datos .s4 { display: block; }
.c-analista-base-datos .s5 { padding: 7%; }
.c-analista-base-datos .scene { padding-top: 13%; }
.ad-tag { position: absolute; left: 7%; top: 5.5%; font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ad-hi); padding: 5px 8px; border: 1px solid rgba(242, 200, 17, .5); border-radius: 4px; }

/* Escena 1 */
.ad-sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ad-s { display: grid; gap: 4px; padding: 12px; border: 1.5px solid var(--bp-ink); border-radius: 10px; background: rgba(230, 241, 251, .05); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.ad-s:nth-child(2) { transition-delay: .1s; } .ad-s:nth-child(3) { transition-delay: .2s; }
.ad-s b { font-size: .84rem; } .ad-s small { font-size: .7rem; color: var(--bp-dim); }
.ad-s i { margin-top: 6px; justify-self: start; font-style: normal; font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #fff; background: #c2462e; }
.ad-team { position: absolute; left: 7%; right: 7%; bottom: 8%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; --d: .35s; }
.ad-team span, .ad-share span { padding: 5px 10px; border-radius: 6px; font-size: .74rem; font-weight: 600; border: 1px dashed var(--bp-dim); }
.ad-team em { width: 100%; margin-top: 6px; font-style: normal; font-size: .76rem; color: var(--bp-dim); }
.cs-stage:not([data-step="1"]) .s1 .ad-s { opacity: 0; transform: translateY(18px); }
.cs-stage:not([data-step="1"]) .s1 .ad-team { opacity: 0; }

/* Escena 2: consulta anotada */
.ad-q { display: grid; gap: 12px; margin-top: 4%; }
.ad-q p { position: relative; margin: 0; padding: 8px 12px; font: .84rem/1.4 var(--mono); border-left: 2px solid var(--ad-hi); background: rgba(230, 241, 251, .05); display: flex; align-items: center; justify-content: space-between; gap: 10px; transition: opacity .5s, transform .6s; }
.ad-q p:nth-child(2) { transition-delay: .12s; } .ad-q p:nth-child(3) { transition-delay: .24s; } .ad-q p:nth-child(4) { transition-delay: .36s; }
.ad-q b { color: var(--ad-hi); }
.ad-n { flex: none; font: 600 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bp-dim); padding-left: 22px; position: relative; }
.ad-n::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 1px solid var(--bp-dim); }
.cs-stage:not([data-step="2"]) .s2 .ad-q p { opacity: 0; transform: translateX(-16px); }

/* Escena 3: fuentes y pasos */
.ad-pq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px; align-items: center; height: 82%; }
.ad-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ad-src li { padding: 8px 10px; border: 1.5px solid var(--bp-ink); border-radius: 8px; font: 600 .76rem var(--mono); text-align: center; transition: opacity .5s, transform .5s; }
.ad-src li:nth-child(2) { transition-delay: .08s; } .ad-src li:nth-child(3) { transition-delay: .16s; } .ad-src li:nth-child(4) { transition-delay: .24s; }
.ad-steps { border-radius: 10px; background: rgba(230, 241, 251, .07); border: 1px solid var(--bp-line); overflow: hidden; --d: .25s; }
.ad-steps header { padding: 8px 12px; font-size: .72rem; font-weight: 700; color: var(--ad-hi); border-bottom: 1px solid var(--bp-line); }
.ad-steps ol { margin: 0; padding: 6px 12px 10px 34px; display: grid; gap: 6px; font-size: .78rem; }
.ad-steps li::marker { color: var(--bp-dim); font-family: var(--mono); }
.ad-steps li:last-child { color: var(--ad-hi); font-weight: 600; }
.cs-stage:not([data-step="3"]) .s3 .ad-src li { opacity: 0; transform: translateX(-14px); }
.cs-stage:not([data-step="3"]) .s3 .ad-steps { opacity: 0; transform: translateX(14px); }

/* Escena 4: estrella y DAX */
.ad-star { width: 100%; height: 66%; }
.ad-star .ln { fill: none; stroke: var(--bp-dim); stroke-width: 1.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1s .2s ease; }
.cs-stage[data-step="4"] .ad-star .ln { stroke-dashoffset: 0; }
.ad-star rect { fill: rgba(230, 241, 251, .06); stroke: var(--bp-ink); stroke-width: 1.5; }
.ad-star .f rect { fill: var(--ad-hi); stroke: var(--ad-hi); }
.ad-star text { font: 600 12px var(--f-body); fill: var(--bp-ink); text-anchor: middle; }
.ad-star .f text { fill: #3a2c00; font-size: 14px; }
.ad-star g { transition: opacity .5s .3s; }
.cs-stage:not([data-step="4"]) .ad-star g { opacity: 0; }
.ad-dax { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(0, 0, 0, .25); font-size: .78rem; color: var(--bp-ink); --d: .5s; }
.ad-dax b { color: var(--ad-hi); }
.cs-stage:not([data-step="4"]) .s4 .ad-dax { opacity: 0; transform: translateY(10px); }

/* Escena 5: tablero */
.ad-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 8px; height: 66%; margin-top: 4%; }
.ad-board > div { border-radius: 10px; background: rgba(230, 241, 251, .08); border: 1px solid var(--bp-line); padding: 8px 10px; transition: opacity .5s, transform .6s; }
.ad-board .kp { display: grid; gap: 2px; } .ad-board .kp small { font-size: .64rem; color: var(--bp-dim); } .ad-board .kp b { font-family: var(--f-display); font-size: 1.2rem; }
.ad-board .gr { grid-column: span 2; display: flex; align-items: flex-end; gap: 6%; transition-delay: .15s; }
.ad-board .gr i { flex: 1; height: var(--h); background: var(--ad-hi); border-radius: 4px 4px 0 0; transform-origin: bottom; transition: transform .8s .3s cubic-bezier(.2, .8, .2, 1); }
.cs-stage:not([data-step="5"]) .ad-board .gr i { transform: scaleY(.1); }
.ad-board .mp { position: relative; transition-delay: .25s; background: radial-gradient(circle at 45% 50%, rgba(242, 200, 17, .12), transparent 70%), rgba(230, 241, 251, .08); }
.ad-board .mp i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 50%; background: rgba(242, 200, 17, .6); border: 1.5px solid var(--ad-hi); }
.ad-share { position: absolute; left: 7%; right: 7%; bottom: 6%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; --d: .5s; }
.ad-share span { border-style: solid; border-color: var(--ad-hi); }
.ad-share em { margin-left: auto; font-style: normal; font-size: .76rem; font-weight: 600; color: var(--ad-hi); }
.cs-stage:not([data-step="5"]) .s5 .ad-board > div { opacity: 0; transform: translateY(14px); }
.cs-stage:not([data-step="5"]) .s5 .ad-share { opacity: 0; }

/* ---------- Programa: dos módulos como láminas ---------- */
.ad-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-analista-base-datos .ad-mod { gap: 14px; border-top: 4px solid var(--ad); }
.ad-mod h3 { font-size: 1.5rem; }
.ad-mod h3 a { color: inherit; text-decoration: none; }
.ad-mod h3 a:hover { color: var(--ad); text-decoration: underline; text-underline-offset: 4px; }
.ad-list { margin: 0; padding: 0; list-style: none; counter-reset: u; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ad-list li { counter-increment: u; display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); font-size: .92rem; line-height: 1.35; color: var(--ink); }
.c-analista-base-datos .ad-list li::before { content: counter(u, lower-alpha) "."; position: static; width: auto; height: auto; border-radius: 0; background: none; font: 700 .78rem var(--mono); color: var(--ad); }
.c-analista-base-datos .ad-list li { padding-left: 12px; }
.ad-more { justify-self: start; font-weight: 600; color: var(--accent); }
.c-analista-base-datos .road-classes.on .dots i { background: var(--brand); }
.c-analista-base-datos .road-classes.on .dots i.pb { background: var(--ad); }

@media (max-width: 900px) {
  .ad-mods { grid-template-columns: minmax(0, 1fr); }
  .ad-chip { right: -6px; top: -14px; }
}
@media (max-width: 560px) {
  .ad-stage { font-size: .72rem; }
  .c-analista-base-datos .scene { padding: 15% 5% 5%; }
  .ad-tag { font-size: .54rem; top: 4.5%; left: 5%; padding: 3px 6px; }
  .ad-sys { gap: 6px; } .ad-s { padding: 7px; } .ad-s b { font-size: .66rem; } .ad-s small { font-size: .56rem; } .ad-s i { font-size: .5rem; padding: 1px 5px; }
  .ad-team span, .ad-share span { font-size: .58rem; padding: 3px 7px; } .ad-team em, .ad-share em { font-size: .6rem; } .ad-team { bottom: 5%; } .ad-share { bottom: 4%; left: 5%; right: 5%; }
  .ad-q { gap: 7px; } .ad-q p { font-size: .62rem; padding: 5px 8px; } .ad-n { font-size: .48rem; padding-left: 12px; } .ad-n::before { width: 8px; }
  .ad-pq { gap: 8px; } .ad-src { gap: 5px; } .ad-src li { font-size: .6rem; padding: 5px; } .ad-steps header { font-size: .6rem; padding: 5px 9px; } .ad-steps ol { font-size: .62rem; gap: 3px; padding: 4px 8px 7px 26px; }
  .ad-dax { font-size: .6rem; padding: 6px 8px; margin-top: 4px; }
  .ad-board { gap: 5px; height: 62%; } .ad-board > div { padding: 5px 7px; } .ad-board .kp b { font-size: .86rem; } .ad-board .kp small { font-size: .5rem; }
  .ad-chip { font-size: .72rem; padding: 7px 11px; }
  .ad-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-flow, .ad-dash .b, .ad-chip, .ad-chip svg { animation: none !important; }
  .ad-s, .ad-q p, .ad-src li, .ad-board > div, .ad-board .gr i, .ad-star .ln, .ad-star g { transition: none !important; }
}

/* ---------- Programa: un proceso continuo (SQL, otras fuentes, Power BI) ---------- */
.ad-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ad-flow li { position: relative; display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ad); }
.ad-flow li:nth-child(2) { border-top-style: dashed; }
.ad-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 26px; color: var(--ad); font-weight: 700; font-size: 1.1rem; }
.ad-flow-n { font: 700 .76rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ad); }
.ad-flow h3 { font-size: 1.3rem; }
.ad-flow p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) {
  .ad-flow { grid-template-columns: minmax(0, 1fr); }
  .ad-flow li:not(:last-child)::after { content: "↓"; right: 24px; top: auto; bottom: -20px; }
}