/* Modo aprendizaje: la guía de pasos encima de cada pantalla. El ámbar (--acento) señala lo que es de práctica. */
.guia-practica { margin: 0 0 16px; padding: 12px 14px; background: color-mix(in srgb, var(--acento) 10%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borde)); border-left: 6px solid var(--acento); border-radius: 6px; }
.guia-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; }
.guia-titulo { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 1.05rem; font-weight: 700; }
.guia-cab .btn.enlace { grid-column: 3; min-height: 44px; padding: 0 4px; color: var(--texto); }
.etiqueta.practica { margin: 0; background: var(--acento); color: #231a08; border: 0; text-transform: uppercase; letter-spacing: .04em; }
.guia-barra { display: flex; gap: 4px; margin: 8px 0; }
.guia-barra span { flex: 1; height: 6px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--texto) 55%, var(--superficie)); }
.guia-barra span.hecho { background: var(--marca); border-color: var(--marca); }
.guia-pista { display: flex; align-items: center; gap: 12px; }
.guia-pista p { flex: 1; margin: 0; }
.guia-pista .btn { flex: none; min-width: 72px; }
.guia-pasos { margin-top: 8px; font-size: .9rem; }
.guia-pasos summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--suave); }
.guia-pasos ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 6px; }
.guia-pasos li { min-height: 32px; }
.guia-pasos li a { color: var(--texto); }
.guia-pasos li.hecho a { color: var(--suave); text-decoration: line-through; }
.guia-pasos li.hecho::marker { content: '✓  '; color: var(--ok); font-weight: 700; }
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .guia-pista { flex-direction: column; align-items: stretch; } }