/* Página de curso: SQL Analytics potenciado por IA. Identidad propia: editor de código y tablas relacionales. */
.c-sql { --sq-ed: #0f1d2b; --sq-ed2: #16283a; --sq-ink: #d7e6f2; --sq-dim: #7f97ab; --sq-kw: #5fd4c4; --sq-str: #f2b66d; --sq-com: #6f8aa0; --sq-fn: #9fb8ff; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }
.c-sql .cs-step-n { font-family: var(--mono); color: var(--teal); }
.c-sql .c-hero h1 em { color: var(--teal); }

/* ---------- Portada: editor flotante que escribe una consulta ---------- */
.sq-editor {
  position: absolute; left: -26px; bottom: -28px; width: min(78%, 360px); border-radius: 16px; overflow: hidden;
  background: var(--sq-ed); color: var(--sq-ink); box-shadow: 0 24px 50px -18px rgba(5, 20, 35, .55); border: 1px solid rgba(255,255,255,.06);
  font-family: var(--mono); font-size: .76rem; animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.sq-editor-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--sq-ed2); color: var(--sq-dim); font-size: .7rem; }
.sq-editor-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; }
.sq-editor-bar i:nth-child(2) { background: #ffc857; } .sq-editor-bar i:nth-child(3) { background: #3ecf8e; }
.sq-editor-bar span { margin-left: 6px; }
.sq-ask { margin: 0; padding: 9px 12px 0; color: var(--sq-dim); font-family: var(--f-body); font-size: .76rem; }
.sq-ask .ai-spark { color: #c4b0ff; }
.sq-code { margin: 0; padding: 8px 12px 10px; min-height: 6.2em; white-space: pre-wrap; line-height: 1.55; font: inherit; }
.sq-code b, .sq-block b { color: var(--sq-kw); font-weight: 600; }
.sq-code u, .sq-block u { color: var(--sq-str); text-decoration: none; }
.sq-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--sq-kw); animation: sq-blink 1s steps(1) infinite; }
.sq-result { border-top: 1px solid rgba(255,255,255,.08); padding: 6px 12px 10px; display: grid; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.sq-result.on { opacity: 1; transform: none; }
.sq-result .r, .sq-out .r { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.sq-result .r.h { color: var(--sq-dim); border-bottom: 1px dashed rgba(255,255,255,.12); }
@keyframes sq-blink { 50% { opacity: 0; } }

/* ---------- Historia: escenario oscuro tipo editor en las escenas de código ---------- */
.sq-stage { font-size: .86rem; }

/* Escena 1: el pedido que no llega */
.s1.scene { background: radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%); }
.sq-ticket { position: absolute; left: 8%; top: 12%; width: 70%; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sq-ticket header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .82rem; color: var(--muted); }
.sq-ticket header b { margin-left: auto; font-family: var(--mono); color: var(--faint); }
.sq-dot { width: 9px; height: 9px; border-radius: 50%; background: #f0a33a; box-shadow: 0 0 0 4px color-mix(in srgb, #f0a33a 22%, transparent); animation: sq-pulse 1.6s ease-in-out infinite; }
.sq-ticket p { margin: 10px 0 12px; font-size: 1rem; line-height: 1.4; }
.sq-wait { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .78rem; color: var(--muted); }
.sq-wait li { display: flex; align-items: center; gap: 8px; }
.sq-wait li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.sq-wait .ok::before { background: var(--teal); }
.sq-wait .now { color: #c97a10; font-weight: 600; }
.sq-wait .now::before { background: #f0a33a; }
.sq-clock { position: absolute; right: 8%; bottom: 12%; padding: 10px 14px; border-radius: 12px; background: var(--deep); color: var(--on-deep); font-size: .82rem; --d: .25s; }
.sq-clock b { color: var(--on-deep-accent); }
.cs-stage:not([data-step="1"]) .sq-ticket { opacity: 0; transform: translateY(24px); }
.cs-stage:not([data-step="1"]) .sq-clock { opacity: 0; transform: translateX(20px); }
@keyframes sq-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, #f0a33a 0%, transparent); } }

/* Escena 2: tablas y claves */
.s2.scene { background-image: radial-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.sq-tbl { position: absolute; width: 36%; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(10, 30, 60, .35); font-size: .74rem; }
.sq-tbl header { padding: 7px 10px; font-family: var(--mono); font-weight: 700; color: #fff; background: var(--teal); }
.sq-tbl span { display: flex; gap: 6px; align-items: center; padding: 4px 10px; border-top: 1px solid var(--line); font-family: var(--mono); }
.sq-tbl span b { font-size: .6rem; padding: 1px 4px; border-radius: 4px; color: #8a5a00; background: #fde7b8; }
.sq-tbl span b.fk { color: #0d5f73; background: color-mix(in srgb, var(--teal) 22%, var(--surface)); }
.st-v { left: 8%; top: 14%; } .st-v header { background: var(--accent); }
.st-c { right: 6%; top: 8%; width: 32%; --d: .12s; }
.st-k { right: 6%; top: 54%; width: 32%; --d: .24s; }
.st-f { left: 14%; bottom: 9%; width: 28%; --d: .36s; } .st-f header { background: var(--muted); }
.sq-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq-links path { fill: none; stroke: var(--teal); stroke-width: .5; stroke-dasharray: 2 1.4; vector-effect: non-scaling-stroke; stroke-width: 2; opacity: 0; transition: opacity .6s .4s; }
.cs-stage[data-step="2"] .sq-links path { opacity: .8; }
.sq-note { position: absolute; right: 6%; bottom: 7%; width: 40%; margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.35; --d: .5s; }
.cs-stage:not([data-step="2"]) .s2 .sq-tbl { opacity: 0; transform: scale(.88); }
.cs-stage:not([data-step="2"]) .s2 .sq-note { opacity: 0; }

/* Escena 3 y 4: editor oscuro */
.s3.scene, .s4.scene { background: var(--sq-ed); color: var(--sq-ink); }
.sq-block { margin: 0; font-family: var(--mono); font-size: .8rem; line-height: 1.6; white-space: pre-wrap; color: var(--sq-ink); }
.sq-block i { color: var(--sq-com); font-style: normal; }
.sq-out { position: absolute; left: 7%; right: 7%; bottom: 7%; padding: 10px 14px; border-radius: 12px; background: var(--sq-ed2); font-family: var(--mono); font-size: .76rem; --d: .35s; }
.sq-out .r.h { color: var(--sq-dim); border-bottom: 1px dashed rgba(255,255,255,.14); }
.sq-out .r:not(.h) span:last-child { color: var(--sq-kw); }
.cs-stage:not([data-step="3"]) .s3 .sq-block { opacity: 0; transform: translateY(-12px); }
.cs-stage:not([data-step="3"]) .s3 .sq-out { opacity: 0; transform: translateY(18px); }

.sq-chat { display: grid; gap: 10px; }
.sq-chat .me { justify-self: end; margin: 0; max-width: 78%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff; font-size: .82rem; }
.sq-chat .ai { display: flex; gap: 8px; max-width: 88%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, #8a5cf6 22%, var(--sq-ed2)); font-size: .8rem; line-height: 1.45; --d: .2s; }
.sq-chat .ai .ai-spark { color: #c4b0ff; }
.sq-chat .ai code { font-family: var(--mono); color: var(--sq-kw); }
.sq-chat .ai small { display: block; margin-top: 4px; color: var(--sq-dim); }
.sq-diff { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sq-ed2); font-family: var(--mono); font-size: .72rem; line-height: 1.55; white-space: pre-wrap; --d: .4s; }
.sq-diff .add { color: #7ee2a8; }
.sq-check { position: absolute; left: 7%; bottom: 7%; margin: 0; font-size: .8rem; color: var(--sq-kw); --d: .55s; }
.cs-stage:not([data-step="4"]) .s4 .sq-chat, .cs-stage:not([data-step="4"]) .s4 .sq-diff, .cs-stage:not([data-step="4"]) .s4 .sq-check { opacity: 0; transform: translateY(14px); }

/* Escena 5: listo para analizar */
.sq-bars { display: grid; gap: 8px; }
.sq-bars small { font-size: .8rem; color: var(--muted); }
.sq-bars .bars { display: flex; align-items: flex-end; gap: 6%; height: 150px; padding-top: 18px; border-bottom: 1px solid var(--line); }
.sq-bars .bars i { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(var(--teal), color-mix(in srgb, var(--teal) 55%, var(--accent))); transform-origin: bottom; transform: scaleY(.05); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.sq-bars .bars i:nth-child(2) { transition-delay: .08s; } .sq-bars .bars i:nth-child(3) { transition-delay: .16s; } .sq-bars .bars i:nth-child(4) { transition-delay: .24s; }
.cs-stage[data-step="5"] .sq-bars .bars i { transform: scaleY(1); }
.sq-bars em { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-family: var(--mono); font-size: .7rem; color: var(--ink); }
.sq-bars .months { display: flex; gap: 6%; } .sq-bars .months span { flex: 1; text-align: center; font-size: .68rem; color: var(--muted); }
.sq-export { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; --d: .3s; }
.sq-export li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .78rem; font-weight: 600; }
.sq-done { position: absolute; right: 7%; bottom: 7%; padding: 9px 14px; border-radius: 12px; background: #1a9e5c; color: #fff; font-weight: 600; font-size: .82rem; --d: .5s; }
.cs-stage:not([data-step="5"]) .s5 .sq-export, .cs-stage:not([data-step="5"]) .s5 .sq-done { opacity: 0; transform: translateY(14px); }

/* ---------- Cómo se aprende ---------- */
.sq-method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: m; }
.sq-method li { position: relative; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.sq-method li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 30px; color: var(--teal); font-weight: 700; }
.sq-m-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--mono); font-weight: 700; color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--surface)); }
.sq-method h3 { margin-top: 14px; font-size: 1.2rem; }
.sq-method p { margin-top: 6px; color: var(--muted); line-height: 1.55; }
.sq-pendiente { margin-top: 18px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--line); color: var(--faint); font-size: .86rem; }

@media (max-width: 900px) {
  .sq-editor { left: -10px; bottom: -22px; width: 74%; }
  .sq-method { grid-template-columns: minmax(0, 1fr); }
  .sq-method li:not(:last-child)::after { content: "↓"; right: 22px; top: auto; bottom: -18px; }
}
@media (max-width: 560px) {
  .sq-stage { font-size: .78rem; }
  .sq-ticket { width: 82%; padding: 12px; } .sq-ticket p { font-size: .84rem; margin: 6px 0 8px; } .sq-wait { font-size: .7rem; gap: 3px; }
  .sq-clock { font-size: .72rem; padding: 7px 10px; }
  .sq-tbl { font-size: .6rem; } .sq-tbl header { padding: 4px 7px; } .sq-tbl span { padding: 2px 7px; }
  .sq-note { display: none; }
  .sq-block { font-size: .62rem; line-height: 1.45; }
  .sq-out { font-size: .62rem; padding: 6px 10px; } .sq-out .r { padding: 1px 0; }
  .sq-chat .me, .sq-chat .ai { font-size: .7rem; } .sq-diff { font-size: .6rem; margin-top: 8px; } .sq-check { font-size: .7rem; }
  .sq-bars .bars { height: 90px; } .sq-export { margin-top: 10px; } .sq-done { font-size: .72rem; }
  .sq-editor { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sq-editor, .sq-caret, .sq-dot { animation: none !important; }
  .sq-bars .bars i, .sq-links path, .sq-result { transition: none !important; }
}

/* ---------- Programa con acento SQL ---------- */
.c-sql .unit-n { font-family: var(--mono); color: var(--teal); text-transform: none; letter-spacing: 0; }
.c-sql .unit li::before { background: var(--teal); }
.c-sql .unit code { font-family: var(--mono); font-size: .86em; padding: 1px 5px; border-radius: 5px; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.c-sql .sq-unit-ia { background: var(--sq-ed); border-color: transparent; color: var(--sq-ink); }
.c-sql .sq-unit-ia h3 { color: #fff; } .c-sql .sq-unit-ia ul { color: var(--sq-ink); font-size: 1rem; }
.c-sql .sq-unit-ia .unit-n { color: var(--sq-kw); }
.c-sql .sq-unit-ia li::before { background: #b9a0ff; }
.c-sql .unit-grid { grid-auto-flow: dense; }
.sq-method-wrap { margin-top: clamp(32px, 5vw, 56px); }
.sq-method-t { font-size: var(--step-1, 1.3rem); margin-bottom: 16px; }

/* Anula el armado de escenas de la página de Power BI */
.c-sql .s2, .c-sql .s4 { display: block; }
.c-sql .s5 { padding: 7%; }
/* El título es más largo que el de Power BI */
.c-sql .c-hero h1 { font-size: clamp(2rem, 1.2rem + 2.3vw, 3.1rem); max-width: 20ch; }
:root[data-theme="dark"] .sq-tbl span b.fk { color: #8fe6dc; background: color-mix(in srgb, var(--teal) 30%, var(--surface)); }
:root[data-theme="dark"] .c-sql .sq-unit-ia { border-color: color-mix(in srgb, #8a5cf6 45%, transparent); background: #101a33; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sq-tbl span b.fk { color: #8fe6dc; background: color-mix(in srgb, var(--teal) 30%, var(--surface)); }
  :root:not([data-theme="light"]) .c-sql .sq-unit-ia { border-color: color-mix(in srgb, #8a5cf6 45%, transparent); background: #101a33; }
}

/* Recorrido de dos pasos: clases y certificado */
.c-sql .sq-road { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 900px) { .c-sql .sq-road { grid-template-columns: minmax(0, 1fr); } }