*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--marca:#F6C90E;--tinta:#111;--gris:#6b7280;--ok:#10b981;--alerta:#f59e0b;--mal:#dc2626;--fondo:#f4f5f7}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font-family:-apple-system,Roboto,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.4}
.barra{background:var(--marca);display:flex;align-items:center;gap:10px;padding:14px 16px}
.marca{font-weight:900;letter-spacing:1px;font-size:20px}
.chip{margin-left:auto;border:2px solid var(--tinta);border-radius:6px;padding:2px 8px;font-weight:900;letter-spacing:2px;font-size:12px}
main{max-width:560px;margin:0 auto;padding:16px 14px 40px}
h1{font-size:22px;margin:6px 0 4px}
.sub{color:#374151;margin:0 0 14px}
.tarjeta{background:#fff;border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.aviso-tarjeta{display:flex;gap:12px;align-items:center}
.aviso-tarjeta .tx{flex:1;font-size:15px}
.btn{border:0;border-radius:12px;font-weight:900;font-size:16px;padding:13px 16px;cursor:pointer}
.btn-negro{background:var(--tinta);color:#fff}
.btn-marca{background:var(--marca);color:var(--tinta)}
.btn-ancho{display:block;width:100%;margin-top:10px}
.ok-txt{color:#166534;font-weight:800;font-size:14px}
.hijo .nom{font-weight:900;font-size:19px}
.hijo .det{color:var(--gris);font-size:14px}
.estado{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:800;font-size:17px}
.punto{width:12px;height:12px;border-radius:50%;background:#d1d5db;flex:0 0 auto}
.punto.ok{background:var(--ok)}.punto.alerta{background:var(--alerta)}.punto.mal{background:var(--mal)}
.estado.vivo .punto{animation:latido 1.6s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.eta{font-size:30px;font-weight:900;margin-top:4px}
.eta small{font-size:14px;color:var(--gris);font-weight:700}
.mapa{height:300px;border-radius:12px;overflow:hidden;margin-top:10px;background:#e5e7eb}
.nota{font-size:13px;color:var(--gris);margin-top:6px}
.pie{text-align:center;color:var(--gris);font-size:13px;margin-top:22px}
.pie button{background:none;border:0;color:var(--gris);text-decoration:underline;font-size:13px;margin-top:6px}
.van{width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.van svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.casa{font-size:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.cargando{display:flex;justify-content:center;padding:60px}
.girador{width:40px;height:40px;border:5px solid #e5e7eb;border-top-color:var(--tinta);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.error{color:var(--mal);font-weight:700}
.elige{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.elige .op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:2px solid #fff;border-radius:14px;padding:13px 14px;font-size:17px;font-weight:700;color:var(--tinta);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.elige .op.sel{border-color:var(--tinta);background:#fffbea}
.elige .tic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900}
.elige .op.sel .tic{background:var(--marca);border-color:var(--tinta)}
.elige .qn{display:flex;flex-direction:column}
.elige .qn small{color:var(--gris);font-size:13px;font-weight:600}
.btn:disabled{opacity:.45}