/* App del cliente */
.hoja.media { max-height: 52%; }
.mira { /* punto de recogida: fijo en el centro del mapa visible */
  position: absolute; left: 50%; top: calc((100% - var(--hoja-h, 40%)) / 2); z-index: 4; pointer-events: none;
  transform: translate(-50%, -100%); display: grid; justify-items: center;
}
.mira b { background: var(--negro); color: #fff; font-size: 13px; padding: 7px 12px; border-radius: 10px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.mira i { width: 3px; height: 20px; background: var(--negro); }
.mira::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--negro); box-shadow: 0 0 0 5px rgba(0,0,0,.14); }
.centrar { position: absolute; right: 14px; bottom: calc(var(--hoja-h, 40%) + 14px); z-index: 5; }
.saludo { background: var(--blanco); border-radius: 99px; padding: 10px 16px; font-weight: 650; box-shadow: 0 2px 10px rgba(0,0,0,.16); }

.eta { display: flex; align-items: baseline; gap: 8px; }
.eta b { font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 16px 0 6px; }
.pasos i { height: 5px; border-radius: 9px; background: var(--gris-2); overflow: hidden; position: relative; }
.pasos i.hecho { background: var(--negro); }
.pasos i.ahora::after { content: ""; position: absolute; inset: 0; background: var(--negro); transform-origin: left; animation: avanza 1.8s ease-in-out infinite; }
@keyframes avanza { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); opacity: 0; } }
.pasos-n { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; font-size: 11.500px; color: var(--gris-t); font-weight: 600; }
.pasos-n span.on { color: var(--negro); }

.codigo { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--negro); color: #fff; border-radius: var(--r); padding: 14px 18px; }
.codigo b { font-size: 34px; letter-spacing: .22em; font-variant-numeric: tabular-nums; margin-right: -.22em; }
.codigo span { font-size: 13.500px; color: #c4c4cb; max-width: 170px; }

.equipo-c { display: flex; align-items: center; gap: 12px; }
.equipo-c .caras { display: flex; }
.equipo-c .caras .avatar + .avatar { margin-left: -14px; box-shadow: 0 0 0 3px #fff; }

/* Animación del lavado */
.lavado { height: 128px; border-radius: var(--r); background: linear-gradient(#e8f0ff, #f4f8ff); position: relative; overflow: hidden; display: grid; place-items: center; }
.lavado svg.c { width: 150px; height: 74px; position: relative; z-index: 2; animation: mece 2.4s ease-in-out infinite; }
.lavado .b { position: absolute; bottom: -20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.500px rgba(20,99,255,.35); animation: burbuja linear infinite; z-index: 3; }
.lavado .agua { position: absolute; top: -10px; width: 2.500px; height: 26px; border-radius: 4px; background: rgba(20,99,255,.45); animation: llueve linear infinite; z-index: 1; }
.lavado.quieto * { animation-play-state: paused !important; }
.lavado.quieto .agua, .lavado.quieto .b { display: none; }
@keyframes mece { 50% { transform: translateY(-3px) rotate(-.6deg); } }
@keyframes burbuja { to { transform: translateY(-170px) scale(1.3); opacity: 0; } }
@keyframes llueve { to { transform: translateY(160px); opacity: .1; } }

.busca { display: grid; place-items: center; height: 96px; position: relative; }
.busca i { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--negro); }
.busca i + i { background: none; box-shadow: inset 0 0 0 2px var(--negro); animation: onda 1.800s ease-out infinite; }
.busca i:nth-child(3) { animation-delay: .9s; }
@keyframes onda { to { transform: scale(4.500); opacity: 0; } }

.propinas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.propinas .ficha { text-align: center; padding: 11px 4px; border-radius: 12px; }
.perfil { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.saldos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.saldos .caja b { display: block; font-size: 24px; letter-spacing: -.02em; }
.interruptor { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r); background: var(--gris-1); width: 100%; text-align: left; }
.interruptor i { width: 46px; height: 28px; border-radius: 99px; background: var(--gris-3); position: relative; flex: none; transition: background .15s; }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor.on i { background: var(--negro); }
.interruptor.on i::after { transform: translateX(18px); }