*{box-sizing:border-box} :root{--yellow:#ffd21f;--black:#111318;--muted:#727782;--bg:#f3f4f6;--green:#16a36a;--red:#ee4e4e;--line:#e5e7eb}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#e9ebef;color:var(--black)}
button,input{font:inherit}.app-shell{width:min(100%,520px);min-height:100vh;margin:auto;background:#f8f9fb;box-shadow:0 0 45px #00000015}
.topbar{height:74px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;gap:10px;align-items:center}.brand-mark{width:42px;height:42px;border-radius:13px;background:var(--yellow);display:grid;place-items:center;font-size:25px;font-weight:900}
.brand strong,.brand small{display:block}.brand strong{font-size:18px}.brand small{font-size:11px;color:var(--muted)}
.icon-btn,.back{border:0;background:#f2f3f5;width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:20px}
main{padding:0 16px 32px}.screen{display:none}.screen.active{display:block}.hero{padding:40px 4px 25px}.pill{font-size:11px;font-weight:800;background:#fff1ae;padding:7px 10px;border-radius:999px}
.hero h1{font-size:40px;line-height:1.03;margin:16px 0 12px;letter-spacing:-1.6px}.hero p{color:var(--muted);line-height:1.5}
.role-grid{display:grid;gap:12px}.role-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:18px;padding:17px;display:grid;grid-template-columns:48px 1fr 20px;align-items:center;text-align:left;cursor:pointer;box-shadow:0 6px 18px #00000008}.role-card:hover{transform:translateY(-1px)}.role-icon{width:44px;height:44px;background:#f5f5f5;border-radius:13px;display:grid;place-items:center;font-size:22px}.role-card strong,.role-card small{display:block}.role-card small{margin-top:4px;color:var(--muted)}
.screen-head{display:flex;gap:12px;align-items:center;padding:18px 0}.screen-head h2{margin:0;font-size:20px}.screen-head small{color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 5px 16px #00000006}
label{font-size:12px;font-weight:700;display:block;margin:12px 0 7px;color:#50545c}.field{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:0 12px;border-radius:13px;background:#fbfbfc}.field input{border:0;outline:0;background:transparent;width:100%;padding:13px 0;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}.green{background:var(--green)}.red{background:var(--red)}
.trip-meta{display:flex;gap:18px;color:var(--muted);font-size:12px;margin:12px 0}.price-input{display:flex;align-items:center;border:2px solid var(--black);border-radius:14px;padding:0 15px}.price-input span{font-size:24px;font-weight:800}.price-input input{width:100%;border:0;outline:0;padding:12px 6px;font-size:26px;font-weight:800;background:transparent}.price-input.small input{font-size:20px}.suggestions,.payment-row{display:flex;gap:8px;margin-top:9px}.suggestions button,.choice{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer;font-weight:700;font-size:12px}.suggestions button.selected,.choice.selected{background:#fff7cf;border-color:#e5bd13}
.primary,.secondary{border:0;border-radius:14px;padding:14px 16px;font-weight:800;cursor:pointer}.primary{background:var(--yellow);color:#171717;width:100%;margin-top:15px}.secondary{background:#eef0f3;color:#24262b}.two-btn{display:grid;grid-template-columns:1fr 1.4fr;gap:9px}.two-btn .primary{margin-top:0}
.map-card{height:190px;border-radius:20px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}.map-card.tall{height:285px}.mock-map{height:100%;position:relative;background:linear-gradient(30deg,#eef0e7 12%,#e3e6dc 12%,#e3e6dc 25%,#f6f5ee 25%,#f6f5ee 58%,#e6e8df 58%);overflow:hidden}.road{position:absolute;background:#fff;border:1px solid #ddd}.r1{height:28px;width:130%;transform:rotate(18deg);left:-20%;top:55%}.r2{height:24px;width:100%;transform:rotate(-28deg);left:16%;top:25%}.r3{height:20px;width:90%;transform:rotate(75deg);left:18%;top:30%}.pin{position:absolute;width:18px;height:18px;border:5px solid white;border-radius:50%;box-shadow:0 2px 8px #0004;font-size:0}.pin.origin{background:var(--green);left:23%;top:60%}.pin.dest{background:var(--red);right:20%;top:23%}.car{position:absolute;font-size:22px;filter:drop-shadow(0 2px 2px #0003)}.c1{left:52%;top:45%}.c2{right:12%;bottom:16%}.c3{left:13%;top:20%}.moving{left:48%;top:48%;animation:drive 3s ease-in-out infinite alternate}@keyframes drive{to{transform:translate(35px,-25px)}}.map-label{position:absolute;left:12px;bottom:11px;background:#ffffffec;padding:8px 10px;border-radius:10px;font-size:11px;font-weight:700}
.search-visual{text-align:center;padding:42px 10px 28px}.radar{width:118px;height:118px;border-radius:50%;background:#fff4b6;margin:auto;display:grid;place-items:center;position:relative}.radar span{font-size:30px;z-index:2}.pulse{position:absolute;width:100%;height:100%;border:2px solid var(--yellow);border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.75);opacity:1}100%{transform:scale(1.55);opacity:0}}.search-visual h3{margin-bottom:5px}.search-visual p{color:var(--muted)}.hidden{display:none!important}
.driver-profile{display:flex;align-items:center;gap:11px}.avatar{width:46px;height:46px;border-radius:50%;background:#222;color:white;display:grid;place-items:center;font-weight:800}.avatar.sm{width:36px;height:36px;font-size:12px}.driver-profile div:nth-child(2){flex:1}.driver-profile strong,.driver-profile small{display:block}.driver-profile small{color:var(--muted);margin-top:4px;font-size:11px}.badge{font-size:10px;background:#e6f8ef;color:#087a4a;padding:6px 8px;border-radius:999px;font-weight:800}.badge.warning{background:#fff2c2;color:#825f00}.vehicle{color:var(--muted);font-size:12px;margin:12px 0}.offer-price,.fare-total{display:flex;align-items:end;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);margin-top:10px}.offer-price span,.fare-total span{color:var(--muted);font-size:12px}.offer-price strong,.fare-total strong{font-size:27px}.round{width:38px;height:38px;border-radius:50%;border:0;background:#f0f1f3}.status-line{background:#f7f8fa;border-radius:12px;padding:12px;font-size:12px}.status-line span{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;margin-right:4px}
.route-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.route-row span{color:var(--muted)}.route-row b{text-align:right}.success-wrap{text-align:center;padding:55px 8px}.success-icon{width:74px;height:74px;border-radius:50%;background:#dff7eb;color:var(--green);display:grid;place-items:center;margin:auto;font-size:34px;font-weight:900}.success-wrap h2{margin-bottom:6px}.success-wrap>p{color:var(--muted)}.receipt{background:#fff;border:1px solid var(--line);border-radius:18px;margin:25px 0;padding:15px}.receipt div{display:flex;justify-content:space-between;padding:8px}.receipt strong{font-size:24px}.rate-label{font-weight:700}.stars{display:flex;justify-content:center;gap:4px;margin:10px 0 20px}.stars button{border:0;background:transparent;color:#d0d2d6;font-size:32px;cursor:pointer}.stars button.on{color:#f6c80e}
.driver-status{display:flex;justify-content:space-between;align-items:center}.driver-status strong,.driver-status small{display:block}.driver-status small{color:var(--muted);margin-top:4px}.switch input{display:none}.switch span{display:block;width:48px;height:28px;border-radius:999px;background:#ccc;position:relative}.switch span:after{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:after{left:23px}.earnings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.earnings div{background:#191b20;color:#fff;border-radius:15px;padding:13px}.earnings small,.earnings strong{display:block}.earnings small{color:#aaa;font-size:10px}.earnings strong{font-size:16px;margin-top:5px}.new-tag{display:inline-block;background:#fff2b0;padding:6px 8px;border-radius:8px;font-size:9px;font-weight:900}.route-mini>div{display:flex;gap:10px;align-items:center}.route-mini p{font-size:12px;font-weight:600}.route-mini small{display:block;color:var(--muted);font-weight:500;margin-bottom:2px}.demo-note{text-align:center;font-size:11px;color:var(--green);min-height:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.kpi{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px}.kpi span,.kpi strong,.kpi small{display:block}.kpi span{font-size:11px;color:var(--muted)}.kpi strong{font-size:24px;margin:6px 0}.kpi small{font-size:10px;color:var(--green)}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted)}.status{padding:5px 7px;border-radius:999px;font-weight:700}.status.active{background:#fff2b0}.status.done{background:#e6f8ef;color:#087a4a}.status.wait{background:#eef0f3}.driver-list>div{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.driver-list p{flex:1;margin:0}.driver-list b,.driver-list small{display:block}.driver-list small{color:var(--muted);margin-top:3px}.online-dot{width:9px;height:9px;background:var(--green);border-radius:50%}.link-btn{border:0;background:transparent;font-size:11px;font-weight:700}.admin-screen{padding-bottom:20px}
@media(min-width:700px){body{padding:24px 0}.app-shell{min-height:calc(100vh - 48px);border-radius:24px;overflow:hidden}.topbar{position:relative}}


/* ==========================================================
   RAPI-TAXI - CONTACTO PASAJERO
   ========================================================== */

.passenger-contact{
    margin:16px 0;
    padding:14px;
    background:#f7f8fa;
    border-radius:16px;
    border:1px solid #e5e7eb;
}

.contact-title{
    text-align:center;
    font-size:12px;
    font-weight:700;
    margin-bottom:11px;
    color:#50545c;
}

.contact-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.contact-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:13px 8px;
    border-radius:13px;
    background:#ffffff;
    border:1px solid #dedfe2;
    text-decoration:none;
    color:#111318;
    font-size:13px;
    font-weight:800;
}

.contact-btn:active{
    transform:scale(.98);
}

.contact-btn.whatsapp{
    background:#e9f8ef;
    border-color:#bce7ca;
}

.passenger-phone-display{
    display:block;
    text-align:center;
    color:#727782;
    margin-top:10px;
    font-size:11px;
}