/* =============================================================================
   componentes/pasos-compra.css — Stepper del proceso de compra
   -----------------------------------------------------------------------------
   El <ol class="pasos"> y su versión móvil (.pasos-movil) los genera
   CompraController::pasos() y salen en todos los pasos (carrito, datos, envío, pago).

   Escritorio: círculos de 28px unidos por una línea fina; lo hecho, relleno en corporativo
   con un ✓; el paso actual, con el número en corporativo y un halo.
   Móvil: cinco círculos con su rótulo no caben sin apretarse, así que se cambian por
   "Paso 2 de 4 · Datos" y una barra con el degradado de la marca.
   ============================================================================= */

.pasos { list-style:none; display:flex; margin:0 auto 1.75rem; padding:0; max-width:720px; }
.pasos li { flex:1; position:relative; text-align:center; font-size:.8rem; color:#868e96; }
.pasos li::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:#dee2e6; z-index:0; }
.pasos li:first-child::before { display:none; }
.pasos li .n { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
               width:28px; height:28px; margin:0 auto .35rem; border-radius:50%;
               background:#fff; border:2px solid #dee2e6; font-weight:700; font-size:.78rem; }
.pasos li .t { position:relative; z-index:1; }

.pasos li.done { color:#212529; }
.pasos li.done::before,
.pasos li.active::before { background:var(--ss-first-color); }
.pasos li.done .n { background:var(--ss-first-color); border-color:var(--ss-first-color); color:#fff; }
.pasos li.active { color:var(--ss-first-color); font-weight:700; }
.pasos li.active .n { border-color:var(--ss-first-color); color:var(--ss-first-color); box-shadow:0 0 0 4px rgba(193, 0, 73, .12); }
.pasos li.reachable { color:#495057; }
.pasos li.reachable .n { border-color:#adb5bd; }
.pasos li.locked { color:#adb5bd; }

.pasos li a.paso-link { color:inherit; text-decoration:none; cursor:pointer; display:block; }
.pasos li a.paso-link:hover .t { text-decoration:underline; }
.pasos li a.paso-link:hover .n { filter:brightness(.92); }

/* ---------- MÓVIL ---------- */
.pasos-movil { display:none; margin-bottom:1.25rem; }
.pasos-movil__fila { display:flex; justify-content:space-between; gap:1rem; font-size:.875rem; margin-bottom:.5rem; }
.pasos-movil__siguiente { color:#5c636a; }
.pasos-movil__barra { height:6px; border-radius:50rem; background:#e9ecef; overflow:hidden; }
.pasos-movil__barra > span { display:block; height:100%; border-radius:50rem; background:linear-gradient(90deg, #e20049, #1a2b6d); }
/* Ancho de la barra por paso (sin style="": las plantillas no llevan estilos en línea). */
.pasos-movil__barra--1 > span { width:25%; }
.pasos-movil__barra--2 > span { width:50%; }
.pasos-movil__barra--3 > span { width:75%; }
.pasos-movil__barra--4 > span,
.pasos-movil__barra--5 > span { width:100%; }

@media (max-width:575.98px) {
    .pasos { display:none; }
    .pasos-movil { display:block; }
}