/* Página de curso: SQL Analytics Avanzado. Identidad propia: objetos de base de datos (subconsultas anidadas,
   tablas temporales, vistas, funciones y procedimientos) en ámbar, con numeración tipo #tabla_temporal. */
.c-sql-avanzado {
  --sv: #b8610c; --sv-soft: #fdeed9; --sv-ink: #6e3a06; --sv-line: #f0cfa4;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
:root[data-theme="dark"] .c-sql-avanzado { --sv: #f2a54f; --sv-soft: #3a2a17; --sv-ink: #ffd8a6; --sv-line: #6a4b26; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-sql-avanzado { --sv: #f2a54f; --sv-soft: #3a2a17; --sv-ink: #ffd8a6; --sv-line: #6a4b26; }
}
.c-sql-avanzado h1 em, .c-sql-avanzado h2 em { color: var(--sv); }
.c-sql-avanzado .c-hero h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); max-width: 17ch; }
.c-sql-avanzado .cs-step-n, .c-sql-avanzado .unit-n { font-family: var(--mono); color: var(--sv); text-transform: none; letter-spacing: 0; }
.c-sql-avanzado .gain-list span { -webkit-text-stroke-color: var(--sv); }
.c-sql-avanzado code { font-family: var(--mono); }
.c-sql-avanzado .unit code, .c-sql-avanzado .who code { font-size: .86em; padding: 1px 5px; border-radius: 5px; color: var(--sv-ink); background: var(--sv-soft); }
.c-sql-avanzado .who code { color: var(--deep); background: var(--on-deep-accent); }
.c-sql-avanzado .who-lead a { color: var(--on-deep-accent); font-weight: 600; }
.c-sql-avanzado .unit li::before { background: var(--sv); border-radius: 1px; }

/* ---------- Portada: un procedimiento que se ejecuta ---------- */
.sv-run {
  position: absolute; left: -24px; bottom: -30px; width: min(80%, 340px); padding: 12px 14px 12px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sv); box-shadow: var(--shadow);
  font-size: .78rem; animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.sv-run-cmd { margin: 0 0 8px; font-family: var(--mono); font-size: .76rem; color: var(--ink); }
