/* GenLAB — practico.css: ruta del práctico (practico.php) */
.nl-ruta { padding-top: 3rem; padding-bottom: 3rem; max-width: 860px; }
.nl-ruta__head h1 { margin: .6rem 0 .8rem; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.nl-ruta__obj, .nl-ruta__intro { color: var(--gray-300); line-height: 1.6; margin: 0 0 .6rem; }

.nl-ruta__guia {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
    margin: 1.4rem 0 2rem; padding: 1rem 1.2rem;
    border: 1.5px solid var(--violet); border-radius: 14px;
    background: linear-gradient(120deg, rgba(6,182,212,.18), rgba(251,113,133,.1));
}
.nl-ruta__guia-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: .35rem; color: var(--gray-100); }
.nl-ruta__guia-txt span { font-size: .88rem; color: var(--gray-300); }
.nl-ruta__barra { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.nl-ruta__barra-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--pink)); transition: width .4s; }

.nl-ruta__pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.nl-paso {
    display: flex; gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--gray-700);
    border-left: 4px solid var(--violet);
    border-radius: 12px;
    background: var(--navy-mid);
}
.nl-paso.is-hecho { border-color: rgba(34,197,94,.45); border-left-color: #22C55E; }
.nl-paso.is-pronto { opacity: .6; }
.nl-paso--final { border-left-color: var(--pink); background: rgba(251,113,133,.07); }
.nl-paso__num {
    flex: 0 0 2rem; height: 2rem; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: .9rem;
    background: rgba(6,182,212,.18); color: var(--violet-light);
}
.nl-paso.is-hecho .nl-paso__num { background: rgba(34,197,94,.2); color: #4ADE80; }
.nl-paso--final .nl-paso__num { background: rgba(251,113,133,.18); color: var(--pink); }
.nl-paso__cuerpo { flex: 1; min-width: 0; }
.nl-paso__top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.nl-paso__top h2 { font-size: 1.05rem; margin: 0; }
.nl-paso__tarea { margin: .35rem 0 .6rem; line-height: 1.55; color: var(--gray-100); }
.nl-paso__hecho { flex: none; font-size: .85rem; font-weight: 700; color: #4ADE80; }
.nl-paso__nota { margin: 0 0 .6rem; font-size: .84rem; color: var(--gray-500); }
.nl-paso__pronto { font-size: .85rem; font-weight: 700; color: var(--gray-500); }
.nl-paso__secciones { list-style: none; padding: 0; margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.nl-paso__sec {
    font-size: .8rem; padding: .25rem .6rem; border-radius: 99px;
    border: 1px dashed var(--gray-700); color: var(--gray-500);
}
.nl-paso__sec.is-ok { border-style: solid; border-color: rgba(34,197,94,.5); color: #BBF7D0; background: rgba(34,197,94,.08); }

@media (max-width: 600px) {
    .nl-ruta { padding-top: 2rem; }
    .nl-paso { padding: .9rem; gap: .7rem; }
}