/* Ejemplo S2 (Día 2): terminal didáctica de 11 etapas. Herramienta de laboratorio, no landing.
   Escritorio: etapas laterales · comandos + terminal · archivos + resultado. Móvil: una columna.
   Todo selector va bajo .s2-main o con prefijo s2- para no afectar otras páginas. */
.s2-main {max-width:1440px;margin:0 auto;padding:16px 24px 32px;}
.s2-main [hidden] {display:none !important;}
.s2-main :focus-visible {outline:3px solid var(--focus);outline-offset:3px;}
.s2-main h2 {font-size:15px;letter-spacing:.01em;margin:0;}
.s2-main h3 {font-size:14px;margin:0 0 8px;overflow-wrap:anywhere;}
.s2-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Cabecera breve: contexto, enlaces y estado */
.s2-head {display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:16px;}
.s2-head-copy {display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;min-width:0;}
.s2-eyebrow {margin:0;font:600 13px/1.4 Montserrat,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);}
.s2-links {display:flex;gap:4px 16px;flex-wrap:wrap;font-size:15px;}
.s2-links a {display:inline-flex;align-items:center;min-height:32px;}
.s2-head-status {display:flex;align-items:center;gap:8px;}
#status {margin:0;font-size:14px;color:var(--muted);}

/* Rejilla: etapas | trabajo */
.s2-layout {display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:start;}
.s2-stage {display:grid;gap:16px;min-width:0;}

/* Etapas: navegación lateral con estado textual (la construye la app) */
.s2-nav {position:sticky;top:16px;min-width:0;}
.s2-nav h2 {font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px;}
.s2-steps {list-style:none;margin:0;padding:0;border-left:1px solid var(--line);}
.s2-steps li {margin:0;}
.s2-steps button,.s2-steps a {display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px;align-items:baseline;width:100%;min-height:36px;padding:6px 8px 6px 12px;margin-left:-1px;border:0;border-left:3px solid transparent;background:none;color:var(--text);font:14px/1.35 Calibri,Carlito,sans-serif;text-align:left;text-decoration:none;cursor:pointer;}
.s2-steps button:hover,.s2-steps a:hover {color:var(--blue);background:var(--soft);}
.s2-steps button:disabled,.s2-steps [aria-disabled='true'] {cursor:not-allowed;color:var(--muted);background:none;}
.s2-steps [aria-current] {border-left-color:var(--blue);color:var(--ink);font-weight:700;background:var(--soft);}
.s2-steps small,.s2-step-state {grid-column:2;font:12px/1.4 'IBM Plex Mono',monospace;color:var(--muted);font-weight:400;}
.s2-step-num {font:600 12px/1.6 'IBM Plex Mono',monospace;color:var(--muted);}
.s2-steps [data-state='done'] .s2-step-num,.s2-steps [data-state='done'] small,.s2-steps [data-state='done'] .s2-step-state {color:var(--success-text);}
.s2-steps [data-state='done'] {border-left-color:var(--success-control);}
.s2-steps [data-state='done'][aria-current] {border-left-color:var(--blue);}

/* Encabezado de etapa: título, descripción corta, modo */
.s2-stage-head {display:grid;gap:4px;max-width:78ch;}
.s2-stage-head h1 {font-size:clamp(24px,2.2vw,30px);margin:0;letter-spacing:-.02em;overflow-wrap:anywhere;}
#description {margin:0;font-size:16px;}
#mode {margin:0;font:13px/1.5 'IBM Plex Mono',monospace;color:var(--muted);}
#mode:empty,#gate-note:empty,#file-count:empty,#cwd:empty {display:none;}

/* Comandos guiados + terminal */
.s2-bench {display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:16px;align-items:start;}
.s2-guide {min-width:0;}
.s2-guide h2 {margin-bottom:8px;}
.s2-commands {list-style:none;counter-reset:s2cmd;margin:0;padding:0;border-top:1px solid var(--line);}
.s2-commands li {counter-increment:s2cmd;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);}
.s2-commands li::before {content:counter(s2cmd);font:600 12px 'IBM Plex Mono',monospace;color:var(--muted);}
.s2-commands code {font:14px/1.5 'IBM Plex Mono',monospace;color:var(--ink);overflow-wrap:anywhere;background:none;padding:0;}
.s2-commands small,.s2-commands p {grid-column:2 / -1;margin:0;font-size:13px;color:var(--muted);}
.s2-commands .btn {min-height:36px;padding:6px 12px;}
.s2-commands [data-simulated='true'] code::after {content:' · simulado';font-size:12px;color:var(--muted);}
.s2-commands [data-done='true']::before {content:'✓';color:var(--success-text);}
.s2-expected {margin-top:12px;font-size:15px;}
.s2-expected:empty {display:none;}
.s2-expected p,.s2-expected ul {margin:4px 0;}
.s2-expected ul {padding-left:18px;}
.s2-expected code {font-size:13px;overflow-wrap:anywhere;}