.sv-run-cmd b { color: var(--sv); }
.sv-run-cmd u { text-decoration: none; color: var(--teal); }
.sv-run-cmd s { text-decoration: none; color: var(--muted); }
.sv-run-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sv-run-log li { display: flex; align-items: center; gap: 8px; color: var(--muted); opacity: .35; transition: opacity .35s; }
.sv-run-log li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; transition: background-color .3s, border-color .3s; }
.sv-run-log li.on { opacity: 1; color: var(--ink); }
.sv-run-log li.on::before { border-color: var(--sv); background: var(--sv); box-shadow: inset 0 0 0 2px var(--surface); }
.sv-run-log li code { font-size: .72rem; color: var(--sv-ink); }
.sv-run-log em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.sv-run-log li.fin { font-weight: 600; }
.sv-run-log li.fin.on::before { background: #1a9e5c; border-color: #1a9e5c; }

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

/* Escena 1: el script largo */
.c-sql-avanzado .s1 { background: radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--sv) 12%, transparent), transparent 55%); }
.sv-script { position: absolute; left: 7%; top: 8%; width: 62%; bottom: 10%; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 14px 30px -18px rgba(16, 42, 67, .45); }
.sv-script header { white-space: nowrap; display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; font-family: var(--mono); font-size: .7rem; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); }
.sv-script header span { color: var(--bad); font-weight: 600; }
.sv-lines { display: grid; gap: 7px; padding: 12px 12px 12px 34px; counter-reset: ln; }
.sv-lines i { position: relative; display: block; height: 8px; width: var(--w); border-radius: 3px; background: var(--line); counter-increment: ln; }
.sv-lines i::before { content: counter(ln); position: absolute; left: -24px; top: -3px; font: 600 .56rem/1 var(--mono); color: var(--faint); font-style: normal; }
.sv-lines i.dup { background: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.sv-note { position: absolute; right: 6%; top: 18%; width: 34%; padding: 12px 14px; border-radius: 4px; background: #ffe58a; color: #4a3a00; font-size: .8rem; font-weight: 600; line-height: 1.35; transform: rotate(3deg); box-shadow: 0 10px 20px -10px rgba(0,0,0,.35); --d: .2s; }
.sv-note code { font-size: .74rem; }
.sv-warn { position: absolute; right: 6%; bottom: 10%; width: 36%; padding: 9px 12px; border-radius: 12px; background: var(--bad); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.3; --d: .4s; }
.cs-stage:not([data-step="1"]) .s1 .sv-script { opacity: 0; transform: translateY(24px); }
.cs-stage:not([data-step="1"]) .s1 .sv-note { opacity: 0; transform: rotate(10deg) scale(.8); }
.cs-stage:not([data-step="1"]) .s1 .sv-warn { opacity: 0; transform: translateX(20px); }

/* Escena 2: subconsultas anidadas */
.c-sql-avanzado .s2 { background: var(--surface); }
.sv-nest { position: relative; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--sv-line); background: var(--bg); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.sv-nest code { font-size: .8rem; line-height: 1.5; color: var(--ink); }
.sv-nest code b { color: var(--sv); font-weight: 700; }
.sv-nest.n2 { margin-left: 6%; background: color-mix(in srgb, var(--sv) 8%, var(--bg)); border-color: color-mix(in srgb, var(--sv) 55%, var(--line)); transition-delay: .15s; }
.sv-nest.n3 { margin-left: 6%; background: color-mix(in srgb, var(--sv) 16%, var(--bg)); border-color: var(--sv); transition-delay: .3s; }
.sv-lv { position: absolute; right: 10px; top: 8px; font: 600 .6rem/1 var(--mono); color: var(--sv); text-transform: uppercase; letter-spacing: .06em; }
.sv-cap { position: absolute; left: 7%; right: 7%; bottom: 6%; margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.4; --d: .45s; }
.cs-stage:not([data-step="2"]) .s2 .sv-nest { opacity: 0; transform: scale(.92); }
.sv-res { margin-top: 14px; padding: 8px 12px; border-radius: 12px; background: var(--deep); color: var(--on-deep); font-family: var(--mono); font-size: .74rem; display: grid; gap: 2px; --d: .4s; }
.sv-res .r { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.sv-res .r.h { color: color-mix(in srgb, var(--on-deep) 60%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--on-deep) 25%, transparent); }
.sv-res .r:not(.h) span:last-child { color: #f6b765; }
.cs-stage:not([data-step="2"]) .s2 .sv-cap, .cs-stage:not([data-step="2"]) .s2 .sv-res { opacity: 0; }

/* Escena 3: tablas temporales y vistas */
.c-sql-avanzado .s3 { background-image: radial-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px); background-size: 18px 18px; display: grid; align-content: center; gap: 28px; }
.sv-flow { display: grid; grid-template-columns: minmax(0, .8fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 6px; }
.sv-col { display: grid; gap: 8px; }
.sv-obj { padding: 10px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: .74rem; font-weight: 600; display: grid; gap: 4px; box-shadow: 0 10px 20px -16px rgba(16, 42, 67, .4); }
.sv-obj small { font-family: var(--f-body); font-weight: 500; font-size: .66rem; color: var(--muted); line-height: 1.3; }
.sv-obj code { color: var(--sv-ink); }
.sv-tmp { border: 2px dashed var(--sv); background: var(--sv-soft); --d: .15s; }
.sv-view { border: 2px solid var(--teal); --d: .3s; }
.sv-view code { color: var(--teal); }
.sv-arrow { width: 100%; height: 18px; }
.sv-arrow path { fill: none; stroke: var(--sv); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-ddl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; --d: .45s; }
.sv-ddl li { padding: 4px 10px; border-radius: 999px; font: 700 .68rem/1.4 var(--mono); color: var(--sv-ink); background: var(--sv-soft); border: 1px solid var(--sv-line); }
.cs-stage:not([data-step="3"]) .s3 .sv-flow { opacity: 0; transform: translateY(18px); }
.cs-stage:not([data-step="3"]) .s3 .sv-ddl { opacity: 0; transform: translateY(10px); }

/* Escena 4: funciones */
.c-sql-avanzado .s4 { background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--sv) 7%, var(--surface))); }
.sv-fn-t { margin: 0 0 14px; font-size: .82rem; color: var(--muted); }
.sv-fn-t b { font-family: var(--mono); color: var(--sv); }
.sv-fns { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sv-fns li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: .74rem; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s; }
.sv-fns li:nth-child(2) { transition-delay: .1s; } .sv-fns li:nth-child(3) { transition-delay: .2s; } .sv-fns li:nth-child(4) { transition-delay: .3s; }
.sv-fns .in { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-fns code { padding: 4px 8px; border-radius: 8px; color: #fff; background: var(--sv); font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .sv-fns code { color: #1d1206; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sv-fns code { color: #1d1206; } }
.sv-fns .out { text-align: right; font-weight: 700; color: var(--ink); }
.sv-fns .out.bad { color: var(--bad); }
.cs-stage:not([data-step="4"]) .s4 .sv-fns li { opacity: 0; transform: translateX(-18px); }

/* Escena 5: el procedimiento */
.sv-proc { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--deep); color: var(--on-deep); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; }
.sv-proc b { color: #f6b765; } .sv-proc u { color: #7fe0d4; text-decoration: none; }
.sv-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: .82rem; }
.sv-checks li { display: flex; gap: 8px; align-items: center; transition: opacity .5s, transform .5s; }
.sv-checks li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1a9e5c; color: #fff; font-size: .7rem; font-weight: 700; }
.sv-checks li:nth-child(1) { transition-delay: .25s; } .sv-checks li:nth-child(2) { transition-delay: .4s; } .sv-checks li:nth-child(3) { transition-delay: .55s; }
.sv-perf { position: absolute; right: 7%; bottom: 7%; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 2px; text-align: right; --d: .7s; }
.sv-perf small { font-size: .66rem; color: var(--muted); }
.sv-perf div { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font-family: var(--mono); font-weight: 700; }
.sv-perf .a { color: var(--muted); text-decoration: line-through; font-size: .9rem; }
.sv-perf .b { color: #1a9e5c; font-size: 1.4rem; }
.sv-perf .arr { color: var(--sv); }
.cs-stage:not([data-step="5"]) .s5 .sv-proc { opacity: 0; transform: translateY(-12px); }
.cs-stage:not([data-step="5"]) .s5 .sv-checks li { opacity: 0; transform: translateX(-12px); }
.cs-stage:not([data-step="5"]) .s5 .sv-perf { opacity: 0; transform: scale(.9); }

/* ---------- Programa ---------- */
.c-sql-avanzado .sv-unit-fn { background: var(--sv-soft); border-color: var(--sv-line); }
.c-sql-avanzado .sv-unit-fn h3 { font-size: 1.5rem; }
.c-sql-avanzado .sv-unit-fn ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.c-sql-avanzado .sv-unit-fn li { padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--sv-line); color: var(--ink); font-family: var(--mono); font-size: .86rem; }
.c-sql-avanzado .sv-unit-fn li::before { display: none; }

/* Cursada con tres tramos */
@media (min-width: 901px) { .c-sql-avanzado .road { grid-template-columns: 1.5fr 1fr; } }
.c-sql-avanzado .dots { grid-template-columns: repeat(10, 1fr); max-width: 260px; }
.c-sql-avanzado .road-classes.on .dots i { background: var(--sv); }

@media (max-width: 900px) {
  .sv-run { left: -10px; bottom: -24px; width: 76%; }
}
@media (max-width: 560px) {
  .sv-stage { font-size: .76rem; }
  .sv-run { font-size: .7rem; padding: 9px 10px; } .sv-run-cmd { font-size: .66rem; } .sv-run-log li code { font-size: .64rem; }
  .sv-lines { gap: 5px; padding: 8px 8px 8px 26px; } .sv-lines i { height: 6px; } .sv-lines i::before { left: -19px; font-size: .48rem; }
  .sv-script header { font-size: .56rem; padding: 6px 8px; }
  .sv-note { font-size: .62rem; padding: 7px; top: 26%; width: 36%; }
  .sv-script header span { display: none; } .sv-note code { font-size: .58rem; }
  .sv-warn { font-size: .64rem; padding: 6px 8px; }
  .sv-nest { padding: 7px 9px; gap: 5px; border-radius: 10px; } .sv-nest code { font-size: .58rem; } .sv-lv { font-size: .5rem; top: 5px; right: 6px; }
  .sv-cap { display: none; }
  .sv-res { margin-top: 8px; font-size: .58rem; padding: 5px 9px; }
  .c-sql-avanzado .s3 { gap: 14px; padding: 5%; }
  .sv-flow { grid-template-columns: minmax(0, .8fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); gap: 3px; }
  .sv-obj { padding: 6px; font-size: .58rem; border-radius: 8px; } .sv-obj small { font-size: .52rem; }
  .sv-ddl li { font-size: .56rem; padding: 2px 7px; }
  .sv-fn-t { font-size: .68rem; margin-bottom: 8px; }
  .sv-fns { gap: 6px; } .sv-fns li { font-size: .58rem; padding: 6px 8px; gap: 6px; } .sv-fns code { padding: 3px 5px; }
  .sv-proc { font-size: .62rem; padding: 9px 11px; } .sv-checks { font-size: .68rem; margin-top: 10px; gap: 5px; }
  .sv-checks li::before { width: 16px; height: 16px; font-size: .6rem; }
  .sv-perf { padding: 6px 10px; } .sv-perf .b { font-size: 1.05rem; } .sv-perf .a { font-size: .74rem; } .sv-perf small { font-size: .56rem; }
  .c-sql-avanzado .sv-unit-fn ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-run { animation: none !important; }
  .sv-nest, .sv-fns li, .sv-checks li, .sv-run-log li, .sv-run-log li::before { transition: none !important; }
}