/* Detalle de viaje con mapa de recorrido */
#screen-ride-detail,#screen-dride-detail{
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.ride-detail-map-wrap{
  position:relative;
  height:42vh;
  min-height:220px;
  flex-shrink:0;
}
.ride-detail-map{
  width:100%;
  height:100%;
  background:#e8eef5;
}
.ride-detail-body{
  flex:1;
  overflow-y:auto;
  padding:1rem 1.1rem 1.5rem;
}
.ride-detail-card{
  background:#fff;
  border-radius:16px;
  padding:1rem 1.1rem;
  margin-bottom:0.75rem;
  box-shadow:0 4px 18px rgba(15,23,42,.06);
}
.ride-detail-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--text,#0f172a);
  margin:0 0 0.35rem;
}
.ride-detail-sub{
  font-size:0.78rem;
  color:var(--text3,#64748b);
  margin:0;
}
.ride-detail-route{
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  margin-top:0.85rem;
}
.ride-detail-stop{
  display:flex;
  gap:0.65rem;
  align-items:flex-start;
}
.ride-detail-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:0.2rem;
  flex-shrink:0;
}
.ride-detail-dot.origin{background:#22c55e}
.ride-detail-dot.dest{background:#ef4444}
.ride-detail-stop-label{
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text3,#94a3b8);
}
.ride-detail-stop-value{
  font-size:0.86rem;
  font-weight:600;
  color:var(--text,#0f172a);
  line-height:1.35;
}
.ride-detail-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.5rem;
  margin-top:0.75rem;
}
.ride-detail-stat{
  background:#f1f5f9;
  border-radius:12px;
  padding:0.65rem 0.5rem;
  text-align:center;
}
.ride-detail-stat-val{
  display:block;
  font-size:0.95rem;
  font-weight:800;
  color:var(--blue2,#1565C0);
}
.ride-detail-stat-lbl{
  font-size:0.65rem;
  color:var(--text3,#64748b);
  margin-top:0.15rem;
}
.ride-detail-legend{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  font-size:0.7rem;
  color:var(--text3,#64748b);
  margin-top:0.5rem;
}
.ride-detail-legend span::before{
  content:'';
  display:inline-block;
  width:14px;
  height:3px;
  border-radius:2px;
  margin-right:4px;
  vertical-align:middle;
}
.ride-detail-legend .lg-trip::before{background:#2563eb}
.ride-detail-legend .lg-pickup::before{background:#f59e0b}
.ride-detail-legend .lg-trail::before{background:#64748b}