/* =============================================
   🎨 VARIABLES DE MARCA Y CONFIGURACIÓN
   ============================================= */
:root {
  /* Paleta Principal */
  --bg-main: #0f172a;
  --bg-card: #020617;
  --primary: #2563eb;
  --secondary: #38bdf8;
  --success: #10b981;
  --orange: #ff7a00;
  
  /* Texto y Estados */
  --text-main: #e5e7eb;
  --muted: #94a3b8;
  
  /* Footer Config */
  --footer-height: 70px;
  --btn-size: 72px;
}

/* =============================================
   📱 FOOTER PRO – DISEÑO CON "HUECO"
   ============================================= */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
  pointer-events: none;
  padding-bottom: calc(env(safe-area-inset-bottom));
}

footer nav {
  pointer-events: all;
  width: 94%;
  max-width: 94%;
  height: var(--footer-height);
  background-color: #0b0c37;
  position: relative;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
}

footer ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 15px;
}

footer li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

footer li.center-btn {
  flex: 1.2; /* Espacio extra para el botón central */
}

/* =============================================
   🔘 LINKS LATERALES (EFECTO BOTÓN REAL / 3D)
   ============================================= */
footer a {
  text-decoration: none;
  color: var(--muted); /* Color inactivo adaptado */
  font-size: 22px;
  
  /* Dimensiones fijas para crear el botón físico */
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px; 
  
  /* Mismo fondo que el nav para que parezca hecho del mismo material */
  background: var(--bg-card); 
  
  /* Magia del Neumorfismo (Efecto Salido) adaptado a oscuros */
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.8), 
    -3px -3px 8px rgba(255, 255, 255, 0.04);
    
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ocultamos cualquier texto (span) ya que el diseño es de puros iconos */
footer a span {
  display: none; 
}

/* ESTADO ACTIVO / PRESIONADO (Efecto Hundido) */
footer a:active,
footer a.active {
  color: var(--orange);
  /* Cambiamos las sombras a interiores (inset) para que parezca presionado */
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.8), 
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
  
  /* Pequeño ajuste para dar sensación de pulsación física */
  transform: scale(0.96);
}

/* Puntito naranja indicador para el botón activo */
footer a.active::after {
  content: '';
  position: absolute;
  bottom: 8px; /* Ajusta la altura del puntito dentro del botón */
  width: 4px;
  height: 4px;
  background-color: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 122, 0, 0.6);
}

/* =============================================
   🔘 BOTÓN CENTRAL (PEDIR VIAJE)
   ============================================= */
.btn-footer-principal {
  all: unset;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: -35px; /* Ajuste para que flote sobre el nav */
  --center: translateX(-50%);
  transform: var(--center);
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--primary) 0%, var(--bg-card) 100%);
  display: none;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 1000;
  border: 6px solid var(--bg-main); /* El borde es igual al fondo de la app para simular hueco */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-footer-principal.btn-ready {
  background-color: var(--success);
  color: white;
  transform: var(--center) scale(1.05);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-footer-principal:active {
  transform: var(--center) scale(0.9);
}

.icon-car {
  font-size: 28px;
  transition: 0.3s ease;
}

/* =============================================
   🔍 ESTADO: BUSCANDO (ANIMACIONES)
   ============================================= */
.spinner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(26, 21, 21, 0.2);
  border-top-color: white;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

footer.buscando .icon-car {
  opacity: 0;
  transform: scale(0.5);
}

footer.buscando .spinner {
  opacity: 1;
  animation: spin 0.8s linear infinite;
}

footer.buscando .btn-footer-principal {
  animation: pulseHueco 1.5s infinite;
  background: var(--bg-card);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseHueco {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.08); }
}
/* =============================================
   💳 MÉTODOS DE PAGO (ESTILO NEUMÓRFICO PRO)
   ============================================= */
.titulo-pago {
  padding: 18px 5% 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.pago-opciones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* Aumentado un poco para que las sombras respiren */
  padding: 0 5% 20px;
}

.btn-pago {
  background: var(--bg-card);
  border-radius: 16px;
  border: none; /* Eliminamos el borde sólido */
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Sombra "Salida" (Efecto 3D hacia afuera) */
  box-shadow: 
    6px 6px 12px rgba(0, 0, 0, 0.7), 
    -3px -3px 8px rgba(255, 255, 255, 0.03);
  
  position: relative;
  overflow: hidden;
}

/* EFECTO AL PRESIONAR (Feedback táctil rápido) */
.btn-pago:active {
  transform: scale(0.95);
}

/* ================================
   ✨ ESTADO SELECCIONADO (ACTIVO)
   ================================ */
.btn-pago.activo {
  color: var(--orange); /* O var(--primary) si prefieres azul */
  
  /* Efecto "Hundido" (Mismo que header y footer) */
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.8), 
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
    
  /* Eliminamos el gradiente para que el efecto "hundido" sea el protagonista */
  background: var(--bg-card); 
  
  /* Animación de entrada suave */
  animation: pulsePago 0.3s ease-out;
}

/* Iconos de pago */
.btn-pago i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.btn-pago.activo {
  background: linear-gradient(135deg, var(--primary), var(--bg-main));
  border-color: var(--secondary);
  color: white;
  animation: pulsePago 0.3s ease-out;
}

@keyframes pulsePago {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* =============================================
   ⚡ RESPONSIVE ADAPTATIONS
   ============================================ */
@media (max-width: 380px) {
  footer nav { height: 65px; }
  .btn-footer-principal {
    width: 64px;
    height: 64px;
    top: -30px;
    border-width: 4px;
  }
}

/* =============================================
   🎯 VISIBILIDAD POR RUTA (CLAVE PRO)
   ============================================= */

/* 🔴 oculto SOLO el botón */
.btn-footer-principal {
  display: none;
}

/* 🟢 visible SOLO en HOME */
.route-home .btn-footer-principal {
  display: flex;
}