:root{--tt-ink:#202A34;--tt-sage:#83A98B;--tt-sage-dark:#648D6F;--tt-line:#DDE7DF;--tt-bg:#F4F7F4}
body{background:linear-gradient(180deg,#FCFDFB,#F4F7F4 60%,#EEF3EF)!important;color:#202A34!important}
.wrap{padding:16px!important}.topbar{padding:4px 0 8px!important}.brand img{width:58px!important;height:58px!important;border-radius:18px!important;box-shadow:0 9px 22px rgba(63,94,70,.13)!important}.brand strong{color:#202A34!important;font-size:22px!important}.brand small,.muted,.meta{color:#737C78!important}
.card{background:#fff!important;border-color:#DDE7DF!important;border-radius:23px!important;box-shadow:0 12px 30px rgba(45,74,53,.07)!important}
.btn.dark,.btn.orange,.btn.green,.tabs .btn.dark{background:linear-gradient(135deg,#789E80,#648D6F)!important;color:#fff!important}
.btn.light,.tabs .btn.light{background:#F7FAF7!important;color:#202A34!important;border:1px solid #DCE6DE!important}.tabs .btn{border-radius:15px!important}
.field{border-color:#D8E2DA!important;background:#FAFCFA!important;color:#202A34!important;border-radius:15px!important}.field:focus{background:#fff!important;border-color:#83A98B!important;box-shadow:0 0 0 4px rgba(131,169,139,.13)!important}
.badge{background:#EAF2EC!important;color:#466251!important}.hero{border-color:#83A98B!important}.gps{color:#5F896C!important}.price{color:#202A34!important}



.roleHeader{display:flex;flex-direction:column;gap:14px;margin:6px 0 22px}
.roleBrand{display:flex;align-items:center;gap:12px}
.roleBrand img{width:62px;height:62px;border-radius:19px;box-shadow:0 10px 26px rgba(63,94,70,.13)}
.roleBrand strong{display:block;font-size:27px;line-height:1;letter-spacing:-.04em;color:#202A34}
.roleBrand strong span{color:#789E80}.roleBrand small{display:block;margin-top:6px;color:#737C78;font-size:12px}
.roleSwitch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.roleTab{min-height:86px;border:1px solid #D8E3DA;border-radius:20px;background:linear-gradient(180deg,#FFF,#F8FBF8);color:#202A34;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-weight:800;box-shadow:0 8px 20px rgba(45,74,53,.05)}
.roleTab.active{background:linear-gradient(135deg,#789E80,#648D6F);border-color:#6F9979;color:#fff;box-shadow:0 12px 24px rgba(100,141,111,.20)}
.roleIcon{width:34px;height:34px;border-radius:11px;background:#ECF4EE;display:grid;place-items:center;font-size:17px}
.roleTab.active .roleIcon{background:rgba(255,255,255,.18)}
.roleTab b{font-size:13px}
.roleTab:active{transform:translateY(1px)}
.roleHeader + main,.roleHeader + section{margin-top:0}
.login{padding:26px!important}
.login h1,#login h1{font-size:42px!important;letter-spacing:-.045em!important;margin-bottom:12px!important}
.login .muted,#login .muted{font-size:16px!important;line-height:1.45!important;margin-bottom:22px!important}
#login label{font-size:13px!important;font-weight:800!important;color:#2D3942!important}
#login .field{height:58px!important;border-radius:17px!important}
#loginBtn{min-height:58px!important;border-radius:17px!important;font-size:16px!important;box-shadow:0 12px 24px rgba(100,141,111,.20)!important}
@media(max-width:600px){
 .roleHeader{gap:12px;margin-bottom:18px}
 .roleBrand img{width:58px;height:58px}
 .roleBrand strong{font-size:24px}
 .roleSwitch{gap:7px}
 .roleTab{min-height:78px;border-radius:18px;gap:5px}
 .roleIcon{width:31px;height:31px;font-size:15px}
 .roleTab b{font-size:12px}
 .login{padding:22px!important}
 .login h1,#login h1{font-size:36px!important}
}

#login{padding:26px!important;margin-top:0!important}
#login::before{content:"ACCESO CHOFER";display:block;color:#789E80;font-size:11px;font-weight:900;letter-spacing:.13em;margin-bottom:8px}
#login h1{margin-top:0!important}


/* v88 biometric/passkey */
.bioDivider{display:flex;align-items:center;gap:12px;margin:14px 0;color:#8A938D;font-size:12px;font-weight:800;text-transform:uppercase}
.bioDivider::before,.bioDivider::after{content:"";height:1px;background:#E1E9E3;flex:1}
.bioDivider span{padding:0 3px}
.bioBtn{min-height:58px!important;border:1px solid #BFD3C4!important;background:linear-gradient(180deg,#F7FBF8,#EEF6F0)!important;color:#35513D!important;border-radius:17px!important;font-size:16px!important;font-weight:850!important;box-shadow:0 10px 24px rgba(86,126,96,.10)!important}
.bioSecondary{border:1px solid #BFD3C4!important;background:#EEF6F0!important;color:#35513D!important}
.bioGlyph{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#DCECDF;color:#557A60;font-size:17px;margin-right:6px}
.bioBtn.isBusy,.bioSecondary.isBusy{opacity:.68;pointer-events:none}
.bioHint{font-size:12px;color:#6E7872;margin-top:8px;line-height:1.35;text-align:center}
@media(max-width:600px){.bioSecondary{width:100%}.dashHead .actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}.dashHead .actions .bioSecondary{grid-column:1/-1}}

.bioHint.firstUse{margin:14px 4px 0;padding:12px 14px;border-radius:14px;background:#F3F7F4;border:1px solid #DDE9E0;color:#647169;text-align:left;font-size:12px;line-height:1.45}


/* v93 owner -> driver transition */
.bridgeLoader{display:none;min-height:420px;align-items:center;justify-content:center;padding:26px 8px}
.ttOwnerBridge .bridgeLoader{display:flex}
.ttOwnerBridge #login,.ttOwnerBridge #app{display:none!important}
.bridgeCard{width:min(100%,520px);background:linear-gradient(180deg,#FFFFFF,#F7FBF8);border:1px solid #D9E5DC;border-radius:28px;padding:34px 28px;text-align:center;box-shadow:0 18px 50px rgba(62,99,71,.10)}
.bridgeLogoWrap{width:84px;height:84px;margin:0 auto 18px;border-radius:24px;background:#EAF3EC;display:grid;place-items:center;box-shadow:0 10px 28px rgba(78,116,87,.12)}
.bridgeLogoWrap img{width:66px;height:66px;border-radius:19px}
.bridgeEyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:#789E80;margin-bottom:8px}
.bridgeCard h2{margin:0;color:#202A34;font-size:28px;letter-spacing:-.035em}
.bridgeCard p{margin:10px 0 24px;color:#737C78;font-size:14px}
.bridgeProgress{height:8px;background:#E6EFE8;border-radius:999px;overflow:hidden}
.bridgeProgress span{display:block;width:42%;height:100%;border-radius:999px;background:linear-gradient(90deg,#789E80,#5F8B6B);animation:bridgeMove 1s ease-in-out infinite}
@keyframes bridgeMove{0%{transform:translateX(-110%)}50%{transform:translateX(120%)}100%{transform:translateX(260%)}}
@media(max-width:600px){.bridgeLoader{min-height:360px}.bridgeCard{padding:30px 22px;border-radius:24px}.bridgeCard h2{font-size:25px}}