/* ============================================================================
   MotoXpress v4.3.3 — Progress Ring Modal (PRM) · Premium Postulation UI
   ============================================================================
   Sistema Zero-Scroll para la tarjeta de revisión del conductor.
   
   v4.3.3 Cambios:
   - Timer badge: fondo sólido circular con contraste mejorado y z-index > ring
   - Botones: gap 15px, padding ampliado, touch target 52px mínimo
   - Card: min-height 60vh, flex space-between para distribución vertical
   - Info block: margin-bottom generoso para separación visual
   - Animación pulse en timer cuando <5s (preparación para siguiente paso)
   
   Arquitectura:
   - Flex column con min-height: 60vh + max-height: 90vh
   - SVG Progress Ring integrado alrededor de la foto del conductor
   - Timer como badge flotante con fondo sólido de alto contraste
   - Botones con min-height: 52px (touch-first premium)
   - safe-area-inset-bottom para iOS gesture bar
   
   Técnicas CSS:
   - flex-shrink en elementos no-esenciales para compresión dinámica
   - overflow: hidden + text-overflow: ellipsis para nombres largos
   - letter-spacing: 0.5px (tracking) para legibilidad Montserrat
   - justify-content: space-between para distribución del espacio rojo
   ============================================================================ */

/* ===== OVERLAY (auth-overlay overrides para PRM) ===== */
#driver-profile-review-modal {
  /* Override auth-overlay: fondo translúcido con blur en vez de sólido */
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  z-index: 10002 !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  /* Override: permitir animaciones (auth-overlay bloquea transform) */
  transform: none !important;
  -webkit-transform: none !important;
}

/* ===== CARD PRINCIPAL (Space-Between Flex Container) ===== */
.prm-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  /* v4.3.3: justify-content space-between distribuye elementos
     a lo largo de toda la altura disponible, eliminando
     la compresión visual de la versión anterior */
  justify-content: space-between;
  width: 92%;
  max-width: 380px;
  /* v4.3.3: min-height 60vh garantiza que la card use el espacio
     vertical disponible, evitando que todo quede "aplastado" */
  min-height: 60vh;
  max-height: 90vh;
  padding: 28px 24px 20px !important;
  margin: auto;
  border-radius: 28px;
  border: 1px solid rgba(255, 215, 0, 0.15);
  background: rgba(10, 10, 12, 0.96);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow:
    0 16px 56px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 215, 0, 0.06) inset;
  position: relative !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: hidden;
  gap: 0;
}

/* ===== TÍTULO — Branding Montserrat ===== */
.prm-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 0.85rem;
  color: #ffd700;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  padding: 0;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
  flex-shrink: 0;
}

/* ===== AVATAR + PROGRESS RING WRAPPER ===== */
.prm-avatar-ring-wrapper {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  margin: 0 auto 12px;
}

/* SVG Ring (posición absoluta cubriendo todo el wrapper)
   v4.3.2: z-index: 10 para que no se corte con el header (z-index: 100)
   al estar dentro del overlay (z-index: 9999). El stacking context
   del overlay aísla los índices internos — no colisiona con el header. */
.prm-ring-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
  transform: scaleX(-1); /* Para que vaya en sentido horario visualmente */
}

.prm-ring-track {
  opacity: 0.5;
}

.prm-ring-progress {
  transition:
    stroke-dashoffset 0.9s linear,
    stroke 0.3s ease;
  will-change: stroke-dashoffset;
}

/* ===== TIMER BADGE — v4.3.3 Premium Redesign ===== */
/* Fondo sólido circular con alto contraste, profundidad real y
   z-index superior al ring SVG para legibilidad garantizada */
.prm-timer-badge {
  position: absolute;
  bottom: 0px;
  right: -4px;
  /* v4.3.3: z-index 20 > ring SVG z-index 10 */
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* v4.3.3: Fondo sólido oscuro para máximo contraste con el número dorado */
  background: rgba(18, 18, 18, 0.92);
  border: 2px solid #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  /* v4.3.3: Box-shadow con profundidad real (elevación + glow) */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(255, 215, 0, 0.25),
    0 0 0 3px rgba(10, 10, 12, 0.8);
  /* Transición suave para cambio de estado urgente */
  transition: all 0.3s ease;
}

