:root {
    --bg: #eef3f8;
    --panel: #ffffff;
    --text: #102238;
    --muted: #65758a;
    --border: #d9e2ec;
    --primary: #0d5bd7;
    --primary-dark: #0846a5;
    --success: #16865b;
    --warning: #b26a00;
    --danger: #bc2f3b;
    --shadow: 0 12px 34px rgba(15, 40, 75, .12);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
.topbar {
    min-height: 64px;
    background: #0d2138;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 22px;
}
.brand { display: flex; gap: 11px; align-items: center; font-weight: 750; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; background: #1569e8; color: white;
}
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.nav-links a { color: #dce9fb; padding: 8px 10px; border-radius: 9px; }
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.1); text-decoration: none; }
.page { width: min(1180px, calc(100% - 28px)); margin: 24px auto 36px; }
.page-narrow { width: min(760px, calc(100% - 28px)); margin: 28px auto; }
.card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: var(--shadow); padding: 22px;
}
.card + .card { margin-top: 18px; }
h1, h2, h3 { margin-top: 0; line-height: 1.18; }
h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h2 { font-size: 1.25rem; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-weight: 650; font-size: .94rem; }
.field input, .field select, .field textarea {
    width: 100%; border: 1px solid #bdcad8; border-radius: 11px;
    padding: 11px 12px; background: #fff; color: var(--text);
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 3px solid rgba(13,91,215,.16); border-color: var(--primary);
}
.help { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.btn {
    border: 0; border-radius: 11px; padding: 11px 16px; cursor: pointer;
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: #e8eef6; color: #20364f; }
.btn-danger { background: #ffe8eb; color: var(--danger); }
.alert { border-radius: 12px; padding: 12px 14px; border: 1px solid; margin-bottom: 16px; line-height: 1.45; }
.alert-success { background: #ebfaf4; border-color: #a9dfca; color: #116b49; }
.alert-warning { background: #fff7e7; border-color: #ecd097; color: #855000; }
.alert-danger { background: #fff0f1; border-color: #efb5bb; color: #922530; }
.alert-info { background: #edf5ff; border-color: #b9d3f5; color: #184d8e; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.check-list li { display: flex; gap: 9px; align-items: flex-start; }
.check-ok { color: var(--success); font-weight: 800; }
.check-bad { color: var(--danger); font-weight: 800; }
.status-pill {
    display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
    padding: 7px 11px; font-size: .86rem; font-weight: 700; background: #e6edf5; color: #354a62;
}
.status-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.status-pill.online { background: #e8f8f2; color: var(--success); }
.status-pill.connecting { background: #fff4db; color: var(--warning); }
.status-pill.offline { background: #ffe9eb; color: var(--danger); }
.dashboard { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; }
.sidebar { display: grid; gap: 12px; align-content: start; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { background: #f5f8fc; border: 1px solid var(--border); border-radius: 13px; padding: 12px; }
.metric strong { display: block; font-size: 1.35rem; margin-top: 3px; }
.vehicle-list { display: grid; gap: 10px; max-height: 530px; overflow: auto; padding-right: 3px; }
.vehicle-card {
    border: 1px solid var(--border); border-radius: 14px; padding: 13px; background: #fff; cursor: pointer;
}
.vehicle-card:hover, .vehicle-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,91,215,.10); }
.vehicle-card h3 { font-size: 1rem; margin: 0; }
.vehicle-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vehicle-card .vehicle-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; font-size: .86rem; color: var(--muted); }
.map-panel { min-width: 0; }
#map { height: 650px; width: 100%; border-radius: 15px; border: 1px solid var(--border); background: #dfe8f1; }
/* Nome permanente exibido acima de cada marcador no mapa. */
.leaflet-tooltip.vehicle-name-label {
    background: #102238;
    color: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 40, 75, .24);
    font-size: .79rem;
    font-weight: 800;
    line-height: 1.15;
    padding: 6px 9px;
    pointer-events: none;
    white-space: nowrap;
}
.leaflet-tooltip-top.vehicle-name-label::before {
    border-top-color: #102238;
}
.map-placeholder { display: grid; place-items: center; height: 650px; text-align: center; padding: 25px; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; }
.code-box { background: #102238; color: #eaf3ff; border-radius: 12px; padding: 13px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88rem; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(430px, 100%); }
.login-remember { margin-top: 14px; }
.logo-large { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 1.55rem; margin-bottom: 15px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-size: .86rem; color: var(--muted); }
.hidden { display: none !important; }
.footer { text-align: center; color: var(--muted); font-size: .84rem; padding: 15px; }
@media (max-width: 900px) {
    .dashboard { grid-template-columns: 1fr; }
    #map, .map-placeholder { height: 520px; }
    .vehicle-list { max-height: none; }
}
@media (max-width: 650px) {
    .grid-2, .grid-3, .metric-row { grid-template-columns: 1fr; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .page { width: min(100% - 18px, 1180px); margin-top: 12px; }
    .card { padding: 16px; border-radius: 13px; }
    #map, .map-placeholder { height: 440px; }
}
.inline-check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.inline-check input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; }
.inline-form { display: inline; margin: 0; }
.compact-actions { margin-top: 0; gap: 7px; }
.compact-actions .btn { padding: 8px 11px; font-size: .88rem; }
.btn:disabled { opacity: .62; cursor: wait; }
code { overflow-wrap: anywhere; }

/* Configuração de nomes amigáveis dos veículos. */
.vehicle-alias-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 18px;
}
.vehicle-alias-section h3 { margin-bottom: 4px; }
.vehicle-alias-list { display: grid; gap: 12px; }
.vehicle-alias-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
    align-items: end;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 14px;
    background: #f8fafc;
}
.vehicle-alias-identification { display: grid; gap: 4px; min-width: 0; }
.vehicle-alias-identification code { word-break: break-all; }
@media (max-width: 650px) {
    .vehicle-alias-row { grid-template-columns: 1fr; align-items: stretch; }
}

.vehicle-alias-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.vehicle-config-delete { white-space: nowrap; margin-bottom: 1px; }
@media (max-width: 680px) {
    .vehicle-alias-controls { grid-template-columns: 1fr; align-items: stretch; }
    .vehicle-config-delete { width: 100%; }
}


/* Modo de tela cheia do mapa. Ocupa toda a altura útil da tela. */
.map-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.map-fullscreen-button {
    padding: 8px 11px;
    font-size: .88rem;
    white-space: nowrap;
}
.map-fullscreen-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.map-panel:fullscreen,
.map-panel:-webkit-full-screen,
.map-panel.map-fullscreen-fallback {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px !important;
    background: var(--panel);
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
}
.map-panel:fullscreen::backdrop,
.map-panel:-webkit-full-screen::backdrop {
    background: var(--panel);
}
.map-panel:fullscreen .map-panel-head,
.map-panel:-webkit-full-screen .map-panel-head,
.map-panel.map-fullscreen-fallback .map-panel-head {
    flex: 0 0 auto;
}
.map-panel:fullscreen #map,
.map-panel:-webkit-full-screen #map,
.map-panel.map-fullscreen-fallback #map {
    display: block !important;
    align-self: stretch;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 12px;
}
.map-panel:fullscreen .map-placeholder,
.map-panel:-webkit-full-screen .map-placeholder,
.map-panel.map-fullscreen-fallback .map-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}
.map-panel.map-fullscreen-fallback {
    z-index: 10000;
}
html.map-fullscreen-fallback-active,
body.map-fullscreen-fallback-active {
    overflow: hidden !important;
}
@media (max-width: 650px) {
    .map-panel-head { align-items: flex-start; }
    .map-panel-actions { align-items: flex-end; flex-direction: column; gap: 7px; }
    .map-fullscreen-button { padding: 8px 10px; }
    .map-panel:fullscreen,
    .map-panel:-webkit-full-screen,
    .map-panel.map-fullscreen-fallback { padding: 8px !important; }
}

/* Versão 3.3.0 — PWA, restauração e melhorias do mapa. */
.btn-warning { background: #fff1cf; color: #805000; }
.btn-warning:hover { background: #ffe5a8; text-decoration: none; }

.pwa-card [data-pwa-install] { width: 100%; }
.pwa-card [data-pwa-install][hidden] { display: none !important; }

.map-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: -2px 0 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f7f9fc;
}
.map-style-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 700;
}
.map-style-control select {
    min-width: 112px;
    border: 1px solid #bdcad8;
    border-radius: 9px;
    padding: 8px 28px 8px 10px;
    background: #fff;
    color: var(--text);
}
.map-toolbar .btn { padding: 8px 11px; font-size: .86rem; }
.map-legend {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .79rem;
    color: var(--muted);
}
.map-legend-title {
    color: var(--text);
    font-size: .79rem;
    font-weight: 700;
    white-space: nowrap;
}
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.online { background: #1671ed; }
.legend-dot.charging { background: #22b47e; }
.legend-dot.offline { background: #f7b84b; }
.legend-dot.battery-blue { background: #1671ed; }
.legend-dot.battery-yellow { background: #f6c445; }
.legend-dot.battery-orange { background: #f28c18; }
.legend-dot.battery-red { background: #e33131; }

.vehicle-marker-wrapper { background: transparent; border: 0; }
.vehicle-map-marker {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50% 50% 50% 12px;
    transform: rotate(-45deg);
    display: grid;
    place-items: center;
    border: 3px solid #0846a5;
    background: #1671ed;
    color: #fff;
    box-shadow: 0 7px 18px rgba(15, 40, 75, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.vehicle-map-marker.state-charging { border-color: #0b6e4f; background: #22b47e; }
.vehicle-map-marker.state-offline { border-color: #9b5d00; background: #f7b84b; color: #4a3000; }
.vehicle-map-marker.is-selected {
    box-shadow: 0 0 0 5px rgba(13, 91, 215, .22), 0 9px 22px rgba(15, 40, 75, .35);
    transform: rotate(-45deg) scale(1.1);
}
.vehicle-marker-value {
    transform: rotate(45deg);
    font-size: .74rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.03em;
}
.vehicle-marker-direction {
    position: absolute;
    left: 50%;
    top: -15px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    transform-origin: 50% 28px;
    color: #102238;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 2px #fff;
}

.battery-meter {
    margin-top: 10px;
    text-align: center;
}
.battery-value {
    margin-bottom: 5px;
    font-size: .82rem;
    color: #52677f;
}
.battery-value b {
    color: #102238;
}

.battery-track {
    height: 7px;
    margin-top: 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e6edf5;
    box-shadow: inset 0 1px 2px rgba(16,34,56,.08);
}
.battery-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.battery-track span.battery-blue { background: linear-gradient(90deg, #0f5cc9 0%, #1671ed 100%); }
.battery-track span.battery-yellow { background: linear-gradient(90deg, #f1b92c 0%, #f6c445 100%); }
.battery-track span.battery-orange { background: linear-gradient(90deg, #e85f2a 0%, #f28c18 100%); }
.battery-track span.battery-red { background: linear-gradient(90deg, #b91c1c 0%, #e33131 100%); }
.battery-track span.battery-unknown { background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%); }

.map-panel:fullscreen .map-toolbar,
.map-panel:-webkit-full-screen .map-toolbar,
.map-panel.map-fullscreen-fallback .map-toolbar {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

@media (max-width: 720px) {
    .map-toolbar { align-items: stretch; }
    .map-style-control { width: 100%; justify-content: space-between; }
    .map-style-control select { flex: 1; min-width: 0; }
    .map-toolbar .btn { flex: 1 1 145px; }
    .map-legend { width: 100%; margin-left: 0; justify-content: center; }
}

/* Versão 3.4.0 — cadastro definitivo e anti-duplicação. */
.vehicle-registration-line {
    margin-top: 3px;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.25;
}
.vehicle-registry-metrics { margin-top: 16px; }
.vehicle-registry-list { display: grid; gap: 16px; }
.vehicle-registry-card { scroll-margin-top: 16px; }
.vehicle-registry-form { display: grid; gap: 14px; }
.registry-readonly {
    min-height: 42px;
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: #f4f7fa;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.registry-readonly.code-inline {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .86rem;
}
.duplicate-suggestion-list { display: grid; gap: 9px; }
.duplicate-suggestion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    border: 1px solid #ecd097;
    border-radius: 11px;
    padding: 10px 12px;
    background: #fff9ec;
}
.danger-zone {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.danger-zone summary {
    cursor: pointer;
    color: var(--danger);
    font-weight: 700;
}
.danger-zone form { display: grid; gap: 12px; margin-top: 12px; }
.ignored-identifiers-list { display: grid; gap: 9px; }
.ignored-identifier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 12px;
    background: #f8fafc;
}
@media (max-width: 650px) {
    .ignored-identifier-row { align-items: stretch; flex-direction: column; }
    .ignored-identifier-row .btn { width: 100%; }
}

/* Versão 3.4.1 — localização do usuário e distância até os veículos. */
.location-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.location-button.is-active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.location-button-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.user-location-marker-wrapper,
.distance-label-wrapper {
    background: transparent;
    border: 0;
}
.user-location-marker {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #172033;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .32);
}
.user-location-marker svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.leaflet-tooltip.user-location-label {
    padding: 5px 9px;
    border: 0;
    border-radius: 9px;
    background: #172033;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .2);
}
.leaflet-tooltip-top.user-location-label::before {
    border-top-color: #172033;
}
.distance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 28px;
    padding: 4px 9px;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 11px;
    background: rgba(23, 32, 51, .94);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .24);
}
@media (max-width: 650px) {
    .location-button {
        max-width: 100%;
    }
    .distance-badge {
        font-size: .78rem;
        min-width: 52px;
        padding: 4px 7px;
    }
}
.distance-label-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
}

/* Versão 3.4.2 — trajetos independentes por veículo. */
.vehicle-card h3 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.vehicle-route-dot {
    --route-color: #6b3fd6;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border-radius: 50%;
    background: var(--route-color);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 23, 42, .16);
}
.vehicle-map-marker {
    box-shadow: 0 0 0 3px var(--route-color, #6b3fd6), 0 7px 18px rgba(15, 40, 75, .28);
}
.vehicle-map-marker.is-selected {
    box-shadow: 0 0 0 4px var(--route-color, #6b3fd6), 0 0 0 8px rgba(13, 91, 215, .18), 0 9px 22px rgba(15, 40, 75, .35);
}
.leaflet-tooltip.trail-name-tooltip {
    border: 0;
    border-radius: 8px;
    background: rgba(15, 23, 42, .92);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .2);
}

/* Versão 3.4.4 — posição confiável e separação visual no mesmo local. */
.same-location-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
}
.same-location-popup {
    margin-top: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
}


/* Versão 3.5.0 — relatórios e manutenção por quilometragem. */
.maintenance-mini-list{display:grid;gap:10px}.maintenance-mini-card{padding:10px;border:1px solid var(--border);border-radius:11px;background:#f8fafc}.maintenance-mini-card.status-atencao{border-color:#f59e0b}.maintenance-mini-card.status-urgente,.maintenance-mini-card.status-vencida{border-color:#dc2626}.progress-track{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:7px 0}.progress-track span{display:block;height:100%;background:#0d5bd7;border-radius:inherit}.progress-track.large{height:13px}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:18px}.table-wrap{overflow:auto}.report-table{width:100%;border-collapse:collapse}.report-table th,.report-table td{padding:10px 9px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}.report-table th{font-size:.78rem;text-transform:uppercase;color:var(--muted)}.report-table.compact th,.report-table.compact td{padding:7px}.reports-page h3{margin-top:20px}@media(max-width:650px){.report-grid{grid-template-columns:1fr}.report-table{font-size:.84rem}}@media print{.topbar,.actions,.footer{display:none!important}.page{max-width:none}.card{break-inside:avoid;box-shadow:none}}


.vehicle-maintenance-summary {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #dbe5f0;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}
.vehicle-maintenance-summary div { white-space: nowrap; }


/* v3.5.2 — aviso de fechamento automático do ciclo de manutenção. */
.maintenance-cycle-toast{position:fixed;right:20px;bottom:20px;z-index:99999;width:min(420px,calc(100vw - 32px));display:none;gap:6px;padding:16px 44px 16px 16px;border-radius:14px;background:#0f172a;color:#fff;box-shadow:0 18px 45px rgba(15,23,42,.35)}
.maintenance-cycle-toast.show{display:grid;animation:maintenanceToastIn .22s ease-out}
.maintenance-cycle-toast strong{font-size:15px}.maintenance-cycle-toast span{font-size:13px;line-height:1.45;color:#e2e8f0}
.maintenance-cycle-toast button{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
@keyframes maintenanceToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* v3.5.2 — marcador por nível de bateria e movimento suave. */
.vehicle-marker-wrapper {
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}
.vehicle-map-marker {
    --marker-color: #64748b;
    --marker-border: #334155;
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50% 50% 50% 13px;
    transform: rotate(-45deg);
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    background: var(--marker-color);
    color: #fff;
    box-shadow: 0 0 0 3px var(--marker-border), 0 8px 18px rgba(15, 23, 42, .3);
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
    transform-origin: 50% 50%;
}
.vehicle-map-marker.battery-blue { --marker-color: #1671ed; --marker-border: #0754bd; }
.vehicle-map-marker.battery-yellow { --marker-color: #f6c445; --marker-border: #b77900; color: #332300; }
.vehicle-map-marker.battery-orange { --marker-color: #f28c18; --marker-border: #b45309; }
.vehicle-map-marker.battery-red { --marker-color: #e33131; --marker-border: #a91313; }
.vehicle-map-marker.battery-unknown { --marker-color: #94a3b8; --marker-border: #475569; }
.vehicle-map-marker.state-offline { filter: saturate(.55); opacity: .86; }
.vehicle-map-marker.is-selected {
    z-index: 50;
    transform: rotate(-45deg) scale(1.24);
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--marker-border), 0 0 0 12px rgba(22, 113, 237, .2), 0 12px 26px rgba(15, 23, 42, .38);
}
.vehicle-marker-car {
    transform: rotate(45deg);
    font-size: 20px;
    line-height: 1;
    filter: grayscale(1) brightness(0) invert(1);
}
.vehicle-map-marker.battery-yellow .vehicle-marker-car {
    filter: grayscale(1) brightness(.25);
}
.vehicle-marker-battery {
    position: absolute;
    left: 50%;
    bottom: -23px;
    transform: translateX(-50%) rotate(45deg);
    min-width: 35px;
    padding: 3px 6px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: var(--marker-color);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .24);
}
.vehicle-map-marker.battery-yellow .vehicle-marker-battery { color: #332300; }
.vehicle-map-marker.battery-red:not(.is-selected) {
    animation: criticalBatteryPulse 1.45s ease-in-out infinite;
}
.vehicle-marker-direction {
    color: var(--marker-border);
    text-shadow: 0 1px 2px #fff, 0 0 3px #fff;
}
@keyframes criticalBatteryPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--marker-border), 0 8px 18px rgba(15, 23, 42, .3); }
    50% { box-shadow: 0 0 0 3px var(--marker-border), 0 0 0 10px rgba(227, 49, 49, .2), 0 10px 24px rgba(15, 23, 42, .34); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-map-marker,
    .vehicle-map-marker.battery-red:not(.is-selected) { animation: none; transition: none; }
}

/* v3.5.2 — marcador visual no padrão do mockup aprovado. */
.vehicle-marker-wrapper {
    width: 78px !important;
    height: 92px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
.vehicle-map-marker {
    --marker-color: #64748b;
    --marker-dark: #334155;
    position: relative !important;
    width: 78px !important;
    height: 92px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: transform .22s ease, filter .22s ease !important;
    transform-origin: 50% 68px !important;
}
.vehicle-map-marker.battery-blue { --marker-color: #1671ed; --marker-dark: #0754bd; }
.vehicle-map-marker.battery-yellow { --marker-color: #f6c445; --marker-dark: #b77900; }
.vehicle-map-marker.battery-orange { --marker-color: #f28c18; --marker-dark: #b45309; }
.vehicle-map-marker.battery-red { --marker-color: #e33131; --marker-dark: #a91313; }
.vehicle-map-marker.battery-unknown { --marker-color: #94a3b8; --marker-dark: #475569; }
.vehicle-map-marker.state-offline { opacity: .82 !important; filter: saturate(.65) !important; }
.vehicle-marker-pin {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 50px;
    height: 50px;
    transform: translateX(-50%);
    border: 5px solid var(--marker-color);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 0 var(--marker-dark), 0 8px 18px rgba(15, 23, 42, .30);
    z-index: 3;
}
.vehicle-marker-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 17px solid var(--marker-color);
    filter: drop-shadow(0 3px 0 var(--marker-dark));
    z-index: -1;
}
.vehicle-marker-inner {
    position: absolute;
    inset: 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
}
.vehicle-marker-car-svg {
    width: 26px;
    height: 26px;
    fill: #111827;
    display: block;
}
.vehicle-marker-battery {
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    min-width: 45px !important;
    height: 24px;
    padding: 0 7px !important;
    transform: translateX(-50%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid #fff !important;
    border-radius: 7px !important;
    background: var(--marker-color) !important;
    color: #fff !important;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .28) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 7;
    white-space: nowrap;
}
.vehicle-map-marker.battery-yellow .vehicle-marker-battery { color: #332300 !important; }
.vehicle-marker-battery-svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex: 0 0 12px;
}
.vehicle-marker-direction-arrow {
    position: absolute;
    right: 8px;
    top: 48px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 15px solid #16a779;
    transform-origin: 7px -12px;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px rgba(15,23,42,.35));
    z-index: 6;
}
.vehicle-marker-selected-ring {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 66px;
    height: 66px;
    transform: translateX(-50%) scale(.88);
    border-radius: 50%;
    border: 4px solid transparent;
    box-shadow: none;
    opacity: 0;
    z-index: 1;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vehicle-map-marker.is-selected {
    transform: scale(1.22) !important;
    z-index: 999 !important;
}
.vehicle-map-marker.is-selected .vehicle-marker-selected-ring {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    border-color: #fff;
    box-shadow: 0 0 0 5px var(--marker-color), 0 0 0 10px rgba(22, 113, 237, .22), 0 10px 25px rgba(15, 23, 42, .32);
}
.vehicle-map-marker.battery-red:not(.is-selected) .vehicle-marker-pin {
    animation: approvedMarkerCriticalPulse 1.45s ease-in-out infinite;
}
@keyframes approvedMarkerCriticalPulse {
    0%,100% { box-shadow: 0 3px 0 var(--marker-dark), 0 8px 18px rgba(15, 23, 42, .30); }
    50% { box-shadow: 0 3px 0 var(--marker-dark), 0 0 0 9px rgba(227,49,49,.18), 0 10px 24px rgba(15,23,42,.34); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-map-marker,
    .vehicle-marker-selected-ring,
    .vehicle-map-marker.battery-red:not(.is-selected) .vehicle-marker-pin { animation: none !important; transition: none !important; }
}

/* v3.5.2 — animação visual de carregamento sem textos extras no mapa */
.vehicle-marker-charging-orbit {
    position: absolute;
    left: 50%;
    top: 0;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #22c55e;
    border-right-color: rgba(34, 197, 94, .35);
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, .65));
    animation: vehicleChargingOrbit 1.15s linear infinite;
    z-index: 2;
    pointer-events: none;
}
.vehicle-marker-charging-bolt {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%, -50%);
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(34,197,94,.20), 0 0 14px rgba(34,197,94,.75);
    font-size: 13px;
    line-height: 1;
    z-index: 8;
    pointer-events: none;
    animation: vehicleChargingBolt 1.05s ease-in-out infinite;
}
.vehicle-map-marker.state-charging .vehicle-marker-pin {
    animation: vehicleChargingPinGlow 1.35s ease-in-out infinite;
}
.vehicle-map-marker.state-charging .vehicle-marker-battery {
    overflow: hidden;
}
.vehicle-map-marker.state-charging .vehicle-marker-battery::after {
    content: '';
    position: absolute;
    inset: -35% auto -35% -45%;
    width: 32%;
    transform: skewX(-18deg);
    background: rgba(255,255,255,.62);
    animation: vehicleChargingBatterySweep 1.35s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vehicleChargingOrbit {
    to { transform: rotate(360deg); }
}
@keyframes vehicleChargingBolt {
    0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .88; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@keyframes vehicleChargingPinGlow {
    0%, 100% { box-shadow: 0 3px 0 var(--marker-dark), 0 8px 18px rgba(15,23,42,.30), 0 0 0 0 rgba(34,197,94,.28); }
    50% { box-shadow: 0 3px 0 var(--marker-dark), 0 8px 20px rgba(15,23,42,.32), 0 0 0 9px rgba(34,197,94,0); }
}
@keyframes vehicleChargingBatterySweep {
    0% { left: -45%; }
    65%, 100% { left: 118%; }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-marker-charging-orbit,
    .vehicle-marker-charging-bolt,
    .vehicle-map-marker.state-charging .vehicle-marker-pin,
    .vehicle-map-marker.state-charging .vehicle-marker-battery::after {
        animation: none !important;
    }
}

/* v3.5.2 — marcador simples em ponto com efeito sonar. */
.vehicle-marker-wrapper {
    width: 54px !important;
    height: 54px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}
.vehicle-sonar-marker {
    --sonar-color: #64748b;
    --sonar-dark: #334155;
    position: relative;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    pointer-events: auto;
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.vehicle-sonar-marker.battery-blue { --sonar-color:#1671ed; --sonar-dark:#0754bd; }
.vehicle-sonar-marker.battery-yellow { --sonar-color:#f6c445; --sonar-dark:#b77900; }
.vehicle-sonar-marker.battery-orange { --sonar-color:#f28c18; --sonar-dark:#b45309; }
.vehicle-sonar-marker.battery-red { --sonar-color:#e33131; --sonar-dark:#a91313; }
.vehicle-sonar-marker.battery-unknown { --sonar-color:#94a3b8; --sonar-dark:#475569; }
.vehicle-sonar-marker.state-offline { opacity:.72; filter:saturate(.55); }
.vehicle-sonar-dot {
    position:relative;
    z-index:3;
    width:17px;
    height:17px;
    border-radius:50%;
    background:var(--sonar-color);
    border:3px solid #fff;
    box-shadow:0 0 0 3px var(--sonar-dark), 0 5px 12px rgba(15,23,42,.3);
}
.vehicle-sonar-wave {
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:18px;
    margin:-9px 0 0 -9px;
    border-radius:50%;
    border:3px solid var(--sonar-color);
    opacity:0;
    animation:vehicleSonarPulse 2s ease-out infinite;
    pointer-events:none;
}
.vehicle-sonar-wave.wave-two { animation-delay:1s; }
.vehicle-sonar-marker.is-selected { transform:scale(1.28); z-index:999; }
.vehicle-sonar-marker.is-selected .vehicle-sonar-dot {
    box-shadow:0 0 0 3px #fff, 0 0 0 7px var(--sonar-dark), 0 0 0 12px color-mix(in srgb, var(--sonar-color) 25%, transparent), 0 8px 18px rgba(15,23,42,.35);
}
.vehicle-sonar-bolt {
    position:absolute;
    left:calc(50% + 11px);
    top:calc(50% - 11px);
    transform:translate(-50%, -50%);
    z-index:6;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid #fff;
    background:#16a34a;
    color:#fff;
    font-size:15px;
    line-height:1;
    font-weight:900;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    box-shadow:0 0 0 3px rgba(34,197,94,.28),0 5px 12px rgba(15,23,42,.38);
    animation:vehicleChargeBlink 1.05s ease-in-out infinite;
    pointer-events:none;
}
.vehicle-sonar-marker.is-charging .vehicle-sonar-dot {
    box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(34,197,94,.35),0 5px 12px rgba(15,23,42,.3);
}
.vehicle-sonar-marker.is-charging .vehicle-sonar-wave {
    border-color:#22c55e;
    border-width:4px;
}
@keyframes vehicleSonarPulse {
    0% { transform:scale(.55); opacity:.68; }
    75%,100% { transform:scale(2.65); opacity:0; }
}
@keyframes vehicleChargeBlink {
    0%,100% { transform:translate(-50%,-50%) scale(.9); opacity:.82; }
    50% { transform:translate(-50%,-50%) scale(1.16); opacity:1; }
}
.vehicle-name-tooltip {
    background:rgba(15,23,42,.92) !important;
    color:#fff !important;
    border:0 !important;
    border-radius:7px !important;
    box-shadow:0 5px 14px rgba(15,23,42,.25) !important;
    font-size:11px !important;
    font-weight:800 !important;
    padding:4px 7px !important;
    white-space:nowrap;
}
.vehicle-name-tooltip::before { border-top-color:rgba(15,23,42,.92) !important; }
.battery-color-table { display:grid; gap:7px; margin-top:10px; }
.battery-color-table > div {
    display:grid;
    grid-template-columns:18px 72px 1fr;
    align-items:center;
    gap:8px;
    min-height:32px;
    padding:6px 8px;
    border:1px solid #e2e8f0;
    border-radius:9px;
    background:#f8fafc;
    font-size:12px;
}
.battery-color-table > div span:last-child { color:#64748b; text-align:right; }
.battery-color-sample { width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px rgba(15,23,42,.07); }
.battery-color-blue { background:#1671ed; }
.battery-color-yellow { background:#f6c445; }
.battery-color-orange { background:#f28c18; }
.battery-color-red { background:#e33131; }
.map-name-option {
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:12px;
    padding:10px;
    border-radius:9px;
    background:#eff6ff;
    color:#1e3a8a;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}
.map-name-option input { width:17px; height:17px; accent-color:#1671ed; }
@media (prefers-reduced-motion: reduce) {
    .vehicle-sonar-wave,
    .vehicle-sonar-bolt { animation:none !important; }
}


/* v3.5.2 — redesign visual para ocupar toda a tela e melhorar no tablet. */
:root {
    --bg: linear-gradient(180deg, #edf3fb 0%, #e8eef8 100%);
    --panel-soft: rgba(255,255,255,.84);
    --topbar-h: 70px;
}
html, body {
    height: 100%;
}
body {
    background: var(--bg);
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    min-height: var(--topbar-h);
    padding: 14px 20px;
    background: linear-gradient(135deg, #0b1f34 0%, #123558 100%);
    box-shadow: 0 10px 30px rgba(6, 25, 45, .18);
}
.brand {
    font-weight: 800;
    letter-spacing: -.02em;
}
.brand-mark {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.18);
}
.nav-links {
    overflow-x: auto;
    scrollbar-width: thin;
}
.nav-links a {
    padding: 10px 12px;
    font-weight: 650;
}
.page {
    width: calc(100% - 20px);
    max-width: none;
    margin: 10px auto 12px;
    min-height: calc(100dvh - var(--topbar-h) - 22px);
    display: flex;
    flex-direction: column;
}
.dashboard {
    flex: 1;
    min-height: 0;
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}
.sidebar {
    min-height: 0;
    max-height: calc(100dvh - var(--topbar-h) - 34px);
    overflow: auto;
    padding-right: 2px;
}
.sidebar .card,
.map-panel {
    background: var(--panel-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(217,226,236,.85);
}
.card {
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(16, 34, 56, .1);
}
.metric-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.metric {
    background: linear-gradient(180deg, #fafdff 0%, #eff5fc 100%);
    border-radius: 18px;
    padding: 14px 14px 12px;
}
.metric strong {
    font-size: 1.55rem;
}
.vehicle-list {
    max-height: none;
}
.vehicle-card {
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vehicle-card:hover,
.vehicle-card.active {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(13,91,215,.12);
}
.panel-head {
    margin-bottom: 16px;
}
.map-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: calc(100dvh - var(--topbar-h) - 34px);
    padding: 18px;
}
.map-panel-head h2 {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
}
.map-toolbar {
    background: rgba(243,247,252,.95);
    border: 1px solid #d9e2ec;
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 12px;
    gap: 12px;
}
#map,
.map-placeholder {
    height: 100%;
    min-height: 520px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(217,226,236,.95);
}
#map {
    background: #dfe8f1;
}
.map-legend {
    margin-left: auto;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    border: 1px solid #d9e2ec;
}
.visual-card {
    display: grid;
    gap: 14px;
}
.modern-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.modern-toggle input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}
.modern-toggle span {
    display: grid;
    gap: 3px;
}
.modern-toggle small {
    color: var(--muted);
    line-height: 1.35;
}
.status-color-guide {
    display: grid;
    gap: 10px;
}
.status-color-guide > div {
    display: grid;
    grid-template-columns: 16px minmax(70px, auto) 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid var(--border);
}
.status-color-guide small {
    color: var(--muted);
}
.legend-dot.online { background: #1671ed; }
.legend-dot.charging { background: #22b47e; }
.legend-dot.offline { background: #f7b84b; }
.legend-dot.battery-blue { background: #1671ed; }
.legend-dot.battery-yellow { background: #f6c445; }
.legend-dot.battery-orange { background: #f28c18; }
.legend-dot.battery-red { background: #e33131; }
.footer {
    padding: 10px 4px 2px;
}
@media (max-width: 1180px) {
    .dashboard {
        grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    }
    .map-toolbar {
        flex-wrap: wrap;
    }
}
@media (max-width: 920px) {
    .page {
        width: calc(100% - 14px);
        min-height: auto;
    }
    .dashboard {
        grid-template-columns: 1fr;
    }
    .map-panel {
        order: 1;
        min-height: min(72dvh, 760px);
    }
    .sidebar {
        order: 2;
        max-height: none;
        overflow: visible;
    }
    .map-toolbar {
        gap: 10px;
    }
    #map,
    .map-placeholder {
        min-height: 440px;
    }
}
@media (max-width: 700px) {
    .topbar {
        position: static;
        gap: 12px;
    }
    .page {
        width: calc(100% - 10px);
        margin-top: 8px;
    }
    .card,
    .map-panel {
        padding: 14px;
        border-radius: 16px;
    }
    .metric-row {
        grid-template-columns: 1fr;
    }
    .map-toolbar {
        padding: 10px;
    }
    .map-legend {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
}


/* v3.5.2 — correção de tela cheia em tablets. */
.map-panel:fullscreen,
.map-panel:-webkit-full-screen,
.map-panel.map-fullscreen-fallback {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 0 !important;
    overscroll-behavior: none;
    touch-action: manipulation;
}
.map-panel:fullscreen .map-panel-head,
.map-panel:-webkit-full-screen .map-panel-head,
.map-panel.map-fullscreen-fallback .map-panel-head {
    margin: 0 0 8px !important;
}
.map-panel:fullscreen .map-toolbar,
.map-panel:-webkit-full-screen .map-toolbar,
.map-panel.map-fullscreen-fallback .map-toolbar {
    margin: 0 0 8px !important;
}
.map-panel:fullscreen #map,
.map-panel:-webkit-full-screen #map,
.map-panel.map-fullscreen-fallback #map {
    position: relative !important;
    inset: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
html.map-fullscreen-fallback-active,
body.map-fullscreen-fallback-active {
    width: 100% !important;
    height: 100% !important;
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
@media (pointer: coarse) and (min-width: 600px) {
    .map-panel:fullscreen,
    .map-panel:-webkit-full-screen,
    .map-panel.map-fullscreen-fallback {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    }
    .map-panel:fullscreen .map-panel-head,
    .map-panel:-webkit-full-screen .map-panel-head,
    .map-panel.map-fullscreen-fallback .map-panel-head {
        flex-wrap: nowrap;
    }
    .map-panel:fullscreen .map-toolbar,
    .map-panel:-webkit-full-screen .map-toolbar,
    .map-panel.map-fullscreen-fallback .map-toolbar {
        flex-wrap: wrap;
        padding: 8px 10px;
    }
}

/* v3.5.2 — alerta escalonado de veículo parado. */
.vehicle-stop-badge {
    position: absolute;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 42px;
    height: 21px;
    padding: 2px 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 5px 14px rgba(15,23,42,.28);
    white-space: nowrap;
    pointer-events: none;
}
.vehicle-stop-badge b { font-size: 10px; line-height: 1; }
.vehicle-stop-badge small { font-size: 9px; line-height: 1; font-weight: 900; }
.vehicle-stop-badge.stop-warning { background: #64748b; }
.vehicle-stop-badge.stop-strong {
    background: #f28c18;
    animation: vehicleStopStrong 1.5s ease-in-out infinite;
}
.vehicle-stop-badge.stop-critical {
    background: #dc2626;
    animation: vehicleStopCritical 1s ease-in-out infinite;
}
@keyframes vehicleStopStrong {
    0%,100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.08); }
}
@keyframes vehicleStopCritical {
    0%,100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,.35), 0 5px 14px rgba(15,23,42,.28); }
    50% { transform: translateX(-50%) scale(1.1); box-shadow: 0 0 0 8px rgba(220,38,38,0), 0 7px 18px rgba(15,23,42,.34); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-stop-badge.stop-strong,
    .vehicle-stop-badge.stop-critical { animation: none !important; }
}


/* v3.5.2 — Visualização e Ferramentas movidas para Configurações. */
.settings-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.settings-option-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
    cursor: pointer;
}
.settings-option-card input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}
.settings-option-card span {
    display: grid;
    gap: 5px;
}
.settings-option-card small {
    color: var(--muted);
    line-height: 1.4;
}
.settings-history-mode {
    min-height: 92px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}
.settings-tools-actions {
    margin-top: 14px;
}
@media (max-width: 720px) {
    .settings-option-grid { grid-template-columns: 1fr; }
    .settings-tools-actions .btn { width: 100%; }
}


/* v3.5.2 — ajuste para não sobrepor nome do veículo e aviso de parada. */
.vehicle-name-tooltip.has-stop-badge {
    margin-bottom: 2px;
}
@media (max-width: 768px) {
    .vehicle-stop-badge {
        top: -22px;
    }
}

/* v3.5.2 — interação ampliada e destaque da linha do trajeto. */
.leaflet-interactive.trail-hit-area {
    cursor: pointer;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.leaflet-interactive.trail-visible-line {
    transition: stroke-width .18s ease, stroke-opacity .18s ease, filter .18s ease;
    pointer-events: none;
}
.leaflet-interactive.trail-visible-line.trail-is-hovered {
    filter: drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 9px rgba(15,23,42,.62));
}
.leaflet-tooltip.trail-name-tooltip {
    padding: 7px 10px;
    line-height: 1.35;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.18);
    pointer-events: none;
}


/* v3.5.2 — Área sensível ampliada para 36 px ao redor do trajeto. */
.leaflet-interactive.trail-hit-area {
    cursor: crosshair;
    touch-action: manipulation;
}

/* v3.5.2 — compartilhamento temporário e central de notificações. */
.topbar-right { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; }
.notification-center { position:relative; flex:0 0 auto; }
.notification-button {
    position:relative; width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:13px;
    display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.1); color:#fff; font-size:18px;
}
.notification-button:hover, .notification-button[aria-expanded="true"] { background:rgba(255,255,255,.18); }
.notification-button b {
    position:absolute; right:-5px; top:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
    display:grid; place-items:center; background:#e33131; color:#fff; border:2px solid #0d2138; font-size:10px;
}
.notification-panel {
    position:absolute; right:0; top:calc(100% + 10px); z-index:3000; width:min(390px, calc(100vw - 20px));
    max-height:min(620px, calc(100dvh - 95px)); overflow:hidden; background:#fff; color:var(--text);
    border:1px solid var(--border); border-radius:18px; box-shadow:0 22px 55px rgba(6,25,45,.25);
}
.notification-panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border); }
.notification-panel-head > div { display:grid; gap:2px; min-width:0; }
.notification-clear-all { border:0; background:transparent; color:var(--primary); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; padding:7px 8px; border-radius:9px; white-space:nowrap; }
.notification-clear-all:hover { background:#eaf2ff; }
.notification-clear-all:disabled { opacity:.45; cursor:default; background:transparent; }
.notification-list { display:grid; gap:8px; padding:10px; max-height:520px; overflow:auto; }
.notification-item { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:11px; border-radius:14px; border:1px solid var(--border); background:#f8fbff; color:var(--text); text-align:left; font:inherit; cursor:pointer; }
.notification-item:hover { border-color:#a9c8f5; background:#f0f6ff; transform:translateY(-1px); }
.notification-item:disabled { opacity:.55; cursor:wait; transform:none; }
.notification-content { display:block; min-width:0; }
.notification-item strong { display:block; font-size:.91rem; line-height:1.25; }
.notification-item .notification-content > span { display:block; margin-top:4px; color:var(--muted); font-size:.8rem; line-height:1.35; }
.notification-item small { display:block; margin-top:5px; color:#66809c; font-size:.7rem; }
.notification-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#e8eef6; }
.notification-item.is-critical .notification-icon { background:#ffe5e7; color:#bc2f3b; }
.notification-item.is-warning .notification-icon { background:#fff0d6; color:#a65b00; }
.notification-item.is-success .notification-icon { background:#e5f8ef; color:#16865b; }
.notification-item.is-info .notification-icon { background:#e6f0ff; color:#0d5bd7; }
.notification-empty { padding:22px 14px; text-align:center; color:var(--muted); }
.share-list { display:grid; gap:12px; }
.share-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:16px; background:#f8fbff; }
.share-item.is-new { border-color:var(--primary); box-shadow:0 0 0 3px rgba(13,91,215,.1); }
.share-url { width:100%; margin-top:8px; border:1px solid #cbd7e4; border-radius:10px; padding:9px 10px; color:#52677f; background:#fff; }
.public-share-body { min-height:100dvh; background:linear-gradient(180deg,#edf3fb,#e8eef8); }
.public-share-shell { min-height:100dvh; padding:12px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; }
.public-share-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-radius:17px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
.public-share-grid { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:12px; }
.public-share-map { min-height:520px; height:100%; border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); background:#dfe8f1; }
.public-share-card { align-self:start; margin:0; overflow:hidden; }
.public-share-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.public-share-eyebrow { display:block; margin-bottom:4px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.public-share-card h1 { margin:0; line-height:1.15; overflow-wrap:anywhere; }
.public-share-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.public-share-metric { min-width:0; min-height:82px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:12px; border:1px solid var(--border); border-radius:14px; background:#f7faff; }
.public-share-metric span { color:var(--muted); font-size:.75rem; font-weight:700; }
.public-share-metric strong { display:block; color:var(--text); font-size:1rem; line-height:1.2; overflow-wrap:anywhere; }
.public-share-expiry { margin-top:12px; padding:11px 12px; border-radius:12px; background:#eaf2ff; color:#0d5bd7; font-size:.82rem; font-weight:700; text-align:center; }
.public-share-help { margin:12px 0 0; }
.public-share-error { max-width:620px; margin:auto; }
@media (max-width:900px) {
    .topbar-right { width:100%; }
    .topbar-right .nav-links { flex:1; }
    .public-share-grid { grid-template-columns:1fr; grid-template-rows:minmax(55dvh,1fr) auto; }
    .public-share-map { min-height:55dvh; }
    .public-share-card { align-self:stretch; }
}
@media (max-width:650px) {
    .share-item { grid-template-columns:1fr; }
    .share-item .actions { margin-top:0; }
    .notification-panel { position:fixed; right:10px; top:72px; }
}


/* v3.5.2 — botão sem API para abrir a posição no Google Maps. */
.vehicle-card-map-action {
    display: flex;
    justify-content: center;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}
.vehicle-open-map {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: .86rem;
    border: 1px solid #cfdae7;
    background: #edf3fa;
    color: #17436f;
}
.vehicle-open-map:hover {
    background: #dfeafb;
    text-decoration: none;
}
.vehicle-open-map.is-disabled {
    opacity: .58;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width:420px) {
    .public-share-metrics { grid-template-columns:1fr; }
    .public-share-metric { min-height:68px; }
}

/* Coletor contínuo do servidor */
.collector-server-log {
    max-height: 190px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.collector-last-message {
    font-size: .92rem;
}

/* v3.5.2 — nomes sempre visíveis e contidos dentro do mapa. */
.leaflet-tooltip.vehicle-name-tooltip {
    max-width: min(280px, calc(100vw - 24px));
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none !important;
}
.leaflet-tooltip-top.vehicle-name-tooltip::before,
.vehicle-name-tooltip.label-top::before {
    border-top-color: rgba(15,23,42,.92) !important;
}
.leaflet-tooltip-bottom.vehicle-name-tooltip::before,
.vehicle-name-tooltip.label-bottom::before {
    border-bottom-color: rgba(15,23,42,.92) !important;
    border-top-color: transparent !important;
}
/* Remove margens extras do Leaflet: o deslocamento é controlado pelo JS. */
.leaflet-tooltip.vehicle-name-tooltip.label-top,
.leaflet-tooltip.vehicle-name-tooltip.label-bottom {
    margin: 0 !important;
}


/* v3.5.2 — faixa invisível mais sensível para interação com o trajeto. */
.leaflet-interactive.trail-hit-area {
    cursor: pointer;
}


/* v3.5.2 — nome e duração da parada no mesmo bloco adaptável. */
.leaflet-tooltip.vehicle-name-tooltip.has-stop-duration,
.leaflet-tooltip.vehicle-name-tooltip.has-secondary-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 8px 6px !important;
    text-align: center;
}
.vehicle-marker-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vehicle-marker-stop-time {
    display: block;
    margin-top: 1px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.25;
    white-space: nowrap;
}
.vehicle-marker-stop-time.stop-warning { background: #64748b; }
.vehicle-marker-stop-time.stop-strong { background: #f28c18; }
.vehicle-marker-stop-time.stop-critical { background: #dc2626; }
.report-calculation-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}


/* v3.5.2 — confirmação manual da revisão de 20.000 km. */
.maintenance-summary-head{display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:normal!important}
.maintenance-complete-button{border:1px solid #1671ed;background:#eaf2ff;color:#0d5bd7;border-radius:8px;padding:4px 8px;font:inherit;font-size:11px;font-weight:800;line-height:1.2;cursor:pointer;white-space:nowrap}
.maintenance-complete-button:hover{background:#dbeafe;border-color:#0d5bd7}
.maintenance-card-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:8px 10px}
.maintenance-card-actions .maintenance-complete-button{margin:0}
.maintenance-settings-button{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:8px;padding:4px 8px;font:inherit;font-size:11px;font-weight:800;line-height:1.2;cursor:pointer;white-space:nowrap}
.maintenance-settings-button:hover{background:#f1f5f9;border-color:#94a3b8}
.maintenance-settings-field{display:grid;gap:7px}.maintenance-settings-field>span{font-size:13px;font-weight:800}.maintenance-settings-field input{width:100%;font-size:17px}.maintenance-settings-field small{color:#64748b;line-height:1.4}
.maintenance-complete-button:focus-visible{outline:3px solid rgba(22,113,237,.25);outline-offset:2px}
.maintenance-overdue{color:#b91c1c;font-weight:700}
.maintenance-review-modal{position:fixed;inset:0;z-index:100000;background:rgba(15,23,42,.58);display:grid;place-items:center;padding:18px}
.maintenance-review-modal[hidden]{display:none}
.maintenance-review-dialog{position:relative;width:min(470px,100%);border-radius:18px;background:#fff;color:#102238;padding:24px;box-shadow:0 24px 70px rgba(15,23,42,.34)}
.maintenance-review-close{position:absolute;top:9px;right:11px;border:0;background:transparent;color:#64748b;font-size:26px;line-height:1;cursor:pointer}
.maintenance-review-step{display:grid;gap:14px}.maintenance-review-step h2{margin:0;font-size:20px}.maintenance-review-step p{margin:0;line-height:1.5}
.maintenance-review-badge{justify-self:start;border-radius:999px;background:#eaf2ff;color:#0d5bd7;padding:5px 9px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.maintenance-review-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.maintenance-review-metrics span{display:grid;gap:4px;border:1px solid #dbe5f0;border-radius:12px;padding:11px;background:#f8fafc;font-size:12px;color:#52677f}.maintenance-review-metrics b{font-size:16px;color:#102238}
.maintenance-review-confirm{display:flex;align-items:flex-start;gap:9px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:12px;padding:12px;font-size:13px;line-height:1.45;cursor:pointer}.maintenance-review-confirm input{margin-top:2px}
.maintenance-review-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}.maintenance-review-feedback{min-height:18px;color:#b91c1c;font-size:13px;font-weight:700}
@media(max-width:480px){.maintenance-review-dialog{padding:20px 16px}.maintenance-review-metrics{grid-template-columns:1fr}.maintenance-review-actions .btn{flex:1 1 auto}}


/* Editor visual dos locais ignorados no alerta de veículo parado */
.ignored-stop-locations-editor {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
}
.ignored-locations-heading {
    margin-bottom: 14px;
    align-items: flex-start;
}
.ignored-locations-heading h3 {
    margin: 0 0 4px;
}
.ignored-locations-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .8fr);
    gap: 16px;
    align-items: stretch;
}
.ignored-locations-map-column {
    min-width: 0;
}
.ignored-locations-map {
    min-height: 390px;
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    background: #e9eef5;
    z-index: 0;
}
.ignored-locations-map-help {
    margin-top: 7px;
}
.ignored-location-editor-card {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.ignored-radius-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 92px auto;
    gap: 8px;
    align-items: center;
}
.ignored-radius-row input[type="range"] {
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
}
.ignored-radius-row input[type="number"] {
    min-width: 0;
}
.ignored-coordinates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ignored-coordinates-grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
}
.ignored-coordinates-grid span,
.ignored-coordinates-grid strong {
    display: block;
}
.ignored-coordinates-grid span {
    color: var(--muted);
    font-size: .76rem;
    margin-bottom: 4px;
}
.ignored-coordinates-grid strong {
    font-size: .84rem;
    overflow-wrap: anywhere;
}
.ignored-location-actions {
    margin-top: auto;
}
.ignored-location-actions .btn {
    flex: 1 1 130px;
}
.ignored-locations-list {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}
.ignored-location-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}
.ignored-location-row-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.ignored-location-row-main strong,
.ignored-location-row-main span,
.ignored-location-row-main small {
    overflow-wrap: anywhere;
}
.ignored-location-row-main span {
    color: #334155;
    font-size: .84rem;
}
.ignored-location-row-main small {
    color: var(--muted);
}
.ignored-location-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
.ignored-location-row-actions .btn {
    padding: 7px 10px;
}
.ignored-locations-empty {
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 11px;
    color: var(--muted);
    text-align: center;
    background: #fff;
}
.ignored-locations-manual {
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}
.ignored-locations-manual summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .84rem;
}
.leaflet-tooltip.ignored-location-map-label {
    padding: 4px 7px;
    border-radius: 8px;
    border: 1px solid rgba(13,91,215,.22);
    color: #102238;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
}
@media (max-width: 820px) {
    .ignored-locations-layout {
        grid-template-columns: 1fr;
    }
    .ignored-locations-map {
        min-height: 330px;
    }
}
@media (max-width: 560px) {
    .ignored-stop-locations-editor {
        padding: 12px;
    }
    .ignored-locations-map {
        min-height: 285px;
    }
    .ignored-location-row {
        align-items: stretch;
        flex-direction: column;
    }
    .ignored-location-row-actions {
        justify-content: stretch;
    }
    .ignored-location-row-actions .btn {
        flex: 1 1 auto;
    }
    .ignored-coordinates-grid {
        grid-template-columns: 1fr;
    }
}

/* Editor visual das cercas virtuais */
.virtual-fences-editor {
    border-color: #ddd6fe;
    background: #faf8ff;
}
.virtual-fences-map {
    background: #ede9fe;
}
.virtual-fence-options {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #f8fafc;
}
.virtual-fence-options .inline-check {
    margin: 0;
}
.virtual-fence-map-label {
    color: #5b21b6;
    font-weight: 800;
}
@media (max-width: 860px) {
    .ignored-locations-layout {
        grid-template-columns: 1fr;
    }
    .ignored-locations-map {
        min-height: 330px;
    }
}
@media (max-width: 520px) {
    .ignored-location-row {
        align-items: stretch;
        flex-direction: column;
    }
    .ignored-location-row-actions {
        justify-content: stretch;
    }
    .ignored-location-row-actions .btn {
        flex: 1 1 auto;
    }
}
.geofence-tooltip {
    border-color: #c4b5fd;
    color: #4c1d95;
    font-size: .78rem;
    line-height: 1.35;
}

/* Cercas virtuais circulares e desenhadas */
.virtual-fence-polygon-controls {
    display: grid;
    gap: 10px;
    padding: 11px;
    border: 1px dashed #c4b5fd;
    border-radius: 11px;
    background: #f5f3ff;
}
.virtual-fence-polygon-controls[hidden] {
    display: none !important;
}
.virtual-fence-polygon-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    color: #5b21b6;
}
.virtual-fence-polygon-status span {
    color: var(--muted);
    font-size: .82rem;
}
#virtualFenceType {
    width: 100%;
}


/* v3.5.2 — notificações em pop-up configuráveis. */
.notification-toast-stack {
    position: fixed;
    z-index: 100500;
    top: 82px;
    right: 18px;
    width: min(400px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.notification-toast {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-left: 4px solid #0d5bd7;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    color: var(--text);
    box-shadow: 0 16px 38px rgba(15,23,42,.22);
    pointer-events: auto;
    animation: notificationToastIn .24s ease-out both;
}
.notification-toast.is-leaving { animation: notificationToastOut .22s ease-in both; }
.notification-toast.is-critical { border-left-color: #bc2f3b; }
.notification-toast.is-warning { border-left-color: #d97706; }
.notification-toast.is-success { border-left-color: #16865b; }
.notification-toast.is-info { border-left-color: #0d5bd7; }
.notification-toast-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #e6f0ff;
    color: #0d5bd7;
    font-size: 1.05rem;
}
.notification-toast.is-critical .notification-toast-icon { background:#ffe5e7; color:#bc2f3b; }
.notification-toast.is-warning .notification-toast-icon { background:#fff0d6; color:#a65b00; }
.notification-toast.is-success .notification-toast-icon { background:#e5f8ef; color:#16865b; }
.notification-toast-content {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.notification-toast-content strong { font-size: .92rem; line-height: 1.3; }
.notification-toast-content > span { color: var(--muted); font-size: .8rem; line-height: 1.38; }
.notification-toast-content small { color: #66809c; font-size: .7rem; }
.notification-toast-close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #66788d;
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.notification-toast-close:hover { background:#eef3f8; color:#102238; }
@keyframes notificationToastIn {
    from { opacity:0; transform:translate3d(18px,-4px,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes notificationToastOut {
    from { opacity:1; transform:translate3d(0,0,0); }
    to { opacity:0; transform:translate3d(18px,-4px,0); }
}
@media (max-width: 700px) {
    .notification-toast-stack { top: 72px; right: 10px; width: calc(100vw - 20px); }
    .notification-toast { grid-template-columns: 34px minmax(0,1fr) 28px; padding: 10px; gap: 8px; }
    .notification-toast-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .notification-toast, .notification-toast.is-leaving { animation: none; }
}


/* v3.5.45 — nome centralizado e segunda linha com KM do dia + raio. */
.vehicle-sonar-bolt,
.vehicle-marker-charging-bolt-placeholder,
.vehicle-marker-charging-bolt-inline,
.vehicle-marker-charging-bolt-floating,
.vehicle-marker-charging-bolt {
    display: none !important;
}
.vehicle-marker-name {
    display: block;
    max-width: 100%;
    text-align: center;
}
.vehicle-marker-name-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.vehicle-marker-meta {
    display: block;
    margin-top: 1px;
    color: rgba(255,255,255,.98);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}
.vehicle-marker-meta-separator {
    display: inline-block;
    margin: 0 1px;
    opacity: .9;
}
.vehicle-marker-meta .vehicle-marker-name-charging-bolt {
    display: inline-block !important;
    vertical-align: -1px;
    color: #fb923c;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
    filter: drop-shadow(0 0 3px rgba(251, 146, 60, .75));
    transform-origin: center;
    animation: vehicleMarkerNameChargeBlink .9s ease-in-out infinite;
}
@keyframes vehicleMarkerNameChargeBlink {
    0%, 100% { opacity: .42; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-marker-meta .vehicle-marker-name-charging-bolt { animation: none !important; opacity: 1; }
}


/* v3.5.46 — restaura o tempo parado no marcador sem alterar o layout centralizado. */
.leaflet-tooltip.vehicle-name-tooltip.has-secondary-line .vehicle-marker-stop-time {
    margin-top: 2px;
    align-self: center;
    text-align: center;
}


/* v3.5.47 — layout final do marcador centralizado e remoção do KM duplicado. */
.leaflet-tooltip.vehicle-name-tooltip.has-secondary-line,
.leaflet-tooltip.vehicle-name-tooltip.has-stop-duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}
.vehicle-marker-name {
    display: block;
    text-align: center;
    max-width: 100%;
}
.vehicle-marker-name-text {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vehicle-marker-meta {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    color: rgba(255,255,255,.98);
    white-space: nowrap;
    text-align: center;
}
.vehicle-marker-meta-distance {
    display: inline;
}
.vehicle-marker-meta-separator {
    display: inline;
    opacity: .95;
}
.vehicle-marker-stop-time {
    display: block;
    margin-top: 1px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
}

/* v4.0.52 — Replay do Dia */
.day-replay-panel{position:absolute;z-index:850;left:50%;transform:translateX(-50%);top:68px;width:min(760px,calc(100% - 24px));padding:10px 12px;border-radius:14px;background:rgba(9,18,31,.94);color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.day-replay-panel[hidden]{display:none!important}.day-replay-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.day-replay-row strong{margin-right:auto}.day-replay-row input[type=date],.day-replay-row select{min-height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.2);padding:5px 8px;background:#fff;color:#111}.day-replay-timeline{margin-top:8px;flex-wrap:nowrap}.day-replay-timeline input[type=range]{flex:1;min-width:100px}.day-replay-info{margin-top:7px;font-size:13px;opacity:.92;text-align:center}.day-replay-marker{background:#fff;border:3px solid #2563eb;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 5px rgba(37,99,235,.22),0 2px 8px rgba(0,0,0,.4)}
html[data-theme="light"] .day-replay-panel{background:rgba(255,255,255,.96);color:#132033;border:1px solid rgba(15,23,42,.12)}
@media(max-width:640px){.day-replay-panel{top:112px}.day-replay-row strong{width:100%}.day-replay-row .btn{padding:7px 9px}.day-replay-info{font-size:12px}}

/* v4.0.53 — Replay compacto no topo + acompanhamento inferior central */
.day-replay-panel{top:8px;width:min(680px,calc(100% - 18px));padding:6px 8px;border-radius:11px;z-index:1100}
.day-replay-row{gap:6px;flex-wrap:nowrap}
.day-replay-row strong{font-size:12px;white-space:nowrap}
.day-replay-row input[type=date],.day-replay-row select{min-height:30px;height:30px;padding:2px 6px;font-size:12px}
.day-replay-row .btn{min-height:30px;padding:4px 8px;font-size:12px;white-space:nowrap}
.day-replay-timeline{margin-top:4px}
.day-replay-timeline span{font-size:11px;white-space:nowrap}
.day-replay-info{margin-top:3px;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.day-replay-panel{top:6px;width:calc(100% - 12px);padding:5px 6px}.day-replay-row{gap:4px}.day-replay-row strong{display:none}.day-replay-row input[type=date]{min-width:0;width:122px}.day-replay-row .btn{padding:4px 6px}.day-replay-info{font-size:10px}}

/* v4.0.55 — marcadores fixos automáticos */
.mapaon-fixed-marker-wrap{background:transparent;border:0;overflow:visible}
.mapaon-fixed-marker-pin{--fixed-marker-color:#0d5bd7;display:block;position:relative;width:26px;height:26px;background:var(--fixed-marker-color);border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.mapaon-fixed-marker-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:6px;top:6px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.fixed-marker-popup{font-size:13px;line-height:1.45;min-width:190px}
.fixed-marker-popup strong{font-size:14px}
.fixed-marker-tooltip{font-weight:700}

/* v4.0.62 — editor visual de cercas com veículo de referência */
.virtual-fence-reference-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
}
.virtual-fence-reference-actions {
    justify-content: flex-end;
    margin: 0;
}
.virtual-fence-reference-icon-wrap,
.virtual-fence-handle-wrap {
    background: transparent !important;
    border: 0 !important;
}
.virtual-fence-reference-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
    font-size: 18px;
}
.virtual-fence-handle,
.virtual-fence-vertex-handle {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .28);
    cursor: grab;
    user-select: none;
}
.virtual-fence-handle:active,
.virtual-fence-vertex-handle:active {
    cursor: grabbing;
}
.virtual-fence-center-handle {
    width: 24px;
    height: 24px;
    background: #2563eb;
}
.virtual-fence-radius-handle {
    width: 22px;
    height: 22px;
    background: #f59e0b;
}
.virtual-fence-vertex-handle {
    width: 24px;
    height: 24px;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}
#virtualFencesMap {
    min-height: 430px;
}
@media (max-width: 860px) {
    .virtual-fence-reference-bar {
        grid-template-columns: 1fr;
    }
    .virtual-fence-reference-actions {
        justify-content: stretch;
    }
    .virtual-fence-reference-actions .btn {
        flex: 1 1 180px;
    }
    #virtualFencesMap {
        min-height: 360px;
    }
}