:root { --navy:#0b1f33; --blue:#146ef5; --ink:#172534; --muted:#6b7a89; --line:#dfe6ed; --panel:#fff; --bg:#f2f5f8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Inter,Segoe UI,Arial,sans-serif; background:var(--bg); }
.eyebrow { margin:0 0 6px; font-size:.72rem; font-weight:800; letter-spacing:.16em; color:#7290aa; }
.login-body { min-height:100vh; background:linear-gradient(125deg,#081827 0 48%,#eef3f7 48%); }
.login-shell { min-height:100vh; width:min(1120px,92%); margin:auto; display:grid; grid-template-columns:1.2fr .8fr; gap:8vw; align-items:center; }
.login-brand { color:white; max-width:520px; }
.brand-mark { display:grid; place-items:center; width:62px; height:62px; margin-bottom:28px; border-radius:18px; background:var(--blue); font-size:2rem; font-weight:900; }
.login-brand h1 { font-size:clamp(2.5rem,5vw,4.6rem); font-weight:800; letter-spacing:-.05em; }
.login-brand>p:last-child { color:#b9c8d6; font-size:1.1rem; max-width:440px; }
.login-card { padding:42px; border-radius:22px; background:#fff; box-shadow:0 24px 70px #00152d33; }
.login-card h2 { font-size:2rem; font-weight:800; }
.login-card .form-control { border-color:#cfd8e1; padding:.75rem 1rem; }
.login-card .btn-primary { background:var(--blue); border-color:var(--blue); }
.login-help { margin:24px 0 0; text-align:center; color:var(--muted); font-size:.88rem; }
.portal-header { min-height:70px; padding:12px clamp(18px,3vw,44px); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; background:var(--navy); }
.portal-logo { color:white; text-decoration:none; font-weight:800; letter-spacing:.02em; }
.portal-logo>span { display:inline-grid; place-items:center; width:34px; height:34px; margin-right:8px; border-radius:9px; background:var(--blue); }
.portal-logo small { font-weight:400; color:#9fb0c1; }
.portal-user { display:flex; align-items:center; gap:18px; text-align:right; }
.portal-user strong,.portal-user small { display:block; }
.portal-user small { color:#9fb0c1; font-size:.75rem; }
.portal-main { padding:28px clamp(16px,3vw,44px) 40px; }
.portal-title { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
.portal-title h1 { margin:0; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; }
.update-pill { padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--muted); font-size:.8rem; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.summary-grid article { display:flex; align-items:center; gap:13px; padding:15px 18px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.summary-grid strong,.summary-grid small { display:block; }
.summary-grid strong { font-size:1.45rem; line-height:1; }.summary-grid small { margin-top:5px; color:var(--muted); }
.summary-dot,.status-dot { border-radius:50%; flex:none; }.summary-dot { width:12px;height:12px;box-shadow:0 0 0 5px #eef3f8; }
.dot-blue{background:#3888ff}.dot-green,.status-moving{background:#23a96e}.dot-amber,.status-stopped{background:#f0a525}.dot-red,.status-offline{background:#e55252}
.monitor-shell { display:grid; grid-template-columns:330px 1fr; min-height:600px; height:calc(100vh - 265px); border:1px solid var(--line); border-radius:15px; overflow:hidden; background:white; box-shadow:0 8px 30px #17324d12; }
.vehicle-panel { min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); }.vehicle-search{padding:14px;border-bottom:1px solid var(--line)}
.vehicle-list{overflow:auto}.vehicle-item{width:100%;display:flex;gap:12px;padding:16px;border:0;border-bottom:1px solid #edf1f4;background:#fff;text-align:left}.vehicle-item:hover{background:#f6f9fc}.status-dot{width:10px;height:10px;margin-top:6px}.vehicle-copy{min-width:0;display:block;flex:1}.vehicle-copy strong,.vehicle-copy small,.vehicle-copy span,.vehicle-copy time{display:block}.vehicle-copy strong{font-size:1rem}.vehicle-copy small,.vehicle-copy time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.vehicle-copy span{margin-top:9px;font-size:.82rem}.vehicle-copy time{margin-top:4px;font-size:.75rem}.empty-state{padding:44px 20px;text-align:center;color:var(--muted)}
#mapa{width:100%;height:100%;min-height:500px}.map-popup{min-width:190px}.map-popup strong,.map-popup span,.map-popup small{display:block}.map-popup strong{font-size:1.05rem}.map-popup>span:first-of-type{color:var(--muted)}.map-popup hr{margin:9px 0}.map-popup small{margin-top:8px;color:var(--muted)}
@media(max-width:800px){.login-body{background:var(--navy)}.login-shell{grid-template-columns:1fr;padding:30px 0}.login-brand{display:none}.login-card{padding:30px 22px}.summary-grid{grid-template-columns:1fr 1fr}.monitor-shell{grid-template-columns:1fr;height:auto}.vehicle-panel{max-height:330px;border-right:0;border-bottom:1px solid var(--line)}#mapa{height:55vh}.portal-user>div{display:none}}
@media(max-width:480px){.summary-grid{gap:8px}.summary-grid article{padding:12px}.portal-logo small{display:none}.portal-title{align-items:start;flex-direction:column}.monitor-shell{height:auto}}