.prm-timer-number {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  color: #ffd700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Estado crítico (<10s) — cambio de color a rojo */
.prm-timer-badge.prm-urgent {
  border-color: #ff4444;
  background: rgba(30, 10, 10, 0.95);
  animation: prm-pulse-badge 0.5s infinite alternate;
  box-shadow:
    0 4px 14px rgba(255, 68, 68, 0.4),
    0 0 16px rgba(255, 68, 68, 0.25),
    0 0 0 3px rgba(10, 10, 12, 0.8);
}

.prm-timer-badge.prm-urgent .prm-timer-number {
  color: #ff4444;
  text-shadow: 0 0 8px rgba(255, 68, 68, 0.6);
}

/* v4.3.3: Estado FINAL (<5s) — latido de urgencia extrema
   Listo para la siguiente iteración (animación pulse del fondo) */
.prm-timer-badge.prm-critical {
  border-color: #ff2222;
  background: rgba(40, 8, 8, 0.97);
  animation: prm-pulse-critical 0.4s infinite alternate;
  box-shadow:
    0 4px 18px rgba(255, 34, 34, 0.5),
    0 0 20px rgba(255, 34, 34, 0.35),
    0 0 0 3px rgba(10, 10, 12, 0.9);
}

.prm-timer-badge.prm-critical .prm-timer-number {
  color: #ff2222;
  text-shadow: 0 0 10px rgba(255, 34, 34, 0.7);
  font-size: 0.95rem;
}

@keyframes prm-pulse-badge {
  from {
    transform: scale(1);
    box-shadow:
      0 4px 14px rgba(255, 68, 68, 0.3),
      0 0 12px rgba(255, 68, 68, 0.2);
  }
  to {
    transform: scale(1.1);
    box-shadow:
      0 4px 18px rgba(255, 68, 68, 0.5),
      0 0 20px rgba(255, 68, 68, 0.35);
  }
}

/* v4.3.3: Pulse acelerado para los últimos 5 segundos */
@keyframes prm-pulse-critical {
  from {
    transform: scale(1);
    box-shadow:
      0 4px 14px rgba(255, 34, 34, 0.4),
      0 0 16px rgba(255, 34, 34, 0.3);
  }
  to {
    transform: scale(1.15);
    box-shadow:
      0 4px 22px rgba(255, 34, 34, 0.6),
      0 0 28px rgba(255, 34, 34, 0.45);
  }
}

/* Foto del conductor (centrada dentro del anillo) */
.prm-photo-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 102px;
  height: 102px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: #1a1a1e;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.18);
}

.prm-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  background-color: #333;
}

/* ===== INFO BLOCK (Nombre + Rating) ===== */
/* v4.3.3: margin-bottom generoso para separar info de botones,
   aprovechando el espacio vertical ganado con min-height: 60vh */
.prm-info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-height: 0;
  width: 100%;
  /* v4.3.3: Separación amplia entre info y botones */
  margin-bottom: 20px;
}

.prm-driver-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #ffffff;
  margin: 0;
  padding: 0;
  text-align: center;
  letter-spacing: 0.5px;

  /* Anti-desbordamiento */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prm-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 215, 0, 0.12);
}

.prm-rating-pill .star-icon {
  font-size: 0.9rem;
}

.prm-rating-pill .rating-value {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffd700;
}

