/* Página de curso: Excel Avanzado. Identidad propia: el editor de macros (VBA) oscuro, la segmentación de datos
   y la escala de tiempo de los gráficos dinámicos. Acento ámbar sobre verde profundo.
   Detalle tipográfico: pasos y unidades numerados como comentarios de VBA (' Paso 01) en monoespaciada. */
.c-excel-avanzado {
  --xa: #a05f00; --xa-amber: #e8a700; --xa-green: #107c41; --xa-soft: #fbf0d9; --xa-cell: #ffffff; --xa-hd: #f2f0ea; --xa-grid: #dcd6c8;
  --xa-ed: #1b1f24; --xa-ed2: #252b33; --xa-ink: #e2e6ea; --xa-dim: #8d98a5; --xa-kw: #6fb6ff; --xa-str: #f0b46a; --xa-com: #6fbf73;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --xa-font: "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="dark"] .c-excel-avanzado { --xa: #f2b13c; --xa-soft: #2e2510; --xa-cell: #0f1d2a; --xa-hd: #162a3b; --xa-grid: #29405a; --xa-green: #4cc38a; --xa-ed: #0a1118; --xa-ed2: #131c26; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-excel-avanzado { --xa: #f2b13c; --xa-soft: #2e2510; --xa-cell: #0f1d2a; --xa-hd: #162a3b; --xa-grid: #29405a; --xa-green: #4cc38a; --xa-ed: #0a1118; --xa-ed2: #131c26; }
}

.c-excel-avanzado .c-hero h1 { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.5rem); max-width: 17ch; }
.c-excel-avanzado .c-hero h1 em, .c-excel-avanzado h2 em { color: var(--xa); }
.c-excel-avanzado .c-btn-big { background: var(--xa-ed); border-color: var(--xa-ed); color: #fff; }
.c-excel-avanzado .c-btn-big::before { content: "▶"; margin-right: 8px; color: var(--xa-amber); font-size: .8em; }
:root[data-theme="dark"] .c-excel-avanzado .c-btn-big { background: var(--xa); border-color: var(--xa); color: #1b1300; }
:root[data-theme="dark"] .c-excel-avanzado .c-btn-big::before { color: #1b1300; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-excel-avanzado .c-btn-big { background: var(--xa); border-color: var(--xa); color: #1b1300; }
  :root:not([data-theme="light"]) .c-excel-avanzado .c-btn-big::before { color: #1b1300; }
}
.c-excel-avanzado .c-solo-emp { display: inline-block; margin: 0; padding: 5px 12px; border-radius: 6px; font-family: var(--mono); font-size: .76rem; font-weight: 600; color: var(--xa-com); background: var(--xa-ed); }
.c-excel-avanzado .c-solo-emp::before { content: "' "; }
.c-excel-avanzado .cs-step-n { font-family: var(--mono); font-size: .86rem; letter-spacing: 0; color: var(--xa-green); }

/* ---------- Portada: segmentación + escala de tiempo ---------- */
.xa-slicer {
  position: absolute; left: -26px; bottom: -30px; width: min(74%, 300px); padding: 12px; border-radius: 12px; display: grid; gap: 9px;
  background: var(--xa-cell); border: 1px solid var(--xa-grid); box-shadow: 0 22px 44px -18px rgba(40, 25, 0, .5);
  font-family: var(--xa-font); font-size: .78rem; animation: c-in .8s .5s cubic-bezier(.2, .8, .2, 1) both;
}
.xa-sl-head { display: flex; justify-content: space-between; font-weight: 700; } .xa-sl-head i { font-style: normal; color: var(--faint); }
.xa-sl-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.xa-sl-btns b { padding: 5px; text-align: center; border-radius: 4px; border: 1px solid var(--xa-grid); color: var(--muted); font-weight: 600; transition: background-color .3s, color .3s; }
.xa-sl-btns b.on { background: var(--xa); border-color: var(--xa); color: #fff; }
:root[data-theme="dark"] .xa-sl-btns b.on { color: #1b1300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xa-sl-btns b.on { color: #1b1300; } }
.xa-sl-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; border-bottom: 1px solid var(--xa-grid); }
.xa-sl-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--xa-green); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.xa-sl-time { display: grid; grid-template-columns: repeat(6, 1fr); font-size: .68rem; color: var(--muted); text-align: center; }
.xa-sl-time span { padding: 3px 0; border-bottom: 4px solid var(--xa-grid); }
.xa-sl-time .on { border-color: var(--xa); color: var(--ink); font-weight: 600; }

/* ---------- Historia ---------- */
.c-excel-avanzado .cs-stage { container-type: inline-size; }
.c-excel-avanzado .scene { font-size: clamp(9.5px, 2.7cqw, 17px); font-family: var(--xa-font); }
.c-excel-avanzado .s1 { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--xa-amber) 14%, transparent), transparent 55%); }
.c-excel-avanzado .s2, .c-excel-avanzado .s4 { display: block; }
.c-excel-avanzado .s5 { padding: 7%; background: var(--xa-ed); color: var(--xa-ink); }