/* Terminal: navy en ambos temas */
.s2-terminal {--s2-bg:color-mix(in srgb,var(--slate) 72%,var(--navy));--s2-fg:var(--mist);--s2-btn:color-mix(in srgb,var(--white) 8%,var(--navy));--s2-btn-hover:color-mix(in srgb,var(--white) 14%,var(--navy));--s2-line:color-mix(in srgb,var(--mist) 35%,var(--navy));background:var(--s2-bg);color:var(--s2-fg);padding:12px 16px;border:1px solid var(--s2-line);border-radius:var(--radius-field);min-width:0;}
.s2-terminal-bar {display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px solid var(--s2-line);min-width:0;}
.s2-terminal h2 {color:var(--white);font-size:14px;letter-spacing:.02em;flex:none;}
#cwd {margin:0;font:13px/1.5 'IBM Plex Mono',monospace;color:var(--s2-fg);text-align:right;overflow-wrap:anywhere;min-width:0;}
#log {height:clamp(300px,48vh,520px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 'IBM Plex Mono',monospace;margin:0;padding:12px 0;background:none;color:var(--s2-fg);border:0;}
.s2-entry {display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding-top:8px;border-top:1px solid var(--s2-line);}
#prompt {flex-basis:100%;font:600 13px/1.5 'IBM Plex Mono',monospace;color:var(--bright);overflow-wrap:anywhere;}
.s2-entry .input {flex:1;min-width:0;min-height:44px;background:var(--s2-bg);color:var(--white);border:1px solid var(--s2-line);padding:8px 10px;font:15px/1.5 'IBM Plex Mono',monospace;}
.s2-entry .input:read-only {opacity:.7;}
#run {min-height:44px;background:var(--s2-btn);color:var(--white);border-color:var(--s2-line);}
#run:hover {background:var(--s2-btn-hover);border-color:var(--bright);}
.s2-terminal-help {font-size:12px;color:var(--s2-fg);opacity:.8;margin:8px 0 0;}
#log .terminal-prompt,#log .s2-t-prompt {color:var(--bright);font-weight:600;}
#log .terminal-command,#log .s2-t-command {color:var(--s2-fg);font-weight:400;}
#log .terminal-option,#log .s2-t-option {color:var(--bright);}
#log .terminal-path,#log .s2-t-path {color:color-mix(in srgb,var(--bright) 55%,var(--white));}
#log .terminal-string,#log .s2-t-string {color:color-mix(in srgb,var(--orange) 55%,var(--white));}
#log .terminal-output,#log .s2-t-output {color:var(--s2-fg);}
#log .terminal-error,#log .s2-t-error {color:color-mix(in srgb,var(--orange) 75%,var(--white));}
#log .s2-t-sim {color:color-mix(in srgb,var(--mist) 70%,var(--navy));font-style:italic;}

/* Archivos + resultado */
.s2-inspect {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start;}
.s2-panel {border:1px solid var(--line);border-radius:var(--radius-field);padding:12px 16px;min-width:0;}
.s2-panel-head {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
#file-count {margin:0;font-size:13px;color:var(--muted);}
.s2-files {padding:8px 12px;background:var(--soft);overflow-wrap:anywhere;font:14px/1.6 'IBM Plex Mono',monospace;min-height:64px;max-height:320px;overflow:auto;}
.s2-files ul {list-style:none;margin:0;padding-left:16px;border-left:1px solid var(--line);}
.s2-files > ul {padding-left:0;border-left:0;}
.s2-files li {margin:2px 0;}
.s2-files .s2-folder {font-weight:600;color:var(--ink);}
.s2-files button {display:inline-flex;align-items:center;text-align:left;color:var(--text);background:none;border:0;font:inherit;padding:0;min-height:32px;cursor:pointer;overflow-wrap:anywhere;}
.s2-files button:hover {color:var(--blue);text-decoration:underline;}
.s2-files [aria-current],.s2-files [aria-pressed='true'] {color:var(--blue);font-weight:600;}
.s2-files [data-new='true'],.s2-files .s2-new {color:var(--blue);}
.s2-files small {font:12px/1.5 Calibri,Carlito,sans-serif;color:var(--blue);margin-left:8px;}
#file-detail {margin-top:12px;}
#file-content {white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 12px;margin:0;background:var(--soft);font:14px/1.55 'IBM Plex Mono',monospace;max-height:260px;overflow:auto;}
.s2-result {display:grid;gap:4px;margin:8px 0;font:14px/1.5 'IBM Plex Mono',monospace;}
.s2-result:empty {display:none;}
.s2-result ul {list-style:none;margin:0;padding:0;}
.s2-result li,.s2-result p {margin:4px 0;overflow-wrap:anywhere;}
.s2-result pre {white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:8px 12px;background:var(--soft);max-height:220px;overflow:auto;}
#feedback {margin:8px 0 0;font-size:15px;}
#gate-note {margin:8px 0 0;font-size:14px;color:var(--muted);}
.s2-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.s2-actions .btn {min-height:40px;}
#check:hover {background:color-mix(in srgb,var(--blue) 85%,var(--navy));border-color:var(--blue);color:var(--on-blue);}
#gate {border-color:var(--blue);color:var(--blue);background:none;}
#gate:hover {background:var(--soft);}
#next:not(:disabled) {background:var(--success-control);border-color:var(--success-control);color:var(--white);}
:root[data-theme='dark'] #next:not(:disabled) {color:var(--navy);}
#next:disabled {opacity:.55;cursor:not-allowed;}
#reset {margin-left:auto;padding:6px 8px;background:none;border-color:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px;}
#reset:hover {background:none;border-color:transparent;color:var(--blue);}
.s2-main [data-ok='true'] {border-left:4px solid var(--success-control);padding-left:8px;}
.s2-main [data-ok='false'] {border-left:4px solid var(--line-strong);padding-left:8px;}

@media (max-width:1180px) {
  .s2-layout {grid-template-columns:200px minmax(0,1fr);gap:16px;}
  .s2-bench,.s2-inspect {grid-template-columns:1fr;}
}
@media (max-width:800px) {
  .s2-main {padding:12px 16px 24px;}
  .s2-layout {grid-template-columns:1fr;}
  .s2-nav {position:static;}
  .s2-steps {display:flex;gap:4px;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);padding-bottom:4px;scroll-snap-type:x proximity;}
  .s2-steps li {flex:none;scroll-snap-align:start;}
  .s2-steps button,.s2-steps a {width:auto;max-width:200px;min-height:44px;margin-left:0;border-left:0;border-bottom:3px solid transparent;padding:6px 10px;}
  .s2-steps [aria-current] {border-bottom-color:var(--blue);}
  .s2-steps [data-state='done'] {border-bottom-color:var(--success-control);}
  .s2-steps [data-state='done'][aria-current] {border-bottom-color:var(--blue);}
  #log {height:clamp(240px,45vh,380px);font-size:14px;}
  .s2-commands .btn,.s2-actions .btn,.s2-files button,.s2-links a {min-height:44px;}
  #reset {margin-left:0;}
}
@media (prefers-reduced-motion:reduce) {
  .s2-steps {scroll-behavior:auto;}
}

