/* ══════════════════════════════════════════════════════════════════════════
   Respuesta inmediata al navegar
   ──────────────────────────────────────────────────────────────────────────
   Acompaña a js/navegacion.js. Una barra fina arriba mientras la página viene
   en camino, y el enlace pulsado marcado para que se vea cuál se abrió.
   ══════════════════════════════════════════════════════════════════════════ */

.cf-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 10200;
  background: linear-gradient(90deg,
    var(--cf-gold, #c9a227) 0%,
    var(--cf-gold-soft, #efd27a) 60%,
    var(--cf-gold, #c9a227) 100%);
  box-shadow: 0 0 8px rgba(201, 162, 39, .55);
  opacity: 0;
  transition: width .18s ease-out, opacity .2s ease;
  pointer-events: none;
}
.cf-progreso.is-viva { opacity: 1; }

/* El enlace que se acaba de pulsar. Sirve de acuse de recibo. */
.cf-navegando {
  position: relative;
  opacity: .72;
  cursor: progress !important;
}
.cf-navegando::after {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cf-girar .6s linear infinite;
}
@keyframes cf-girar { to { transform: rotate(360deg); } }

/* Quien pide menos movimiento ve la barra, pero quieta. */
@media (prefers-reduced-motion: reduce) {
  .cf-progreso { transition: opacity .2s ease; width: 100% !important; }
  .cf-navegando::after { animation: none; border-right-color: currentColor; }
}