/* Escena 1: checklist de cierre */
.xa-month { position: absolute; left: 7%; top: 8%; width: 60%; border-radius: 10px; overflow: hidden; background: var(--xa-cell); border: 1px solid var(--xa-grid); box-shadow: var(--shadow); }
.xa-month header { display: grid; padding: .6em .9em; background: var(--xa-hd); border-bottom: 1px solid var(--xa-grid); }
.xa-month header span { font-size: .78em; color: var(--muted); }
.xa-month ol { margin: 0; padding: .5em .9em .7em 2.4em; display: grid; gap: .35em; font-size: .92em; }
.xa-month li { color: var(--ink); }
.xa-month li::marker { color: var(--xa); font-weight: 700; }
.xa-month li:nth-child(n+4) { color: var(--muted); }
.xa-loop { position: absolute; right: 7%; bottom: 10%; width: 32%; display: grid; justify-items: center; gap: .4em; text-align: center; font-size: .95em; color: var(--muted); --d: .3s; }
.xa-loop svg { width: 3.4em; height: 3.4em; fill: none; stroke: var(--bad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: c-spin 6s linear infinite; }
.xa-loop b { color: var(--bad); }
.cs-stage:not([data-step="1"]) .s1 .xa-month { opacity: 0; transform: translateY(20px); }
.cs-stage:not([data-step="1"]) .s1 .xa-loop { opacity: 0; transform: scale(.8); }

/* Escena 2: fuentes externas */
.xa-sources { position: absolute; left: 6%; top: 12%; bottom: 12%; width: 30%; list-style: none; margin: 0; padding: 0; display: grid; align-content: space-between; }
.xa-sources li { display: flex; align-items: center; gap: .55em; font-size: .82em; color: var(--muted); white-space: nowrap; }
.xa-ico { flex: none; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 8px; font-family: var(--mono); font-size: .9em; font-weight: 700; background: var(--xa-hd); color: var(--ink); border: 1px solid var(--xa-grid); }
.xa-ico.xls { background: var(--xa-green); color: #fff; border-color: transparent; font-family: var(--xa-font); }
.xa-ico.db svg { width: 1.6em; height: 1.6em; fill: none; stroke: var(--xa); stroke-width: 1.8; }
.s2 .xa-sources li { transition: opacity .5s, transform .5s; }
.cs-stage[data-step="2"] .s2 .xa-sources li:nth-child(2) { transition-delay: .1s; } .cs-stage[data-step="2"] .s2 .xa-sources li:nth-child(3) { transition-delay: .2s; }
.cs-stage:not([data-step="2"]) .s2 .xa-sources li { opacity: 0; transform: translateX(-12px); }
.xa-pipes { position: absolute; left: 30%; width: 16%; top: 16%; height: 68%; overflow: visible; }
.xa-pipes path { fill: none; stroke: var(--xa); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: c-flow 1.2s linear infinite; }
.xa-table { position: absolute; right: 6%; top: 50%; translate: 0 -50%; width: 50%; border-radius: 10px; overflow: hidden; background: var(--xa-cell); border: 1px solid var(--xa-grid); box-shadow: var(--shadow); font-size: .88em; --d: .3s; }
.xa-table header { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .5em .7em; background: var(--xa-green); color: #fff; }
.xa-table header b { font-family: var(--mono); }
.xa-refresh { padding: .1em .5em; border-radius: 4px; font-size: .8em; background: rgba(255,255,255,.2); white-space: nowrap; }
.xa-tr { display: grid; grid-template-columns: .9fr 1.1fr 1fr; border-top: 1px solid var(--xa-grid); }
.xa-tr span { padding: .3em .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.xa-tr span:last-child { text-align: right; }
.xa-tr.h { font-weight: 700; background: var(--xa-hd); }
.xa-tr.new { background: color-mix(in srgb, var(--xa-amber) 20%, transparent); transition: opacity .5s 1.1s; }
.cs-stage:not([data-step="2"]) .xa-tr.new { opacity: 0; }
.cs-stage:not([data-step="2"]) .s2 .xa-table { opacity: 0; transform: translateX(20px); }

/* Escena 3: fórmula y evaluación */
.xa-formula { padding: .7em .9em; border-radius: 8px; background: var(--xa-cell); border: 1px solid var(--xa-grid); font-family: var(--xa-font); font-size: 1em; line-height: 1.55; word-break: break-word; }
.xa-formula span { border-radius: 3px; }
.t-f { color: #2f6fd6; } .t-b { color: #8a4fd8; } .t-l { color: var(--xa); font-weight: 700; }
:root[data-theme="dark"] .t-f { color: #7aa8ff; } :root[data-theme="dark"] .t-b { color: #c4a6ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-f { color: #7aa8ff; } :root:not([data-theme="light"]) .t-b { color: #c4a6ff; } }
.xa-tags { list-style: none; margin: .7em 0 0; padding: 0; display: flex; gap: .5em; font-size: .82em; font-weight: 600; --d: .15s; }
.xa-tags li { padding: .2em .7em; border-radius: 999px; border: 1.5px solid currentColor; }
.xa-eval { margin-top: 1.1em; border-radius: 10px; overflow: hidden; background: var(--xa-ed); color: var(--xa-ink); box-shadow: var(--shadow); --d: .3s; }
.xa-eval header { padding: .5em .9em; background: var(--xa-ed2); color: var(--xa-dim); font-size: .85em; }
.xa-eval ol { list-style: none; margin: 0; padding: .5em .9em .7em; display: grid; gap: .3em; counter-reset: e; }
.xa-eval li { display: grid; grid-template-columns: 1.4em 1fr auto; gap: .5em; align-items: center; font-family: var(--mono); font-size: .86em; transition: opacity .4s; }
.xa-eval li::before { counter-increment: e; content: counter(e); color: var(--xa-dim); }
.xa-eval li b { color: var(--xa-amber); }
.cs-stage[data-step="3"] .xa-eval li:nth-child(2) { transition-delay: .7s; } .cs-stage[data-step="3"] .xa-eval li:nth-child(3) { transition-delay: 1.1s; } .cs-stage[data-step="3"] .xa-eval li:nth-child(4) { transition-delay: 1.5s; }
.cs-stage[data-step="3"] .xa-eval li:nth-child(1) { transition-delay: .4s; }
.cs-stage:not([data-step="3"]) .xa-eval li { opacity: 0; }
.cs-stage:not([data-step="3"]) .s3 > * { opacity: 0; transform: translateY(12px); }

/* Escena 4: tablero dinámico */
.xa-dash { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr auto; gap: .8em; height: 100%; }
.xa-dslicer { display: grid; align-content: start; gap: .4em; padding: .7em; border-radius: 10px; background: var(--xa-cell); border: 1px solid var(--xa-grid); }
.xa-dslicer small, .xa-dchart small, .xa-dtime small { font-size: .78em; color: var(--muted); }
.xa-dslicer b { padding: .4em; border-radius: 5px; text-align: center; font-size: .9em; border: 1px solid var(--xa-grid); color: var(--muted); }
.xa-dslicer b.on { background: var(--xa); border-color: var(--xa); color: #fff; }
:root[data-theme="dark"] .xa-dslicer b.on { color: #1b1300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xa-dslicer b.on { color: #1b1300; } }
.xa-dchart { position: relative; display: grid; grid-template-rows: auto 1fr; gap: .4em; padding: .7em .9em; border-radius: 10px; background: var(--xa-cell); border: 1px solid var(--xa-grid); --d: .15s; }
.xa-calc { padding: .05em .4em; border-radius: 4px; background: var(--xa-soft); color: var(--xa); font-weight: 600; }
.xa-dbars { display: flex; align-items: flex-end; gap: 7%; padding: 0 4%; border-bottom: 1px solid var(--xa-grid); min-height: 0; }
.xa-dbars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--xa-green); transform-origin: bottom; transform: scaleY(.05); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.xa-dbars i:nth-child(2) { transition-delay: .06s; } .xa-dbars i:nth-child(3) { transition-delay: .12s; } .xa-dbars i:nth-child(4) { transition-delay: .18s; } .xa-dbars i:nth-child(5) { transition-delay: .24s; } .xa-dbars i:nth-child(6) { transition-delay: .3s; }
.cs-stage[data-step="4"] .xa-dbars i { transform: none; }
.xa-dline { position: absolute; left: .9em; right: .9em; top: 2.2em; height: 40%; width: calc(100% - 1.8em); overflow: visible; }
.xa-dline path { fill: none; stroke: var(--xa); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset 1s .6s; }
.cs-stage[data-step="4"] .xa-dline path { stroke-dashoffset: 0; }
.xa-dtime { grid-column: 1 / -1; display: grid; gap: .3em; padding: .6em .8em; border-radius: 10px; background: var(--xa-cell); border: 1px solid var(--xa-grid); --d: .3s; }
.xa-dtime div { display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; font-size: .78em; color: var(--muted); }
.xa-dtime span { padding: .2em 0; border-bottom: 5px solid var(--xa-grid); }
.xa-dtime .on { border-color: var(--xa); color: var(--ink); font-weight: 700; }
.cs-stage:not([data-step="4"]) .s4 .xa-dash { opacity: 0; transform: translateY(16px); }

/* Escena 5: editor de macros */
.xa-rec { display: inline-flex; align-items: center; gap: .5em; padding: .35em .8em; border-radius: 999px; background: var(--xa-ed2); font-size: .85em; color: var(--xa-dim); }
.xa-rec i { width: .8em; height: .8em; border-radius: 50%; background: #ff5b4f; animation: xa-rec 1.2s ease-in-out infinite; }
@keyframes xa-rec { 50% { opacity: .25; } }
.xa-vba { margin: 1em 0 0; padding: .9em 1em; border-radius: 10px; background: var(--xa-ed2); font-family: var(--mono); font-size: .86em; line-height: 1.6; white-space: pre-wrap; color: var(--xa-ink); --d: .2s; }
.xa-vba .k { color: var(--xa-kw); } .xa-vba .s { color: var(--xa-str); } .xa-vba .c { color: var(--xa-com); }
.xa-run { position: absolute; left: 7%; right: 7%; bottom: 7%; display: flex; justify-content: space-between; align-items: center; gap: .6em; --d: .5s; }
.xa-run span { padding: .55em 1em; border-radius: 8px; background: var(--xa-amber); color: #1b1300; font-weight: 700; font-size: .92em; }
.xa-run b { padding: .45em .9em; border-radius: 999px; background: #1a9e5c; color: #fff; font-size: .85em; transition: opacity .4s 1.2s, transform .4s 1.2s; }
.cs-stage:not([data-step="5"]) .s5 > * { opacity: 0; transform: translateY(14px); }
.cs-stage:not([data-step="5"]) .xa-run b { opacity: 0; transform: scale(.8); }

/* ---------- Programa ---------- */
.c-excel-avanzado .unit-n { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--xa-green); }
.c-excel-avanzado .unit li::before { background: var(--xa); border-radius: 1px; }
.c-excel-avanzado .unit--wide { background: color-mix(in srgb, var(--xa-amber) 9%, var(--surface)); }
.xa-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; font-size: 1rem !important; }
.c-excel-avanzado .unit-grid { grid-auto-flow: dense; }
.c-excel-avanzado .xa-unit-macro { background: var(--xa-ed); border-color: transparent; color: var(--xa-ink); }
.c-excel-avanzado .xa-unit-macro h3 { color: #fff; } .c-excel-avanzado .xa-unit-macro ul { color: var(--xa-ink); }
.c-excel-avanzado .xa-unit-macro .unit-n { color: var(--xa-com); }
.c-excel-avanzado .xa-unit-macro li::before { background: var(--xa-amber); }
.xa-pend { margin-top: 20px; padding: 14px 18px; border-radius: 12px; border: 1px dashed var(--xa-grid); color: var(--muted); font-size: .95rem; }

/* ---------- Recorrido ---------- */
.xa-road { grid-template-columns: 1.4fr 1fr 1fr; }
.c-excel-avanzado .dots { grid-template-columns: repeat(10, 1fr); max-width: 300px; }
.c-excel-avanzado .road-classes.on .dots i { background: var(--xa); }
.c-excel-avanzado .road-ico { color: var(--xa); background: var(--xa-soft); }

@media (max-width: 900px) {
  .xa-slicer { left: -8px; bottom: -24px; }
  .xa-road { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .c-excel-avanzado .scene { padding: 5%; }
  .c-excel-avanzado .s5 { padding: 5%; }
  .xa-month { left: 4%; top: 5%; width: 64%; } .xa-loop { right: 3%; width: 30%; bottom: 8%; }
  .xa-sources { left: 4%; width: 22%; } .xa-sources li { font-size: 0; } .xa-ico { font-size: 9px; }
  .xa-pipes { left: 20%; width: 24%; } .xa-table { right: 4%; width: 54%; }
  .xa-eval { margin-top: .7em; } .xa-eval ol { padding: .35em .7em .5em; }
  .xa-vba { margin-top: .6em; padding: .6em .8em; } .xa-run { left: 5%; right: 5%; bottom: 5%; }
  .xa-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .xa-slicer, .xa-loop svg, .xa-rec i, .xa-pipes path { animation: none !important; }
  .xa-sl-bars i, .xa-dbars i, .xa-dline path, .xa-eval li, .xa-run b, .xa-tr.new { transition: none !important; }
}
:root[data-theme="dark"] .xa-table header, :root[data-theme="dark"] .xa-ico.xls { color: #062014; }
:root[data-theme="dark"] .xa-refresh { background: rgba(0,0,0,.15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xa-table header, :root:not([data-theme="light"]) .xa-ico.xls { color: #062014; }
  :root:not([data-theme="light"]) .xa-refresh { background: rgba(0,0,0,.15); }
}