/* Subiendo Trips — historial de viajes (pasajero). Reutiliza bloques de wallet-pro.css. */

.tp-header{padding:52px 1.25rem .75rem calc(12px + 44px + .75rem)}
.tp-header .history-header-title{margin:0;line-height:44px}
.tp-page{
  touch-action:pan-y;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
}
.tp-page > *{flex-shrink:0}

/* ---------- Hero con estadísticas ---------- */
.tp-hero{min-height:0}
.tp-hero-route{width:56px;height:22px;color:#67e8f9;opacity:.9}
.tp-stats{
  margin-top:.95rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
}
.tp-stat{
  padding:.55rem .6rem;border-radius:14px;min-width:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tp-stat small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.04em;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-stat b{
  display:block;margin-top:.15rem;font-family:'DM Mono',ui-monospace,monospace;font-size:.92rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}

/* ---------- Filtros ---------- */
.tp-toolbar{display:flex;align-items:center;gap:.5rem}
.tp-seg{flex:1;min-width:0}
.tp-seg button{flex:1;justify-content:center;padding:.5rem .4rem;font-size:.74rem}
.tp-reservas-btn{
  display:flex;align-items:center;gap:.35rem;flex-shrink:0;
  padding:.55rem .75rem;border-radius:12px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;
  color:var(--blue,#2563eb);background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.tp-reservas-btn svg{width:16px;height:16px}
.tp-reservas-btn:active{transform:scale(.97)}

/* ---------- Lista ---------- */
.tp-list{display:flex;flex-direction:column;gap:.6rem}
.tp-month{
  margin:.35rem .15rem 0;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text3,#64748b);
}
.tp-trip{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:.85rem .9rem;border-radius:18px;cursor:pointer;text-align:left;
  background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);
  box-shadow:0 6px 18px rgba(15,23,42,.05);
  transition:transform .15s,box-shadow .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.tp-trip:active{transform:scale(.985);border-color:rgba(37,99,235,.35)}
.tp-trip::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#22d3ee,#2563eb);
}
.tp-trip.is-cancel::before{background:linear-gradient(180deg,#f87171,#dc2626)}
.tp-trip.is-live::before{background:linear-gradient(180deg,#fbbf24,#f59e0b)}

.tp-trip-head{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:.7rem}
.tp-trip-ico{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,#06b6d4,#2563eb);
  box-shadow:0 6px 14px rgba(37,99,235,.25);
}
.tp-trip-ico svg{width:20px;height:20px}
.tp-trip-ico.s-moto{background:linear-gradient(135deg,#8b5cf6,#4f46e5);box-shadow:0 6px 14px rgba(79,70,229,.25)}
.tp-trip-ico.s-fletes{background:linear-gradient(135deg,#f59e0b,#ea580c);box-shadow:0 6px 14px rgba(234,88,12,.25)}
.tp-trip-ico.s-delivery{background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 6px 14px rgba(190,24,93,.25)}
.tp-trip-ico.s-bici{background:linear-gradient(135deg,#10b981,#047857);box-shadow:0 6px 14px rgba(4,120,87,.25)}
.tp-trip.is-cancel .tp-trip-ico{filter:grayscale(.65);opacity:.75}

.tp-trip-title{display:flex;align-items:center;gap:.45rem;min-width:0}
.tp-trip-title b{font-size:.9rem;font-weight:800;color:var(--text,#0f172a)}
.wx-pill.live{background:rgba(245,158,11,.18);color:#b45309}

.tp-trip-price{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:'DM Mono',ui-monospace,monospace;font-size:.95rem;font-weight:500;
  color:var(--text,#0f172a);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.tp-trip-price small{font-family:inherit;font-size:.58rem;color:var(--text3,#64748b);letter-spacing:.04em}
.tp-trip-price.is-void{color:var(--text3,#94a3b8);text-decoration:line-through}

.tp-route{
  position:relative;display:flex;flex-direction:column;gap:.4rem;
  padding:.55rem .7rem;border-radius:12px;background:var(--surface,#f8fafc);
}
.tp-route::before{
  content:"";position:absolute;left:calc(.7rem + 4px);top:1.05rem;bottom:1.05rem;width:0;
  border-left:1.5px dashed var(--border2,#cbd5e1);
}
.tp-route-row{display:flex;align-items:center;gap:.6rem;min-width:0;font-size:.78rem;color:var(--text2,#475569)}
.tp-route-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-route-row:last-child span{color:var(--text,#0f172a);font-weight:700}
.tp-dot{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.tp-dot.from{background:var(--surface,#f8fafc);border:2.5px solid #22d3ee}
.tp-dot.to{background:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.18)}

.tp-trip-meta{display:flex;flex-wrap:wrap;gap:.3rem .5rem;font-size:.68rem;color:var(--text3,#64748b)}
.tp-trip-meta span{white-space:nowrap}
.tp-trip-meta span + span::before{content:"·";margin-right:.5rem;opacity:.7}
.tp-trip-driver{
  display:flex;align-items:center;gap:.45rem;padding-top:.55rem;
  border-top:1px dashed var(--border,#e2e8f0);font-size:.72rem;color:var(--text2,#475569);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-trip-driver b{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.06em}
.tp-avatar{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#0a2a6b,#2563eb);
}

.tp-empty{background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:18px}

/* ---------- Carga ---------- */
.tp-skel{
  height:132px;border-radius:18px;
  background:linear-gradient(100deg,var(--surface,#eef2f7) 30%,var(--white,#fff) 50%,var(--surface,#eef2f7) 70%);
  background-size:300% 100%;animation:tp-skel 1.2s linear infinite;
  border:1px solid var(--border,#e2e8f0);
}
@keyframes tp-skel{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Modo oscuro ---------- */
html[data-theme="dark"] .tp-trip,
html[data-theme="dark"] .tp-empty,
html[data-theme="dark"] .tp-reservas-btn{background:var(--card);border-color:var(--border);box-shadow:none}
html[data-theme="dark"] .tp-route,
html[data-theme="dark"] .tp-dot.from{background:var(--surface)}
html[data-theme="dark"] .tp-reservas-btn{color:#60a5fa !important}
html[data-theme="dark"] .wx-pill.live{color:#fbbf24}
html[data-theme="dark"] .wx-pill.failed{color:#f87171}
html[data-theme="dark"] .tp-skel{
  background:linear-gradient(100deg,var(--surface) 30%,var(--card) 50%,var(--surface) 70%);
  background-size:300% 100%;border-color:var(--border);
}

@media (prefers-reduced-motion:reduce){
  .tp-skel{animation:none}
}