/* ===== BADGE DE PROXIMIDAD (flex-shrink para compresión) ===== */
.prm-badge-slot {
  width: 100%;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Ajustar el badge interno para texto compacto justificado */
.prm-badge-slot .distance-indicator-premium {
  font-size: 0.8rem;
  padding: 6px 10px;
  text-align: justify;
  word-break: break-word;
}

/* ===== BOTONES DE ACCIÓN — v4.3.3 Ergonomía Premium ===== */
.prm-actions {
  display: flex;
  flex-direction: column;
  /* v4.3.3: Gap amplio entre botones para ergonomía táctil */
  gap: 15px;
  width: 100%;
  flex-shrink: 0;
  /* v4.3.3: iOS gesture bar protection (doble guard) */
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}

/* CTA Principal: ACEPTAR — v4.3.3 Premium Touch Target */
.prm-btn-accept {
  width: 100%;
  /* v4.3.3: Touch target 52px mínimo (8px más que el estándar 44px) */
  min-height: 52px;
  padding: 14px 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0a0a0c;
  background: linear-gradient(135deg, #ffd700, #ffb300);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(255, 215, 0, 0.35),
    0 0 0 1px rgba(255, 215, 0, 0.1) inset;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.prm-btn-accept:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
}

/* Botón Secundario: DESCARTAR — v4.3.3 Ghost Button Premium */
.prm-btn-reject {
  width: 100%;
  /* v4.3.3: Touch target 48px mínimo (4px más que estándar) */
  min-height: 48px;
  padding: 12px 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.prm-btn-reject:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

/* ===== ANIMACIONES DE ENTRADA/SALIDA ===== */
@keyframes prm-slide-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.prm-card.animate-slide-up {
  animation: prm-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.prm-card.slide-out-bottom {
  animation: prm-slide-out 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes prm-slide-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(60px);
    opacity: 0;
  }
}

/* v4.3.2: Fade-out suave del overlay completo (invocado por JS al descartar) */
#driver-profile-review-modal.prm-fade-out {
  animation: prm-overlay-fade-out 0.3s ease-out forwards;
  pointer-events: none; /* Bloquear interacción durante fade */
}

@keyframes prm-overlay-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ===== RESPONSIVE: Pantallas compactas (iPhone SE, Android small) ===== */

/* Breakpoint 1: < 670px — Compresión suave con espacio preservado */
@media (max-height: 670px) {
  .prm-card {
    padding: 20px 20px 16px !important;
    min-height: 55vh;
    gap: 0;
  }

  .prm-info-block {
    gap: 6px;
    margin-bottom: 14px;
  }

  .prm-avatar-ring-wrapper {
    width: 115px;
    height: 115px;
    margin-bottom: 8px;
  }

  .prm-photo-frame {
    width: 92px;
    height: 92px;
  }

  .prm-badge-slot {
    margin-bottom: 4px;
  }

  .prm-actions {
    gap: 12px;
  }
}

/* Breakpoint 2: < 600px — Compresión moderada */
@media (max-height: 600px) {
  .prm-card {
    padding: 16px 18px 14px !important;
    min-height: 50vh;
    max-height: 92vh;
  }

  .prm-title {
    font-size: 0.75rem;
    margin-bottom: 10px;
    letter-spacing: 2.5px;
  }

  .prm-avatar-ring-wrapper {
    width: 105px;
    height: 105px;
    margin-bottom: 6px;
  }

  .prm-photo-frame {
    width: 84px;
    height: 84px;
  }

  .prm-timer-badge {
    width: 36px;
    height: 36px;
  }

  .prm-timer-number {
    font-size: 0.8rem;
  }

  .prm-driver-name {
    font-size: 1.15rem;
  }

  .prm-info-block {
    margin-bottom: 10px;
  }

  .prm-btn-accept {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  .prm-btn-reject {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.82rem;
  }

  .prm-actions {
    gap: 10px;
  }
}

/* ===== GLOW AMBIENT EN EL ANILLO (efecto premium) ===== */
@keyframes prm-ring-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.45));
  }
}

.prm-ring-svg {
  animation: prm-ring-glow 3s ease-in-out infinite;
}

/* ===== OVERRIDES: Neutralizar CSS Legacy (profile-review.css + driver-review-modal.css) ===== 
   Estos archivos tienen reglas para #driver-profile-review-modal y .panel-content
   que fuerzan un bottom-sheet con scroll. Necesitamos anular todas esas reglas
   para que nuestro layout flex Zero-Scroll funcione correctamente.
   ============================================================================ */

/* Neutralizar la tarjeta como bottom-sheet anclada abajo */
#driver-profile-review-modal .panel-content.prm-card,
#driver-profile-review-modal .prm-card.panel-content {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  width: 92% !important;
  max-width: 380px !important;
  max-height: 90vh !important;
  height: auto !important;
  transform: none !important;
  border-radius: 28px !important;
  padding-bottom: 20px !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin: auto !important;
  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

/* Eliminar el pseudo-elemento handle (tirador) del bottom-sheet legacy */
#driver-profile-review-modal .panel-content.prm-card::before,
#driver-profile-review-modal .prm-card.panel-content::before {
  display: none !important;
  content: none !important;
}

/* Eliminar scrollbar oculta */
#driver-profile-review-modal .panel-content.prm-card::-webkit-scrollbar,
#driver-profile-review-modal .prm-card.panel-content::-webkit-scrollbar {
  display: none !important;
}

/* Override para .star-icon heredado (profile-review.css lo hace 1.6rem = enorme) */
.prm-rating-pill .star-icon {
  font-size: 0.9rem !important;
  filter: none !important;
}

.prm-rating-pill .rating-value {
  font-size: 0.95rem !important;
  text-shadow: none !important;
}