:root{font-family:Inter,system-ui,sans-serif;color:#dde8f4;background:#0b1320;color-scheme:dark}*{box-sizing:border-box}body{margin:0}h1{font-size:30px;letter-spacing:-1px;margin:12px 0}h2{font-size:19px}p{line-height:1.5}button,input,select{font:inherit;border-radius:8px;padding:11px 14px}button{background:#44dbc3;color:#08201c;border:0;font-weight:650;cursor:pointer}button:disabled{opacity:.5;cursor:wait}input,select{background:#0b1422;border:1px solid #304159;color:#fff;width:100%;margin:7px 0 14px}label{display:block;font-size:14px;color:#b1c0d3}.card{background:#142033;border:1px solid #27354a;padding:22px;border-radius:14px;margin-bottom:18px}.login{max-width:420px;margin:8vh auto}.login h1{font-size:44px}.login button{width:100%}.brand{font-size:14px;letter-spacing:2px;color:#52dfc7}.brand small{display:block;font-size:10px}header{height:76px;display:flex;align-items:center;gap:24px;padding:0 28px;border-bottom:1px solid #27354a}header #user{margin-left:auto}.layout{display:grid;grid-template-columns:270px 1fr}aside{padding:24px 18px;border-right:1px solid #27354a;min-height:calc(100vh - 76px)}main{padding:28px;min-width:0}.heading{display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:11px;letter-spacing:2px;color:#8194ad}.quiet,nav button{background:#223248;color:#d7e4f3}nav{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}nav button.active{background:#44dbc3;color:#08201c}.vehicle{display:block;width:100%;text-align:left;background:transparent;color:#dde8f4;margin-bottom:8px;border:1px solid #27354a}.vehicle.active{border-color:#44dbc3;background:#183436}.vehicle small{display:block;margin-top:7px;color:#a8b9ce}.filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.filters input,.filters select{margin-bottom:0}.filters label{flex:1;min-width:180px}#map{height:480px;border-radius:14px;z-index:0}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}.metrics h2{font-size:29px;color:#52dfc7}.columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.muted{color:#8da0b8;font-size:13px}#message,#loginError{color:#ffd18a}#message:empty{display:none}.warning{border-left:4px solid #f5bb56}.danger{border-left:4px solid #f37575}#vehicles{max-height:70vh;overflow:auto}@media(max-width:800px){.layout{display:block}aside{min-height:auto;border-right:0;padding:15px}#vehicles{display:flex;gap:8px;overflow:auto;max-height:130px}.vehicle{min-width:190px}main{padding:16px}.heading{align-items:start;gap:10px}h1{font-size:25px}.columns{grid-template-columns:1fr}#map{height:420px}header{padding:0 16px;gap:12px}.login{margin:6vh 16px}}

/* MAPA PRINCIPAL V3 */
header{height:60px;gap:12px}
.layout{height:calc(100dvh - 60px);grid-template-columns:250px minmax(0,1fr)}
aside{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:16px 12px}
aside h2{font-size:17px;margin:0 0 10px}
#vehicles{flex:1;min-height:0;max-height:none;overflow:auto}
.vehicle{font-size:13px;padding:11px}
.vehicle small{font-size:11px;font-weight:400}
main{padding:14px 18px;min-height:0;overflow:auto;display:flex;flex-direction:column}
.heading h1{font-size:23px;margin:5px 0}
.heading button,nav button{font-size:12px;padding:9px 12px}
nav{margin:12px 0;flex-shrink:0}
#mapTab:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:360px}
.map-tools{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;position:relative;z-index:500}
.map-tools>details{flex:1}
.map-tools summary{display:inline-block;cursor:pointer;background:#223248;
color:#dde8f4;border:1px solid #35465c;border-radius:8px;padding:10px 15px;
font-size:13px;list-style:none}
.map-tools summary::-webkit-details-marker{display:none}
.map-tools>button{font-size:12px;padding:11px 14px}
#routeOptions[open] .filters{position:absolute;top:48px;left:0;right:0;
box-shadow:0 16px 35px #0008;display:flex;flex-wrap:wrap;gap:10px}
#routeOptions .filters label{font-size:12px;min-width:150px}
#routeOptions .filters button{font-size:12px}
#map{flex:1;height:auto;min-height:300px}
#mapTab>.muted{font-size:10px;margin:7px 0 0}
body.fleet-collapsed .layout{grid-template-columns:minmax(0,1fr)}
body.fleet-collapsed aside{display:none}
body.map-expanded{overflow:hidden}
body.map-expanded #mapTab{position:fixed;inset:0;background:#0b1320;
z-index:2000;padding:12px;min-height:0}
body.map-expanded #map{min-height:0}
@media(max-width:800px){
header{padding:0 10px}
header .brand{font-size:10px;letter-spacing:1px}
header #user{font-size:11px;max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header button{font-size:10px;padding:8px}
.layout{display:flex;flex-direction:column;height:auto;min-height:calc(100dvh - 60px)}
aside{padding:10px;min-height:0}
#vehicles{display:flex;flex-direction:row;gap:8px;max-height:100px;overflow:auto;flex:auto}
.vehicle{min-width:170px;max-width:210px;flex-shrink:0;margin:0}
main{padding:10px;overflow:visible}
nav{flex-wrap:nowrap;overflow:auto}
nav button{white-space:nowrap;font-size:11px}
.heading h1{font-size:20px}
#mapTab:not([hidden]){min-height:0}
#map{height:62dvh;min-height:340px;flex:auto}
#routeOptions[open] .filters{display:grid;grid-template-columns:1fr 1fr}
#routeOptions .filters label{min-width:0}
#routeOptions input{min-width:0;width:100%;font-size:12px}
body.map-expanded #map{flex:1;height:auto;min-height:0}
}

/* PROPORCAO MAPA V4 */
@media(min-width:1000px){
  header{height:54px}
  .layout{height:calc(100dvh - 54px)}
  main{padding:10px 14px;position:relative}
  .heading{min-height:40px}
  .heading .eyebrow{display:none}
  .heading h1{font-size:20px;margin:0}
  .heading button{padding:8px 12px}
  nav{margin:8px 0;min-height:36px;padding-right:355px}
  nav button{padding:8px 10px;font-size:12px}
  #mapTab:not([hidden]){min-height:0}
  .map-tools{
    position:absolute;top:58px;right:14px;
    width:340px;margin:0;gap:8px;
  }
  .map-tools summary{padding:9px 12px;font-size:12px}
  .map-tools>button{padding:10px 12px;font-size:11px}
  #routeOptions[open] .filters{
    left:auto;right:0;width:min(650px,75vw);
    top:44px;
  }
  #map{min-height:360px;border-radius:14px}
  #mapTab>.muted{font-size:10px;margin-top:5px}
  body.map-expanded .map-tools{
    position:relative;top:auto;right:auto;
    width:auto;margin-bottom:10px;
  }
}