:root{--blue:#246de8;--blue-dark:#123e88;--green:#18b973;--red:#ef5b6c;--orange:#f59e0b;--purple:#7c5ce6;--text:#0b1730;--muted:#66758b;--line:#e7edf5;--bg:#f4f7fb;--card:#fff;--radius:16px;--shadow:0 12px 30px rgba(26,52,86,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.layout{min-height:100vh;display:flex}.sidebar{width:238px;background:#0c2451;color:#fff;position:fixed;inset:0 auto 0 0;padding:24px 16px;display:flex;flex-direction:column;z-index:50}.brand,.login-brand{display:flex;align-items:center;gap:12px}.brand{padding:0 8px 24px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#3187ff,#19c9a0);display:grid;place-items:center;font-weight:900;font-size:22px;color:#fff;box-shadow:0 10px 20px rgba(36,109,232,.25)}.brand strong,.login-brand strong{display:block;font-size:17px;letter-spacing:.06em}.brand span,.login-brand span{font-size:11px;opacity:.72}.menu-label{font-size:11px;font-weight:800;letter-spacing:.14em;opacity:.48;margin:24px 10px 10px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:11px 12px;border-radius:10px;color:#c9d6eb;font-size:12px;font-weight:700;display:flex;gap:11px;align-items:center}.sidebar nav a span{width:20px;text-align:center}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,rgba(49,135,255,.25),rgba(49,135,255,.08));color:#fff}.sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:18px 8px 0;display:flex;justify-content:space-between;align-items:center;font-size:11px}.sidebar-user a{color:#8fc0ff}.main{margin-left:238px;width:calc(100% - 238px);padding:26px 30px 42px}.page-header{display:flex;align-items:center;gap:14px;margin-bottom:22px}.page-header>div:nth-child(2){flex:1}.page-header h1{margin:0;font-size:30px}.page-header p{margin:6px 0 0;color:var(--muted);font-size:13px}.menu-button{display:none;border:0;background:#fff;border-radius:10px;padding:10px;box-shadow:var(--shadow)}.header-status{text-align:right}.status-pill{display:inline-flex;gap:7px;align-items:center;padding:7px 11px;background:#eafbf4;color:#128258;border-radius:999px;font-size:11px;font-weight:800}.status-pill i,.device-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.header-status small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.hero{background:linear-gradient(120deg,#2068dd,#163f8d);border-radius:20px;padding:26px 30px;color:#fff;display:flex;justify-content:space-between;gap:30px;box-shadow:0 18px 38px rgba(25,74,154,.2)}.hero>div:first-child{max-width:690px}.eyebrow,.panel-title span{font-size:11px;font-weight:900;letter-spacing:.12em}.hero h2{font-size:28px;margin:8px 0}.hero p{font-size:13px;line-height:1.6;opacity:.85}.hero-actions{display:flex;gap:10px;margin-top:18px}.btn{border:0;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:800;cursor:pointer;display:inline-block}.btn.light{background:#fff;color:#174c9d}.btn.green{background:#18b973;color:#fff}.btn.primary{background:var(--blue);color:#fff}.health-card{width:210px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px;align-self:stretch}.health-card span{font-size:11px}.health-card strong{display:block;font-size:42px;margin:7px 0}.health-card small{font-size:11px;opacity:.8}.progress{height:7px;background:rgba(255,255,255,.17);border-radius:20px;margin-top:16px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:#41dfa3;border-radius:20px;transition:.5s}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.kpi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;align-items:center;gap:14px;border:1px solid #edf1f7}.kpi-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900}.kpi.blue .kpi-icon{background:#e9f1ff;color:var(--blue)}.kpi.red .kpi-icon{background:#fff0f2;color:var(--red)}.kpi.green .kpi-icon{background:#e9fbf4;color:var(--green)}.kpi.orange .kpi-icon{background:#fff6e5;color:var(--orange)}.kpi span{font-size:11px;font-weight:900;letter-spacing:.04em;color:var(--muted)}.kpi strong{display:block;font-size:27px;margin:4px 0}.kpi small{font-size:11px;color:#7b899b}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px}.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #edf1f7;padding:18px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.panel-title span{color:#748399}.panel-title h2{font-size:18px;margin:5px 0 0}.panel-title a{font-size:11px;color:var(--blue);font-weight:800}.map-box{height:340px;border-radius:12px;overflow:hidden;background:#e8eef7}.alert-list{display:grid;gap:9px}.alert-item{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px}.alert-symbol{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-weight:900}.alert-item.critico .alert-symbol{background:#fff0f2;color:var(--red)}.alert-item.atencao .alert-symbol{background:#fff6e5;color:var(--orange)}.alert-item.info .alert-symbol{background:#e9f1ff;color:var(--blue)}.alert-item>div:nth-child(2){flex:1}.alert-item strong{display:block;font-size:12px}.alert-item span{font-size:11px;color:var(--muted)}.alert-item button{border:0;background:transparent;color:var(--blue);font-size:11px;font-weight:800;cursor:pointer}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}.mini-grid article{background:#fff;border:1px solid #edf1f7;border-radius:14px;padding:16px}.mini-grid span,.mini-grid small{font-size:11px;color:var(--muted)}.mini-grid strong{display:block;font-size:21px;margin:5px 0}.toolbar,.page-actions{background:#fff;border:1px solid #edf1f7;border-radius:14px;padding:13px 16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.toolbar>div{display:flex;gap:12px}.toolbar label{font-size:11px;font-weight:800;color:var(--muted)}select,input{border:1px solid #dfe7f1;border-radius:9px;padding:9px 10px;background:#fff;color:var(--text);font-size:11px}.map-provider{font-size:11px;color:var(--muted)}.map-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.map-full{height:calc(100vh - 164px);min-height:530px;border-radius:16px;overflow:hidden;background:#e8eef7;box-shadow:var(--shadow)}.device-side{height:calc(100vh - 164px);min-height:530px;overflow:auto}.device-list{display:grid;gap:8px}.map-device{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px;display:flex;gap:10px;text-align:left;cursor:pointer}.map-device i{width:9px;height:9px;border-radius:50%;margin-top:4px}.map-device i.online{background:var(--green)}.map-device i.offline{background:var(--red)}.map-device span{display:grid}.map-device strong{font-size:11px}.map-device small{font-size:11px;color:var(--muted);margin-top:3px}.search-box{display:flex;align-items:center;gap:8px}.search-box input{width:320px;border:0;outline:none}.equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.device-card{background:#fff;border:1px solid #edf1f7;border-radius:16px;box-shadow:var(--shadow);padding:18px}.device-head{display:flex;justify-content:space-between}.device-head>div span{font-size:11px;color:var(--blue);font-weight:900}.device-head h2{font-size:16px;margin:5px 0}.device-status{height:max-content;border-radius:999px;padding:6px 9px;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900}.device-status.online{background:#eafbf4;color:#128258}.device-status.offline{background:#fff0f2;color:#cc4051}.device-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.device-metrics div{background:#f7f9fc;border-radius:10px;padding:10px}.device-metrics span{display:block;font-size:11px;color:var(--muted)}.device-metrics strong{font-size:11px}.device-footer{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.device-footer a{color:var(--blue);font-weight:800}.kpi-grid.compact .kpi{min-height:100px}.alert-list.large .alert-item{padding:16px}.coming-soon{background:#fff;border:1px solid #edf1f7;border-radius:18px;box-shadow:var(--shadow);padding:60px;text-align:center}.coming-icon{width:58px;height:58px;border-radius:18px;background:#e9f1ff;color:var(--blue);display:grid;place-items:center;margin:auto;font-size:26px}.coming-soon>span{display:block;margin-top:20px;font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--blue)}.coming-soon h2{font-size:28px;margin:8px}.coming-soon p{color:var(--muted);font-size:13px}.roadmap{display:flex;justify-content:center;gap:12px;margin-top:26px}.roadmap article{width:190px;background:#f7f9fc;border-radius:12px;padding:15px}.roadmap strong{display:grid;place-items:center;margin:auto auto 8px;width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff}.roadmap span{font-size:11px;color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;background:#0c2451;color:#fff;padding:12px 16px;border-radius:10px;font-size:11px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s;z-index:9999}.toast.show{opacity:1;transform:none}.skeleton,.empty{text-align:center;color:var(--muted);font-size:11px;padding:30px}.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#071b3c,#164d9f)}.login-card{width:min(420px,92vw);background:#fff;border-radius:20px;padding:32px;box-shadow:0 30px 70px rgba(0,0,0,.25)}.login-brand{margin-bottom:28px}.login-brand span{color:var(--muted)}.login-card h1{margin:0;font-size:28px}.login-card>p{color:var(--muted);font-size:12px}.login-card form{display:grid;gap:14px;margin:22px 0}.login-card label{font-size:11px;font-weight:800}.login-card input{display:block;width:100%;margin-top:6px;padding:12px}.login-card button{border:0;border-radius:10px;padding:12px;background:var(--blue);color:#fff;font-weight:900}.login-card>small{display:block;text-align:center;color:var(--muted);font-size:11px}.login-error{background:#fff0f2;color:#c83f50;padding:10px;border-radius:9px;font-size:11px}@media(max-width:1100px){.kpi-grid,.mini-grid{grid-template-columns:repeat(2,1fr)}.content-grid,.map-page-grid{grid-template-columns:1fr}.map-full,.device-side{height:520px}.equipment-grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{margin-left:0;width:100%;padding:18px}.menu-button{display:block}.header-status{display:none}.hero{display:block}.health-card{width:100%;margin-top:18px}.kpi-grid,.mini-grid{grid-template-columns:1fr}.equipment-grid{grid-template-columns:1fr}.device-metrics{grid-template-columns:repeat(2,1fr)}.toolbar,.page-actions{align-items:stretch;gap:10px;flex-direction:column}.toolbar>div{flex-wrap:wrap}.search-box input{width:100%}.roadmap{flex-direction:column;align-items:center}.coming-soon{padding:32px 18px}}

/* OCTOMAC CITY v0.2.0 — acessibilidade, mapas e melhor uso da tela */
body{font-size:14px}.sidebar nav a{font-size:13px}.brand span,.login-brand span{font-size:12px}.menu-label{font-size:11px}.sidebar-user{font-size:12px}.page-header{margin-bottom:18px}.page-header h1{font-size:29px}.page-header p{font-size:14px}.header-status small{font-size:11px}.status-pill{font-size:12px}.hero{padding:18px 24px;min-height:156px;align-items:center}.hero h2{font-size:25px;margin:5px 0}.hero p{font-size:14px;line-height:1.45;margin:6px 0}.hero-actions{margin-top:12px}.health-card{width:200px;padding:14px}.health-card span{font-size:12px}.health-card strong{font-size:36px;margin:4px 0}.health-card small{font-size:11px}.eyebrow,.panel-title span{font-size:11px}.btn{font-size:13px}.kpi span{font-size:11px}.kpi small{font-size:11px}.mini-grid span,.mini-grid small{font-size:11px}.panel-title a{font-size:12px}.alert-item strong{font-size:14px}.alert-item span{font-size:12px;line-height:1.45}.alert-item button{font-size:12px}.alert-list.large .alert-item{padding:17px}.alert-list.large .alert-symbol{width:38px;height:38px;font-size:16px}.toolbar label{font-size:11px}select,input{font-size:12px}.map-provider{font-size:11px}.map-device strong{font-size:13px}.map-device small{font-size:11px}.device-head>div span{font-size:11px}.device-status{font-size:11px}.device-metrics span,.device-footer{font-size:11px}.device-metrics strong{font-size:12px}.skeleton,.empty{font-size:12px}
.map-page-grid{align-items:stretch}.map-full,.device-side{height:calc(100vh - 205px);min-height:460px;max-height:720px}.map-toolbar{gap:12px}.map-toolbar>.map-provider{margin-left:auto}.map-toolbar>.btn{white-space:nowrap}
.fullscreen-map-shell{position:relative;height:calc(100vh - 130px);min-height:560px;border-radius:18px;overflow:hidden;background:#dfe8f3;box-shadow:var(--shadow);border:1px solid #dfe7f1}.map-city-full{position:absolute;inset:0}.fullscreen-map-toolbar{position:absolute;z-index:700;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.fullscreen-map-toolbar>*{pointer-events:auto}.map-search{background:#fff;border:1px solid #dfe7f1;border-radius:12px;padding:2px 10px;box-shadow:0 8px 24px rgba(19,50,91,.16);width:min(420px,42vw)}.map-search input{width:100%;font-size:13px}.fullscreen-map-actions{display:flex;gap:8px;align-items:center}.fullscreen-map-actions .map-provider{background:rgba(255,255,255,.94);padding:9px 12px;border-radius:10px;box-shadow:0 8px 24px rgba(19,50,91,.12)}.fleet-overlay{position:absolute;z-index:650;top:70px;right:14px;bottom:48px;width:310px;background:rgba(255,255,255,.97);border:1px solid #e1e8f2;border-radius:15px;padding:15px;box-shadow:0 18px 45px rgba(16,43,82,.2);overflow:auto;transition:.25s}.fleet-overlay.hidden{transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none}.fleet-overlay .panel-title{margin-bottom:10px}.fleet-overlay .panel-title strong{font-size:18px;color:var(--blue)}.fleet-status-filter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}.fleet-status-filter button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px;font-size:11px;font-weight:800;color:var(--muted);cursor:pointer}.fleet-status-filter button.active{background:#e9f1ff;color:var(--blue);border-color:#cbdcff}.map-live-strip{position:absolute;z-index:640;left:14px;right:14px;bottom:10px;display:flex;gap:18px;align-items:center;background:rgba(12,36,81,.91);color:#fff;padding:8px 13px;border-radius:10px;font-size:11px;width:max-content;max-width:calc(100% - 28px)}.map-live-strip span{display:flex;align-items:center;gap:5px}.online-dot,.offline-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.online-dot{background:var(--green)}.offline-dot{background:var(--red)}
@media(max-width:1100px){.map-full,.device-side{height:520px;max-height:none}.fullscreen-map-shell{height:calc(100vh - 120px)}.fleet-overlay{width:285px}.fullscreen-map-actions .map-provider{display:none}}
@media(max-width:760px){body{font-size:14px}.hero{min-height:auto}.fullscreen-map-shell{height:calc(100vh - 105px);min-height:520px;border-radius:12px}.fullscreen-map-toolbar{left:8px;right:8px;top:8px;flex-direction:column}.map-search{width:100%}.fullscreen-map-actions{justify-content:flex-end}.fleet-overlay{top:110px;right:8px;bottom:45px;width:min(300px,calc(100% - 16px))}.map-live-strip{left:8px;right:8px;bottom:7px;gap:10px;overflow:auto;white-space:nowrap}.map-toolbar>.btn{width:100%;text-align:center}}

/* OCTOMAC CITY v0.3.0 — fundação de telemetria e OBD */
.block-muted{display:block;color:var(--muted);font-size:11px;margin-top:4px}.health-list{display:grid;gap:10px}.health-list>div{display:flex;justify-content:space-between;align-items:center;padding:13px;border:1px solid var(--line);border-radius:11px;font-size:12px}.health-list strong{color:var(--muted)}.health-list strong.ok{color:var(--green)}.data-table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:680px}.data-table th,.data-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:12px}.data-table th{font-size:11px;letter-spacing:.07em;color:var(--muted);background:#f8fafd}.data-table small{color:var(--muted)}.table-status{display:inline-flex;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900;text-transform:uppercase}.table-status.online{background:#eafbf4;color:#128258}.table-status.offline{background:#fff0f2;color:#cc4051}.obd-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0c2451,#1d5bb3);color:#fff;border-radius:18px;padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow)}.obd-hero>div:first-child{min-width:280px}.obd-hero span{font-size:11px;font-weight:900;letter-spacing:.1em}.obd-hero strong{display:block;font-size:38px;margin:4px 0}.obd-hero small{opacity:.75}.obd-hero .progress{background:rgba(255,255,255,.18);height:7px;margin-top:12px}.obd-hero .progress i{background:#42e3a1}.obd-live{display:flex;align-items:center;gap:8px}.obd-live i{width:10px;height:10px;border-radius:50%;background:#42e3a1;box-shadow:0 0 0 6px rgba(66,227,161,.12)}.obd-live small{margin-left:12px}.obd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.obd-grid article{background:#fff;border:1px solid #edf1f7;border-radius:15px;padding:17px;box-shadow:var(--shadow)}.obd-grid span{font-size:11px;color:var(--muted)}.obd-grid strong{font-size:25px;display:inline-block;margin-top:7px}.obd-grid small{font-size:11px;color:var(--muted);margin-left:4px}.empty-state-good{padding:36px 20px;text-align:center;border:1px dashed #bfe8d7;background:#f2fcf8;border-radius:14px}.empty-state-good strong{display:block;color:#128258;font-size:16px}.empty-state-good span{display:block;color:var(--muted);font-size:12px;line-height:1.5;margin-top:8px}@media(max-width:1100px){.obd-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.obd-hero{align-items:flex-start;gap:18px;flex-direction:column}.obd-grid{grid-template-columns:1fr 1fr}}


/* =========================================================
   OCTOMAC CITY v0.3.1 — VISUAL DARK MODERNO
   Mantém a navegação lateral clássica e os mapas claros.
   ========================================================= */
:root{
  --blue:#2f7df4;--blue-dark:#123f91;--green:#21d07a;--red:#ff4d5f;
  --orange:#f59e0b;--purple:#9a63f5;--text:#f4f8ff;--muted:#8ea2bd;
  --line:#1e3550;--bg:#06111f;--card:#0c1c31;--card-2:#10233b;
  --sidebar:#0b2a5f;--radius:15px;--shadow:0 18px 34px rgba(0,0,0,.22)
}
html{background:var(--bg)}
body{color:var(--text);background:radial-gradient(circle at 72% -10%,rgba(37,101,187,.15),transparent 36%),var(--bg)}
.sidebar{width:238px;background:linear-gradient(180deg,#0d2f68 0%,#0a2859 100%);box-shadow:12px 0 38px rgba(0,0,0,.18)}
.brand{padding:8px 8px 24px}.brand-logo{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#3286ff,#21d1ba);font-size:23px}.brand strong{font-size:18px}.brand span{font-size:11px;opacity:.9}.menu-label{opacity:.62;margin-top:25px}.sidebar nav{gap:5px}.sidebar nav a{font-size:12px;padding:12px 12px;color:#d2def2}.sidebar nav a:hover,.sidebar nav a.active{background:#173f80;color:#fff;box-shadow:inset 3px 0 0 #32a0ff}.sidebar-user{font-size:11px}.main{background:transparent;padding:22px 26px 38px}.page-header{background:rgba(9,25,44,.72);border:1px solid var(--line);border-radius:16px;padding:17px 19px;margin-bottom:16px;backdrop-filter:blur(8px)}.page-header h1{font-size:25px}.page-header p{color:#8da4c1}.header-status small{color:#7990ac}.status-pill{background:rgba(33,208,122,.09);border:1px solid rgba(33,208,122,.35);color:#32dc8a}.hero{background:linear-gradient(120deg,#103a80,#0a285c);border:1px solid #235494;box-shadow:var(--shadow);padding:22px 25px}.hero h2{font-size:26px}.health-card{background:rgba(5,19,38,.38);border-color:#3463a0}.btn.light{background:#142b48;color:#e8f3ff;border:1px solid #2a486d}.btn.primary{background:#2f73eb}.kpi,.panel,.mini-grid article,.device-card,.toolbar,.page-actions,.coming-soon{background:linear-gradient(180deg,#0f2239,#0b1c31);border-color:var(--line);box-shadow:var(--shadow)}
.kpi{min-height:108px}.kpi span,.mini-grid span,.mini-grid small,.device-metrics span,.device-footer,.panel-title span{color:#8ca2bd}.kpi strong,.mini-grid strong{color:#fff}.kpi.blue .kpi-icon{background:rgba(47,125,244,.15);color:#43a1ff}.kpi.red .kpi-icon{background:rgba(255,77,95,.14);color:#ff5c6c}.kpi.green .kpi-icon{background:rgba(33,208,122,.14);color:#2ce18b}.kpi.orange .kpi-icon{background:rgba(245,158,11,.15);color:#ffad18}.panel-title h2{color:#fff}.panel-title a{color:#42a5ff}.alert-item{background:#0f2238;border-color:#203a59}.alert-item span{color:#8ea3bd}.alert-item.critico .alert-symbol{background:rgba(255,77,95,.14)}.alert-item.atencao .alert-symbol{background:rgba(245,158,11,.14)}.alert-item.info .alert-symbol{background:rgba(47,125,244,.14)}
select,input{background:#0b1b2f;border-color:#294461;color:#fff}select option{background:#0b1b2f}.map-provider{color:#8ca1bb}.map-box,.map-full{background:#e8eef7;border:1px solid #29435f;box-shadow:0 12px 30px rgba(0,0,0,.25)}.map-box{height:390px}.map-page-grid{grid-template-columns:minmax(0,1fr) 330px}.map-full{height:calc(100vh - 170px);min-height:560px}.device-side{height:calc(100vh - 170px);min-height:560px}.map-device{background:#0d2037;border-color:#233e5d;color:#fff}.map-device small{color:#8ca2bd}.device-metrics div,.roadmap article{background:#0a192a}.device-footer{border-color:#233d5b}.coming-icon{background:rgba(47,125,244,.15);color:#4aa5ff}.coming-soon p,.roadmap span{color:#8da1ba}.toolbar label{color:#91a5bf}.search-box input{background:transparent}.toast{background:#15345b;border:1px solid #2f5b8c}.login-body{background:radial-gradient(circle at 70% 10%,#174383 0,transparent 36%),#06111f}.login-card{background:#0d1f35;border:1px solid #24425f;color:#fff}.login-card>p,.login-brand span,.login-card>small{color:#8fa5c0}.login-card input{background:#08182a;border-color:#294761;color:#fff}.login-error{background:rgba(255,77,95,.12);color:#ff8190}
/* área do mapa continua clara, como solicitado */
.leaflet-container{background:#e8eef7;color:#1c2736}.leaflet-popup-content-wrapper,.leaflet-popup-tip{color:#172235;background:#fff}
@media(max-width:760px){.main{padding:14px}.page-header{padding:13px}.sidebar{box-shadow:18px 0 40px rgba(0,0,0,.35)}}

/* =========================================================
   OCTOMAC CITY v0.3.2 — AJUSTE DE ALTURA + OBD DARK
   Mais conteúdo visível no monitor e cartões OBD corrigidos.
   ========================================================= */
.page-header{padding:13px 17px;margin-bottom:12px}
.page-header h1{font-size:24px}
.page-header p{margin-top:4px}
.hero{padding:14px 22px;border-radius:17px;gap:20px;align-items:center}
.hero h2{font-size:23px;margin:5px 0}
.hero p{margin:4px 0 0;line-height:1.35}
.hero-actions{margin-top:11px}
.hero .btn{padding:8px 12px}
.health-card{width:190px;padding:12px 14px;border-radius:14px}
.health-card strong{font-size:32px;margin:3px 0}
.health-card .progress{margin-top:9px}
.kpi-grid{margin:14px 0;gap:14px}
.kpi{min-height:94px;padding:14px}
.kpi strong{font-size:24px}
.content-grid{gap:14px}
.panel{padding:15px}
.map-box{height:360px}
.mini-grid{gap:12px;margin-top:14px}
.mini-grid article{padding:13px}

.obd-hero{padding:13px 20px;margin-bottom:12px;border-radius:16px;min-height:108px}
.obd-hero>div:first-child{min-width:240px}
.obd-hero strong{font-size:32px;margin:2px 0}
.obd-hero .progress{margin-top:8px}
.obd-grid{gap:10px;margin-bottom:12px}
.obd-grid article{background:linear-gradient(180deg,#10253e,#0c1e33);border:1px solid #24415f;border-radius:13px;padding:14px;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.obd-grid article:hover{border-color:#2d5a84;transform:translateY(-1px)}
.obd-grid span,.obd-grid small{color:#8fa5c1}
.obd-grid strong{color:#f5f9ff;font-size:23px}
.data-table th{background:#10253e;color:#92a8c4;border-bottom-color:#294764}
.data-table td{color:#edf5ff;border-bottom-color:#213b58}
.data-table tbody tr:hover{background:rgba(47,125,244,.06)}
.empty-state-good{background:linear-gradient(180deg,rgba(33,208,122,.10),rgba(33,208,122,.04));border:1px dashed rgba(33,208,122,.38)}
.empty-state-good strong{color:#42e89a}
.empty-state-good span{color:#91a7c2}
.table-status.online{background:rgba(33,208,122,.14);color:#43e99c;border:1px solid rgba(33,208,122,.25)}
.page-actions{padding:11px 15px;margin-bottom:12px}

@media(max-width:1100px){
  .hero{align-items:stretch}
  .health-card{width:175px}
  .map-box{height:340px}
}
@media(max-width:760px){
  .hero{padding:16px;flex-direction:column;align-items:stretch}
  .health-card{width:100%}
  .obd-grid{grid-template-columns:1fr 1fr}
}

/* =========================================================
   OCTOMAC CITY v0.3.3 — PACOTE 02
   Dashboard compacto, barra operacional e maior área útil.
   ========================================================= */
.operation-strip{
  display:grid;grid-template-columns:minmax(280px,1.45fr) auto 150px auto;
  align-items:center;gap:18px;margin-bottom:12px;padding:12px 16px;
  min-height:76px;border:1px solid #21415f;border-radius:15px;
  background:linear-gradient(115deg,#0e294a 0%,#0b1e34 58%,#0a1a2d 100%);
  box-shadow:0 14px 30px rgba(0,0,0,.18)
}
.operation-strip-title{min-width:0}.operation-strip-title .eyebrow{color:#58aaff}.operation-strip-title strong{display:block;font-size:18px;margin:3px 0 2px}.operation-strip-title small{display:block;color:#8fa4be;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-status-grid{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.service-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid #294764;background:#0b1b2f;color:#9bb0c9;font-size:11px;font-weight:900;letter-spacing:.04em}.service-status i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.service-status.online{color:#36dc8b;border-color:rgba(54,220,139,.32);background:rgba(33,208,122,.07)}.service-status.standby{color:#f4ae2b;border-color:rgba(244,174,43,.28);background:rgba(245,158,11,.07)}
.operation-score-compact{min-width:135px}.operation-score-compact>span{font-size:11px;color:#8fa4be;text-transform:uppercase;letter-spacing:.09em}.operation-score-compact strong{font-size:25px;display:inline-block;margin:0 6px 0 0}.operation-score-compact small{display:block;color:#9cb0c8;font-size:11px}.operation-score-compact .progress{height:5px;margin-top:5px;background:#213a57}
.operation-actions{display:flex;gap:7px}.btn.dark{background:#0c2037;color:#dcecff;border:1px solid #294866}.operation-actions .btn{padding:8px 11px;white-space:nowrap}
.dashboard-kpis{margin:12px 0;gap:12px}.dashboard-kpis .kpi{min-height:78px;padding:11px 13px;border-radius:13px}.dashboard-kpis .kpi-icon{width:34px;height:34px;border-radius:10px}.dashboard-kpis .kpi strong{font-size:22px;margin:2px 0}.dashboard-kpis .kpi span{font-size:11px}.dashboard-kpis .kpi small{font-size:11px}
.dashboard-main-grid{grid-template-columns:minmax(0,1.9fr) minmax(300px,.62fr);gap:12px}.dashboard-main-grid .panel{padding:13px}.compact-title{margin-bottom:9px;align-items:center}.compact-title h2{font-size:16px;margin-top:3px}.map-header-actions{display:flex;align-items:center;gap:12px}.map-header-actions .map-provider{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-main-grid .map-box{height:390px}
.events-panel{min-width:0}.compact-alerts{gap:7px}.compact-alerts .alert-item{padding:9px 10px;border-radius:10px}.compact-alerts .alert-symbol{width:28px;height:28px}.compact-alerts .alert-item strong{font-size:11px}.compact-alerts .alert-item span,.compact-alerts .alert-item button{font-size:11px}
.dashboard-mini-grid{gap:12px;margin-top:12px}.dashboard-mini-grid article{padding:11px 13px;border-radius:12px}.dashboard-mini-grid strong{font-size:18px;margin:3px 0}.dashboard-mini-grid span,.dashboard-mini-grid small{font-size:11px}
@media(max-width:1350px){.operation-strip{grid-template-columns:minmax(260px,1.35fr) auto 135px}.operation-actions{grid-column:2/4;justify-content:flex-end;margin-top:-8px}.service-status-grid{justify-content:flex-end}.dashboard-main-grid .map-box{height:370px}}
@media(max-width:1050px){.operation-strip{grid-template-columns:1fr auto}.service-status-grid{justify-content:flex-start}.operation-score-compact{grid-column:2}.operation-actions{grid-column:1/3;margin-top:0;justify-content:flex-start}.dashboard-main-grid{grid-template-columns:1fr}.events-panel{max-height:none}.dashboard-main-grid .map-box{height:360px}}
@media(max-width:760px){.operation-strip{grid-template-columns:1fr;padding:13px}.operation-score-compact,.operation-actions{grid-column:auto}.service-status-grid{gap:5px}.dashboard-kpis{grid-template-columns:1fr 1fr}.dashboard-main-grid .map-box{height:330px}.map-header-actions .map-provider{display:none}}

/* v0.3.4 — Pacote 03: gráficos operacionais */
.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.charts-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.chart-panel{min-width:0;padding:13px}.chart-panel canvas{display:block;width:100%;height:210px}.dashboard-charts .chart-panel canvas{height:190px}.chart-badge{display:inline-flex!important;align-items:center;padding:5px 8px;border:1px solid #294866;border-radius:999px;color:#8fc0ff!important;background:#0b2138;font-size:11px!important;letter-spacing:.06em}.chart-legend{font-size:11px;color:#8fa4be;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.chart-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.chart-legend .red{background:#ff4d67}.chart-legend .orange{background:#f5a524}.chart-legend .blue{background:#2f8cff}.chart-legend .green{background:#19d27f}.alerts-charts{margin:12px 0}.alerts-charts .chart-panel canvas{height:185px}.telemetry-charts,.obd-charts{margin-bottom:12px}
@media(max-width:1200px){.charts-grid-3{grid-template-columns:1fr 1fr}.charts-grid-3 .chart-panel:last-child{grid-column:1/-1}.chart-panel canvas{height:195px}}
@media(max-width:780px){.charts-grid,.charts-grid-3{grid-template-columns:1fr}.charts-grid-3 .chart-panel:last-child{grid-column:auto}.chart-panel canvas,.dashboard-charts .chart-panel canvas,.alerts-charts .chart-panel canvas{height:185px}}

/* v0.3.5 — Pacote 04: Visão Geral em formato Central de Operações */
.overview-topbar{display:grid;grid-template-columns:minmax(280px,1.25fr) auto 150px;align-items:center;gap:16px;background:#10263f;border:1px solid #26445f;border-radius:15px;padding:11px 15px;color:#f5f9ff;margin-bottom:11px}.overview-topbar>div:first-child{display:grid;gap:2px}.overview-topbar strong{font-size:16px}.overview-topbar small{font-size:11px;color:#8fa4be}.overview-services{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.overview-score{min-width:140px}.overview-score>span{font-size:11px;color:#8fa4be;text-transform:uppercase}.overview-score>strong{font-size:23px;margin-left:6px}.overview-score>small{display:block;font-size:11px;color:#8fa4be}.overview-score .progress{height:4px;margin-top:4px;background:#213a57}
.overview-kpis{grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 11px}.overview-kpis .kpi{min-height:76px;padding:10px 12px}.overview-kpis .kpi strong{font-size:21px}.overview-kpis .kpi-icon{width:34px;height:34px}.kpi.purple .kpi-icon{background:rgba(177,92,255,.16);color:#b15cff}
.overview-main-grid{grid-template-columns:minmax(0,2.15fr) minmax(285px,.72fr);gap:11px}.overview-main-grid .panel{padding:11px}.overview-map-panel{position:relative}.overview-main-grid .map-box{height:326px}.overview-side-column{display:grid;grid-template-rows:1fr auto;gap:10px;min-width:0}.overview-side-column .events-panel{min-height:0}.link-card{padding:11px!important}.link-card .panel-title{margin-bottom:7px}.link-network{padding:4px 9px;border:1px solid #145f49;border-radius:9px;color:#19d27f!important}.link-body{display:flex;align-items:center;gap:16px}.link-body strong{display:block;font-size:20px;color:#19d27f}.link-body span,.link-body small{display:block;font-size:11px;color:#8fa4be}.signal-bars{height:42px;display:flex;align-items:flex-end;gap:4px}.signal-bars i{display:block;width:7px;background:#19d27f;border-radius:4px}.signal-bars i:nth-child(1){height:13px}.signal-bars i:nth-child(2){height:20px}.signal-bars i:nth-child(3){height:28px}.signal-bars i:nth-child(4){height:35px}.signal-bars i:nth-child(5){height:41px}.map-legend-compact{position:absolute;left:22px;bottom:21px;background:rgba(6,22,39,.92);border:1px solid #294866;border-radius:10px;padding:7px 9px;display:grid;gap:5px;color:#dcecff;font-size:11px;z-index:400}.map-legend-compact span{display:flex;align-items:center;gap:6px}.map-legend-compact i{width:7px;height:7px;border-radius:50%}.map-legend-compact .green{background:#19d27f}.map-legend-compact .orange{background:#f5a524}.map-legend-compact .red{background:#ff4d67}
.overview-summary-grid{display:grid;grid-template-columns:1.45fr .85fr 1.25fr;gap:11px;margin-top:11px}.overview-summary-grid .panel{padding:10px 12px}.section-label{font-size:11px;font-weight:900;letter-spacing:.1em;color:#8fa4be;margin-bottom:8px}.fleet-summary-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.fleet-summary-items>div,.obd-summary-items>div,.fleet-status-items>div:not(.utilization){background:#0b2138;border:1px solid #1d3b57;border-radius:10px;padding:8px 9px}.fleet-summary-items span,.fleet-summary-items small,.obd-summary-items span,.fleet-status-items span{display:block;font-size:11px;color:#8fa4be}.fleet-summary-items strong{display:block;font-size:16px;margin:3px 0;color:#f5f9ff}.fleet-status-items{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;align-items:stretch}.fleet-status-items>div{text-align:center}.fleet-status-items strong{display:block;font-size:18px;color:#19d27f}.fleet-status-items>div:nth-child(2) strong{color:#f5a524}.fleet-status-items>div:nth-child(3) strong{color:#ff4d67}.fleet-status-items>div:nth-child(4) strong{color:#a7bdd6}.fleet-status-items .utilization{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;padding-top:2px}.fleet-status-items .utilization strong{font-size:16px}.fleet-status-items .utilization .progress{grid-column:1/-1;height:4px;margin-top:3px;background:#213a57}.obd-summary-card .panel-title{margin-bottom:7px}.obd-summary-items{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.obd-summary-items strong{display:block;font-size:11px;margin-top:2px;color:#f5f9ff}
@media(max-width:1450px){.overview-kpis{grid-template-columns:repeat(5,minmax(145px,1fr))}.overview-main-grid .map-box{height:305px}.overview-summary-grid{grid-template-columns:1.3fr .85fr 1.2fr}}
@media(max-width:1200px){.overview-topbar{grid-template-columns:1fr auto}.overview-score{grid-column:2}.overview-services{grid-row:2;grid-column:1/-1;justify-content:flex-start}.overview-kpis{grid-template-columns:repeat(3,1fr)}.overview-main-grid{grid-template-columns:1fr}.overview-side-column{grid-template-columns:1fr 1fr;grid-template-rows:auto}.overview-summary-grid{grid-template-columns:1fr}.overview-main-grid .map-box{height:350px}}
@media(max-width:760px){.overview-topbar{grid-template-columns:1fr}.overview-score{grid-column:auto}.overview-kpis{grid-template-columns:1fr 1fr}.overview-side-column{grid-template-columns:1fr}.fleet-summary-items,.obd-summary-items{grid-template-columns:1fr 1fr}.overview-main-grid .map-box{height:320px}}


/* OCTOMAC City v0.3.8 — painel de frota glass/translúcido */
.fullscreen-map-shell .fleet-overlay{
  background:linear-gradient(145deg,rgba(201,228,255,.24),rgba(151,207,255,.16)) !important;
  border:1px solid rgba(222,241,255,.72) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
  box-shadow:0 18px 46px rgba(5,30,61,.22),inset 0 1px 0 rgba(255,255,255,.46) !important;
}
.fullscreen-map-shell .fleet-overlay .panel-title h2,
.fullscreen-map-shell .fleet-overlay .panel-title span{color:#0b2748 !important;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.fullscreen-map-shell .fleet-overlay .fleet-status-filter{
  background:rgba(232,245,255,.34) !important;
  border:1px solid rgba(255,255,255,.48);
  border-radius:10px;
  padding:4px;
}
.fullscreen-map-shell .fleet-overlay .fleet-status-filter button{
  background:rgba(239,248,255,.66) !important;
  border-color:rgba(123,172,218,.48) !important;
  color:#24496f !important;
}
.fullscreen-map-shell .fleet-overlay .fleet-status-filter button.active{
  background:rgba(36,109,232,.90) !important;
  border-color:rgba(79,147,255,.95) !important;
  color:#fff !important;
  box-shadow:0 5px 14px rgba(23,85,180,.25);
}
.fullscreen-map-shell .fleet-overlay .map-device{
  background:rgba(8,31,56,.94) !important;
  border-color:rgba(104,170,224,.28) !important;
  box-shadow:0 7px 17px rgba(5,28,53,.18);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .fullscreen-map-shell .fleet-overlay{background:rgba(205,231,255,.72) !important}
}


/* OCTOMAC City v0.3.9 — Pacote 09: marcadores inteligentes e popup profissional */
.octomac-vehicle-marker-wrap{background:transparent!important;border:0!important}
.octomac-vehicle-marker{position:relative;width:44px;height:48px;filter:drop-shadow(0 5px 6px rgba(0,24,52,.30));transform-origin:50% 48%}
.octomac-vehicle-marker .marker-glyph{position:absolute;left:6px;top:7px;width:32px;height:32px;border:3px solid #fff;border-radius:50% 50% 50% 9px;transform:rotate(-45deg);display:grid;place-items:center;background:#18c982;color:#fff;z-index:2}
.octomac-vehicle-marker.stopped .marker-glyph{background:#f4aa27}.octomac-vehicle-marker.offline .marker-glyph{background:#ef5b6c}
.octomac-vehicle-marker .marker-glyph svg{width:18px;height:18px;fill:currentColor;transform:rotate(45deg)}
.octomac-vehicle-marker .marker-direction{display:none;position:absolute;left:16px;top:-7px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #18c982;transform:rotate(var(--heading));transform-origin:6px 31px;z-index:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.22))}
.octomac-vehicle-marker.moving .marker-direction{display:block}.octomac-vehicle-marker .marker-pulse{position:absolute;left:12px;top:13px;width:20px;height:20px;border:2px solid rgba(24,201,130,.55);border-radius:50%;animation:octomacMarkerPulse 2s infinite;z-index:0}.octomac-vehicle-marker.offline .marker-pulse{display:none}
@keyframes octomacMarkerPulse{0%{transform:scale(.8);opacity:.8}70%,100%{transform:scale(2.1);opacity:0}}
.fleet-type-icon{width:27px;height:27px;border-radius:8px;background:rgba(47,140,255,.14);color:#67b5ff;display:grid!important;place-items:center!important;flex:0 0 auto}.fleet-type-icon svg{width:17px;height:17px;fill:currentColor}.fleet-overlay .map-device>i{margin-left:-8px;z-index:2;border:2px solid #0d2037;width:10px;height:10px}.fleet-overlay .map-device{align-items:center}
.octomac-vehicle-popup .leaflet-popup-content-wrapper{padding:0!important;border-radius:15px!important;overflow:hidden;background:#071a2e!important;border:1px solid #285078!important;box-shadow:0 18px 42px rgba(0,18,41,.34)!important}.octomac-vehicle-popup .leaflet-popup-content{margin:0!important;width:300px!important}.octomac-vehicle-popup .leaflet-popup-tip{background:#071a2e!important;border:1px solid #285078}.octomac-vehicle-popup .leaflet-popup-close-button{color:#a8c3df!important;font-size:20px!important;top:6px!important;right:7px!important;z-index:5}
.vehicle-popup-card{font-family:Inter,Segoe UI,Arial,sans-serif;color:#edf7ff;background:linear-gradient(145deg,#0c2947,#071a2e);min-width:285px}.vehicle-popup-head{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;padding:13px 13px 10px;border-bottom:1px solid rgba(109,169,224,.18)}.popup-type{width:38px;height:38px;border-radius:11px;background:rgba(47,140,255,.18);color:#63b4ff;display:grid;place-items:center}.popup-type svg{width:23px;height:23px;fill:currentColor}.vehicle-popup-head strong{display:block;font-size:13px}.vehicle-popup-head small{display:block;color:#8ca8c3;font-size:11px;margin-top:2px}.popup-status{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:900;padding:5px 7px;border-radius:999px;background:rgba(24,201,130,.10);color:#29dc91}.popup-status.offline{background:rgba(239,91,108,.12);color:#ff7182}.popup-status i{width:6px;height:6px;background:currentColor;border-radius:50%}
.vehicle-popup-speed{display:flex;align-items:baseline;gap:4px;padding:10px 13px 4px}.vehicle-popup-speed strong{font-size:29px;line-height:1;color:#fff}.vehicle-popup-speed span{font-size:11px;color:#9bb5cf}.vehicle-popup-speed small{margin-left:auto;font-size:11px;color:#45dd9b;background:rgba(24,201,130,.09);padding:4px 7px;border-radius:999px}.vehicle-popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 13px 11px}.vehicle-popup-grid>div{background:rgba(10,43,73,.68);border:1px solid rgba(71,126,178,.22);border-radius:9px;padding:8px}.vehicle-popup-grid span,.vehicle-popup-grid small{display:block;font-size:11px;color:#819db9}.vehicle-popup-grid strong{display:block;font-size:11px;margin:2px 0}.vehicle-popup-footer{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;background:rgba(3,16,30,.45);font-size:11px;color:#8ca8c3}.vehicle-popup-footer a{color:#57acff!important;font-weight:900;text-decoration:none}
@media(max-width:760px){.octomac-vehicle-popup .leaflet-popup-content{width:270px!important}.vehicle-popup-card{min-width:260px}.vehicle-popup-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   OCTOMAC CITY v0.4.1 - PACOTE 11
   Padronizacao tipografica global + medidor M2M horizontal
   ========================================================= */

/* Tipografia global: melhora a leitura sem aumentar a altura dos cards */
body{font-size:14px;line-height:1.42}
.brand span,.login-brand span{font-size:12px}
.menu-label{font-size:11px}
.sidebar nav a{font-size:13px;line-height:1.25}
.sidebar-user{font-size:12px}
.page-header p{font-size:14px}
.status-pill{font-size:12px}
.header-status small{font-size:11px}
.eyebrow,.panel-title span{font-size:11px}
.hero p{font-size:14px}
.btn{font-size:13px}
.health-card span{font-size:12px}
.health-card small{font-size:11px}
.kpi span{font-size:11px}
.kpi small{font-size:11px;line-height:1.3}
.panel-title a{font-size:12px}
.alert-item strong{font-size:13px}
.alert-item span{font-size:11px;line-height:1.35}
.alert-item button{font-size:11px}
.mini-grid span,.mini-grid small{font-size:11px}
.toolbar label{font-size:11px}
select,input{font-size:12px}
.map-provider{font-size:11px}
.map-device strong{font-size:12px}
.map-device small{font-size:11px;line-height:1.3}
.device-head>div span{font-size:11px}
.device-status{font-size:11px}
.device-metrics span{font-size:11px}
.device-metrics strong{font-size:12px}
.device-footer{font-size:11px}
.coming-soon>span{font-size:11px}
.roadmap span{font-size:11px}
.toast,.skeleton,.empty{font-size:12px}
.login-card>p{font-size:13px}
.chart-legend{font-size:11px}
.overview-topbar small{font-size:11px}
.overview-score>span,.overview-score>small{font-size:11px}
.link-body span,.link-body small{font-size:11px;line-height:1.35}
.map-legend-compact{font-size:11px}
.section-label{font-size:11px}
.fleet-summary-items span,.fleet-summary-items small,.obd-summary-items span,.fleet-status-items span{font-size:11px;line-height:1.25}
.vehicle-popup-head small{font-size:11px}
.popup-status{font-size:11px}
.vehicle-popup-speed span{font-size:12px}
.vehicle-popup-speed small{font-size:11px}
.vehicle-popup-grid span,.vehicle-popup-grid small{font-size:11px}
.vehicle-popup-grid strong{font-size:12px}
.vehicle-popup-footer{font-size:11px}

/* Valor principal dos KPIs um pouco mais destacado */
.kpi strong{font-size:28px}
.overview-kpis .kpi strong{font-size:23px}
.fleet-summary-items strong{font-size:17px}
.fleet-status-items strong{font-size:19px}
.obd-summary-items strong{font-size:12px}

/* Medidor de qualidade M2M: mais largo, baixo e com leitura horizontal */
.link-body{gap:18px;justify-content:flex-start}
.signal-bars{width:112px;height:34px;gap:6px;align-items:flex-end;flex:0 0 112px}
.signal-bars i{width:16px;border-radius:5px 5px 2px 2px}
.signal-bars i:nth-child(1){height:11px}
.signal-bars i:nth-child(2){height:16px}
.signal-bars i:nth-child(3){height:21px}
.signal-bars i:nth-child(4){height:27px}
.signal-bars i:nth-child(5){height:33px}
.link-body strong{font-size:22px;letter-spacing:.02em}
.link-card{min-height:104px}

/* Mantem os cards compactos mesmo com fontes maiores */
.overview-kpis .kpi{padding:10px 12px}
.alert-item{line-height:1.25}

@media (max-width:1100px){
  .signal-bars{width:94px;flex-basis:94px;gap:5px}
  .signal-bars i{width:14px}
}

/* =========================================================
   v0.4.2 — Visão Geral sem cabeçalho + legibilidade definitiva
   ========================================================= */

/* A primeira página já é identificada pelo menu lateral e pela Central de Operações. */
.main-dashboard{padding-top:20px}
.main-dashboard .overview-topbar{margin-top:0}

/* O espaço recuperado pela retirada do cabeçalho é entregue ao mapa. */
.main-dashboard .overview-main-grid .map-box{height:395px}

/* Pequenos textos: supera regras antigas mais específicas que mantinham 9–10px. */
.main-dashboard .overview-topbar small,
.main-dashboard .overview-score>span,
.main-dashboard .overview-score>small,
.main-dashboard .map-provider,
.main-dashboard .map-legend-compact,
.main-dashboard .link-body span,
.main-dashboard .link-body small,
.main-dashboard .section-label,
.main-dashboard .fleet-summary-items span,
.main-dashboard .fleet-summary-items small,
.main-dashboard .fleet-status-items span,
.main-dashboard .obd-summary-items span,
.main-dashboard .alert-item span,
.device-card .device-metrics span,
.device-card .device-footer,
.map-device small,
.vehicle-popup-grid span,
.vehicle-popup-grid small,
.vehicle-popup-footer{
  font-size:11px!important;
  line-height:1.32!important;
}

.main-dashboard .kpi span,
.main-dashboard .kpi small,
.main-dashboard .panel-title span,
.main-dashboard .panel-title a,
.device-card .device-head>div span,
.device-card .device-status{
  font-size:11.5px!important;
}

/* Medidor M2M: volta a ficar delicado, apenas mais horizontal. */
.main-dashboard .link-body{gap:14px;align-items:center}
.main-dashboard .signal-bars{
  width:88px!important;
  height:30px!important;
  flex:0 0 88px!important;
  gap:4px!important;
}
.main-dashboard .signal-bars i{
  width:11px!important;
  border-radius:4px 4px 2px 2px!important;
}
.main-dashboard .signal-bars i:nth-child(1){height:8px!important}
.main-dashboard .signal-bars i:nth-child(2){height:12px!important}
.main-dashboard .signal-bars i:nth-child(3){height:17px!important}
.main-dashboard .signal-bars i:nth-child(4){height:22px!important}
.main-dashboard .signal-bars i:nth-child(5){height:28px!important}
.main-dashboard .link-body strong{font-size:20px!important}
.main-dashboard .link-card{min-height:auto!important}

@media(max-width:1450px){
  .main-dashboard .overview-main-grid .map-box{height:370px}
}
@media(max-width:1200px){
  .main-dashboard .overview-main-grid .map-box{height:360px}
}
@media(max-width:760px){
  .main-dashboard{padding-top:14px}
  .main-dashboard .overview-main-grid .map-box{height:330px}
}


/* =========================================================
   v0.4.3 — Tipografia mínima global em 11px
   ========================================================= */

/* Nenhuma informação textual secundária fica abaixo de 11px. */
small,
.brand span,
.menu-label,
.sidebar-user,
.header-status small,
.eyebrow,
.panel-title span,
.health-card small,
.kpi span,
.kpi small,
.alert-item span,
.alert-item button,
.mini-grid span,
.mini-grid small,
.toolbar label,
.map-provider,
.map-device small,
.device-head>div span,
.device-status,
.device-metrics span,
.device-footer,
.coming-soon>span,
.service-status,
.operation-score-compact>span,
.operation-score-compact small,
.chart-badge,
.chart-legend,
.overview-topbar small,
.overview-score>span,
.overview-score>small,
.link-body span,
.link-body small,
.map-legend-compact,
.section-label,
.fleet-summary-items span,
.fleet-summary-items small,
.obd-summary-items span,
.fleet-status-items span,
.vehicle-popup-head small,
.popup-status,
.vehicle-popup-speed small,
.vehicle-popup-grid span,
.vehicle-popup-grid small,
.vehicle-popup-footer{
  font-size:11px!important;
  line-height:1.32!important;
}

/* Mais altura para o mapa da Visão Geral em telas grandes. */
.main-dashboard .overview-main-grid .map-box{height:430px!important}

/* Indicador M2M mais fino, delicado e horizontal. */
.main-dashboard .signal-bars{
  width:76px!important;
  height:26px!important;
  flex:0 0 76px!important;
  gap:3px!important;
}
.main-dashboard .signal-bars i{width:9px!important;border-radius:3px 3px 2px 2px!important}
.main-dashboard .signal-bars i:nth-child(1){height:7px!important}
.main-dashboard .signal-bars i:nth-child(2){height:10px!important}
.main-dashboard .signal-bars i:nth-child(3){height:14px!important}
.main-dashboard .signal-bars i:nth-child(4){height:19px!important}
.main-dashboard .signal-bars i:nth-child(5){height:24px!important}
.main-dashboard .link-body{gap:12px!important}

@media(max-width:1450px){
  .main-dashboard .overview-main-grid .map-box{height:405px!important}
}
@media(max-width:1200px){
  .main-dashboard .overview-main-grid .map-box{height:375px!important}
}
@media(max-width:760px){
  .main-dashboard .overview-main-grid .map-box{height:340px!important}
}
\n\n/* =========================================================\n   v0.4.4 — Mapa operacional unificado + enquadramento responsivo\n   ========================================================= */\n\n/* A Visão Geral usa a altura disponível sem cortar os cartões inferiores. */\n.main-dashboard .overview-main-grid .map-box{\n  height:clamp(330px,42vh,430px)!important;\n}\n.main-dashboard{padding-bottom:20px!important}\n.main-dashboard .overview-summary-grid{margin-bottom:0!important}\n\n/* Ajustes para telas com menor altura útil (notebook / barra do Windows). */\n@media (max-height:900px) and (min-width:1201px){\n  .main-dashboard .overview-main-grid .map-box{height:360px!important}\n  .main-dashboard .overview-topbar{padding-top:11px!important;padding-bottom:11px!important}\n  .main-dashboard .overview-kpis{margin-top:10px!important;margin-bottom:10px!important}\n}\n@media (max-height:800px) and (min-width:1201px){\n  .main-dashboard .overview-main-grid .map-box{height:315px!important}\n}\n
/* =========================================================
   OCTOMAC AGRO v0.1.1 — Cards superiores mais compactos
   Alteração exclusiva da página Visão Geral
   ========================================================= */
.main-dashboard .overview-kpis{
  gap:10px!important;
  margin:0 0 9px!important;
}
.main-dashboard .overview-kpis .kpi{
  min-height:62px!important;
  height:62px!important;
  padding:7px 11px!important;
  gap:11px!important;
}
.main-dashboard .overview-kpis .kpi-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:10px!important;
}
.main-dashboard .overview-kpis .kpi strong{
  font-size:23px!important;
  line-height:1!important;
  margin:1px 0 2px!important;
}
.main-dashboard .overview-kpis .kpi span,
.main-dashboard .overview-kpis .kpi small{
  line-height:1.15!important;
}

/* Mantém boa leitura em telas menores sem comprimir demais os cartões. */
@media(max-width:1200px){
  .main-dashboard .overview-kpis .kpi{
    min-height:68px!important;
    height:auto!important;
  }
}

/* ==========================================================
   OCTOMAC AGRO v0.2.1 · Polimento visual
   Mantém a identidade original e adiciona acabamento premium.
   ========================================================== */

:root{
 --octomac-cyan:#36c9ff;
 --octomac-mint:#31e6a1;
 --octomac-glow:0 0 22px rgba(54,201,255,.18);
}

body::before{
 content:"";
 position:fixed;
 inset:0;
 pointer-events:none;
 background:
  radial-gradient(circle at 78% -10%,rgba(36,115,235,.13),transparent 36%),
  radial-gradient(circle at 15% 110%,rgba(49,230,161,.07),transparent 34%);
 z-index:-1;
}

.brand-logo{
 position:relative;
 overflow:hidden;
 isolation:isolate;
}
.brand-logo::before{
 content:"";
 position:absolute;
 inset:-45%;
 background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
 transform:translateX(-65%) rotate(8deg);
 animation:octomacLogoShine 7s ease-in-out infinite;
 z-index:-1;
}
.brand-logo span{position:relative;z-index:1}

.sidebar nav a{
 position:relative;
 overflow:hidden;
 transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.sidebar nav a::after{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(90deg,rgba(54,201,255,.12),transparent 72%);
 opacity:0;
 transition:opacity .18s ease;
 pointer-events:none;
}
.sidebar nav a:hover{transform:translateX(2px)}
.sidebar nav a:hover::after,.sidebar nav a.active::after{opacity:1}
.sidebar nav a.active{
 box-shadow:inset 3px 0 0 var(--octomac-cyan),0 7px 18px rgba(0,0,0,.12);
}
.nav-icon{
 width:22px!important;
 height:22px;
 display:grid;
 place-items:center;
 flex:0 0 22px;
 color:#9fc4f6;
}
.nav-icon svg{
 width:17px;
 height:17px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.8;
 stroke-linecap:round;
 stroke-linejoin:round;
}
.sidebar nav a.active .nav-icon{color:#56d7ff;filter:drop-shadow(0 0 5px rgba(54,201,255,.42))}
.nav-label{width:auto!important;text-align:left!important}

.sidebar-user>div{display:grid;gap:3px}
.sidebar-user>div span{font-size:9px;letter-spacing:.12em;color:#86a8d2}
.sidebar-user>div strong{font-size:11px}

.page-header{
 position:relative;
 overflow:hidden;
 box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.page-header::before{
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:1px;
 background:linear-gradient(90deg,transparent,rgba(54,201,255,.65),transparent);
}

.status-pill.online i{
 position:relative;
 box-shadow:0 0 0 0 rgba(49,230,161,.5);
 animation:octomacStatusPulse 2.2s ease-out infinite;
}

.btn{
 transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.primary:hover{box-shadow:0 8px 22px rgba(47,115,235,.28)}

.kpi,.panel,.device-card,.toolbar,.page-actions{
 transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.kpi:hover,.device-card:hover{
 transform:translateY(-2px);
 border-color:rgba(54,201,255,.32);
 box-shadow:0 14px 32px rgba(0,0,0,.16),var(--octomac-glow);
}

@keyframes octomacLogoShine{
 0%,72%{transform:translateX(-65%) rotate(8deg)}
 88%,100%{transform:translateX(65%) rotate(8deg)}
}
@keyframes octomacStatusPulse{
 0%{box-shadow:0 0 0 0 rgba(49,230,161,.45)}
 70%{box-shadow:0 0 0 7px rgba(49,230,161,0)}
 100%{box-shadow:0 0 0 0 rgba(49,230,161,0)}
}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* =========================================================
   OCTOMAC AGRO v0.7.0 — ADXL345 / Estabilidade da máquina
   ========================================================= */

.telemetry-kpis-adxl{
  grid-template-columns:repeat(5,minmax(150px,1fr));
}

.adxl-safety-strip{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  margin:14px 0;
  border:1px solid #294762;
  border-radius:12px;
  background:#294762;
}

.adxl-safety-strip>div{
  min-width:0;
  padding:11px 13px;
  background:#0b2035;
}

.adxl-safety-strip span{
  display:block;
  color:#829bb7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.adxl-safety-strip strong{
  display:block;
  margin-top:4px;
  color:#eef7ff;
  font-size:16px;
}

.adxl-safety-strip.normal{
  border-color:rgba(33,208,122,.42);
  background:rgba(33,208,122,.42);
}

.adxl-safety-strip.normal>div:first-child strong,
.adxl-badge.normal,
.adxl-text.normal{
  color:#32dc8a;
}

.adxl-safety-strip.warning{
  border-color:rgba(245,158,11,.60);
  background:rgba(245,158,11,.60);
}

.adxl-safety-strip.warning>div:first-child strong,
.adxl-badge.warning,
.adxl-text.warning{
  color:#ffb52e;
}

.adxl-safety-strip.critical{
  border-color:rgba(255,77,95,.72);
  background:rgba(255,77,95,.72);
  box-shadow:0 0 0 1px rgba(255,77,95,.18),0 0 22px rgba(255,77,95,.12);
}

.adxl-safety-strip.critical>div:first-child strong,
.adxl-badge.critical,
.adxl-text.critical{
  color:#ff6978;
}

.adxl-safety-strip.offline{
  opacity:.78;
}

.adxl-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:6px 9px;
  border-radius:999px;
  background:#172d44;
  color:#9fb2c7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}

.adxl-badge.normal{background:rgba(33,208,122,.12)}
.adxl-badge.warning{background:rgba(245,158,11,.14)}
.adxl-badge.critical{background:rgba(255,77,95,.14)}
.adxl-badge.offline{background:rgba(139,157,177,.12);color:#91a3b6}

.device-card-adxl.warning{
  border-color:rgba(245,158,11,.48);
}

.device-card-adxl.critical{
  border-color:rgba(255,77,95,.65);
  animation:octomacCriticalPulse 1.5s ease-in-out infinite;
}

.adxl-text{
  font-size:22px!important;
}

@keyframes octomacCriticalPulse{
  0%,100%{box-shadow:0 10px 28px rgba(0,0,0,.16)}
  50%{box-shadow:0 0 0 2px rgba(255,77,95,.22),0 10px 32px rgba(255,77,95,.18)}
}

@media(max-width:1250px){
  .telemetry-kpis-adxl{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:760px){
  .telemetry-kpis-adxl{grid-template-columns:1fr 1fr}
  .adxl-safety-strip{grid-template-columns:1fr 1fr}
}


/* v0.8.3c — o estado visual do LoRa é controlado pelo JavaScript */
.main-dashboard .link-card .signal-bars i{
  background-image:none;
  transition:background .18s ease,opacity .18s ease,box-shadow .18s ease;
}


/* === OCTOMAC AGRO - Meteorologia v0.1 === */
.meteo-statusbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:16px 18px;border:1px solid #1d405f;border-radius:16px;background:linear-gradient(135deg,#102842,#0a1d32)}
.meteo-statusbar h2{margin:3px 0 2px;font-size:19px}.meteo-statusbar p{margin:0;color:#8faac3;font-size:12px}.section-label{font-size:10px;letter-spacing:.12em;font-weight:900;color:#80b9ee}.device-status.waiting{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;border:1px solid rgba(245,158,11,.42);color:#ffbd42;background:rgba(245,158,11,.08);font-size:10px;font-weight:900;white-space:nowrap}.device-status.waiting i{width:7px;height:7px;border-radius:50%;background:#ffbd42}
.meteo-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}.meteo-kpi{min-width:0;padding:14px;background:#10263e;border:1px solid #1c405f;border-radius:14px}.meteo-kpi span,.radiation-grid span,.wind-data span,.rain-grid span,.atmo-grid span{display:block;color:#8fb0cf;font-size:10px}.meteo-kpi strong{display:block;margin:7px 0 5px;font-size:22px}.meteo-kpi strong small,.radiation-grid strong small{font-size:11px;color:#9cb2c7}.meteo-kpi em,.radiation-grid em,.atmo-grid em{display:block;color:#708da8;font-size:9px;font-style:normal}
.meteo-grid-main{display:grid;grid-template-columns:1.55fr .75fr;gap:12px;margin-bottom:12px}.meteo-grid-secondary{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin-bottom:12px}.meteo-panel{background:#10263e!important;border-color:#1c405f!important}.meteo-panel .panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.meteo-panel .panel-title span{font-size:10px;color:#7daedf;font-weight:900;letter-spacing:.08em}.meteo-panel .panel-title h2{margin:3px 0 0;font-size:15px}.meteo-tag{padding:6px 9px;border:1px solid #28577d;border-radius:999px;background:#0a1d32;color:#86c3fa!important;letter-spacing:0!important}.meteo-tag.ai{border-color:rgba(38,211,139,.38);color:#2bdc93!important;background:rgba(38,211,139,.07)}
.radiation-grid{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:9px}.radiation-grid>div,.wind-data>div,.rain-grid>div,.atmo-grid>div{padding:13px;border:1px solid #193b59;border-radius:12px;background:#0a1d32}.radiation-grid strong{display:block;font-size:19px;margin:6px 0}.meter{height:5px;background:#17334d;border-radius:99px;overflow:hidden;margin:9px 0}.meter i{display:block;height:100%;background:#2bdc93;border-radius:99px}
.wind-wrap{display:grid;grid-template-columns:125px 1fr;gap:14px;align-items:center}.wind-compass{width:118px;height:118px;border:1px solid #28577d;border-radius:50%;position:relative;background:radial-gradient(circle,#102b46,#081a2d);margin:auto}.wind-compass span{position:absolute;font-size:9px;color:#7398b8;font-weight:900}.wind-compass span:nth-child(1){top:7px;left:54px}.wind-compass span:nth-child(2){right:8px;top:53px}.wind-compass span:nth-child(3){bottom:7px;left:54px}.wind-compass span:nth-child(4){left:8px;top:53px}.wind-compass b{position:absolute;inset:39px;display:grid;place-items:center;border-radius:50%;background:#173a59;color:#7fa5c6;font-size:18px}.wind-data{display:grid;gap:7px}.wind-data strong,.rain-grid strong,.atmo-grid strong{display:block;margin-top:5px;font-size:15px}
.rain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chart-placeholder{height:105px;margin-top:10px;border:1px dashed #28506f;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7594af;text-align:center}.chart-placeholder span{font-size:11px;font-weight:900}.chart-placeholder b{font-size:9px;font-weight:400;margin-top:5px}.atmo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.air-state{display:flex;align-items:center;gap:9px;margin-top:10px;padding:10px 12px;border-radius:11px;background:#0a1d32;border:1px solid #193b59}.air-state i{width:9px;height:9px;border-radius:50%;background:#71879b}.air-state span{display:block;color:#7898b4;font-size:9px}.air-state strong{font-size:11px}
.meteo-intelligence{margin-bottom:18px}.intel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.intel-grid>div{padding:13px;border:1px solid #193b59;border-radius:12px;background:#0a1d32}.intel-grid>div>span{font-size:20px}.intel-grid strong{display:block;margin:8px 0 5px;font-size:12px}.intel-grid p{margin:0;color:#86a2bb;font-size:10px;line-height:1.45}.intel-note{margin-top:10px;padding:9px 11px;border-left:3px solid #2bdc93;background:rgba(38,211,139,.05);color:#7fa2bd;font-size:9px}
@media(max-width:1300px){.meteo-kpis{grid-template-columns:repeat(3,1fr)}.radiation-grid{grid-template-columns:repeat(2,1fr)}.intel-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.meteo-grid-main,.meteo-grid-secondary{grid-template-columns:1fr}.meteo-kpis{grid-template-columns:repeat(2,1fr)}.atmo-grid,.rain-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.meteo-statusbar{align-items:flex-start;flex-direction:column}.meteo-kpis,.radiation-grid,.intel-grid{grid-template-columns:1fr}.wind-wrap{grid-template-columns:1fr}.atmo-grid,.rain-grid{grid-template-columns:1fr}}


/* =========================================================
   TESTE MENU MOBILE — VISÃO GERAL v0.1.1
   ========================================================= */

.overview-mobile-menu{
  display:none;
}

@media(max-width:760px){
  /* Botão incorporado à primeira caixa, sem barra branca separada. */
  .overview-topbar>div:first-child{
    position:relative;
  }

  .overview-mobile-menu{
    width:auto!important;
    min-width:78px;
    height:34px;
    margin:0 0 8px 0;
    padding:0 11px!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid #2a5877!important;
    border-radius:8px!important;
    background:#0b2942!important;
    color:#eaf7ff!important;
    box-shadow:none!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.09em;
    line-height:1!important;
    cursor:pointer;
  }

  .overview-menu-symbol{
    font-size:17px;
    line-height:1;
  }

  /* O menu lateral fica acima do Leaflet e de todos os controles do mapa. */
  .sidebar{
    z-index:5000!important;
    background:linear-gradient(180deg,#0d2f68 0%,#0a2859 100%)!important;
    box-shadow:18px 0 42px rgba(0,0,0,.42)!important;
  }

  .sidebar.open{
    transform:translateX(0)!important;
  }

  .leaflet-pane,
  .leaflet-top,
  .leaflet-bottom,
  .leaflet-control{
    z-index:400!important;
  }

  .leaflet-popup-pane{
    z-index:700!important;
  }

  /* Evita que qualquer parte do mapa ultrapasse o painel lateral aberto. */
  body:has(.sidebar.open) .main-dashboard .map-box{
    pointer-events:none;
  }
}


/* =========================================================
   TESTE MENU MOBILE — VISÃO GERAL v0.1.2
   ========================================================= */
@media(max-width:760px){
  .overview-mobile-menu{
    -webkit-appearance:none!important;
    appearance:none!important;
    min-width:72px!important;
    padding:0 14px!important;
    background:#0b2942!important;
    background-color:#0b2942!important;
    color:#eef8ff!important;
  }

  .overview-mobile-menu:hover,
  .overview-mobile-menu:focus,
  .overview-mobile-menu:active{
    background:#0b2942!important;
    background-color:#0b2942!important;
    color:#eef8ff!important;
  }

  #sidebar.sidebar,
  .sidebar{
    position:fixed!important;
    z-index:2147483000!important;
    isolation:isolate!important;
  }

  .main-dashboard,
  .main-dashboard .overview-main-grid,
  .main-dashboard .panel,
  .main-dashboard .map-box,
  .main-dashboard .leaflet-container{
    position:relative!important;
    z-index:0!important;
  }

  .main-dashboard .leaflet-pane,
  .main-dashboard .leaflet-top,
  .main-dashboard .leaflet-bottom,
  .main-dashboard .leaflet-control,
  .main-dashboard .leaflet-popup-pane,
  .main-dashboard .leaflet-tooltip-pane{
    z-index:auto!important;
  }
}


/* =========================================================
   MENU MOBILE — MAPA OPERACIONAL v0.1.1
   Caixa azul superior igual ao padrão aprovado.
   ========================================================= */

.map-mobile-topbox{
  display:none;
}

@media(max-width:760px){
  .map-mobile-topbox{
    min-height:54px;
    margin:0 0 10px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #1b4667;
    border-radius:11px;
    background:linear-gradient(135deg,#0b2942,#081f35);
    box-shadow:0 7px 18px rgba(0,0,0,.14);
  }

  .map-mobile-menu-button{
    -webkit-appearance:none!important;
    appearance:none!important;
    flex:0 0 auto;
    width:auto!important;
    min-width:72px!important;
    height:34px!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #2a5877!important;
    border-radius:8px!important;
    background:#0b2942!important;
    background-color:#0b2942!important;
    color:#eef8ff!important;
    box-shadow:none!important;
    font:900 10px/1 Inter,Segoe UI,Arial,sans-serif!important;
    letter-spacing:.10em!important;
  }

  .map-mobile-topbox>div{
    min-width:0;
  }

  .map-mobile-topbox span,
  .map-mobile-topbox strong{
    display:block;
  }

  .map-mobile-topbox span{
    color:#82a9c8;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
  }

  .map-mobile-topbox strong{
    margin-top:3px;
    color:#f2f8fd;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* O mapa ocupa o restante da tela após a caixa superior. */
  .fullscreen-map-shell{
    min-height:calc(100vh - 86px)!important;
  }

  /* Menu lateral acima de todo o Leaflet. */
  #sidebar.sidebar,
  .sidebar{
    position:fixed!important;
    z-index:2147483000!important;
    isolation:isolate!important;
  }

  #sidebar.sidebar.open,
  .sidebar.open{
    transform:translateX(0)!important;
  }

  .fullscreen-map-shell,
  .map-city-full,
  .fullscreen-map-toolbar,
  .fleet-overlay,
  .map-live-strip,
  .leaflet-container{
    position:relative;
    z-index:0!important;
  }

  .fullscreen-map-toolbar{z-index:700!important}
  .fleet-overlay{z-index:650!important}
  .map-live-strip{z-index:640!important}

  .leaflet-pane,
  .leaflet-top,
  .leaflet-bottom,
  .leaflet-control,
  .leaflet-popup-pane,
  .leaflet-tooltip-pane{
    z-index:auto!important;
  }
}


/* =========================================================
   VISÃO GERAL — MENU MOBILE PADRÃO MAPA/ROTAS v0.1.0
   ========================================================= */

/* Letra O maior dentro do logo OCTOMAC. */
.brand-logo span{
  font-size:29px!important;
  line-height:1!important;
  font-weight:900!important;
}

@media(max-width:760px){
  /* Primeira linha: título à esquerda e MENU à direita. */
  .overview-topbar{
    grid-template-columns:minmax(0,1fr) 74px!important;
    align-items:center!important;
    gap:10px!important;
  }

  .overview-title-block{
    min-width:0!important;
    grid-column:1!important;
    grid-row:1!important;
  }

  .overview-mobile-menu{
    -webkit-appearance:none!important;
    appearance:none!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:74px!important;
    min-width:74px!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #2a5877!important;
    border-radius:8px!important;
    background:#0b2942!important;
    background-color:#0b2942!important;
    color:#eef8ff!important;
    box-shadow:none!important;
    font:900 10px/1 Inter,Segoe UI,Arial,sans-serif!important;
    letter-spacing:.08em!important;
    z-index:2147483600!important;
  }

  .overview-services{
    grid-column:1/-1!important;
    grid-row:2!important;
    justify-content:flex-start!important;
  }

  .overview-score{
    grid-column:1/-1!important;
    grid-row:3!important;
  }

  /* Mesma largura delicada aprovada nas páginas Mapa e Rotas. */
  body.overview-menu-active #sidebar.sidebar,
  body.overview-menu-active .sidebar{
    width:238px!important;
    max-width:78vw!important;
  }

  /* MENU permanece acessível à direita quando a barra estiver aberta. */
  body.overview-menu-active .overview-mobile-menu{
    position:fixed!important;
    top:11px!important;
    right:7px!important;
    left:auto!important;
    z-index:2147483640!important;
    background:#123b5e!important;
    border-color:#3a7195!important;
  }

  #sidebar.sidebar,
  .sidebar{
    position:fixed!important;
    z-index:2147483000!important;
    isolation:isolate!important;
  }

  #sidebar.sidebar.open,
  .sidebar.open{
    transform:translateX(0)!important;
  }

  /* Mapa e controles permanecem atrás da barra lateral. */
  .main-dashboard,
  .main-dashboard .overview-main-grid,
  .main-dashboard .panel,
  .main-dashboard .map-box,
  .main-dashboard .leaflet-container{
    position:relative!important;
    z-index:0!important;
  }

  .main-dashboard .leaflet-pane,
  .main-dashboard .leaflet-top,
  .main-dashboard .leaflet-bottom,
  .main-dashboard .leaflet-control,
  .main-dashboard .leaflet-popup-pane,
  .main-dashboard .leaflet-tooltip-pane{
    z-index:auto!important;
  }
}


/* LOGO OCTOMAC — correção v0.1.1 */
.sidebar .brand-logo{
  width:48px!important;
  height:48px!important;
}

.sidebar .brand-logo span{
  display:block!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:900!important;
  transform:translateY(-1px);
}


/* OCTOAGRO v0.9.3 — identidade visual */
.brand.brand-octoagro{padding:8px 4px 22px;display:flex;align-items:center;justify-content:center}
.octoagro-sidebar-logo{display:block;width:100%;max-width:185px;height:auto;object-fit:contain}
.login-brand.login-brand-octoagro{display:flex;justify-content:center;align-items:center;margin-bottom:24px}
.login-brand-octoagro img{display:block;width:min(330px,82vw);height:auto;object-fit:contain}
@media(max-width:760px){.octoagro-sidebar-logo{max-width:170px}}

/* =========================================================
   OCTOAGRO v0.9.4 — LOGO LATERAL MAIS COMPACTO
   Reduz somente a área vertical da marca no menu lateral.
   ========================================================= */
.brand.brand-octoagro{
  padding:2px 4px 12px!important;
  min-height:0!important;
}
.octoagro-sidebar-logo{
  width:100%!important;
  max-width:190px!important;
  height:auto!important;
  margin:0 auto!important;
}
.menu-label{
  margin-top:16px!important;
}
@media(max-width:760px){
  .brand.brand-octoagro{padding:2px 4px 10px!important;}
  .octoagro-sidebar-logo{max-width:175px!important;}
  .menu-label{margin-top:14px!important;}
}

/* =========================================================
   OCTOAGRO v0.9.5 — LOGO LATERAL AINDA MAIS COMPACTO
   Diminui novamente a altura do bloco superior sem alterar menus.
   ========================================================= */
.brand.brand-octoagro{
  padding:0 4px 6px!important;
  min-height:0!important;
}
.octoagro-sidebar-logo{
  max-width:184px!important;
  margin:-3px auto -2px!important;
}
.menu-label{
  margin-top:9px!important;
}
@media(max-width:760px){
  .brand.brand-octoagro{padding:0 4px 5px!important;}
  .octoagro-sidebar-logo{max-width:170px!important;margin:-2px auto -1px!important;}
  .menu-label{margin-top:8px!important;}
}
\n\n/* =========================================================\n   OCTOAGRO v0.9.6 — BLOCO DO LOGO COM ALTURA FORCADA\n   Agora reduzimos a caixa real do cabeçalho lateral, não só margens.\n   ========================================================= */\n.sidebar{\n  padding-top:10px!important;\n}\n.sidebar .brand.brand-octoagro{\n  height:82px!important;\n  min-height:82px!important;\n  max-height:82px!important;\n  padding:2px 0 8px!important;\n  margin:0!important;\n  overflow:hidden!important;\n  flex:0 0 82px!important;\n  display:flex!important;\n  align-items:center!important;\n  justify-content:center!important;\n}\n.sidebar .octoagro-sidebar-logo{\n  width:184px!important;\n  height:54px!important;\n  max-width:184px!important;\n  max-height:54px!important;\n  object-fit:contain!important;\n  margin:0 auto!important;\n}\n.sidebar .menu-label{\n  margin-top:10px!important;\n}\n@media(max-width:760px){\n  .sidebar{padding-top:8px!important;}\n  .sidebar .brand.brand-octoagro{\n    height:76px!important;min-height:76px!important;max-height:76px!important;flex-basis:76px!important;\n  }\n  .sidebar .octoagro-sidebar-logo{width:170px!important;height:50px!important;max-height:50px!important;}\n  .sidebar .menu-label{margin-top:8px!important;}\n}\n
/* =========================================================
   OCTOAGRO v0.9.13 — INTERAÇÃO DOS MAPAS NO MOBILE
   Restaura a ordem nativa das camadas Leaflet e permite tocar
   nos veículos mesmo quando o painel Rede Rural está sobre o mapa.
   ========================================================= */
@media(max-width:760px){
  /* Ordem oficial das panes do Leaflet. Regras antigas com z-index:auto
     faziam tile/overlay/marker/popup disputar a mesma camada no celular. */
  body .main-dashboard .leaflet-tile-pane,
  body .fullscreen-map-shell .leaflet-tile-pane{z-index:200!important}

  body .main-dashboard .leaflet-overlay-pane,
  body .fullscreen-map-shell .leaflet-overlay-pane{z-index:400!important}

  body .main-dashboard .leaflet-shadow-pane,
  body .fullscreen-map-shell .leaflet-shadow-pane{z-index:500!important}

  body .main-dashboard .leaflet-marker-pane,
  body .fullscreen-map-shell .leaflet-marker-pane{z-index:600!important}

  body .main-dashboard .leaflet-tooltip-pane,
  body .fullscreen-map-shell .leaflet-tooltip-pane{z-index:650!important}

  body .main-dashboard .leaflet-popup-pane,
  body .fullscreen-map-shell .leaflet-popup-pane{z-index:700!important}

  body .main-dashboard .leaflet-top,
  body .main-dashboard .leaflet-bottom,
  body .fullscreen-map-shell .leaflet-top,
  body .fullscreen-map-shell .leaflet-bottom{z-index:800!important}

  /* Mantém os ícones acima dos tiles e garante alvo confortável ao toque. */
  body .octomac-vehicle-marker-wrap{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  /* O painel é transparente: áreas vazias deixam o toque chegar ao mapa.
     Apenas seus botões continuam capturando o toque. */
  body .fullscreen-map-shell .fleet-overlay{
    pointer-events:none!important;
  }
  body .fullscreen-map-shell .fleet-overlay button,
  body .fullscreen-map-shell .fleet-overlay a,
  body .fullscreen-map-shell .fleet-overlay input,
  body .fullscreen-map-shell .fleet-overlay select{
    pointer-events:auto!important;
  }

  /* Popup sempre acima do mapa, sem bloquear o restante da página. */
  body .leaflet-popup{
    pointer-events:auto!important;
  }
}


/* OCTOAGRO v0.9.15 - popup comercial compacto dos tratores */
.octomac-client-popup .leaflet-popup-content-wrapper{
  background:#fff!important;
  color:#27313a!important;
  border:0!important;
  border-radius:11px!important;
  box-shadow:0 7px 22px rgba(0,0,0,.28)!important;
  padding:0!important;
  overflow:hidden!important;
}
.octomac-client-popup .leaflet-popup-content{
  margin:0!important;
  width:auto!important;
  min-width:190px!important;
}
.octomac-client-popup .leaflet-popup-tip{background:#fff!important}
.octomac-client-popup .leaflet-popup-close-button{
  color:#59636c!important;
  font-size:18px!important;
  top:3px!important;
  right:5px!important;
  z-index:5!important;
}
.client-map-popup{
  min-width:190px;
  padding:11px 14px 11px 14px;
  font:500 12px/1.42 Inter,Segoe UI,Arial,sans-serif;
  color:#39434c;
  background:#fff;
}
.client-map-popup-title{
  display:block;
  padding-right:18px;
  margin:0 0 4px;
  color:#26313a;
  font-size:14px;
  font-weight:800;
}
.client-map-popup span{display:block;white-space:nowrap}
@media(max-width:760px){
  .octomac-client-popup{z-index:9999!important}
  .octomac-client-popup .leaflet-popup-content{min-width:184px!important}
  .client-map-popup{min-width:184px;padding:10px 12px;font-size:12px}
  .client-map-popup-title{font-size:14px}
}

/* OCTOAGRO v0.9.35 — sidebar mobile com rolagem vertical */
@media (max-width:760px){
  #sidebar.sidebar,
  .sidebar{
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .sidebar nav{
    gap:2px;
  }
  .sidebar nav a{
    padding:9px 12px;
  }
  .sidebar-user{
    margin-top:14px;
    flex:0 0 auto;
  }
}

/* =========================================================
   OCTOAGRO v0.9.36 — SIDEBAR MOBILE: ROLAGEM DO MENU INTEIRO
   A barra lateral completa (logo + menu + usuário) passa a rolar.
   ========================================================= */
@media (max-width:760px){
  html,body{overscroll-behavior-x:none}

  #sidebar.sidebar,
  .sidebar{
    display:block!important;
    top:0!important;
    bottom:auto!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:8px 16px 16px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }

  .sidebar .brand.brand-octoagro{
    display:flex!important;
    width:100%!important;
    flex:none!important;
  }

  .sidebar .menu-label,
  .sidebar nav,
  .sidebar .sidebar-user{
    position:static!important;
    flex:none!important;
  }

  .sidebar nav{
    display:grid!important;
    gap:2px!important;
    overflow:visible!important;
    max-height:none!important;
  }

  .sidebar nav a{
    padding:9px 12px!important;
  }

  .sidebar-user{
    margin-top:14px!important;
    padding-bottom:10px!important;
  }
}

/* =========================================================
   OCTOAGRO v0.9.37 — SIDEBAR MOBILE EM MODO HORIZONTAL
   Celulares em landscape normalmente passam de 760px de largura,
   por isso a regra mobile anterior não era aplicada.
   ========================================================= */
@media (orientation:landscape) and (max-height:600px) and (max-width:1100px){
  #sidebar.sidebar,
  .sidebar{
    display:block!important;
    top:0!important;
    bottom:auto!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    padding:6px 14px 14px!important;
  }

  .sidebar .brand.brand-octoagro{
    position:static!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    flex:none!important;
    padding:0 0 5px!important;
    overflow:hidden!important;
  }

  .sidebar .octoagro-sidebar-logo{
    width:152px!important;
    height:44px!important;
    max-width:152px!important;
    max-height:44px!important;
  }

  .sidebar .menu-label,
  .sidebar nav,
  .sidebar .sidebar-user{
    position:static!important;
    flex:none!important;
  }

  .sidebar .menu-label{
    margin:5px 10px 5px!important;
  }

  .sidebar nav{
    display:grid!important;
    gap:1px!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .sidebar nav a{
    padding:7px 10px!important;
    min-height:34px!important;
  }

  .sidebar-user{
    margin-top:8px!important;
    padding:10px 8px 8px!important;
  }
}

/* =========================================================
   OCTOAGRO v0.9.38 — SIDEBAR: ROLAGEM REAL INDEPENDENTE
   Mantém a barra azul fixa e faz o conteúdo interno dela rolar,
   inclusive em celulares landscape com viewport CSS largo.
   ========================================================= */
#sidebar.sidebar,
.sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable;
}

/* Evita que os blocos internos encolham para caber na altura fixa. */
.sidebar .brand,
.sidebar .brand.brand-octoagro,
.sidebar .menu-label,
.sidebar nav,
.sidebar .sidebar-user{
  flex-shrink:0!important;
}

.sidebar nav{
  min-height:max-content!important;
}

/* Em telas baixas (principalmente celular horizontal), garante que
   a sidebar use exatamente a altura visível e role por conta própria. */
@media (max-height:900px){
  #sidebar.sidebar,
  .sidebar{
    top:0!important;
    bottom:auto!important;
    height:100dvh!important;
    max-height:100dvh!important;
  }
}