/* Transporte Mickky · app del pasajero (clara, como las apps de viajes) */
body.tr {
  --t-morado: #5236d1; --t-morado-2: #3c22b0; --t-lila: #efeafe; --t-tinta: #1d1a2e; --t-tinta-2: #5d5a72; --t-linea: #e6e3ef; --t-verde: #1fa463; --t-blanco: #fff;
  color-scheme: light; background: #e8e4dc; color: var(--t-tinta); overflow: hidden; height: 100dvh; min-height: 0;
  font-family: var(--texto);
}
body.tr .muted { color: var(--t-tinta-2); }
body.tr .small { font-size: .86rem; }
body.tr .stack-sm { display: grid; gap: 10px; }
#mapa-t { position: fixed; inset: 0; z-index: 0; background: #e8e4dc; }
#mapa-t.sin-mapa { display: grid; place-items: center; color: var(--t-tinta-2); }
#mapa-t .leaflet-control-attribution { font-size: 10px; }
#tr-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#tr-ui > * { pointer-events: auto; }

/* Barra de arriba */
.tr-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 10px; pointer-events: none; }
.tr-top > * { pointer-events: auto; }
.tr-redondo { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--t-tinta); font-size: 1.2rem; box-shadow: 0 3px 12px rgba(29,26,46,.18); cursor: pointer; display: grid; place-items: center; }
.tr-marca { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 14px 6px 6px; box-shadow: 0 3px 12px rgba(29,26,46,.18); font-family: var(--display); font-size: 1rem; }
.tr-marca img { width: 30px; height: 30px; object-fit: contain; }
.tr-marca b { color: var(--t-morado); }
.tr-marca-ini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--t-morado); color: #fff; font-weight: 800; }

