:root{--ink:#172c34;--dim:#586d74;--teal:#137b70;--teal-light:#e5f4f0;--gold:#ddab59;--bg:#f3f7f6;--paper:#fff;--stroke:#dae5e2;--sidebar:#102c32;--code:#152b36;--radius:18px;--shadow:0 9px 28px rgba(14,48,48,.05);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:75px}body{margin:0;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.68}a{color:#127669;text-underline-offset:3px}button,a{outline-offset:3px}button{font-family:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d49529}code,pre{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}code{font-size:.92em;background:#edf4f2;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}.skip{position:absolute;top:-80px;left:12px;background:white;padding:12px;z-index:100}.skip:focus{top:12px}.app{display:grid;grid-template-columns:277px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--sidebar);color:#e7f1ef;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:23px 14px 17px}.brand{display:flex;gap:11px;align-items:center;padding:3px 9px 20px;border-bottom:1px solid #ffffff1a}.brand strong{font-size:13px;line-height:1.25;display:block}.brand small{display:block;color:#a2bdc1;font-size:11px;margin-top:4px}.logo{width:39px;flex-shrink:0}.logo svg{width:100%;display:block}.sidebar-small{font-size:10px;letter-spacing:.19em;color:#7ea6aa;padding:22px 10px 8px;font-weight:800}#nav{display:flex;flex-direction:column;gap:3px}.nav-item{padding:9px 10px;display:flex;align-items:center;gap:9px;color:#c1d7d7;text-decoration:none;border-radius:9px;font-size:12px;line-height:1.35;border:1px solid transparent}.nav-item:hover,.nav-item.current{background:#ffffff16;border-color:#ffffff12;color:#fff}.nav-index{display:grid;place-items:center;color:#93c5bd;border:1px solid #527377;border-radius:6px;font-size:10px;min-width:27px;height:26px;font-weight:700}.nav-name{flex:1}.nav-done{color:#9fe3b6;opacity:0;font-weight:800}.nav-item.complete .nav-done{opacity:1}.sidebar-bottom{margin-top:auto;padding:20px 10px 3px}.sidebar-bottom strong{font-size:12px}.sidebar-bottom p{font-size:11px;line-height:1.6;color:#aac1c2}.main-wrapper{min-width:0}.topbar{height:59px;position:sticky;top:0;z-index:20;background:#fffffff0;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;padding:0 35px;backdrop-filter:blur(12px)}.topname{font-size:12px;font-weight:750;letter-spacing:.035em}.topactions{display:flex;gap:7px}.topactions button,.hamburger{border:1px solid #cadbd6;border-radius:8px;background:white;padding:7px 11px;color:var(--ink);font-size:12px;font-weight:700}.topactions button:hover{background:#ebf5f2}.hamburger{display:none}.main-wrapper main{max-width:1180px;margin:auto;padding:30px 42px 60px}.hero{border-radius:24px;overflow:hidden;background:linear-gradient(110deg,#112f35 0%,#163e42 61%,#1b5853 100%);display:grid;grid-template-columns:.95fr 1.05fr;gap:12px;min-height:335px;padding:39px 30px 39px 43px;color:white;position:relative}.hero:before{content:"";position:absolute;width:450px;height:450px;border-radius:50%;background:#ffffff08;right:-190px;top:-180px}.hero-text{align-self:center;z-index:2}.hero-kicker{color:#abe1cd;letter-spacing:.13em;font-size:11px;font-weight:750}.hero h1{font-weight:800;letter-spacing:-.045em;font-size:clamp(30px,3.15vw,44px);line-height:1.11;margin:16px 0}.hero h1 em{font-style:normal;color:#77d9bf}.hero p{color:#d1e3e0;font-size:14px;max-width:505px}.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.primary,.ghost{display:inline-flex;align-items:center;text-decoration:none;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:700}.primary{color:#073b35;background:#9be6d1}.ghost{color:#effffb;border:1px solid #a8cbc7aa}.hero-visual{align-self:center;background:#f6fcfa;border:1px solid #ffffff4a;border-radius:15px;padding:10px;z-index:2;box-shadow:0 18px 30px #092d293d}.hero-visual img{display:block;width:100%;height:auto}.progress{background:white;border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:13px;margin-top:18px;padding:17px 20px;display:grid;grid-template-columns:auto minmax(100px,1fr);gap:30px;align-items:center}.progress>div:first-child{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}.progress strong{font-size:13px}.progress #progress-label{font-size:12px;color:var(--dim)}.progress-track{height:9px;border-radius:99px;background:#e9f1ef;overflow:hidden}.progress-track span{height:100%;width:0%;background:var(--teal);display:block;transition:width .2s ease}.contents-intro{padding:42px 2px 14px;display:flex;justify-content:space-between;gap:18px;align-items:center}.eyebrow{color:#167b70;font-size:10px;font-weight:800;letter-spacing:.16em}.contents-intro h2{font-size:24px;letter-spacing:-.035em;margin:6px 0 3px}.contents-intro p{color:var(--dim);font-size:13px;margin:0;max-width:800px}.stage{background:#fff;border:1px solid var(--stroke);box-shadow:var(--shadow);border-radius:var(--radius);margin:21px 0 28px;scroll-margin-top:84px;overflow:hidden}.stage-header{padding:27px 33px 21px;border-bottom:1px solid #e7efed;background:linear-gradient(110deg,#fafdfe,#f3f9f6)}.stage-header h2{font-size:clamp(22px,2.2vw,29px);line-height:1.2;letter-spacing:-.037em;margin:7px 0}.stage-header p{color:var(--dim);margin:0;font-size:13px}.stage-content{padding:23px 33px 12px}.stage-content>p:first-child{margin-top:0}.stage-content h3{font-size:17px;letter-spacing:-.022em;margin:26px 0 10px}.stage-content p{max-width:89ch}.stage-content ul{padding-left:20px}.steps{counter-reset:step;list-style:none;padding:0;margin:15px 0 20px}.steps li{counter-increment:step;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid #eef2f1;min-width:0}.steps li:before{content:counter(step,decimal-leading-zero);font-weight:800;color:var(--teal);border:1px solid #cce5da;background:#eff9f5;align-self:start;text-align:center;border-radius:8px;padding:4px 1px;font-size:11px}.steps li:last-child{border-bottom:0}.expected,.note,.warn{padding:17px 20px;border-radius:11px;border:1px solid #cce3dc;background:#f1f9f6;margin:20px 0;color:#184b43}.expected{border-left:4px solid #2b9780}.expected strong,.note strong,.warn strong{font-size:12px;letter-spacing:.02em}.expected p,.note p,.warn p{margin:5px 0 0;font-size:13px}.warn{background:#fff9ea;border-color:#eddeb9;border-left:4px solid #dca34b;color:#614715}.note{border-left:4px solid #88bab0}.tablewrap{overflow-x:auto;border:1px solid var(--stroke);border-radius:11px;margin:16px 0 24px}.tablewrap table{border-collapse:collapse;width:100%;min-width:550px;text-align:left;font-size:12px}.tablewrap th{color:#365259;background:#edf4f2;white-space:nowrap;font-size:11px;letter-spacing:.025em}.tablewrap th,.tablewrap td{padding:11px 12px;border-bottom:1px solid #e4efed}.tablewrap tr:last-child td{border-bottom:0}.tablewrap tr:nth-child(even){background:#fbfdfc}.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;background:#4ba7a0}.d20{background:#c78b51}.d30{background:#6484d6}.d40{background:#a881b9}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.metrics>div{background:#f4f8f7;border:1px solid #e5eeec;padding:13px;border-radius:10px}.metrics b{display:block;font-size:23px;line-height:1.2;color:#145f57}.metrics span{font-size:11px;color:#647a78}.code-head{display:flex;align-items:center;justify-content:space-between;background:#223947;color:#d5ebf2;border-radius:10px 10px 0 0;padding:9px 12px;margin-top:17px;gap:12px}.code-head span{font-size:11px;font-weight:700}.copy{background:#345a62;border:1px solid #59858a;color:white;border-radius:6px;padding:4px 11px;font-size:11px;font-weight:700}.copy:hover{background:#44747a}pre{background:var(--code);border-radius:0 0 10px 10px;color:#e5f1f5;padding:16px;line-height:1.52;overflow:auto;font-size:11px;tab-size:2;margin:0 0 18px;white-space:pre}.stage-content pre code{background:transparent;color:inherit;padding:0;font-size:inherit;overflow-wrap:normal}.file{display:inline-flex;border-radius:9px;padding:10px 13px;background:#e9f5ef;border:1px solid #cce5db;color:#13675d;text-decoration:none;font-size:12px;font-weight:750;margin:7px 0 17px}.file:hover{background:#d9efe5}.file-mini{white-space:nowrap;margin:0}.diagram{margin:20px 0;border:1px solid #d6e4e0;padding:13px;border-radius:14px;background:#f7fbfa}.diagram img{width:100%;height:auto}.diagram figcaption{text-align:center;color:#6a7d82;font-size:11px;margin:7px 0 0}.stage-foot{border-top:1px solid var(--stroke);padding:17px 33px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;background:#fafcfb}.mark{background:var(--teal);border:1px solid var(--teal);color:#fff;border-radius:9px;padding:11px 16px;font-weight:750;font-size:12px}.mark.completed{background:#e9f5f0;color:#116c60}.back{font-size:11px;color:#627a78}.fault{border-left:3px solid #90c0b5;padding:11px 19px;background:#f7faf9;border-radius:0 8px 8px 0;margin:13px 0}.fault h3{margin:2px 0 4px;font-size:14px}.fault p{font-size:12px;margin:0;color:var(--dim)}.footer{border-top:1px solid var(--stroke);padding:25px 0;font-size:11px;color:#6b8083}.footer a{font-weight:600}.toast{position:fixed;right:20px;bottom:20px;background:#173d39;color:white;padding:12px 18px;border-radius:10px;box-shadow:0 12px 30px #163b3b38;z-index:100;opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}body.large-text{font-size:18px}body.large-text .steps li,body.large-text .stage-content{font-size:17px}body.focus-mode .stage:not(.focus-active){display:none}body.focus-mode .contents-intro{display:none}body.focus-mode .hero{display:none}body.focus-mode .progress{margin-bottom:22px}
@media(max-width:1100px){.app{grid-template-columns:235px minmax(0,1fr)}.main-wrapper main{padding:26px 24px}.hero{grid-template-columns:1fr;gap:20px}.hero-visual{max-width:650px;margin:auto;width:100%}.hero h1{font-size:34px}}@media(max-width:760px){.app{display:block}.sidebar{position:fixed;transform:translateX(-101%);z-index:40;box-shadow:0 0 0 transparent;width:min(80vw,300px);transition:transform .2s}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw #082c3673}.topbar{padding:0 15px}.hamburger{display:block}.topname{font-size:11px}.topactions button{font-size:10px;padding:7px}.main-wrapper main{padding:17px 13px 35px}.hero{padding:27px 19px;border-radius:15px}.hero h1{font-size:30px}.hero p{font-size:13px}.hero-visual{display:block}.progress{grid-template-columns:1fr;gap:11px}.contents-intro{padding:30px 2px 7px;flex-wrap:wrap}.stage-header{padding:22px 18px 17px}.stage-content{padding:18px 18px 6px}.stage-foot{padding:17px 18px}.metrics{grid-template-columns:repeat(2,1fr)}.steps li{grid-template-columns:27px 1fr;gap:9px}.diagram{padding:7px}pre{font-size:10.5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}@media print{.app{display:block}.sidebar,.topbar,.progress,.hero-actions,.stage-foot,.copy,.toast{display:none!important}.main-wrapper main{max-width:none;margin:0;padding:0}.stage{break-inside:avoid-page;box-shadow:none;border:1px solid #ddd}.hero{background:#f0f6f3;color:#173d39}.hero h1,.hero h1 em,.hero p{color:#173d39}.stage-content pre{white-space:pre-wrap}body.focus-mode .stage{display:block!important}}


/* Corrección de lectura: los 106 pasos son unidades completas, no elementos anónimos de grid. */
.steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:15px;align-items:start;padding:15px 0;min-width:0}
.steps li::before{grid-column:1;grid-row:1;display:block;line-height:1.45;padding:6px 0;font-size:12px}
.steps li>.step-body{grid-column:2;grid-row:1;min-width:0;max-width:100%;font-size:14.5px;line-height:1.75;overflow-wrap:break-word}
.steps li>.step-body>strong:first-child{display:block;color:#153f42;font-size:14.5px;font-weight:800;line-height:1.5;margin:1px 0 4px}
.steps li>.step-body code{font-size:.88em;white-space:normal;overflow-wrap:anywhere;background:#e9f3f0;border:1px solid #d6e7e1;border-radius:4px;padding:1px 4px}
/* Consola profesional: legible, con scroll horizontal si un comando es largo. */
.code-head{margin-top:21px;padding:11px 15px;gap:12px;border:1px solid #416272;border-bottom:0}
.code-head span{font-size:12.5px;line-height:1.5;color:#ecf7f5}
.code-head .copy{font-size:12px;flex-shrink:0;background:#e3f8ee;color:#134a44;border-color:#e3f8ee;padding:7px 12px}
.code-head .copy:hover{background:#bfe8d6;color:#103c37}
.stage-content pre{max-width:100%;overflow-x:auto;overflow-y:hidden;background:#142b37;color:#e7f2f7;font-size:13px;line-height:1.62;letter-spacing:0;tab-size:2;white-space:pre;word-break:normal;padding:20px 18px;scrollbar-color:#80aaab #1b3945;box-shadow:inset 0 1px 0 #34505f}
.stage-content pre code{background:transparent;border:0;padding:0;white-space:inherit;font-size:inherit;overflow-wrap:normal;word-break:normal}
.stage-content{min-width:0}
.stage-content>*,.stage-header>*{max-width:100%}
.stage-content pre::-webkit-scrollbar{height:11px}
.stage-content pre::-webkit-scrollbar-thumb{background:#73979e;border:2px solid #142b37;border-radius:10px}
.stage-content pre::-webkit-scrollbar-track{background:#1c3a48}
body.large-text .steps li>.step-body,body.large-text .steps li>.step-body>strong:first-child{font-size:17.5px}
body.large-text .stage-content pre{font-size:15px}
@media(max-width:760px){
 .steps li{grid-template-columns:32px minmax(0,1fr);gap:11px}
 .steps li>.step-body,.steps li>.step-body>strong:first-child{font-size:14px}
 .stage-content pre{font-size:12px;padding:17px 14px;line-height:1.65}
 .code-head{padding:10px 12px}
 .code-head span{font-size:11.5px}
}
@media print{
 .steps li{display:grid;grid-template-columns:34px minmax(0,1fr)}
 .steps li>.step-body{display:block}
 .stage-content pre{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;color:#101e24;background:#f4f7f8;border:1px solid #cbd6d9;font-size:10.5px}
 .code-head{background:#e8eeee;color:#162d33;border:1px solid #cbd6d9}
 .code-head span{color:#162d33}
}