/* ============================================================
   NAV ARROWS — Botón de retroceso flotante para sub-páginas
   ============================================================ */

/* Animación de entrada: slide-in desde la izquierda */
@keyframes navBtnSlideIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* La flecha, no el círculo, es la protagonista: cambia de color y brilla */
@keyframes navArrowPulse {
  0%, 100% {
    stroke: #fff;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
    transform: scale(1);
  }
  50% {
    stroke: #ff2d2d;
    filter: drop-shadow(0 0 5px rgba(245, 5, 17, 0.95)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
    transform: scale(1.18);
  }
}

.nav-back-btn {
  position: fixed;
  /* Justo bajo el header sticky (56px + 10px de aire). El header crece con el
     área segura superior en un teléfono con recorte de pantalla, así que este
     botón tiene que bajar lo mismo o se le monta encima. */
  top: calc(66px + var(--safe-top, 0px));
  left: calc(6px + var(--safe-left, 0px));
  z-index: 1100;       /* por encima de todos los elementos de página */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Vidrio esmerilado: translúcido y liviano, no una mancha sólida — el
     blur difumina lo que hay detrás así que el borde/ícono siempre
     contrastan, tanto sobre fondos claros como oscuros. El borde usa alta
     opacidad + un hairline oscuro exterior (box-shadow) para quedar nítido
     en vez de leerse difuso, sobre todo contra fondos claros */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(5px) saturate(140%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  padding: 7px;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.35);

  /* Oculto hasta que JS lo activa */
  opacity: 0;
  pointer-events: none;

  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

/* Clase activada desde JS: dispara la animación de entrada y lo hace interactuable */
.nav-back-btn--visible {
  opacity: 1;
  pointer-events: auto;
  animation: navBtnSlideIn 0.22s ease forwards;
}

/* La animación intermitente vive en el ícono, no en el círculo — el círculo
   queda estable (vidrio esmerilado) y toda la atención va a la flecha */
.nav-back-btn--visible svg {
  animation: navArrowPulse 2.6s ease-in-out 0.3s infinite;
  transform-origin: center;
}

/* Hover / Active */
.nav-back-btn--visible:hover {
  border-color: rgba(245, 5, 17, 0.9);
  background: rgba(255, 255, 255, 0.2);
}

.nav-back-btn--visible:active {
  transform: scale(0.92);
}

/* Icono SVG dentro del botón — drop-shadow leve para que no se pierda
   contra fondos claros sin necesitar un relleno opaco detrás */
.nav-back-btn svg {
  flex-shrink: 0;
  stroke: #fff;
  fill: none !important;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
}

/* Etiqueta de texto — oculta (diseño solo-icono) */
.nav-back-label {
  display: none;
}

/* Área táctil del botón de volver.
   El círculo mide 34px y se deja así: es un flotante sobre el contenido y a
   44px pasaría de discreto a estorbo. Como no tiene ningún control al lado
   —está solo en la esquina—, la zona sensible puede crecer hasta el mínimo
   completo sin quitarle el toque a nadie. */
.nav-back-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: var(--tap-min, 44px);
  height: var(--tap-min, 44px);
  border-radius: 50%;
}

/* ── Pantallas >= 480px: un poco más grande ── */
@media (min-width: 480px) {
  .nav-back-btn {
    top: calc(70px + var(--safe-top, 0px));
    left: calc(10px + var(--safe-left, 0px));
    font-size: 0.85rem;
  }
}

/* ── Pantallas grandes ── */
@media (min-width: 768px) {
  .nav-back-btn {
    top: calc(66px + var(--safe-top, 0px));
    left: calc(14px + var(--safe-left, 0px));
  }
}

/* ── Botón desactivado (sin historial disponible, usa fallback) ── */
/* Sin parpadeo: no tiene sentido llamar la atención hacia una acción inerte */
.nav-back-btn--disabled.nav-back-btn--visible {
  opacity: 0.35;
  pointer-events: none;
  animation: navBtnSlideIn 0.22s ease forwards;
}

.nav-back-btn--disabled svg {
  animation: none;
}