/* Hoja de abajo */
.tr-hoja { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 28px rgba(29,26,46,.18);
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 16px); max-height: 74dvh; overflow-y: auto; display: grid; gap: 12px; margin: 0 auto; max-width: 560px; }
.tr-asa { width: 42px; height: 5px; border-radius: 3px; background: #d5d1e2; justify-self: center; margin: 2px 0 2px; }
.tr-hola { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 600; }
.tr-donde { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: #f3f1f8; border-radius: 16px; padding: 16px; font-size: 1.15rem; font-weight: 700; color: var(--t-tinta); text-align: left; cursor: pointer; font-family: var(--display); }
.tr-lupa { color: var(--t-morado); }
.tr-sub { margin: 4px 0 0; font-size: 1rem; color: var(--t-tinta); }
.tr-h2 { font-size: 1.3rem; }
.tr-legal { margin: 0; font-size: .78rem; color: var(--t-tinta-2); text-align: center; }
.tr-recientes, .tr-resultados, .tr-mis { list-style: none; margin: 0; padding: 0; display: grid; }
.tr-recientes button, .tr-resultados button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid var(--t-linea); background: none; padding: 12px 2px; text-align: left; cursor: pointer; color: var(--t-tinta); }
.tr-recientes b, .tr-resultados b { display: block; font-weight: 700; }
.tr-recientes small, .tr-resultados small { color: var(--t-tinta-2); }
.tr-reloj { width: 34px; height: 34px; border-radius: 50%; background: #f3f1f8; display: grid; place-items: center; flex: none; }
.tr-cargando { color: var(--t-tinta-2); padding: 12px 2px; margin: 0; }

/* Servicios en el inicio (tú eliges cómo moverte) */
.tr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tr-tile { border: 0; background: #f7f5fc; border-radius: 16px; padding: 8px 4px 10px; display: grid; justify-items: center; gap: 2px; cursor: pointer; color: var(--t-tinta); }
.tr-tile b { font-size: .78rem; line-height: 1.15; text-align: center; }
.tr-tile small { font-size: .7rem; color: var(--t-tinta-2); }
.tr-tile-ilus { width: 100%; max-width: 92px; display: block; }

/* Lista de servicios con precio */
.tr-ruta { display: grid; gap: 0; background: #f7f5fc; border-radius: 14px; padding: 4px 12px; }
.tr-ruta > button, .tr-ruta > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border: 0; background: none; text-align: left; color: var(--t-tinta); font-weight: 600; cursor: pointer; min-width: 0; }
.tr-ruta > * + * { border-top: 1px solid var(--t-linea); }
.tr-ruta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ruta.fija > div { cursor: default; }
.tr-ruta p { margin: 0; padding: 8px 0; }
.tr-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tr-dot.verde { background: var(--t-verde); box-shadow: 0 0 0 4px rgba(31,164,99,.18); }
.tr-dot.morado { background: var(--t-morado); border-radius: 3px; box-shadow: 0 0 0 4px rgba(82,54,209,.18); }
.tr-info { margin: 0; font-size: .9rem; color: var(--t-tinta-2); text-align: center; }
.tr-cats { display: grid; gap: 2px; }
.tr-cat { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; border: 0; background: none; border-radius: 14px; padding: 8px 12px 8px 4px; text-align: left; cursor: pointer; color: var(--t-tinta); position: relative; }
.tr-cat.activo { background: var(--t-lila); }
.tr-cat.activo::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 3px; background: var(--t-morado); }
.tr-cat-ilus { display: block; width: 96px; }
.tr-cat-txt b { display: block; font-family: var(--display); font-size: 1.08rem; }
.tr-cat-sub { font-size: .86rem; color: var(--t-tinta-2); }
.tr-cat-precio { font-weight: 800; font-size: 1.05rem; text-align: right; display: grid; }
.tr-cat-precio small { font-weight: 600; font-size: .74rem; color: var(--t-morado); }
.tr-pago { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip { border: 1px solid var(--t-linea); border-radius: 999px; padding: 6px 12px; font-size: .86rem; font-weight: 700; background: #fff; }
.tr-chip.apagado { color: #a19db5; }
.tr-nota, .tr-input input, .tr-calificar textarea { font-family: var(--texto); width: 100%; border: 1px solid var(--t-linea); border-radius: 12px; padding: 12px 14px; background: #fbfaff; color: var(--t-tinta); font-size: 1rem; }
.tr-input { display: grid; gap: 4px; }
.tr-input span { font-size: .84rem; font-weight: 700; color: var(--t-tinta-2); }
.tr-boton { width: 100%; border: 0; border-radius: 14px; background: var(--t-morado); color: #fff; font-family: var(--display); font-size: 1.15rem; font-weight: 600; padding: 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(82,54,209,.35); }
.tr-boton:disabled { opacity: .5; cursor: default; box-shadow: none; }
.tr-btn-borde, .tr-btn-blanco, .tr-btn-rojo { display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: 12px; padding: 11px; font-weight: 700; text-decoration: none; cursor: pointer; font-size: .95rem; }
.tr-btn-borde { border: 2px solid var(--t-morado); color: var(--t-morado); background: #fff; }
.tr-btn-blanco { border: 0; background: #fff; color: var(--t-morado); }
.tr-btn-rojo { border: 0; background: #d62839; color: #fff; }
.tr-cancelar { border: 0; background: none; color: #c0263a; font-weight: 700; padding: 8px; cursor: pointer; font-size: .95rem; }
.tr-fila-boton { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 1px solid var(--t-linea); background: #f7f5fc; color: var(--t-morado); border-radius: 12px; padding: 12px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.tr-fila-boton::-webkit-details-marker { display: none; }
.tr-acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-acciones > * { display: grid; justify-items: center; gap: 2px; border: 1px solid var(--t-linea); background: #f7f5fc; color: var(--t-morado); border-radius: 14px; padding: 10px 4px; font-weight: 700; font-size: .8rem; cursor: pointer; text-decoration: none; text-align: center; }
.tr-acciones > * span { font-size: 1.2rem; }
.tr-acciones > .activo { background: var(--t-lila); border-color: var(--t-morado); }

/* Pantalla de búsqueda (completa) */
.tr-buscar { position: absolute; inset: 0; background: #fff; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 12px) 16px 24px; display: grid; align-content: start; gap: 12px; }
.tr-buscar > * { max-width: 560px; width: 100%; margin: 0 auto; }
.tr-buscar-top { display: flex; align-items: center; gap: 12px; }
.tr-buscar-top .tr-redondo { box-shadow: none; background: #f3f1f8; }
.tr-campos { display: grid; gap: 8px; }
.tr-campo { display: flex; align-items: center; gap: 12px; background: #f3f1f8; border-radius: 14px; padding: 4px 14px; border: 2px solid transparent; }
.tr-campo.activo { border-color: var(--t-morado); background: #fff; }
.tr-campo input { flex: 1; border: 0; background: none; padding: 12px 0; font-size: 1.05rem; color: var(--t-tinta); outline: none; min-width: 0; }
.tr-atajos { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-atajo { border: 1px solid var(--t-linea); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; color: var(--t-tinta); }
.tr-menu { display: grid; gap: 12px; }
.tr-mis li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t-linea); }
.tr-mis li > div { display: grid; min-width: 0; }
.tr-mis small { color: var(--t-tinta-2); }

/* Pines del mapa */
.tr-ico { background: none !important; border: 0 !important; }
.tr-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; }
.tr-pin-punto { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--t-verde); box-shadow: 0 2px 6px rgba(0,0,0,.3); flex: none; }
.tr-pin.destino .tr-pin-punto { border-color: var(--t-morado); border-radius: 5px; }
.tr-pin-txt { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--t-morado); color: #fff; font-family: var(--display); font-weight: 600; font-size: .9rem; padding: 6px 12px; border-radius: 10px; white-space: nowrap; box-shadow: 0 3px 10px rgba(82,54,209,.35); }
.tr-pin.origen .tr-pin-txt { background: var(--t-tinta); }
.tr-yo { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; background: #3d8bfd; border: 3px solid #fff; box-shadow: 0 0 0 10px rgba(61,139,253,.22), 0 2px 6px rgba(0,0,0,.3); }
.tr-auto { position: absolute; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tr-ico svg, .tr-auto svg { max-width: none; }
.tr-radar { position: absolute; width: 160px; height: 160px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(82,54,209,.18); animation: tr-radar 1.8s ease-out infinite; }
@keyframes tr-radar { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.tr-pin-centro { position: absolute; left: 50%; top: 50%; pointer-events: none !important; }
.tr-pin-centro .tr-pin { transform: translate(-50%, -100%); }
.tr-pin-centro .tr-pin-punto { width: 26px; height: 26px; border-width: 7px; }
.tr-pin-centro .tr-pin::after { content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: 14px; background: var(--t-tinta); transform: translateX(-50%); border-radius: 2px; }
.tr-centro-dir { font-size: 1.05rem; }

/* Viaje en curso */
.tr-buscando { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 6px 0; }
.tr-buscando b { font-family: var(--display); font-size: 1.25rem; }
.tr-buscando-auto { width: 150px; display: block; animation: tr-anda 1.2s ease-in-out infinite alternate; }
@keyframes tr-anda { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
.tr-conductor { background: var(--t-morado); color: #fff; border-radius: 18px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 8px 20px rgba(82,54,209,.3); }
.tr-cond-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tr-cond-top b { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.tr-cond-foto { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; flex: none; }
.tr-cond-foto.sin { display: grid; place-items: center; background: #fff; color: var(--t-morado); font-weight: 800; font-size: 1.3rem; }
.tr-cond-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.22); font-size: .95rem; }
.tr-cond-datos dt { opacity: .78; }
.tr-cond-datos dd { margin: 0; text-align: right; font-weight: 700; }
.tr-cond-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-conductor .tr-btn-borde { border-color: #fff; color: #fff; background: transparent; }
.tr-pin-viaje { display: flex; justify-content: space-between; align-items: center; background: #f3f1f8; border-radius: 14px; padding: 10px 14px; font-weight: 700; color: var(--t-morado); }
.tr-pin-cajas { display: flex; gap: 6px; }
.tr-pin-cajas b { width: 34px; height: 40px; border-radius: 8px; background: var(--t-morado); color: #fff; display: grid; place-items: center; font-size: 1.3rem; font-family: var(--display); }
.tr-aviso-llego { margin: 0; background: #e9f9f0; color: #11683e; border-radius: 12px; padding: 10px 12px; font-weight: 700; text-align: center; }
.tr-fin { display: grid; justify-items: center; text-align: center; gap: 4px; }
.tr-fin p { margin: 0; }
.tr-fin-ico { font-size: 2.4rem; }
.tr-total { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--t-morado); }
.tr-calificar { display: grid; gap: 10px; justify-items: center; text-align: center; }
.tr-estrellas { display: flex; gap: 6px; }
.tr-estrellas button { border: 0; background: none; font-size: 2.2rem; color: #d5d1e2; cursor: pointer; padding: 0 2px; line-height: 1; }
.tr-estrellas button.on { color: #f6b93b; }

/* Avisos (toast) sobre el mapa */
body.tr .toast { z-index: 2000; }
@media (min-width: 900px) {
  .tr-hoja { left: 24px; right: auto; bottom: 24px; width: 420px; border-radius: 24px; max-height: calc(100dvh - 120px); }
}

/* Foto del auto Mickky X */
.auto-img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(29,26,46,.22)); }