.s2-main .s2-command-purpose {font-size:14px;line-height:1.55;color:var(--text);margin-top:4px;}
.s2-main .s2-command-explanation {grid-column:2 / -1;font-size:14px;line-height:1.55;margin-top:4px;}
.s2-main .s2-command-explanation summary {cursor:pointer;min-height:36px;display:flex;align-items:center;color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.s2-main .s2-command-explanation ul {padding-left:18px;margin:8px 0 12px;list-style:disc;border:0;}
.s2-main .s2-command-explanation li {display:list-item;counter-increment:none;border:0;padding:0;margin:6px 0;}
.s2-main .s2-command-explanation li::before {content:none;}
.s2-main .s2-command-explanation p {margin:4px 0 12px;font-size:14px;}
.s2-main .s2-expected h3 {margin:16px 0 6px;font-size:14px;color:var(--ink);}
.s2-main .s2-expected p {font-size:14px;line-height:1.6;}

.s2-main #log .s2-t-executable {color:var(--white);font-weight:600;}
.s2-main #log .s2-t-operator {color:color-mix(in srgb,var(--orange) 65%,var(--white));}
.s2-main #log .s2-t-success {color:var(--green);}
.s2-main .s2-terminal-bar {background:color-mix(in srgb,var(--navy) 35%,var(--s2-bg));margin:-12px -16px 0;padding:12px 16px;border-radius:var(--radius-field) var(--radius-field) 0 0;}
.s2-main .s2-commands .s2-t-executable {color:var(--ink);font-weight:600;}
.s2-main .s2-commands .s2-t-option,.s2-main .s2-commands .s2-t-operator {color:var(--blue);}
.s2-main .s2-commands .s2-t-string {color:var(--evaluation-label);}
.s2-main .s2-commands .s2-t-path {color:var(--muted);}

.s2-main .s2-guide-header {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.s2-main .s2-help-link {background:none;border:0;color:var(--blue);padding:4px 0;min-height:36px;font-size:13px;text-decoration:underline;text-underline-offset:3px;}
.s2-main .s2-command-actions {display:flex;gap:6px;align-items:center;}
.s2-main .s2-explain-icon {width:36px;padding:0;font-weight:700;color:var(--blue);}
.s2-main .s2-help-dialog {padding:0;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--surface);color:var(--text);}
.s2-main .s2-help-dialog::backdrop {background:color-mix(in srgb,var(--navy) 65%,transparent);}
.s2-main .s2-help-dialog .modal-box {padding:24px;}
.s2-main .s2-help-header {display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.s2-main .s2-help-header h2 {font-size:18px;margin:0;line-height:1.5;}
.s2-main .s2-help-command {background:var(--soft);color:var(--ink);font:13px/1.6 'IBM Plex Mono',monospace;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;}
@media(max-width:800px){.s2-main .s2-explain-icon {width:44px;}.s2-main .s2-help-dialog .modal-box {padding:20px;}}