/* app12 — La fase de la venta, como una barra que se toca. */

.fases{ margin:.2rem 0 1rem; }
.fases h4{
  font-family:var(--fd); font-weight:400; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3); margin:0 0 .5rem;
}

.fases-barra{ display:flex; flex-wrap:wrap; gap:.3rem; }

.fase{
  font:600 .72rem var(--fb); letter-spacing:.02em;
  padding:.45rem .7rem; cursor:pointer;
  background:var(--b2); color:var(--tx2);
  border:1px solid var(--bd); border-radius:var(--r);
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.fase:hover:not(:disabled){ border-color:var(--or); color:var(--or); }

/* Por donde ya pasó: apagado pero visible, para leer el recorrido. */
.fase.hecho{ color:var(--tx3); border-color:var(--bd); background:transparent; }
.fase.hecho::before{ content:'✓ '; color:var(--ok); }

/* Donde está parado ahora. */
.fase.aqui{
  background:var(--or); border-color:var(--or); color:#fff; cursor:default;
  font-weight:700;
}
.fase.perdido:hover:not(:disabled){ border-color:var(--alto); color:var(--alto); }
.fase.perdido.aqui{ background:var(--alto); border-color:var(--alto); color:#fff; }
.fase:disabled{ cursor:default; }

.fases-aparte{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:.45rem; }
.fases-ayuda{ font-size:.62rem; color:var(--tx3); letter-spacing:.04em; }

.fases-atajos{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.7rem; }

@media (max-width:560px){
  .fases-barra .fase{ flex:1 1 auto; text-align:center; }
  .fases-ayuda{ display:none; }
}