/* rutas.css — Ruta «Tu primer Linux» y terminal simulada. Usa las variables de modernist.css. */

/* ---- utilidades de accesibilidad ---- */
[hidden] { display: none !important; }
.sr-only, .lab-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--space-3) var(--space-4); background: var(--color-text); color: var(--color-bg);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }
:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 2px; }
button, .btn { min-height: 44px; min-width: 44px; cursor: pointer; }
button { font-family: var(--font-body); font-size: 15px; }
button:disabled { cursor: not-allowed; }

/* ---- cabecera y avance ---- */
main#contenido { padding: var(--space-8) var(--space-6); max-width: 820px; margin: 0 auto; }
.ruta-cabecera { margin-bottom: var(--space-6); }
.ruta-kicker {
  margin: 0 0 var(--space-1); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.ruta-cabecera h1 { margin: var(--space-2) 0 var(--space-3); }
.ruta-intro { max-width: 62ch; font-size: 17px; line-height: 1.6; }
.ruta-avance {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-4); margin-bottom: var(--space-6);
  background: var(--color-surface); border: 2px solid var(--color-text);
}
#ruta-progreso { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-2); font-weight: 600; }
.ruta-barra { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.ruta-seg { height: 10px; background: var(--color-neutral-300); border: 1px solid var(--color-neutral-700); }
.ruta-seg[data-hecho="true"] { background: var(--color-accent-700); border-color: var(--color-accent-700); }
#ruta-borrar-confirma { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
#ruta-borrar-confirma p { margin: 0; flex: 1 1 260px; }
#ruta-aviso { flex: 1 1 100%; margin: 0; padding: var(--space-3); background: var(--color-accent-100); border-left: 4px solid var(--color-accent-700); font-weight: 600; }

/* botones del sitio, con contraste reforzado dentro de la ruta */
.ruta-avance .btn, .ruta-cierre .btn, .lab-ui button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--space-2) var(--space-4); font-weight: 600; line-height: 1.2; border-radius: 0;
  border: 2px solid var(--color-text); color: var(--color-text); background: transparent;
}
.ruta-avance .btn-primary, .ruta-cierre .btn-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.ruta-avance .btn-primary:hover, .ruta-cierre .btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); }
.ruta-avance .btn-secondary:hover, .lab-ui button:hover:not(:disabled) { background: var(--color-neutral-300); }

/* ---- índice ---- */
.ruta-indice { margin-bottom: var(--space-8); }
.ruta-indice ol { margin: 0; padding-left: var(--space-6); columns: 2 320px; column-gap: var(--space-8); }
.ruta-indice li { padding: var(--space-1) 0; }
.ruta-indice a, .ruta-enlaces a, .ruta-leccion a { color: var(--color-accent-700); }

/* ---- pasos ---- */
.ruta-paso { padding: var(--space-8) 0; border-top: 2px solid var(--color-divider); scroll-margin-top: var(--space-4); }
.ruta-paso h2 { margin-bottom: var(--space-1); }
.ruta-minutos { margin-bottom: var(--space-4); font-size: 14px; color: var(--color-neutral-700); }
.ruta-leccion { font-size: 16px; line-height: 1.7; }
.ruta-leccion p { margin-bottom: var(--space-4); }
.ruta-leccion ul, .ruta-leccion ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.ruta-leccion li { margin-bottom: var(--space-2); }
.ruta-paso code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em;
  padding: 1px 5px; background: var(--color-neutral-200); border: 1px solid var(--color-neutral-300);
  overflow-wrap: anywhere;
}
.ruta-paso pre {
  margin: 0 0 var(--space-4); padding: var(--space-4); overflow-x: auto; max-width: 100%;
  background: #1c1b1a; color: #f3f2f2; font-size: 14px; line-height: 1.55; tab-size: 4;
}
.ruta-paso pre code { padding: 0; background: none; border: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }
.nota-rd {
  margin: var(--space-6) 0; padding: var(--space-4); font-size: 15px; line-height: 1.6;
  background: var(--color-accent-100); border-left: 6px solid var(--color-accent-700);
}
.ruta-enlaces { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.ruta-leccion .ruta-enlaces { padding: 0; }
.ruta-enlaces li { margin-bottom: var(--space-2); }
.ruta-enlaces a { display: inline-block; padding: var(--space-2) 0; min-height: 44px; }

/* ---- reto práctico ---- */
.reto-practico { margin-top: var(--space-6); padding: var(--space-4); background: var(--color-surface); border: 2px solid var(--color-text); }
.reto-practico h3 { margin-bottom: var(--space-2); font-size: 22px; }
.reto-practico h4 { margin: var(--space-4) 0 var(--space-2); font-size: 17px; }
.reto-practico ul, .reto-practico ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.reto-practico li { margin-bottom: var(--space-2); }
.lab-activo .lab-retos-texto { display: none; }
.ruta-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.ruta-logre[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); }
.ruta-hecho { font-weight: 800; }

/* ---- laboratorio ---- */
.lab { margin-top: var(--space-4); }
.lab-aviso {
  display: inline-block; margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em; color: var(--color-bg); background: var(--color-accent-700);
}
.lab-diferencias { margin-bottom: var(--space-3); font-size: 14px; line-height: 1.55; }
.lab-diferencias summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.lab-diferencias ul { margin: 0; padding-left: var(--space-6); }
.lab-diferencias li { margin-bottom: var(--space-2); }
.lab-terminal { min-height: 520px; }
.lab-error { margin: 0; padding: var(--space-3); font-weight: 600; border-left: 4px solid var(--color-accent-700); background: var(--color-accent-100); }
.lab-ui { display: flex; flex-direction: column; gap: var(--space-3); }
.lab-retos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lab-reto-btn[aria-current="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.lab-enunciado { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.5; }
.lab-estado { min-height: 44px; }
.lab-exito { margin: 0; padding: var(--space-3); font-weight: 800; background: #dcf1e2; color: #11331d; border-left: 6px solid #11331d; }
.lab-pantalla { background: #1c1b1a; color: #f3f2f2; border: 2px solid var(--color-text); }
.lab-salida {
  height: 230px; padding: var(--space-3); overflow-y: auto; overflow-x: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.lab-linea { min-height: 1.5em; }
.lab-entrada-fila { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid #605d5d; }
.lab-prompt { flex: none; max-width: 45%; color: #ffb4a5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 14px; overflow-wrap: anywhere; }
.lab-entrada {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-3); font-size: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #f3f2f2; background: #2d2b2b; border: 1px solid #9b9797; border-radius: 0;
}
.lab-pantalla :focus-visible { outline-color: #ffd0c7; }
.lab-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lab-pistas { font-size: 15px; line-height: 1.5; }
.lab-pistas ol { margin: 0; padding-left: var(--space-6); }
.lab-sin-pistas { margin: var(--space-2) 0 0; font-weight: 600; }
.lab-solucion-bloque pre { margin: 0; }

/* ---- móvil ---- */
@media (max-width: 720px) {
  main#contenido { padding: var(--space-6) var(--space-4); }
  .ruta-cabecera h1 { font-size: 34px; }
  .ruta-paso h2 { font-size: 26px; }
  .ruta-indice ol { columns: 1; }
  .lab-terminal { min-height: 600px; }
  .lab-salida { height: 200px; }
  .lab-entrada-fila { flex-wrap: wrap; }
  .lab-prompt { max-width: 100%; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}