:root {
  --bg: #030b18;
  --panel: rgba(8, 25, 49, 0.94);
  --panel-2: rgba(11, 34, 65, 0.95);
  --line: rgba(104, 171, 255, 0.18);
  --blue: #168cff;
  --cyan: #21c7ff;
  --green: #53df9f;
  --yellow: #ffc857;
  --text: #edf7ff;
  --muted: #8da9c5;
  --danger: #ff6b7a;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 75% 20%, rgba(13, 89, 181, 0.18), transparent 34%),
    linear-gradient(135deg, #030914 0%, #061427 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 245px 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(2, 12, 27, 0.92);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 62px;
  height: 62px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(22, 140, 255, 0.22);
}

.brand-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .11em;
}

.brand-slogan {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.nav-label,
.eyebrow {
  margin: 0 0 5px;
  color: #66b9ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
}

.nav-item.active {
  color: var(--text);
  border-color: rgba(22, 140, 255, .27);
  background: linear-gradient(90deg, rgba(22, 140, 255, .19), rgba(22, 140, 255, .04));
}

.nav-item:disabled {
  opacity: .45;
}

.sidebar-status {
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(7, 28, 54, .7);
}

.sidebar-status strong,
.sidebar-status small {
  display: block;
}

.sidebar-status strong {
  font-size: 12px;
}

.sidebar-status small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(83, 223, 159, .8);
}

.main {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.topbar h1,
.panel-heading h2,
.selected-header h3 {
  margin: 0;
}

.topbar h1 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -.04em;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.live-chip,
.refresh-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 28, 56, .84);
  color: var(--text);
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
}

.live-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn {
  cursor: pointer;
}

.refresh-btn:hover {
  border-color: rgba(33, 199, 255, .6);
}

.pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(83, 223, 159, .5);
  animation: pulse 1.7s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(83, 223, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(83, 223, 159, 0); }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.stat-card,
.vehicle-panel,
.map-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 31, 60, .96), rgba(5, 21, 41, .96));
  box-shadow: var(--shadow);
}

.stat-card {
  padding: 18px;
  border-radius: 16px;
}

.stat-card .stat-label,
.stat-card small {
  display: block;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 31px;
  line-height: 1;
}

.stat-card strong em {
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
}

.stat-card small {
  margin-top: 8px;
  color: #6f8dac;
  font-size: 10px;
}

.workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  min-height: 590px;
}

.vehicle-panel,
.map-panel {
  border-radius: 18px;
  overflow: hidden;
}

.vehicle-panel {
  padding: 18px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.counter {
  min-width: 30px;
  padding: 5px 8px;
  text-align: center;
  border-radius: 10px;
  background: rgba(22, 140, 255, .15);
  color: #75c3ff;
  font-size: 12px;
  font-weight: 800;
}

.vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 3px;
}

.vehicle-item {
  border: 1px solid rgba(104, 171, 255, .12);
  border-radius: 14px;
  background: rgba(7, 25, 48, .72);
  padding: 13px;
  cursor: pointer;
  transition: .2s ease;
}

.vehicle-item:hover,
.vehicle-item.active {
  border-color: rgba(33, 199, 255, .44);
  transform: translateY(-1px);
  background: rgba(11, 38, 71, .9);
}

.vehicle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vehicle-code {
  font-weight: 850;
  font-size: 13px;
}

.vehicle-device,
.vehicle-meta {
  color: var(--muted);
  font-size: 10px;
}

.vehicle-device {
  margin-top: 3px;
}

.vehicle-meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.vehicle-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
}

.vehicle-state.online {
  color: var(--green);
  background: rgba(83, 223, 159, .1);
}

.vehicle-state.offline {
  color: var(--danger);
  background: rgba(255, 107, 122, .1);
}

.empty-state {
  padding: 35px 15px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.map-panel {
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 590px;
  background: #071429;
}

.leaflet-container {
  background: #071429;
}

.leaflet-control-zoom a {
  background: #0a2445 !important;
  color: white !important;
  border-color: rgba(104, 171, 255, .2) !important;
}

.vehicle-marker {
  background: transparent;
  border: 0;
}

.marker-core {
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--cyan), #006cff);
  border: 3px solid #dff6ff;
  box-shadow: 0 0 20px rgba(33, 199, 255, .78);
  display: grid;
  place-items: center;
}

.marker-core::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.selected-card {
  position: absolute;
  z-index: 900;
  left: 18px;
  bottom: 18px;
  width: min(420px, calc(100% - 36px));
  padding: 16px;
  border: 1px solid rgba(104, 171, 255, .24);
  border-radius: 16px;
  background: rgba(3, 16, 33, .93);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.selected-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.status-badge {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 900;
  color: var(--green);
  background: rgba(83, 223, 159, .11);
}

.status-badge.offline {
  color: var(--danger);
  background: rgba(255, 107, 122, .11);
}

.selected-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.selected-grid > div {
  padding: 9px;
  border: 1px solid rgba(104, 171, 255, .11);
  border-radius: 10px;
  background: rgba(9, 33, 62, .72);
}

.selected-grid span,
.selected-grid strong {
  display: block;
}

.selected-grid span {
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 5px;
}

.selected-grid strong {
  font-size: 11px;
}

.coordinates {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 10px;
}

.map-error {
  position: absolute;
  z-index: 999;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 12px;
  border-radius: 10px;
  color: #ffd8dd;
  background: rgba(127, 24, 41, .9);
  border: 1px solid rgba(255, 107, 122, .4);
  font-size: 11px;
}

.toast {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(127, 24, 41, .96);
  border: 1px solid rgba(255, 107, 122, .45);
  color: #ffe7ea;
  font-size: 12px;
  box-shadow: var(--shadow);
}

.hidden {
  display: none !important;
}

@media (max-width: 1100px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .workspace {
    grid-template-columns: 280px 1fr;
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .nav,
  .sidebar-status {
    display: none;
  }

  .main {
    padding: 18px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .vehicle-panel {
    order: 2;
  }

  .map-panel {
    order: 1;
  }

  #map {
    min-height: 470px;
  }
}

@media (max-width: 560px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topbar {
    align-items: flex-end;
  }

  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .selected-grid {
    grid-template-columns: 1fr 1fr;
  }

  .coordinates {
    flex-direction: column;
    gap: 4px;
  }
}

.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0;
}

.panel-heading.compact {
  margin-bottom: 10px;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.alert-item {
  border: 1px solid rgba(255, 200, 87, .18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(59, 40, 9, .24);
}

.alert-item.high {
  border-color: rgba(255, 107, 122, .25);
  background: rgba(87, 20, 31, .24);
}

.alert-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.alert-type {
  font-size: 10px;
  font-weight: 900;
  color: var(--yellow);
}

.alert-item.high .alert-type {
  color: var(--danger);
}

.alert-time {
  color: var(--muted);
  font-size: 9px;
}

.alert-message {
  color: #d9e7f5;
  font-size: 10px;
  line-height: 1.45;
}

.ack-btn {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(83, 223, 159, .25);
  background: rgba(83, 223, 159, .08);
  color: var(--green);
  border-radius: 8px;
  padding: 7px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.map-toolbar {
  position: absolute;
  z-index: 950;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
}

.tool-btn,
.primary-btn {
  border: 1px solid rgba(33, 199, 255, .35);
  background: rgba(4, 29, 57, .94);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.tool-btn.secondary {
  border-color: rgba(255, 107, 122, .3);
  color: #ffd8dd;
}

.geofence-form {
  position: absolute;
  z-index: 960;
  top: 58px;
  right: 14px;
  width: 260px;
  padding: 14px;
  border: 1px solid rgba(104, 171, 255, .24);
  border-radius: 14px;
  background: rgba(3, 16, 33, .96);
  box-shadow: var(--shadow);
}

.geofence-form h3 {
  margin: 0 0 12px;
}

.geofence-form label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
}

.geofence-form input {
  width: 100%;
  margin-top: 5px;
  border: 1px solid rgba(104, 171, 255, .18);
  border-radius: 9px;
  background: #071a32;
  color: white;
  padding: 9px;
  outline: none;
}

.geofence-coords {
  margin: 10px 0;
  color: #91b0ce;
  font-size: 9px;
}

.primary-btn {
  width: 100%;
  background: linear-gradient(135deg, #0c73df, #12a8ff);
}

.primary-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.leaflet-tooltip.geofence-label {
  background: #071a32;
  color: #dff6ff;
  border: 1px solid rgba(33, 199, 255, .35);
  box-shadow: none;
  font-size: 9px;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(22, 140, 255, .2), transparent 32%),
    linear-gradient(135deg, #020914 0%, #06182e 100%);
}

.login-card {
  width: min(410px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10, 31, 60, .98), rgba(4, 17, 34, .98));
  box-shadow: var(--shadow);
}

.login-logo {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
  margin-bottom: 18px;
  box-shadow: 0 0 45px rgba(22, 140, 255, .22);
}

.login-card h1 {
  margin: 0;
  font-size: 34px;
}

.login-copy {
  color: var(--muted);
  margin: 8px 0 24px;
  font-size: 13px;
}

.login-card label {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
}

.login-card input {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid rgba(104, 171, 255, .18);
  border-radius: 10px;
  background: #071a32;
  color: white;
  outline: none;
}

.login-card .primary-btn {
  margin-top: 18px;
}

.login-error {
  margin-top: 12px;
  padding: 10px;
  border-radius: 9px;
  background: rgba(127, 24, 41, .55);
  color: #ffe3e7;
  font-size: 11px;
}

.account-card {
  margin-top: auto;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 28, 54, .7);
}

.account-card strong,
.account-card small {
  display: block;
}

.account-card strong {
  font-size: 12px;
}

.account-card small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.role-chip {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(22, 140, 255, .13);
  color: #75c3ff;
  font-size: 9px;
  font-weight: 900;
}

.logout-btn {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 107, 122, .2);
  border-radius: 8px;
  background: transparent;
  color: #ff9eaa;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.sidebar-status {
  margin-top: 0;
}

.security-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(33, 199, 255, .22);
  border-radius: 8px;
  background: rgba(22, 140, 255, .08);
  color: #8bd4ff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.security-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 6, 15, .72);
  backdrop-filter: blur(8px);
}

.security-dialog {
  width: min(900px, 96vw);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #081f3b, #041326);
  box-shadow: var(--shadow);
  padding: 20px;
}

.security-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.security-header h2 {
  margin: 0;
}

.icon-btn {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: white;
  cursor: pointer;
  padding: 8px 10px;
}

.security-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.security-tab {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.security-tab.active {
  color: white;
  border-color: rgba(33,199,255,.45);
  background: rgba(22,140,255,.15);
}

.security-pane.hidden {
  display: none;
}

.security-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.security-table th,
.security-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.security-table th {
  color: #74c7ff;
  font-size: 9px;
  letter-spacing: .08em;
}

.device-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-btn {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: white;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 9px;
}

.mini-btn.danger {
  color: #ff9eaa;
  border-color: rgba(255,107,122,.25);
}

.password-form {
  max-width: 460px;
}

.password-form label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
}

.password-form input {
  width: 100%;
  margin-top: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #071a32;
  color: white;
  padding: 10px;
}

.api-key-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,200,87,.3);
  border-radius: 12px;
  background: rgba(80,52,7,.24);
  color: #ffe6a6;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.fleet-tab{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:10px;font-weight:850}
.fleet-tab.active{color:white;border-color:rgba(33,199,255,.45);background:rgba(22,140,255,.15)}

.admin-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}
.compact-btn{width:auto;padding:9px 14px}
.inline-admin-form{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(5,22,43,.96)}
.inline-admin-form h3{margin:0 0 12px}
.inline-admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.inline-admin-form label{color:var(--muted);font-size:10px}
.inline-admin-form input,.inline-admin-form select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;background:#071a32;color:white;padding:9px}
.inline-admin-form-actions{display:flex;gap:8px;margin-top:14px}
.action-cell{display:flex;gap:6px;flex-wrap:wrap}
.edit-btn{border:1px solid rgba(33,199,255,.25);border-radius:8px;background:rgba(22,140,255,.08);color:#89d3ff;padding:6px 8px;cursor:pointer;font-size:9px}
.toggle-btn{border:1px solid rgba(255,200,87,.25);border-radius:8px;background:rgba(255,200,87,.08);color:#ffd470;padding:6px 8px;cursor:pointer;font-size:9px}
@media(max-width:700px){.inline-admin-form-grid{grid-template-columns:1fr}}

.expiry-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.expiry-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(22,140,255,.06)}
.expiry-card span{display:block;color:var(--muted);font-size:9px}
.expiry-card strong{display:block;font-size:24px;margin-top:4px}
.expiry-card.danger{border-color:rgba(255,107,122,.25);background:rgba(127,24,41,.15)}
.maint-tab{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:10px;font-weight:850}
.maint-tab.active{color:white;border-color:rgba(33,199,255,.45);background:rgba(22,140,255,.15)}
@media(max-width:800px){.expiry-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

.reports-dialog{width:min(1100px,96vw)}
.reports-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.reports-filters label{font-size:10px;color:var(--muted)}
.reports-filters input,.reports-filters select{width:100%;margin-top:5px;border:1px solid var(--line);border-radius:9px;background:#071a32;color:white;padding:9px}
.report-panels{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:12px}
.report-panel{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(5,22,43,.7)}
.report-panel h3{margin-top:0}
.report-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.report-metric{padding:10px;border:1px solid rgba(104,171,255,.14);border-radius:10px}
.report-metric span{display:block;color:var(--muted);font-size:9px}
.report-metric strong{display:block;margin-top:4px}
.report-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media(max-width:850px){.reports-filters{grid-template-columns:1fr 1fr}.report-panels{grid-template-columns:1fr}}

.tenant-context-card{margin:14px 0;padding:12px;border:1px solid rgba(33,199,255,.22);border-radius:12px;background:rgba(22,140,255,.07)}
.commercial-tab{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:10px;font-weight:850}
.commercial-tab.active{color:white;border-color:rgba(33,199,255,.45);background:rgba(22,140,255,.15)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan-card{padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(5,22,43,.72)}
.plan-card h3{margin:0 0 8px}
.plan-price{font-size:26px;font-weight:900}
.plan-meta{margin-top:8px;color:var(--muted);font-size:10px;line-height:1.7}
.usage-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px}
.usage-fill{height:100%;background:currentColor}
.tenant-selector{margin-top:8px;width:100%;border:1px solid var(--line);border-radius:8px;background:#071a32;color:white;padding:7px}
@media(max-width:850px){.plan-grid{grid-template-columns:1fr}}

/* V1.2 compact layout */
.sidebar{width:220px;padding:14px 12px}
.main{padding:18px 20px}
.topbar{margin-bottom:14px}
.topbar h1{font-size:32px}
.stats-grid{gap:10px;margin-bottom:12px}
.stat-card{padding:14px 16px;min-height:92px}
.stat-card strong{font-size:30px}
.workspace{gap:10px}
.vehicle-panel{width:300px;padding:14px}
.map-panel{min-height:560px}
.account-card{padding:12px}
.security-btn,.logout-btn{padding:7px 8px;margin-top:6px}
.nav-item{padding:10px 12px}
.panel-heading h2{font-size:22px}

.billing-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.billing-tab{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:10px;font-weight:850}
.billing-tab.active{color:white;border-color:rgba(33,199,255,.45);background:rgba(22,140,255,.15)}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portal-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(5,22,43,.72)}
.portal-card h3{margin-top:0}
@media(max-width:1000px){
  .sidebar{width:200px}
  .main{padding:14px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .workspace{grid-template-columns:1fr}
  .vehicle-panel{width:auto}
  .billing-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .portal-grid{grid-template-columns:1fr}
  .billing-kpis{grid-template-columns:1fr}
}


/* ============================================================
   BAZCO GPS V1.2.1 — COMPACT CONTROL CENTER
   Overrides intencionalmente al layout histórico.
   ============================================================ */

html, body {
  height: 100%;
  overflow: hidden;
}

.app-shell {
  grid-template-columns: 208px minmax(0, 1fr) !important;
  height: 100vh;
  min-height: 0 !important;
  overflow: hidden;
}

.sidebar {
  width: auto !important;
  height: 100vh !important;
  min-height: 0;
  padding: 10px 10px 9px !important;
  gap: 9px !important;
  overflow: hidden;
}

.brand {
  flex: 0 0 auto;
  gap: 9px !important;
  min-height: 48px;
}

.brand-logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
}

.brand-copy {
  min-width: 0;
}

.brand-title {
  font-size: 13px !important;
  letter-spacing: .09em !important;
}

.brand-slogan {
  font-size: 9px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 126px;
}

.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  scrollbar-width: thin;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(104,171,255,.25);
  border-radius: 99px;
}

.side-section {
  padding: 8px 0 7px;
  border-bottom: 1px solid rgba(104,171,255,.09);
}

.side-section:first-child {
  padding-top: 2px;
}

.nav-label {
  margin: 0 7px 5px !important;
  font-size: 8px !important;
  letter-spacing: .14em !important;
}

.nav {
  gap: 3px !important;
}

.nav-item {
  width: 100%;
  min-height: 32px;
  border-radius: 8px !important;
  gap: 8px !important;
  padding: 7px 8px !important;
  font-size: 10px;
  cursor: pointer;
}

.nav-icon {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  color: #74c7ff;
}

.module-nav:hover {
  color: var(--text);
  border-color: rgba(22,140,255,.20);
  background: rgba(22,140,255,.08);
}

.sidebar-bottom {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
}

.account-card.compact-account {
  margin: 0 !important;
  padding: 8px 9px !important;
  border-radius: 10px !important;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
}

.account-copy {
  min-width: 0;
}

.account-card.compact-account strong {
  font-size: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-card.compact-account small {
  font-size: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-chip {
  margin-top: 4px !important;
  padding: 3px 5px !important;
  font-size: 7px !important;
}

.compact-logout {
  width: auto !important;
  margin: 0 !important;
  padding: 6px 7px !important;
  font-size: 8px !important;
  min-width: 39px;
}

.sidebar-status.compact-status {
  margin: 0 !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  gap: 7px !important;
}

.sidebar-status.compact-status .status-dot {
  width: 7px;
  height: 7px;
}

.sidebar-status.compact-status strong {
  font-size: 9px !important;
}

.sidebar-status.compact-status small {
  font-size: 7px !important;
  margin-top: 1px !important;
}

/* Main viewport: diseñado para 1366x768 sin desperdicio vertical */
.main {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 12px 14px 12px !important;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
}

.topbar {
  min-height: 52px;
  margin: 0 !important;
}

.topbar .eyebrow {
  margin-bottom: 2px !important;
  font-size: 8px !important;
}

.topbar h1 {
  font-size: clamp(24px, 2.3vw, 32px) !important;
  line-height: 1.03;
}

.topbar-actions {
  gap: 6px !important;
}

.live-chip,
.refresh-btn {
  padding: 7px 10px !important;
  font-size: 9px !important;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.stat-card {
  min-height: 74px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.stat-label {
  font-size: 8px !important;
}

.stat-card strong {
  margin-top: 5px !important;
  font-size: 24px !important;
}

.stat-card small {
  margin-top: 5px !important;
  font-size: 8px !important;
}

.workspace {
  min-height: 0 !important;
  height: 100%;
  grid-template-columns: 278px minmax(0,1fr) !important;
  gap: 8px !important;
}

.vehicle-panel,
.map-panel {
  min-height: 0 !important;
  height: 100%;
  border-radius: 13px !important;
  box-shadow: none !important;
}

.vehicle-panel {
  width: auto !important;
  padding: 10px !important;
  display: grid;
  grid-template-rows: auto minmax(105px,.85fr) auto auto minmax(120px,1.15fr);
  overflow: hidden;
}

.panel-heading {
  margin-bottom: 7px !important;
}

.panel-heading h2 {
  font-size: 18px !important;
}

.panel-heading .eyebrow {
  font-size: 8px !important;
}

.counter {
  min-width: 24px !important;
  padding: 3px 6px !important;
  font-size: 9px !important;
}

.vehicle-list {
  max-height: none !important;
  min-height: 0;
  gap: 5px !important;
}

.vehicle-item {
  padding: 9px !important;
  border-radius: 10px !important;
}

.vehicle-code {
  font-size: 11px !important;
}

.vehicle-device,
.vehicle-meta {
  font-size: 8px !important;
}

.vehicle-meta {
  margin-top: 6px !important;
}

.vehicle-state {
  padding: 3px 5px !important;
  font-size: 7px !important;
}

.panel-divider {
  margin: 7px 0 !important;
}

.alerts-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.alert-item {
  padding: 8px !important;
  border-radius: 9px !important;
  margin-bottom: 5px !important;
}

.alert-type,
.alert-time,
.alert-message {
  font-size: 8px !important;
}

.ack-btn {
  padding: 5px 7px !important;
  font-size: 7px !important;
}

.map-panel {
  position: relative;
}

#map {
  height: 100% !important;
  min-height: 0 !important;
}

.map-toolbar {
  top: 9px !important;
  right: 9px !important;
}

.tool-btn {
  padding: 7px 9px !important;
  font-size: 8px !important;
}

.selected-card {
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  padding: 10px !important;
  max-width: 520px;
}

.selected-card h3 {
  font-size: 15px !important;
}

.selected-grid {
  gap: 7px !important;
}

.selected-grid span,
.selected-grid strong,
.coordinates {
  font-size: 8px !important;
}

/* Los modales sí pueden desplazarse; el dashboard no. */
.security-modal {
  overflow-y: auto;
  padding: 12px !important;
}

.security-dialog {
  padding: 14px !important;
  max-height: 94vh !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 188px minmax(0,1fr) !important;
  }

  .workspace {
    grid-template-columns: 245px minmax(0,1fr) !important;
  }
}

@media (max-width: 860px) {
  html, body {
    overflow: auto;
  }

  .app-shell {
    display: block !important;
    height: auto;
    overflow: visible;
  }

  .sidebar {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  .sidebar-scroll {
    max-height: 260px;
  }

  .main {
    height: auto;
    overflow: visible;
    display: block;
  }

  .stats-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    margin-bottom: 8px !important;
  }

  .workspace {
    display: grid;
    grid-template-columns: 1fr !important;
    height: auto;
  }

  .vehicle-panel {
    height: 420px;
  }

  .map-panel,
  #map {
    height: 520px !important;
    min-height: 520px !important;
  }
}


/* ============================================================
   BAZCO GPS V1.2.2 — Functional navigation
   ============================================================ */

.nav-item.active {
  color: #ffffff !important;
  border-color: rgba(33,199,255,.42) !important;
  background: linear-gradient(90deg, rgba(22,140,255,.20), rgba(22,140,255,.08)) !important;
}

.manager-dialog {
  width: min(860px, 96vw);
}

.manager-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 12px;
}

.manager-kpi {
  min-width: 120px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(22,140,255,.06);
}

.manager-kpi span {
  display: block;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.manager-kpi strong {
  display: block;
  margin-top: 3px;
  font-size: 22px;
}

.manager-filter {
  color: var(--muted);
  font-size: 9px;
}

.manager-filter select {
  margin-left: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #071a32;
  color: white;
  padding: 7px 9px;
}

.manager-list {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.manager-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
}

.manager-row:last-child {
  border-bottom: 0;
}

.manager-row strong {
  display: block;
  font-size: 11px;
}

.manager-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.manager-row-meta {
  color: #9fcdf0;
  font-size: 9px;
  line-height: 1.45;
}

.manager-alert {
  border: 1px solid rgba(104,171,255,.14);
  border-radius: 11px;
  margin-bottom: 7px;
  padding: 10px 11px;
  background: rgba(5,22,43,.65);
}

.manager-alert.high {
  border-color: rgba(255,107,122,.28);
}

.manager-alert-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.manager-alert-type {
  font-size: 9px;
  font-weight: 900;
  color: #ffd470;
}

.manager-alert.high .manager-alert-type {
  color: #ff8794;
}

.manager-alert-time {
  font-size: 8px;
  color: var(--muted);
}

.manager-alert-message {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.manager-alert-state {
  display: inline-flex;
  padding: 3px 6px;
  border-radius: 99px;
  font-size: 7px;
  font-weight: 800;
  background: rgba(40,200,130,.12);
  color: #5ff0b0;
}

@media (max-width: 650px) {
  .manager-row {
    grid-template-columns: 1fr;
  }

  .manager-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}


/* ============================================================
   BAZCO GPS V1.3 — REALTIME + GEOFENCE DELETE
   ============================================================ */

.realtime-connected {
  border-color: rgba(48, 224, 151, .35) !important;
  color: #69f0b5 !important;
  background: rgba(34, 179, 115, .10) !important;
}

.realtime-connected .pulse {
  background: #37e69b !important;
  box-shadow: 0 0 0 5px rgba(55,230,155,.10);
}

.realtime-connecting {
  color: #ffd470 !important;
  border-color: rgba(255, 200, 87, .28) !important;
}

.realtime-disconnected {
  color: #ff8794 !important;
  border-color: rgba(255, 107, 122, .30) !important;
  background: rgba(127,24,41,.12) !important;
}

.manager-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.danger-action-btn {
  border: 1px solid rgba(255, 107, 122, .32);
  border-radius: 8px;
  background: rgba(127,24,41,.14);
  color: #ff9aa5;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.danger-action-btn:hover {
  background: rgba(180,31,57,.22);
  color: white;
}

@media (max-width: 650px) {
  .manager-row-actions {
    justify-content: flex-start;
  }
}


/* ============================================================
   BAZCO GPS V1.4 — HISTORIAL / ROUTE PLAYBACK
   ============================================================ */

.history-drawer {
  position: absolute;
  z-index: 965;
  left: 9px;
  right: 9px;
  bottom: 9px;
  border: 1px solid rgba(104,171,255,.28);
  border-radius: 13px;
  background: rgba(3,16,33,.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  overflow: hidden;
}

.history-drawer.collapsed {
  right: auto;
  width: min(410px, calc(100% - 18px));
}

.history-drawer-head {
  min-height: 43px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-drawer-head .eyebrow {
  font-size: 7px !important;
  margin: 0 0 2px !important;
}

.history-drawer-head h3 {
  margin: 0;
  font-size: 14px;
}

.history-head-actions {
  display: flex;
  gap: 5px;
}

.history-icon-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
}

.history-drawer-body {
  padding: 0 10px 10px;
}

.history-drawer.collapsed .history-drawer-body {
  display: none;
}

.history-filters {
  display: grid;
  grid-template-columns: minmax(130px,.9fr) minmax(160px,1fr) minmax(160px,1fr) auto;
  gap: 7px;
  align-items: end;
}

.history-filters label,
.history-speed-control,
.history-trip-control {
  color: var(--muted);
  font-size: 8px;
}

.history-filters select,
.history-filters input,
.history-speed-control select,
.history-trip-control select {
  width: 100%;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #071a32;
  color: white;
  padding: 6px 7px;
  font-size: 9px;
}

.history-kpis {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 6px;
  margin: 8px 0;
}

.history-kpis > div {
  padding: 6px 8px;
  border: 1px solid rgba(104,171,255,.11);
  border-radius: 8px;
  background: rgba(9,33,62,.72);
}

.history-kpis span,
.history-kpis strong {
  display: block;
}

.history-kpis span {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.history-kpis strong {
  margin-top: 3px;
  font-size: 10px;
}

.history-playback {
  display: grid;
  grid-template-columns: 32px 32px minmax(160px,1fr) 75px 145px;
  gap: 7px;
  align-items: end;
}

.history-play-btn {
  height: 31px;
  border: 1px solid rgba(33,199,255,.32);
  border-radius: 8px;
  background: rgba(22,140,255,.12);
  color: white;
  cursor: pointer;
  font-weight: 900;
}

.history-play-btn.secondary {
  border-color: rgba(255,107,122,.24);
  background: rgba(127,24,41,.12);
}

.history-play-btn:disabled {
  opacity: .38;
  cursor: default;
}

.history-slider-wrap {
  min-width: 0;
}

#history-slider {
  width: 100%;
  accent-color: #21c7ff;
}

.history-slider-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.history-playback-marker {
  background: transparent;
  border: 0;
}

.history-playback-core {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffc857;
  border: 4px solid white;
  box-shadow: 0 0 22px rgba(255,200,87,.82);
  position: relative;
}

.history-playback-core::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 2px;
  color: #071429;
  font-size: 9px;
  font-weight: 1000;
}

.history-start-icon,
.history-end-icon {
  background: transparent;
  border: 0;
}

.history-point-core {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 13px rgba(0,0,0,.35);
}

.history-point-core.start {
  background: #36dc96;
}

.history-point-core.end {
  background: #ff6b7a;
}

@media(max-width:1050px) {
  .history-kpis {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .history-playback {
    grid-template-columns: 32px 32px minmax(130px,1fr) 70px;
  }

  .history-trip-control {
    grid-column: 1 / -1;
  }
}

@media(max-width:760px) {
  .history-filters {
    grid-template-columns: 1fr 1fr;
  }

  .history-playback {
    grid-template-columns: 32px 32px minmax(120px,1fr);
  }

  .history-speed-control,
  .history-trip-control {
    grid-column: auto;
  }
}


/* V1.4.1 — Tenant context visibility */
.tenant-context-mini{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  gap:2px 6px;
  align-items:center;
  padding:6px 7px;
  border:1px solid rgba(33,199,255,.18);
  border-radius:9px;
  background:rgba(22,140,255,.06);
}
.tenant-context-mini>span{
  grid-column:1/-1;
  color:var(--muted);
  font-size:6px;
  letter-spacing:.11em;
}
.tenant-context-mini strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8px;
}
.tenant-context-mini button{
  width:24px;height:24px;padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:#071a32;color:#8fd7ff;
  cursor:pointer;
}


/* V1.4.2 — Gestión segura de empresas */
.company-active{color:#69f0b5;font-weight:800;font-size:8px}
.company-inactive{color:#ff9aa5;font-weight:800;font-size:8px}
.action-cell .company-toggle{min-width:64px}
.action-cell .company-delete{min-width:54px}


/* ============================================================
   BAZCO GPS V1.4.3 — GOOGLE MAPS / SATELLITE / TRAFFIC
   ============================================================ */

.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px !important;
}

.top-account-card{
  min-width:210px;
  max-width:260px;
  padding:7px 8px 7px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:1px solid rgba(104,171,255,.22);
  border-radius:11px;
  background:rgba(7,26,50,.88);
}

.top-account-copy{
  min-width:0;
}

.top-account-copy strong,
.top-account-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.top-account-copy strong{
  font-size:9px;
}

.top-account-copy small{
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
}

.top-account-copy .role-chip{
  display:inline-flex;
  margin-top:4px !important;
}

.top-logout{
  width:auto !important;
  min-width:43px;
  margin:0 !important;
  padding:6px 8px !important;
  font-size:8px !important;
}

.map-toolbar{
  display:flex;
  gap:6px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.map-layer-control{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid rgba(104,171,255,.22);
  border-radius:10px;
  background:rgba(4,18,36,.93);
  backdrop-filter:blur(10px);
}

.map-layer-btn{
  border:0;
  border-radius:7px;
  padding:6px 8px;
  background:transparent;
  color:#9ebdd7;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
}

.map-layer-btn:hover{
  color:white;
  background:rgba(22,140,255,.08);
}

.map-layer-btn.active{
  color:white;
  background:rgba(22,140,255,.23);
  box-shadow:inset 0 0 0 1px rgba(33,199,255,.25);
}

.map-layer-btn.traffic.active{
  color:#67efb1;
  background:rgba(31,185,117,.14);
  box-shadow:inset 0 0 0 1px rgba(58,222,151,.24);
}

.google-maps-warning{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  z-index:900;
  width:min(430px,calc(100% - 30px));
  padding:15px;
  border:1px solid rgba(255,200,87,.30);
  border-radius:12px;
  background:rgba(3,16,33,.96);
  text-align:center;
}

.google-maps-warning strong,
.google-maps-warning span{
  display:block;
}

.google-maps-warning strong{
  color:#ffd470;
  font-size:12px;
}

.google-maps-warning span{
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}

#map .gm-style .gm-style-iw-c{
  background:#071a32;
  color:white;
}

@media(max-width:1000px){
  .top-account-card{
    min-width:180px;
  }

  .map-layer-control{
    order:2;
    width:100%;
    justify-content:flex-end;
  }
}

@media(max-width:760px){
  .top-account-card{
    min-width:0;
    max-width:170px;
  }

  .top-account-copy small{
    display:none;
  }

  .map-layer-btn{
    padding:5px 6px;
    font-size:7px;
  }
}


/* ============================================================
   BAZCO GPS V1.4.4 — MAP SELECTOR + OPENSTREETMAP
   ============================================================ */

.map-toolbar-compact{
  top:10px !important;
  right:10px !important;
  display:flex;
  align-items:flex-start;
  gap:6px;
}

.map-selector{
  position:relative;
}

.map-selector-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(104,171,255,.30);
  border-radius:10px;
  background:rgba(4,18,36,.94);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.map-selector-btn:hover,
.map-selector-btn.open{
  border-color:rgba(33,199,255,.52);
  background:rgba(15,48,83,.97);
}

.map-selector-btn svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.map-selector-menu{
  position:absolute;
  top:44px;
  right:0;
  width:190px;
  padding:5px;
  border:1px solid rgba(104,171,255,.25);
  border-radius:11px;
  background:rgba(3,16,33,.98);
  box-shadow:0 14px 38px rgba(0,0,0,.40);
  backdrop-filter:blur(14px);
  z-index:1200;
}

.map-option{
  width:100%;
  padding:8px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#dceeff;
  cursor:pointer;
  text-align:left;
}

.map-option:hover{
  background:rgba(22,140,255,.10);
}

.map-option.active{
  background:rgba(22,140,255,.18);
  box-shadow:inset 0 0 0 1px rgba(33,199,255,.22);
}

.map-option span{
  font-size:9px;
  font-weight:850;
}

.map-option small{
  color:#7fa5c5;
  font-size:7px;
}

.map-option.traffic-option.active span{
  color:#5ff0b0;
}

.osm-attribution{
  position:absolute;
  left:6px;
  bottom:3px;
  z-index:700;
  padding:2px 5px;
  border-radius:4px;
  background:rgba(255,255,255,.82);
  color:#333;
  font-size:7px;
  line-height:1.2;
}

.osm-attribution a{
  color:#2c67a1;
  text-decoration:none;
}

.osm-attribution.hidden{
  display:none !important;
}

/* La creación de geocercas queda exclusivamente en el menú lateral. */
#create-geofence-btn{
  display:none !important;
}

@media(max-width:760px){
  .map-selector-menu{
    width:170px;
  }
}


/* ============================================================
   BAZCO GPS V1.4.5 — KPI ICONS + HEADER ORDER
   ============================================================ */

.topbar-actions{
  flex-wrap:nowrap;
}

.topbar-control-icon{
  width:13px;
  height:13px;
  fill:currentColor;
  flex:0 0 auto;
}

.refresh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* Orden visual definitivo:
   1. WS CONECTADO
   2. ACTUALIZAR
   3. ADMINISTRADOR
*/
#realtime-chip{
  order:1;
}

#refresh-btn{
  order:2;
}

.top-account-card{
  order:3;
}

.stat-card{
  position:relative;
  overflow:hidden;
  padding-right:52px !important;
}

.stat-card-icon{
  position:absolute;
  top:11px;
  right:12px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border:1px solid rgba(104,171,255,.15);
  border-radius:9px;
  background:rgba(22,140,255,.07);
  color:#62c8ff;
}

.stat-card-icon svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.stat-card-online .stat-card-icon{
  color:#57e6ac;
  background:rgba(45,198,132,.08);
  border-color:rgba(73,224,158,.14);
}

.stat-card-alerts .stat-card-icon{
  color:#ff7f8c;
  background:rgba(190,44,66,.09);
  border-color:rgba(255,107,122,.15);
}

.stat-card-geofences .stat-card-icon{
  color:#c496ff;
  background:rgba(135,81,213,.09);
  border-color:rgba(185,135,255,.15);
}

/* El detalle de vehículo queda fuera del mapa desde V1.4.5. */
#selected-card,
.selected-card{
  display:none !important;
}

@media(max-width:900px){
  .topbar-actions{
    flex-wrap:wrap;
  }

  .top-account-card{
    min-width:180px;
  }

  .stat-card{
    padding-right:44px !important;
  }

  .stat-card-icon{
    width:27px;
    height:27px;
    top:9px;
    right:9px;
  }

  .stat-card-icon svg{
    width:15px;
    height:15px;
  }
}


/* ============================================================
   BAZCO GPS V1.5 — PROFESSIONAL PDF / EXCEL REPORTS
   ============================================================ */

.reports-pro-dialog{
  width:min(1120px,96vw) !important;
}

.reports-pro-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
}

.reports-pro-filters{
  margin-top:12px;
}

.reports-pro-kpis{
  margin-top:9px;
}

.professional-export-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:11px 0;
}

.professional-export-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:9px 11px;
  align-items:center;
  padding:11px;
  border:1px solid rgba(104,171,255,.18);
  border-radius:12px;
  background:rgba(7,26,50,.58);
}

.professional-export-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.05em;
}

.professional-export-icon.pdf-icon{
  color:#ff9ba5;
  background:rgba(175,37,55,.17);
  border:1px solid rgba(255,107,122,.23);
}

.professional-export-icon.vehicle-icon{
  color:#74d4ff;
  background:rgba(22,140,255,.13);
  border:1px solid rgba(33,199,255,.20);
}

.professional-export-copy strong,
.professional-export-copy small{
  display:block;
}

.professional-export-copy strong{
  font-size:11px;
}

.professional-export-copy small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}

.professional-export-actions{
  grid-column:1/-1;
  display:flex;
  gap:6px;
}

.report-export-btn{
  min-height:31px;
  flex:1;
  border-radius:8px;
  cursor:pointer;
  font-size:8px;
  font-weight:900;
}

.report-export-btn.pdf{
  border:1px solid rgba(255,107,122,.30);
  background:rgba(151,27,47,.15);
  color:#ff9ca7;
}

.report-export-btn.excel{
  border:1px solid rgba(50,210,143,.28);
  background:rgba(31,155,106,.13);
  color:#65e8af;
}

.report-export-btn:hover{
  color:white;
  filter:brightness(1.15);
}

.report-export-btn:disabled{
  opacity:.45;
  cursor:wait;
}

.legacy-export-panel{
  margin-top:10px;
  padding:8px 10px;
  border:1px solid rgba(104,171,255,.12);
  border-radius:9px;
}

.legacy-export-panel summary{
  color:var(--muted);
  cursor:pointer;
  font-size:8px;
  font-weight:800;
}

.legacy-export-panel .report-actions{
  margin-top:8px;
}

@media(max-width:760px){
  .professional-export-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   BAZCO GPS V1.6 — CENTRO DE NOTIFICACIONES
   ============================================================ */

.notifications-bell-btn{
  order:0;
  position:relative;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(104,171,255,.23);
  border-radius:10px;
  background:rgba(7,26,50,.88);
  color:#b8d8ef;
  cursor:pointer;
}

.notifications-bell-btn:hover,
.notifications-bell-btn.has-unread{
  color:#fff;
  border-color:rgba(33,199,255,.45);
  background:rgba(17,55,91,.92);
}

.notifications-bell-btn svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.notifications-count{
  position:absolute;
  top:-5px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:2px solid #031121;
  border-radius:999px;
  background:#e74f62;
  color:white;
  font-size:7px;
  font-weight:950;
}

.notifications-dialog{
  width:min(980px,96vw) !important;
  max-height:88vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.notifications-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
}

.notification-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
}

.notification-summary-card{
  padding:9px 10px;
  border:1px solid rgba(104,171,255,.15);
  border-radius:9px;
  background:rgba(9,33,62,.62);
}

.notification-summary-card span,
.notification-summary-card strong{
  display:block;
}

.notification-summary-card span{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.notification-summary-card strong{
  margin-top:4px;
  font-size:15px;
}

.notification-summary-card.critical strong{
  color:#ff7f8c;
}

.notification-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:9px 0;
}

.notification-filters{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.notification-filters select{
  min-width:145px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#071a32;
  color:#ddecf8;
  padding:7px 8px;
  font-size:8px;
}

.notification-unread-filter{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:8px;
  white-space:nowrap;
}

.notifications-list{
  flex:1;
  min-height:260px;
  max-height:54vh;
  overflow:auto;
  padding-right:3px;
}

.notification-item{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  padding:9px 10px;
  margin-bottom:6px;
  border:1px solid rgba(104,171,255,.12);
  border-radius:10px;
  background:rgba(7,26,50,.50);
}

.notification-item.unread{
  border-color:rgba(33,199,255,.26);
  background:rgba(10,39,71,.73);
}

.notification-item.unread::before{
  content:"";
  position:absolute;
  top:12px;
  left:4px;
  width:3px;
  height:22px;
  border-radius:999px;
  background:#21c7ff;
}

.notification-item.severity-critical::before,
.notification-item.severity-high::before{
  background:#ff6677;
}

.notification-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(104,171,255,.15);
  background:rgba(22,140,255,.08);
  color:#72d1ff;
}

.notification-icon svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

.notification-item.category-maintenance .notification-icon{
  color:#ffc75f;
  background:rgba(213,151,32,.09);
}

.notification-item.category-documents .notification-icon{
  color:#c29aff;
  background:rgba(136,79,211,.09);
}

.notification-item.category-billing .notification-icon{
  color:#63e7ac;
  background:rgba(42,181,119,.09);
}

.notification-copy strong{
  display:block;
  font-size:9px;
}

.notification-copy p{
  margin:3px 0;
  color:#c3d8e8;
  font-size:8px;
  line-height:1.42;
}

.notification-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  color:var(--muted);
  font-size:7px;
}

.notification-badge{
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(104,171,255,.14);
  text-transform:uppercase;
  font-size:6px;
  font-weight:850;
}

.notification-badge.severity-critical,
.notification-badge.severity-high{
  color:#ff8d99;
  border-color:rgba(255,107,122,.23);
  background:rgba(139,25,44,.12);
}

.notification-badge.severity-medium{
  color:#ffd172;
  border-color:rgba(255,200,87,.20);
}

.notification-badge.severity-low{
  color:#7ddbb5;
  border-color:rgba(69,219,157,.18);
}

.notification-actions{
  display:flex;
  gap:5px;
}

.notification-read-btn{
  border:1px solid rgba(104,171,255,.18);
  border-radius:7px;
  background:rgba(22,140,255,.07);
  color:#8fd7ff;
  padding:5px 7px;
  cursor:pointer;
  font-size:7px;
  font-weight:800;
  white-space:nowrap;
}

.notification-read-btn:hover{
  color:white;
  background:rgba(22,140,255,.15);
}

.notification-item:not(.unread) .notification-read-btn{
  display:none;
}

@media(max-width:760px){
  .notification-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .notification-toolbar,
  .notification-filters{
    align-items:stretch;
    flex-direction:column;
  }

  .notification-filters select{
    width:100%;
  }

  .notification-item{
    grid-template-columns:30px minmax(0,1fr);
  }

  .notification-actions{
    grid-column:2;
  }
}


/* ============================================================
   BAZCO GPS V1.7 — DEVICE COMMAND CHANNEL
   ============================================================ */

.device-commands-dialog{
  width:min(1050px,96vw) !important;
  max-height:88vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.device-command-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:9px;
}

.device-command-safety{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:8px 10px;
  border:1px solid rgba(65,216,151,.18);
  border-radius:9px;
  background:rgba(37,164,113,.07);
}

.device-command-safety strong{
  color:#63e7ac;
  font-size:8px;
  white-space:nowrap;
}

.device-command-safety span{
  color:#9ec8b4;
  font-size:8px;
}

.device-command-compose{
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(210px,1.2fr) minmax(140px,.7fr) auto;
  gap:7px;
  align-items:end;
  margin-top:10px;
}

.device-command-compose label{
  color:var(--muted);
  font-size:8px;
}

.device-command-compose select,
.device-command-compose input{
  width:100%;
  margin-top:4px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#071a32;
  color:white;
  padding:7px 8px;
  font-size:8px;
}

.device-command-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin:9px 0;
}

.device-command-summary>div{
  padding:8px 9px;
  border:1px solid rgba(104,171,255,.13);
  border-radius:8px;
  background:rgba(9,33,62,.60);
}

.device-command-summary span,
.device-command-summary strong{
  display:block;
}

.device-command-summary span{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
}

.device-command-summary strong{
  margin-top:3px;
  font-size:14px;
}

.device-command-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.device-command-history-head h3{
  margin:0;
  font-size:10px;
}

.device-command-list{
  min-height:240px;
  max-height:48vh;
  overflow:auto;
}

.device-command-row{
  display:grid;
  grid-template-columns:55px 115px minmax(120px,1fr) 110px 130px minmax(150px,1.2fr) auto;
  gap:7px;
  align-items:center;
  padding:7px 8px;
  margin-bottom:5px;
  border:1px solid rgba(104,171,255,.12);
  border-radius:8px;
  background:rgba(7,26,50,.48);
  font-size:8px;
}

.device-command-row>div{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.command-status{
  display:inline-flex;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  font-size:6px;
  font-weight:900;
  border:1px solid rgba(104,171,255,.18);
}

.command-status.PENDING{
  color:#ffd172;
  border-color:rgba(255,200,87,.22);
}

.command-status.DELIVERED{
  color:#7ed3ff;
}

.command-status.ACKNOWLEDGED{
  color:#64e8ae;
  border-color:rgba(61,220,151,.22);
}

.command-status.FAILED,
.command-status.CANCELED{
  color:#ff8d99;
  border-color:rgba(255,107,122,.22);
}

.command-row-actions{
  display:flex;
  gap:4px;
}

.command-action{
  border:1px solid rgba(104,171,255,.16);
  border-radius:6px;
  background:rgba(22,140,255,.07);
  color:#8fd7ff;
  padding:4px 6px;
  cursor:pointer;
  font-size:6px;
  font-weight:800;
}

.command-action.danger{
  color:#ff8d99;
  border-color:rgba(255,107,122,.20);
}

@media(max-width:850px){
  .device-command-compose{
    grid-template-columns:1fr 1fr;
  }

  .device-command-row{
    grid-template-columns:55px 1fr 1fr;
  }
}


/* ============================================================
   BAZCO GPS V1.8 — PWA / MOBILE
   ============================================================ */

.pwa-network-state{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:5px;
  font-size:6px;
  font-weight:850;
  letter-spacing:.08em;
}

.pwa-network-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4cdf9d;
  box-shadow:0 0 8px rgba(76,223,157,.7);
}

.pwa-network-state.online{
  color:#72e7b4;
}

.pwa-network-state.offline{
  color:#ff8d99;
}

.pwa-network-state.offline .pwa-network-dot{
  background:#ff6677;
  box-shadow:0 0 8px rgba(255,102,119,.65);
}

/* Safe area support para PWA instalada y Android */
@supports(padding:max(0px)){
  .topbar{
    padding-top:max(var(--topbar-padding,0px),env(safe-area-inset-top));
  }

  .sidebar{
    padding-left:env(safe-area-inset-left);
  }
}

@media(max-width:680px){
  .top-account-card{
    max-width:145px;
  }

  .top-account-copy small,
  .top-account-copy .role-chip{
    display:none;
  }

  .notifications-bell-btn{
    width:34px;
    height:34px;
  }

  #realtime-chip{
    min-height:34px;
  }

  #refresh-btn{
    min-height:34px;
  }
}


/* ============================================================
   BAZCO GPS V1.8.2 — RESPONSIVE ANDROID / MOBILE CONTROL CENTER
   ============================================================ */

.mobile-menu-btn,
.mobile-sidebar-backdrop{
  display:none;
}

.mobile-topbar-leading{
  display:flex;
  align-items:center;
  min-width:0;
}

.topbar-title-copy{
  min-width:0;
}

.google-maps-runtime-warning{
  position:absolute;
  z-index:970;
  left:12px;
  right:12px;
  bottom:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(255,190,76,.38);
  border-radius:11px;
  background:rgba(28,20,4,.95);
  color:#ffd56e;
  box-shadow:0 16px 38px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
}

.google-maps-runtime-warning strong{
  font-size:9px;
}

.google-maps-runtime-warning span{
  grid-column:1;
  color:#d9c38e;
  font-size:7px;
  line-height:1.45;
}

.google-maps-runtime-warning button{
  grid-column:2;
  grid-row:1/3;
  border:1px solid rgba(255,210,110,.24);
  border-radius:7px;
  background:rgba(255,255,255,.04);
  color:#ffe39d;
  padding:6px 8px;
  font-size:7px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:860px){
  html,
  body{
    width:100%;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  body.mobile-navigation-locked{
    overflow:hidden !important;
  }

  .app-shell{
    display:block !important;
    min-height:100dvh !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Sidebar becomes an off-canvas Android drawer. */
  .sidebar{
    position:fixed !important;
    z-index:1200 !important;
    inset:0 auto 0 0 !important;
    width:min(82vw,310px) !important;
    height:100dvh !important;
    padding:
      max(12px,env(safe-area-inset-top))
      10px
      max(12px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left)) !important;
    transform:translateX(-104%);
    transition:transform .22s ease;
    box-shadow:20px 0 60px rgba(0,0,0,.42);
  }

  .app-shell.mobile-sidebar-open .sidebar{
    transform:translateX(0);
  }

  .mobile-sidebar-backdrop{
    display:block;
    position:fixed;
    z-index:1190;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(0,7,16,.66);
    backdrop-filter:blur(2px);
  }

  .mobile-sidebar-backdrop.hidden{
    display:none !important;
  }

  .sidebar-scroll{
    max-height:none !important;
    flex:1;
    overflow-y:auto;
  }

  .sidebar-bottom{
    margin-top:auto;
  }

  .brand{
    padding:2px 4px 9px !important;
  }

  .brand-logo{
    width:42px !important;
    height:42px !important;
  }

  .brand-title{
    font-size:13px !important;
  }

  .brand-slogan{
    font-size:7px !important;
  }

  .nav-item{
    min-height:42px;
    font-size:10px !important;
  }

  /* Main mobile surface */
  .main{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    padding:
      max(8px,env(safe-area-inset-top))
      9px
      max(12px,env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:1030;
    display:grid !important;
    grid-template-columns:1fr;
    gap:7px;
    margin:-8px -9px 8px !important;
    padding:
      max(9px,env(safe-area-inset-top))
      9px
      8px !important;
    background:rgba(3,18,36,.96);
    border-bottom:1px solid rgba(104,171,255,.13);
    backdrop-filter:blur(16px);
  }

  .mobile-topbar-leading{
    gap:8px;
  }

  .mobile-menu-btn{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid rgba(104,171,255,.22);
    border-radius:10px;
    background:#071d37;
    color:#d9efff;
    cursor:pointer;
  }

  .mobile-menu-btn svg{
    width:18px;
    height:18px;
    fill:currentColor;
  }

  .topbar .eyebrow{
    margin:0 0 2px !important;
    font-size:6px !important;
    letter-spacing:.08em;
  }

  .topbar h1{
    margin:0 !important;
    font-size:18px !important;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .topbar-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:36px minmax(88px,1fr) 38px minmax(118px,1.25fr);
    align-items:center;
    gap:5px !important;
    justify-content:stretch !important;
  }

  .notifications-bell-btn{
    width:36px !important;
    height:34px !important;
    border-radius:9px !important;
  }

  #realtime-chip{
    width:100%;
    min-width:0;
    min-height:34px !important;
    justify-content:center;
    padding:0 7px !important;
    font-size:6px !important;
    white-space:nowrap;
  }

  #refresh-btn{
    width:38px !important;
    min-width:38px !important;
    min-height:34px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center;
    font-size:0 !important;
  }

  #refresh-btn .topbar-control-icon{
    width:15px !important;
    height:15px !important;
    margin:0 !important;
  }

  .top-account-card{
    width:100%;
    max-width:none !important;
    min-width:0;
    min-height:34px;
    padding:4px 5px 4px 8px !important;
    border-radius:9px !important;
  }

  .top-account-copy{
    min-width:0;
  }

  .top-account-copy strong{
    max-width:100%;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px !important;
  }

  .top-account-copy small,
  .top-account-copy .role-chip{
    display:none !important;
  }

  .top-logout{
    padding:5px 7px !important;
    font-size:6px !important;
  }

  /* KPI cards: 2 x 2, touch-friendly and compact */
  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:0 0 7px !important;
  }

  .stat-card{
    min-height:78px !important;
    padding:9px 10px !important;
    border-radius:10px !important;
  }

  .stat-card-icon{
    width:23px !important;
    height:23px !important;
    right:8px !important;
    top:8px !important;
  }

  .stat-label{
    font-size:7px !important;
  }

  .stat-card strong{
    font-size:18px !important;
    margin-top:4px !important;
  }

  .stat-card small{
    font-size:6px !important;
  }

  /* Mobile order: map first, fleet/alerts below */
  .workspace{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    height:auto !important;
    min-height:0 !important;
  }

  .map-panel{
    order:1;
    width:100%;
    height:58dvh !important;
    min-height:430px !important;
    max-height:620px;
    border-radius:12px !important;
    overflow:hidden;
  }

  #map{
    width:100% !important;
    height:100% !important;
    min-height:430px !important;
  }

  .vehicle-panel{
    order:2;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:10px !important;
    border-radius:11px !important;
  }

  .vehicle-list{
    max-height:220px;
    overflow-y:auto;
  }

  .alerts-list{
    max-height:300px;
    overflow-y:auto;
  }

  .map-toolbar{
    top:8px !important;
    right:8px !important;
  }

  .map-selector-btn{
    width:38px !important;
    height:38px !important;
  }

  .map-selector-menu{
    width:min(250px,calc(100vw - 34px)) !important;
    max-height:56dvh;
    overflow-y:auto;
  }

  .selected-card{
    display:none !important;
  }

  .osm-attribution{
    max-width:75%;
    font-size:6px !important;
  }

  .geofence-form{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    max-width:none !important;
  }

  .google-maps-warning,
  .google-maps-runtime-warning{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
  }

  .history-drawer{
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
    max-height:82dvh;
    overflow:auto !important;
  }

  .history-filters{
    grid-template-columns:1fr 1fr !important;
  }

  .history-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .history-playback{
    grid-template-columns:auto auto minmax(0,1fr) !important;
  }

  .history-speed-control,
  .history-trip-control{
    grid-column:auto / span 1;
  }

  /* Modals and management screens */
  .security-modal{
    align-items:flex-start !important;
    padding:
      max(8px,env(safe-area-inset-top))
      7px
      max(8px,env(safe-area-inset-bottom)) !important;
  }

  .security-dialog,
  .manager-dialog,
  .reports-dialog,
  .reports-pro-dialog,
  .notifications-dialog,
  .device-commands-dialog{
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    min-height:0 !important;
    border-radius:12px !important;
    padding:11px !important;
    overflow:auto !important;
  }

  .security-header{
    align-items:flex-start !important;
  }

  .security-header h2{
    font-size:18px !important;
  }

  .security-table,
  .admin-table{
    min-width:650px;
  }

  .manager-table-wrap,
  .table-wrap,
  .admin-table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .reports-filters,
  .reports-pro-filters,
  .device-command-compose{
    grid-template-columns:1fr !important;
  }

  .professional-export-grid,
  .report-panels{
    grid-template-columns:1fr !important;
  }

  .notification-summary-grid,
  .device-command-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .notification-toolbar,
  .notification-filters{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .notification-filters select{
    width:100%;
  }

  .device-command-row{
    grid-template-columns:55px minmax(0,1fr) !important;
  }

  .device-command-row>div:nth-child(n+3){
    grid-column:2;
  }
}

@media(max-width:430px){
  .topbar-actions{
    grid-template-columns:34px minmax(82px,1fr) 36px minmax(105px,1.18fr);
    gap:4px !important;
  }

  .topbar h1{
    font-size:17px !important;
  }

  .stat-card{
    min-height:74px !important;
  }

  .map-panel,
  #map{
    min-height:410px !important;
    height:56dvh !important;
  }

  .history-filters{
    grid-template-columns:1fr !important;
  }

  .history-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ============================================================
   BAZCO GPS V1.8.2.1 — FIX MENÚ MÓVIL / TOUCH
   ============================================================ */

.mobile-section-toggle{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
}

.mobile-section-chevron{
  display:none;
}

@media(max-width:860px){
  .sidebar{
    display:flex !important;
    flex-direction:column !important;
  }

  .sidebar-scroll{
    padding-bottom:14px;
  }

  .mobile-section{
    margin:0 0 5px !important;
    border-bottom:1px solid rgba(104,171,255,.10);
  }

  .mobile-section-toggle{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    min-height:40px;
    padding:0 8px !important;
    margin:0 !important;
    color:#69c8ff !important;
    font-size:8px !important;
    font-weight:900 !important;
    letter-spacing:.10em !important;
    cursor:pointer !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-section-toggle:active{
    background:rgba(27,137,220,.10);
  }

  .mobile-section-chevron{
    display:block;
    font-size:15px;
    line-height:1;
    transition:transform .18s ease;
  }

  .mobile-section:not(.mobile-section-open) > .nav{
    display:none !important;
  }

  .mobile-section.mobile-section-open > .nav{
    display:grid !important;
    gap:4px !important;
    padding:0 3px 8px !important;
  }

  .mobile-section.mobile-section-open .mobile-section-chevron{
    transform:rotate(180deg);
  }

  .mobile-section .nav-item{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:44px !important;
    padding:0 11px !important;
    border-radius:9px !important;
    color:#bcd6e9 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-section .nav-item .nav-icon{
    flex:0 0 20px;
  }

  .mobile-section .nav-item span:last-child{
    display:block !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-section .nav-item:active{
    transform:scale(.985);
  }

  /* El botón de instalación permanece oculto hasta beforeinstallprompt. */
  .mobile-section #pwa-install-btn.hidden{
    display:none !important;
  }
}

/* Desktop: los títulos son etiquetas, no acordeones. */
@media(min-width:861px){
  .mobile-section-toggle{
    pointer-events:none;
  }

  .mobile-section > .nav{
    display:grid;
  }
}


/* ============================================================
   BAZCO GPS V1.8.2.2 — MOBILE MODAL / VIEWPORT FIT
   Evita que modales, formularios, gráficas y tablas queden fuera
   del ancho útil en Android WebView.
   ============================================================ */

@media(max-width:860px){

  /* El overlay siempre utiliza exactamente el viewport disponible. */
  .security-modal,
  .modal,
  [class*="modal"]:not(.modal-card){
    box-sizing:border-box !important;
    width:100vw !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  /* Diálogos principales: nunca superar el ancho visible. */
  .security-dialog,
  .manager-dialog,
  .reports-dialog,
  .reports-pro-dialog,
  .notifications-dialog,
  .device-commands-dialog,
  .commercial-dialog,
  .maintenance-dialog,
  .history-dialog,
  .admin-dialog,
  .modal-card,
  [class$="-dialog"]{
    box-sizing:border-box !important;
    width:calc(100vw - 14px) !important;
    min-width:0 !important;
    max-width:calc(100vw - 14px) !important;
    margin:0 auto !important;
    padding-left:10px !important;
    padding-right:10px !important;
    overflow-x:hidden !important;
  }

  /* Todo contenido directo del diálogo puede encogerse. */
  .security-dialog > *,
  .manager-dialog > *,
  .reports-dialog > *,
  .reports-pro-dialog > *,
  .notifications-dialog > *,
  .device-commands-dialog > *,
  [class$="-dialog"] > *{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Formularios y grids dejan de imponer columnas de escritorio. */
  .modal-grid,
  .form-grid,
  .admin-grid,
  .manager-grid,
  .maintenance-grid,
  .commercial-grid,
  .report-grid,
  .reports-grid,
  .filters-grid,
  .history-grid,
  [class*="-grid"]{
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Inputs/selects/buttons no pueden desbordar. */
  .security-dialog input,
  .security-dialog select,
  .security-dialog textarea,
  .security-dialog button,
  [class$="-dialog"] input,
  [class$="-dialog"] select,
  [class$="-dialog"] textarea{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  /* Gráficas, SVG y canvas se escalan al ancho disponible. */
  .security-dialog canvas,
  .security-dialog svg,
  .security-dialog img,
  [class$="-dialog"] canvas,
  [class$="-dialog"] svg,
  [class$="-dialog"] img,
  .chart,
  .chart-wrap,
  .chart-container,
  .analytics-chart{
    max-width:100% !important;
  }

  .security-dialog canvas,
  [class$="-dialog"] canvas{
    width:100% !important;
    height:auto !important;
  }

  .security-dialog svg,
  [class$="-dialog"] svg{
    height:auto;
  }

  /* Tablas: scroll interno en vez de cortar el diálogo completo. */
  .table-wrap,
  .admin-table-wrap,
  .manager-table-wrap,
  .report-table-wrap,
  .security-table-wrap,
  [class*="table-wrap"]{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch;
  }

  .security-table,
  .admin-table,
  .manager-table,
  .reports-table,
  table{
    max-width:none;
  }

  /* Evita offsets horizontales heredados del layout desktop. */
  .security-modal .panel,
  .security-modal .card,
  .security-modal .section,
  [class$="-dialog"] .panel,
  [class$="-dialog"] .card,
  [class$="-dialog"] .section{
    margin-left:0 !important;
    margin-right:0 !important;
    left:auto !important;
    right:auto !important;
    max-width:100% !important;
  }

  /* Cabecera y botón cerrar siempre visibles. */
  .security-header,
  .modal-header,
  [class$="-dialog"] > header{
    position:sticky;
    top:0;
    z-index:5;
    max-width:100% !important;
  }

  .security-header .icon-btn,
  .modal-header .icon-btn,
  [class$="-dialog"] .icon-btn{
    flex:0 0 auto;
  }

  /* Contenido largo: scroll vertical dentro del modal. */
  .security-dialog,
  [class$="-dialog"]{
    max-height:calc(100dvh - 14px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
}

@media(max-width:430px){
  .security-dialog,
  .manager-dialog,
  .reports-dialog,
  .reports-pro-dialog,
  .notifications-dialog,
  .device-commands-dialog,
  [class$="-dialog"]{
    width:calc(100vw - 10px) !important;
    max-width:calc(100vw - 10px) !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* ============================================================
   BAZCO GPS V1.8.2.3 — REPORTES MÓVIL / ANDROID
   Fix específico: el modal de Reportes tenía anchos mínimos heredados
   y podía abrir con scroll horizontal desplazado.
   ============================================================ */

@media(max-width:860px){

  #reports-modal.security-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:100vw !important;
    padding:
      max(5px,env(safe-area-inset-top))
      5px
      max(5px,env(safe-area-inset-bottom))
      5px !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
  }

  #reports-modal .reports-pro-dialog{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    padding:10px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    border-radius:12px !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  #reports-modal .security-header{
    position:sticky !important;
    top:-10px !important;
    z-index:20 !important;
    margin:-10px -10px 8px !important;
    padding:10px !important;
    background:rgba(6,25,47,.98) !important;
    border-bottom:1px solid rgba(104,171,255,.13);
    backdrop-filter:blur(14px);
  }

  #reports-modal .security-header > div{
    min-width:0 !important;
  }

  #reports-modal .security-header h2{
    font-size:17px !important;
    line-height:1.1 !important;
  }

  #reports-modal .reports-pro-subtitle{
    font-size:7px !important;
    line-height:1.35 !important;
  }

  #reports-modal .reports-filters,
  #reports-modal .reports-pro-filters{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
    margin:8px 0 !important;
  }

  #reports-modal .reports-filters label,
  #reports-modal .reports-filters input,
  #reports-modal .reports-filters select,
  #reports-modal #reports-refresh{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  #reports-modal .reports-pro-kpis,
  #reports-modal .expiry-cards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    gap:6px !important;
    margin:8px 0 !important;
  }

  #reports-modal .expiry-card{
    min-width:0 !important;
    padding:8px !important;
  }

  #reports-modal .expiry-card strong{
    font-size:16px !important;
    overflow-wrap:anywhere;
  }

  #reports-modal .professional-export-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    gap:7px !important;
  }

  #reports-modal .professional-export-card{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:8px !important;
  }

  #reports-modal .professional-export-icon{
    width:36px !important;
    height:36px !important;
  }

  #reports-modal .professional-export-copy{
    min-width:0 !important;
  }

  #reports-modal .professional-export-copy strong,
  #reports-modal .professional-export-copy small{
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  #reports-modal .professional-export-actions{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    width:100% !important;
    min-width:0 !important;
  }

  #reports-modal .report-export-btn{
    width:100% !important;
    min-width:0 !important;
  }

  #reports-modal .report-panels{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:7px !important;
    margin-top:8px !important;
  }

  #reports-modal .report-panel{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:9px !important;
    overflow:hidden !important;
  }

  #reports-modal .report-panel h3{
    font-size:11px !important;
  }

  #reports-modal .report-summary,
  #reports-modal .report-summary-mobile{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:6px !important;
  }

  #reports-modal .report-metric{
    box-sizing:border-box !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:8px !important;
    overflow:hidden !important;
  }

  #reports-modal .report-metric span{
    font-size:7px !important;
  }

  #reports-modal .report-metric strong{
    font-size:10px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  /* La tabla de recorridos deja de ser una tabla ancha y se convierte
     visualmente en tarjetas/filas de 3 columnas. */
  #reports-modal .vehicle-trips-list{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #reports-modal .vehicle-trips-table{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    border-collapse:separate !important;
  }

  #reports-modal .vehicle-trips-table thead{
    display:none !important;
  }

  #reports-modal .vehicle-trips-table tbody{
    display:grid !important;
    gap:6px !important;
    width:100% !important;
  }

  #reports-modal .vehicle-trips-table tr{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) !important;
    gap:5px 7px !important;
    width:100% !important;
    min-width:0 !important;
    padding:7px !important;
    border:1px solid rgba(104,171,255,.12);
    border-radius:8px;
    background:rgba(7,26,50,.46);
  }

  #reports-modal .vehicle-trips-table td{
    box-sizing:border-box !important;
    min-width:0 !important;
    padding:2px !important;
    border:0 !important;
    font-size:7px !important;
    overflow-wrap:anywhere;
  }

  #reports-modal .vehicle-trips-table td:nth-child(1)::before{content:"Viaje";display:block;color:#74c7ff;font-size:6px}
  #reports-modal .vehicle-trips-table td:nth-child(2)::before{content:"Inicio";display:block;color:#74c7ff;font-size:6px}
  #reports-modal .vehicle-trips-table td:nth-child(3)::before{content:"Fin";display:block;color:#74c7ff;font-size:6px}
  #reports-modal .vehicle-trips-table td:nth-child(4)::before{content:"Duración";display:block;color:#74c7ff;font-size:6px}
  #reports-modal .vehicle-trips-table td:nth-child(5)::before{content:"Km";display:block;color:#74c7ff;font-size:6px}
  #reports-modal .vehicle-trips-table td:nth-child(6)::before{content:"Máx.";display:block;color:#74c7ff;font-size:6px}

  #reports-modal .vehicle-trips-table td:nth-child(n+4){
    grid-column:auto !important;
  }

  #reports-modal .legacy-export-panel{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

@media(max-width:390px){
  #reports-modal .report-summary,
  #reports-modal .report-summary-mobile{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #reports-modal .professional-export-actions{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #reports-modal .vehicle-trips-table tr{
    grid-template-columns:40px minmax(0,1fr) !important;
  }
}


/* ============================================================
   BAZCO GPS V1.9 — MOBILE APP REDESIGN
   ============================================================ */

.mobile-app-brand,
.mobile-bottom-nav,
.mobile-map-actions{
  display:none;
}

@media(max-width:860px){
  :root{
    --bazco-mobile-bg:#041426;
    --bazco-mobile-surface:#071d35;
    --bazco-mobile-line:rgba(113,188,239,.16);
    --bazco-mobile-accent:#16a9f5;
    --bazco-mobile-cyan:#61d8ff;
    --bazco-mobile-success:#35dfa1;
    --bazco-mobile-danger:#ff6578;
    --bazco-mobile-muted:#86a9c1;
  }

  body{background:var(--bazco-mobile-bg)!important}

  .main{
    padding:0 0 calc(68px + env(safe-area-inset-bottom)) !important;
    background:var(--bazco-mobile-bg);
  }

  .topbar{
    position:sticky !important;
    top:0;
    z-index:1030;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    margin:0 !important;
    padding:max(7px,env(safe-area-inset-top)) 10px 7px !important;
    border-bottom:1px solid var(--bazco-mobile-line);
    background:rgba(4,20,38,.96) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.16);
  }

  .mobile-topbar-leading{
    flex:1;
    min-width:0;
    gap:7px !important;
  }

  .mobile-menu-btn{display:none !important}

  .mobile-app-brand{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
  }

  .mobile-app-brand img{
    width:34px;
    height:34px;
    object-fit:contain;
    border-radius:9px;
  }

  .mobile-app-brand div{min-width:0}
  .mobile-app-brand strong{
    display:block;color:#f4fbff;font-size:10px;letter-spacing:.07em;white-space:nowrap
  }
  .mobile-app-brand span{
    display:block;margin-top:1px;color:var(--bazco-mobile-muted);font-size:5.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }

  .topbar-title-copy{display:none !important}

  .topbar-actions{
    width:auto !important;
    display:flex !important;
    align-items:center;
    gap:5px !important;
  }

  .notifications-bell-btn{
    order:2;width:34px !important;height:34px !important;border-radius:10px !important;
    background:rgba(9,37,64,.84) !important
  }

  #realtime-chip{
    order:1;width:32px !important;min-width:32px !important;height:32px !important;
    min-height:32px !important;padding:0 !important;border-radius:50% !important;
    font-size:0 !important;background:rgba(19,67,57,.54) !important
  }

  #realtime-chip .pulse{width:8px !important;height:8px !important;margin:0 !important}
  #realtime-label{display:none !important}
  #refresh-btn,.top-account-card{display:none !important}

  .stats-grid{
    display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:1px !important;margin:0 !important;padding:0 7px 7px !important;
    background:var(--bazco-mobile-bg)
  }

  .stat-card{
    min-height:54px !important;padding:7px 5px 6px !important;border-radius:0 !important;
    border:0 !important;border-bottom:1px solid var(--bazco-mobile-line) !important;
    background:transparent !important;box-shadow:none !important
  }

  .stat-card-icon{
    position:static !important;width:17px !important;height:17px !important;
    margin:0 auto 3px !important;background:transparent !important;border:0 !important
  }

  .stat-label{display:none !important}
  .stat-card strong{
    display:block;margin:0 !important;text-align:center;font-size:15px !important;line-height:1 !important
  }
  .stat-card small{
    display:block;margin-top:3px !important;text-align:center;font-size:5.5px !important;
    color:var(--bazco-mobile-muted) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }

  .workspace{gap:7px !important;padding:0 7px 8px !important}

  .map-panel{
    order:1 !important;position:relative;height:min(60dvh,590px) !important;
    min-height:430px !important;max-height:none !important;border-radius:14px !important;
    border:1px solid var(--bazco-mobile-line);box-shadow:0 12px 28px rgba(0,0,0,.22);
    overflow:hidden !important
  }

  #map{height:100% !important;min-height:430px !important}

  .mobile-map-actions{
    position:absolute;z-index:900;display:flex;flex-direction:column;gap:6px;
    right:8px;bottom:36px
  }

  .mobile-map-actions button{
    display:grid;place-items:center;width:37px;height:37px;padding:0;
    border:1px solid rgba(103,189,241,.2);border-radius:11px;
    background:rgba(5,28,49,.92);color:#e4f7ff;
    box-shadow:0 7px 18px rgba(0,0,0,.2);backdrop-filter:blur(12px)
  }

  .mobile-map-actions svg{width:17px;height:17px;fill:currentColor}
  .map-toolbar{top:8px !important;right:8px !important}
  .map-selector-btn{width:37px !important;height:37px !important;border-radius:11px !important}

  .vehicle-panel{
    order:2 !important;padding:10px !important;border-radius:13px !important;
    border:1px solid var(--bazco-mobile-line) !important;
    background:var(--bazco-mobile-surface) !important;box-shadow:none !important
  }

  .vehicle-panel .panel-heading{margin-bottom:7px !important}
  .vehicle-panel .panel-heading .eyebrow{display:none}
  .vehicle-panel .panel-heading h2{font-size:13px !important}
  .vehicle-list{display:grid;grid-template-columns:1fr;gap:6px;max-height:190px !important}
  .alerts-list{max-height:190px !important}

  .mobile-bottom-nav{
    position:fixed;z-index:1160;left:0;right:0;bottom:0;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(61px + env(safe-area-inset-bottom));
    padding:5px max(6px,env(safe-area-inset-right))
      max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
    border-top:1px solid rgba(105,185,235,.16);background:rgba(4,19,35,.97);
    box-shadow:0 -10px 28px rgba(0,0,0,.22);backdrop-filter:blur(18px)
  }

  .mobile-tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-width:0;border:0;border-radius:10px;background:transparent;color:#789ab1;
    font-size:6px;font-weight:750;touch-action:manipulation
  }

  .mobile-tab svg{width:20px;height:20px;fill:currentColor}
  .mobile-tab.active{color:var(--bazco-mobile-cyan);background:rgba(19,130,201,.08)}

  .mobile-tab-badge{
    position:absolute;top:2px;left:calc(50% + 7px);min-width:14px;height:14px;padding:0 3px;
    border-radius:7px;background:var(--bazco-mobile-danger);color:#fff;font-size:5px;
    line-height:14px;font-style:normal
  }

  .sidebar{
    width:min(84vw,305px) !important;background:#06192f !important;
    border-right:1px solid var(--bazco-mobile-line) !important
  }

  .nav-item{min-height:45px !important;border-radius:10px !important}

  .security-modal{
    z-index:1300 !important;padding:0 !important;background:#041426 !important
  }

  .security-dialog,.manager-dialog,.reports-dialog,.reports-pro-dialog,
  .notifications-dialog,.device-commands-dialog,[class$="-dialog"]{
    width:100vw !important;max-width:100vw !important;height:100dvh !important;
    max-height:100dvh !important;margin:0 !important;
    padding:max(10px,env(safe-area-inset-top)) 10px max(14px,env(safe-area-inset-bottom)) !important;
    border:0 !important;border-radius:0 !important;background:#06192f !important
  }

  .security-header{
    margin:calc(-1 * max(10px,env(safe-area-inset-top))) -10px 10px !important;
    padding:max(10px,env(safe-area-inset-top)) 10px 9px !important;
    background:rgba(6,25,47,.98) !important
  }

  .security-header h2{font-size:18px !important}
}


/* ============================================================
   BAZCO GPS V1.9.1 — FIX STARTUP MODALS
   `hidden` debe tener prioridad absoluta sobre cualquier layout
   mobile heredado.
   ============================================================ */

.hidden,
.security-modal.hidden,
#reports-modal.hidden,
#fleet-admin-modal.hidden,
#maintenance-modal.hidden,
#notifications-modal.hidden,
#device-commands-modal.hidden{
  display:none !important;
}

@media(max-width:860px){
  #reports-modal.security-modal:not(.hidden){
    display:block !important;
  }
}


/* ============================================================
   BAZCO GPS V1.10 — MOBILE UI PREMIUM
   ============================================================ */

@media(max-width:860px){

  /* ------------------------------------------------------------
     Alertas: solo viven en la pestaña / Centro de Alertas.
     ------------------------------------------------------------ */
  .inline-alerts-preview,
  .stat-card-alerts{
    display:none !important;
  }

  /* Los KPI del home quedan únicamente: Vehículos / En línea / Geocercas */
  .stats-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:8px 9px 10px !important;
  }

  .stat-card{
    min-height:64px !important;
    padding:9px 7px !important;
    border:1px solid rgba(97,216,255,.10) !important;
    border-radius:13px !important;
    background:linear-gradient(
      180deg,
      rgba(10,38,67,.72),
      rgba(6,26,47,.72)
    ) !important;
    box-shadow:0 7px 22px rgba(0,0,0,.12) !important;
  }

  .stat-card-icon{
    width:21px !important;
    height:21px !important;
    margin:0 auto 4px !important;
    opacity:.92;
  }

  .stat-card strong{
    font-size:17px !important;
  }

  .stat-card small{
    font-size:5.8px !important;
  }

  /* ------------------------------------------------------------
     Premium app header
     ------------------------------------------------------------ */
  .topbar{
    min-height:62px !important;
    padding:
      max(8px,env(safe-area-inset-top))
      11px
      8px !important;
    background:
      linear-gradient(180deg,rgba(4,20,38,.99),rgba(4,20,38,.95))
      !important;
    border-bottom:1px solid rgba(97,216,255,.09) !important;
  }

  .mobile-app-brand img{
    width:37px !important;
    height:37px !important;
    border-radius:11px !important;
    box-shadow:0 5px 15px rgba(0,0,0,.22);
  }

  .mobile-app-brand strong{
    font-size:10.5px !important;
    letter-spacing:.09em !important;
  }

  .mobile-app-brand span{
    font-size:5.8px !important;
  }

  #realtime-chip{
    border:1px solid rgba(53,223,161,.24) !important;
    box-shadow:0 0 0 4px rgba(53,223,161,.04);
  }

  .notifications-bell-btn{
    border:1px solid rgba(97,216,255,.13) !important;
    box-shadow:none !important;
  }

  /* ------------------------------------------------------------
     Main map: dominant surface with softer frame
     ------------------------------------------------------------ */
  .workspace{
    padding:0 9px 10px !important;
    gap:9px !important;
  }

  .map-panel{
    height:min(63dvh,620px) !important;
    min-height:445px !important;
    border-radius:17px !important;
    border:1px solid rgba(97,216,255,.13) !important;
    box-shadow:
      0 14px 34px rgba(0,0,0,.24),
      inset 0 0 0 1px rgba(255,255,255,.015) !important;
  }

  #map{
    min-height:445px !important;
  }

  .mobile-map-actions button,
  .map-selector-btn{
    width:39px !important;
    height:39px !important;
    border-radius:12px !important;
    border:1px solid rgba(97,216,255,.18) !important;
    background:rgba(5,28,49,.92) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.20) !important;
  }

  /* ------------------------------------------------------------
     Vehicle panel: one clean informational card
     ------------------------------------------------------------ */
  .vehicle-panel{
    padding:11px !important;
    border-radius:16px !important;
    border:1px solid rgba(97,216,255,.12) !important;
    background:
      linear-gradient(180deg,rgba(8,34,59,.95),rgba(5,26,47,.95))
      !important;
    box-shadow:0 10px 28px rgba(0,0,0,.12) !important;
  }

  .vehicle-panel .panel-heading h2{
    font-size:14px !important;
  }

  .vehicle-card{
    border-radius:12px !important;
    border:1px solid rgba(97,216,255,.11) !important;
    background:rgba(4,23,42,.55) !important;
    box-shadow:none !important;
  }

  .vehicle-list{
    max-height:250px !important;
  }

  /* ------------------------------------------------------------
     Bottom navigation — premium floating dock
     ------------------------------------------------------------ */
  .mobile-bottom-nav{
    left:9px !important;
    right:9px !important;
    bottom:max(7px,env(safe-area-inset-bottom)) !important;
    height:59px !important;
    padding:5px !important;
    border:1px solid rgba(97,216,255,.12) !important;
    border-radius:18px !important;
    background:rgba(4,22,40,.96) !important;
    box-shadow:
      0 14px 36px rgba(0,0,0,.38),
      inset 0 1px rgba(255,255,255,.025) !important;
    backdrop-filter:blur(20px) !important;
  }

  .main{
    padding-bottom:82px !important;
  }

  .mobile-tab{
    border-radius:13px !important;
    color:#7194ab !important;
    transition:
      background .16s ease,
      color .16s ease,
      transform .12s ease;
  }

  .mobile-tab:active{
    transform:scale(.96);
  }

  .mobile-tab.active{
    color:#74ddff !important;
    background:
      linear-gradient(
        180deg,
        rgba(22,169,245,.13),
        rgba(22,169,245,.055)
      ) !important;
  }

  .mobile-tab svg{
    width:20px !important;
    height:20px !important;
  }

  .mobile-tab span{
    font-size:6.2px !important;
  }

  .mobile-tab-badge{
    top:1px !important;
    box-shadow:0 0 0 2px #041628;
  }

  /* ------------------------------------------------------------
     Alerts page gets full focus when invoked.
     ------------------------------------------------------------ */
  #alerts-manager-modal:not(.hidden){
    display:block !important;
  }

  #alerts-manager-modal .manager-dialog{
    background:
      linear-gradient(180deg,#061b31,#041426)
      !important;
  }

  #alerts-manager-modal .manager-list{
    display:grid;
    gap:8px;
  }

  #alerts-manager-modal .alert-card,
  #alerts-manager-modal .manager-row{
    border-radius:13px !important;
  }

  /* ------------------------------------------------------------
     Drawer 'Más' — cleaner secondary navigation
     ------------------------------------------------------------ */
  .sidebar{
    border-radius:0 20px 20px 0;
    box-shadow:18px 0 50px rgba(0,0,0,.36) !important;
  }

  .mobile-section-toggle{
    min-height:43px !important;
  }

  .mobile-section .nav-item{
    min-height:46px !important;
    margin-bottom:3px;
  }

  /* ------------------------------------------------------------
     Full-screen modules: visually consistent app pages
     ------------------------------------------------------------ */
  .security-dialog,
  .manager-dialog,
  .reports-dialog,
  .reports-pro-dialog,
  .notifications-dialog,
  .device-commands-dialog,
  [class$="-dialog"]{
    background:
      linear-gradient(180deg,#061b31 0%,#041426 100%)
      !important;
  }

  .security-header{
    border-bottom:1px solid rgba(97,216,255,.09) !important;
  }

  .security-header .icon-btn{
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
  }
}


/* ============================================================
   BAZCO GPS V1.11 — CONFIGURACIÓN DE ICONOS DE VEHÍCULO
   ============================================================ */

.vehicle-icons-dialog{
  max-width:860px;
}

.vehicle-icon-help{
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid rgba(97,216,255,.12);
  border-radius:11px;
  background:rgba(8,38,66,.55);
  color:#9fc6dc;
  font-size:10px;
  line-height:1.45;
}

.vehicle-icon-settings-list{
  display:grid;
  gap:9px;
}

.vehicle-icon-setting-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,220px) auto;
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid rgba(97,216,255,.12);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(8,34,59,.86),rgba(5,26,47,.86));
}

.vehicle-icon-setting-identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.vehicle-icon-preview{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border:1px solid rgba(97,216,255,.18);
  border-radius:14px;
  background:#04182c;
  font-size:24px;
}

.vehicle-icon-setting-identity strong,
.vehicle-icon-setting-identity span,
.vehicle-icon-setting-identity small{
  display:block;
}

.vehicle-icon-setting-identity strong{
  color:#f0f9ff;
  font-size:12px;
}

.vehicle-icon-setting-identity span{
  margin-top:2px;
  color:#a8c7da;
  font-size:9px;
}

.vehicle-icon-setting-identity small{
  margin-top:2px;
  color:#688ca5;
  font-size:7px;
}

.vehicle-icon-select-wrap{
  display:grid;
  gap:5px;
  color:#7fb3cf;
  font-size:8px;
  font-weight:700;
}

.vehicle-icon-select{
  width:100%;
  min-height:38px;
}

@media(max-width:860px){
  .vehicle-icons-dialog{
    width:100vw !important;
    max-width:100vw !important;
  }

  .vehicle-icon-setting-card{
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    padding:11px !important;
  }

  .vehicle-icon-preview{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  .vehicle-icon-select{
    min-height:44px;
  }

  .vehicle-icon-save{
    width:100%;
    min-height:42px;
  }
}


/* ============================================================
   BAZCO GPS V1.12 — FICHA AVANZADA Y TELEMETRÍA
   ============================================================ */

.vehicle-detail-dialog{
  max-width:760px;
}

.vehicle-detail-hero{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:8px 48px 16px 0;
  border-bottom:1px solid rgba(97,216,255,.11);
}

.vehicle-detail-close{
  position:absolute;
  top:0;
  right:0;
}

.vehicle-detail-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid rgba(97,216,255,.18);
  border-radius:18px;
  background:linear-gradient(180deg,#092640,#05192e);
  font-size:30px;
}

.vehicle-detail-hero-copy h2{
  margin:2px 0 2px;
  color:#f1f9ff;
  font-size:23px;
}

.vehicle-detail-hero-copy>span{
  color:#8fb3c9;
  font-size:10px;
}

.vehicle-detail-online{
  padding:7px 9px;
  border:1px solid rgba(53,223,161,.22);
  border-radius:999px;
  background:rgba(53,223,161,.08);
  color:#45e6a9;
  font-size:8px;
  font-weight:900;
}

.vehicle-detail-online.offline{
  border-color:rgba(255,101,120,.20);
  background:rgba(255,101,120,.07);
  color:#ff7d8d;
}

.vehicle-detail-primary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}

.telemetry-card{
  min-width:0;
  padding:12px;
  border:1px solid rgba(97,216,255,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(8,36,62,.86),rgba(5,25,45,.86));
}

.telemetry-card span,
.telemetry-card small{
  display:block;
  color:#789db5;
  font-size:7px;
}

.telemetry-card strong{
  display:block;
  margin:5px 0 2px;
  color:#f5fbff;
  font-size:20px;
  overflow-wrap:anywhere;
}

.telemetry-card-speed strong{
  color:#70ddff;
}

.vehicle-detail-section{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(97,216,255,.10);
  border-radius:14px;
  background:rgba(4,23,42,.45);
}

.vehicle-detail-section h3{
  margin:0 0 9px;
  color:#d9f2ff;
  font-size:11px;
}

.vehicle-detail-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.vehicle-detail-info-grid>div{
  min-width:0;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(8,38,66,.52);
}

.vehicle-detail-info-grid span{
  display:block;
  color:#688fa7;
  font-size:7px;
}

.vehicle-detail-info-grid strong{
  display:block;
  margin-top:4px;
  color:#dff4ff;
  font-size:9px;
  overflow-wrap:anywhere;
}

.vehicle-detail-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:8px;
  margin-top:12px;
}

@media(max-width:860px){
  .vehicle-detail-dialog{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
  }

  .vehicle-detail-hero{
    grid-template-columns:54px minmax(0,1fr);
    gap:10px;
    padding-right:44px;
  }

  .vehicle-detail-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    font-size:26px;
  }

  .vehicle-detail-online{
    grid-column:2;
    justify-self:start;
    padding:5px 7px;
  }

  .vehicle-detail-primary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .telemetry-card{
    padding:10px;
  }

  .telemetry-card strong{
    font-size:18px;
  }

  .vehicle-detail-info-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vehicle-detail-actions{
    position:sticky;
    bottom:0;
    grid-template-columns:1fr 1fr 1.2fr;
    margin:12px -10px -14px;
    padding:9px 10px max(9px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(97,216,255,.10);
    background:rgba(4,20,38,.97);
    backdrop-filter:blur(18px);
  }
}

@media(max-width:390px){
  .vehicle-detail-info-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .vehicle-detail-actions{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   BAZCO GPS V1.13 — PROFESSIONAL VEHICLE MARKERS + SMART EVENTS
   ============================================================ */

/* Plate always travels with the Google Maps marker. */
.bazco-map-plate-label{
  position:relative;
  padding:4px 7px !important;
  border:1px solid rgba(148,220,255,.38) !important;
  border-radius:7px !important;
  background:rgba(3,23,40,.94) !important;
  color:#effbff !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:10px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:.045em !important;
  text-shadow:none !important;
  box-shadow:0 5px 15px rgba(0,0,0,.28) !important;
  white-space:nowrap !important;
}

/* Professional selector preview — deliberately no emoji. */
.vehicle-icon-preview-pro{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 50% 42%,rgba(33,185,244,.22),transparent 54%),
    linear-gradient(180deg,#092841,#04192d) !important;
}

.vehicle-icon-preview-pro::before{
  content:"";
  position:absolute;
  width:22px;
  height:32px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:2px solid #dff8ff;
  border-radius:7px;
  background:#1aaee9;
  box-shadow:
    inset 0 8px rgba(5,26,45,.52),
    0 5px 12px rgba(0,0,0,.28);
}

.vehicle-icon-preview-pro[data-preview="moto"]::before{
  width:10px;height:34px;border-radius:6px;
}
.vehicle-icon-preview-pro[data-preview="camion"]::before{
  width:25px;height:34px;border-radius:4px;background:#f59e0b;
}
.vehicle-icon-preview-pro[data-preview="bus"]::before{
  width:23px;height:36px;border-radius:5px;background:#8b5cf6;
}
.vehicle-icon-preview-pro[data-preview="van"]::before{
  width:22px;height:35px;border-radius:7px;background:#22c55e;
}
.vehicle-icon-preview-pro[data-preview="pickup"]::before{
  width:24px;height:34px;border-radius:5px;background:#0ea5e9;
}
.vehicle-icon-preview-pro[data-preview="taxi"]::before{
  background:#eab308;
}
.vehicle-icon-preview-pro[data-preview="maquinaria"]::before{
  width:27px;height:27px;border-radius:5px;background:#f97316;
}

.vehicle-icon-preview-pro span{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  min-width:34px;
  padding:2px 4px;
  border-radius:5px;
  background:rgba(2,16,29,.92);
  color:#e7f9ff;
  font-size:5px;
  font-weight:900;
  letter-spacing:.05em;
  text-align:center;
}

/* Smart event cards in the Alerts-only screen. */
.smart-event-card{
  position:relative;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:start;
  padding:11px !important;
  border:1px solid rgba(105,188,235,.12) !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,rgba(7,34,58,.86),rgba(4,24,43,.86)) !important;
}

.smart-event-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(97,216,255,.18);
  border-radius:12px;
  background:rgba(22,169,245,.09);
  color:#73ddff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.03em;
}

.smart-event-content{
  min-width:0;
}

.smart-event-card.warning .smart-event-icon{
  border-color:rgba(245,158,11,.22);
  background:rgba(245,158,11,.08);
  color:#fbbf24;
}
.smart-event-card.danger .smart-event-icon{
  border-color:rgba(244,63,94,.22);
  background:rgba(244,63,94,.08);
  color:#fb7185;
}
.smart-event-card.critical{
  border-color:rgba(255,75,96,.24) !important;
}
.smart-event-card.critical .smart-event-icon{
  border-color:rgba(255,75,96,.30);
  background:rgba(255,75,96,.12);
  color:#ff6b7e;
}

.manager-alert-type{
  text-transform:none !important;
  letter-spacing:.01em !important;
}

/* Vehicle detail: use professional text badge rather than emoji. */
.vehicle-detail-icon{
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.06em;
  color:#e9faff;
  background:
    radial-gradient(circle,rgba(33,185,244,.20),transparent 64%),
    linear-gradient(180deg,#092640,#05192e) !important;
}

@media(max-width:860px){
  .bazco-map-plate-label{
    font-size:9px !important;
    padding:3px 6px !important;
  }
}


/* ============================================================
   BAZCO GPS V1.13.1 — VEHICLE MARKERS REWORK
   Clean top-view GPS marker style.
   ============================================================ */

.vehicle-icon-preview-pro{
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(8,37,63,.96),rgba(4,23,41,.96))
    !important;
}

.vehicle-icon-preview-pro::before,
.vehicle-icon-preview-pro span{
  display:none !important;
}

.vehicle-icon-preview-pro img{
  width:44px !important;
  height:44px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.28));
}

.vehicle-detail-icon{
  overflow:hidden;
}

.vehicle-detail-icon img{
  width:48px;
  height:48px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.32));
}

/* Plate travels as a compact identification tag beside the marker. */
.bazco-map-plate-label{
  margin-top:-1px !important;
  padding:4px 7px !important;
  border:1px solid rgba(134,216,255,.42) !important;
  border-radius:6px !important;
  background:rgba(3,20,35,.94) !important;
  box-shadow:0 4px 11px rgba(0,0,0,.30) !important;
  color:#F2FBFF !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.055em !important;
}

/* Native select now contains only proper text labels. */
.vehicle-icon-select option{
  color:#0b1720;
  background:#fff;
}


/* ============================================================
   BAZCO GPS V1.14 + V1.15
   Reglas configurables + roles/portal móvil
   ============================================================ */

.rules-dialog,
.client-portal-dialog{
  max-width:900px;
}

.rules-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:0 0 10px;
}

.rules-toolbar label{
  display:grid;
  gap:5px;
  min-width:min(320px,100%);
  color:#80a8c0;
  font-size:8px;
  font-weight:800;
}

.rules-list{
  display:grid;
  gap:10px;
}

.rule-card{
  padding:12px;
  border:1px solid rgba(97,216,255,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(8,34,59,.88),rgba(5,25,45,.88));
}

.rule-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.rule-card-head strong{
  display:block;
  color:#edf9ff;
  font-size:12px;
}

.rule-card-head span{
  display:block;
  margin-top:2px;
  color:#6e96ad;
  font-size:7px;
}

.rule-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8eb5c9;
  font-size:8px;
}

.rule-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}

.rule-card-grid label{
  display:grid;
  gap:5px;
  color:#79a1b8;
  font-size:8px;
  font-weight:800;
}

.rule-threshold-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
}

.rule-threshold-wrap span{
  color:#7fa8bf;
  font-size:8px;
}

.rule-channels{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:10px 0;
}

.rule-channels label{
  display:flex;
  align-items:center;
  gap:5px;
  color:#9fc4d7;
  font-size:8px;
}

.portal-role-chip{
  display:inline-flex;
  padding:6px 9px;
  border:1px solid rgba(97,216,255,.13);
  border-radius:999px;
  background:rgba(22,169,245,.07);
  color:#78ddff;
  font-size:8px;
  font-weight:900;
}

.portal-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}

.portal-kpi-grid article{
  padding:12px;
  border:1px solid rgba(97,216,255,.10);
  border-radius:13px;
  background:rgba(5,27,48,.72);
}

.portal-kpi-grid span{
  display:block;
  color:#7299b1;
  font-size:7px;
}

.portal-kpi-grid strong{
  display:block;
  margin-top:5px;
  color:#f3fbff;
  font-size:20px;
}

.portal-section{
  padding:12px;
  border:1px solid rgba(97,216,255,.10);
  border-radius:14px;
  background:rgba(4,23,42,.48);
}

.portal-section h3{
  margin:0 0 8px;
  font-size:11px;
}

.portal-recent-alerts{
  display:grid;
  gap:7px;
}

.portal-alert-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:9px;
  border-radius:10px;
  background:rgba(8,38,66,.52);
}

.portal-alert-row strong,
.portal-alert-row span{
  display:block;
}

.portal-alert-row strong{
  color:#dff5ff;
  font-size:9px;
}

.portal-alert-row span{
  margin-top:3px;
  color:#83a9bf;
  font-size:7px;
}

.portal-alert-row small{
  color:#63869b;
  font-size:6px;
}

@media(max-width:860px){
  .rules-dialog,
  .client-portal-dialog{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
  }

  .rules-toolbar{
    display:block;
  }

  .rules-toolbar label{
    min-width:0;
  }

  .rule-card-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .portal-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* Bazco GPS V1.16 */
.maintenance-agenda{display:grid;gap:8px}
.maintenance-agenda-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid rgba(97,216,255,.10);border-radius:12px;background:rgba(7,34,58,.68)}
.maintenance-agenda-card strong,.maintenance-agenda-card span{display:block}
.maintenance-agenda-card strong{color:#e9f8ff;font-size:10px}
.maintenance-agenda-card span{margin-top:3px;color:#789fb6;font-size:8px}
.maintenance-agenda-card em{padding:5px 7px;border-radius:999px;background:rgba(22,169,245,.09);color:#70dfff;font-size:7px;font-style:normal;font-weight:900}
.maintenance-agenda-card.overdue{border-color:rgba(255,101,120,.20)}
.maintenance-agenda-card.overdue em{background:rgba(255,101,120,.09);color:#ff7b8b}

/* Bazco GPS V1.17 */
.analytics-dialog{max-width:1120px}
.analytics-toolbar{display:flex;justify-content:flex-end;align-items:end;gap:8px;margin-bottom:10px}
.analytics-toolbar label{display:grid;gap:5px;color:#789fb6;font-size:8px;font-weight:800}
.analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.analytics-kpis article{padding:12px;border:1px solid rgba(97,216,255,.10);border-radius:14px;background:linear-gradient(180deg,rgba(8,35,60,.86),rgba(5,25,45,.86))}
.analytics-kpis span{display:block;color:#7299b0;font-size:7px}
.analytics-kpis strong{display:block;margin-top:5px;color:#effaff;font-size:18px}
.analytics-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:9px;margin-bottom:9px}
.analytics-panel{padding:12px;border:1px solid rgba(97,216,255,.10);border-radius:14px;background:rgba(5,27,48,.64)}
.analytics-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.analytics-panel-head h3{margin:0;color:#e6f7ff;font-size:11px}
.analytics-panel-head span{color:#678ca3;font-size:7px}
.analytics-bar-chart{display:flex;align-items:end;gap:3px;height:180px;padding-top:10px}
.analytics-bar-item{flex:1;min-width:3px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.analytics-bar{width:72%;min-height:4px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#48d7ff,#098cd2);box-shadow:0 0 10px rgba(22,169,245,.16)}
.analytics-bar-item span{color:#597d94;font-size:5px}
.analytics-alert-chart{display:grid;gap:8px}
.analytics-alert-row{display:grid;grid-template-columns:minmax(100px,1.2fr) 2fr auto;align-items:center;gap:7px}
.analytics-alert-row>span{color:#9fc2d5;font-size:7px}
.analytics-alert-row>div{height:7px;overflow:hidden;border-radius:999px;background:rgba(111,161,190,.10)}
.analytics-alert-row i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#149ddd,#6edfff)}
.analytics-alert-row strong{color:#edf9ff;font-size:8px}
.analytics-ranking{display:grid;gap:6px}
.analytics-rank-row{display:grid;grid-template-columns:28px minmax(100px,1.4fr) repeat(5,minmax(80px,1fr));align-items:center;gap:7px;padding:8px;border-radius:10px;background:rgba(7,37,63,.54)}
.analytics-rank-row>em{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(22,169,245,.08);color:#72ddff;font-size:8px;font-style:normal;font-weight:900}
.analytics-rank-name strong,.analytics-rank-name span,.analytics-rank-row>div>span,.analytics-rank-row>div>strong{display:block}
.analytics-rank-name strong{color:#effaff;font-size:8px}
.analytics-rank-name span,.analytics-rank-row>div>span{color:#648aa1;font-size:6px}
.analytics-rank-row>div>strong{margin-top:2px;color:#cfeafb;font-size:7px}
@media(max-width:860px){
  .analytics-dialog{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important}
  .analytics-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-grid{grid-template-columns:minmax(0,1fr)}
  .analytics-bar-chart{height:155px}
  .analytics-rank-row{grid-template-columns:28px minmax(0,1fr) 1fr}
  .analytics-rank-row>div:nth-child(n+4){display:none}
}


/* ============================================================
   BAZCO GPS V1.19 — Commercial polish
   ============================================================ */
.build-info-card{
  margin:10px 8px;padding:10px;border:1px solid rgba(97,216,255,.10);
  border-radius:12px;background:linear-gradient(180deg,rgba(8,35,60,.72),rgba(5,24,44,.72))
}
.build-info-card span,.build-info-card strong,.build-info-card small{display:block}
.build-info-card span{color:#628da6;font-size:6px;font-weight:900;letter-spacing:.12em}
.build-info-card strong{margin-top:3px;color:#7fe0ff;font-size:11px}
.build-info-card small{margin-top:2px;color:#7499af;font-size:6px}
button,.nav-item,.mobile-tab,.vehicle-card{-webkit-tap-highlight-color:transparent}
button:focus-visible,.nav-item:focus-visible,.mobile-tab:focus-visible,.vehicle-card:focus-visible{
  outline:2px solid rgba(74,205,255,.78);outline-offset:2px
}
@media(max-width:860px){
  .nav-item,.mobile-section-toggle{min-height:48px!important}
  .vehicle-card{min-height:58px}
  .mobile-bottom-nav{padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important
  }
}


/* ============================================================
   BAZCO GPS V1.19.3 — MAP CONTROLS FIX
   ============================================================ */
.map-panel{
  position:relative !important;
}

.mobile-map-actions{
  position:absolute !important;
  z-index:1200 !important;
  pointer-events:auto !important;
}

.mobile-map-actions button,
.map-selector,
.map-selector-btn,
.map-selector-menu,
.map-selector-menu button{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

.mobile-map-actions button{
  position:relative;
  z-index:1201 !important;
}

.mobile-map-actions button.working svg{
  animation:bazco-map-spin .7s linear infinite;
}

.map-toolbar{
  z-index:1200 !important;
  pointer-events:none;
}

.map-toolbar .map-selector,
.map-toolbar button{
  pointer-events:auto !important;
}

.map-selector-menu{
  z-index:1300 !important;
}

#map{
  position:relative;
  z-index:1;
}

@keyframes bazco-map-spin{
  to{transform:rotate(360deg)}
}


/* BAZCO GPS V2.0.2 — UI account/settings corrections */
.inline-alerts-preview{display:none !important;}
.password-input-wrap{position:relative;display:block;width:100%;}
.password-input-wrap input{width:100%;padding-right:48px !important;}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#7fb9dc;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;}
.password-toggle:hover,.password-toggle.active{color:#19b8ff;background:rgba(25,184,255,.09);}
.password-eye{font-size:18px;line-height:1;}
#change-password-btn{display:flex;}


/* ============================================================
   BAZCO GPS V2.0.0.2 — MOBILE HEADER / FAVICON
   ============================================================ */

@media(max-width:860px){
  /* Increase logo presence without increasing overall header height too much. */
  .mobile-topbar .brand,
  .topbar-mobile .brand,
  .mobile-header .brand,
  .app-header .brand{
    min-width:0;
  }

  .mobile-topbar .brand-logo,
  .topbar-mobile .brand-logo,
  .mobile-header .brand-logo,
  .app-header .brand-logo,
  .mobile-topbar .brand img,
  .topbar-mobile .brand img,
  .mobile-header .brand img,
  .app-header .brand img{
    width:48px !important;
    height:48px !important;
    object-fit:contain !important;
    flex:0 0 48px !important;
  }

  /* Main mobile top actions: side-by-side instead of stacked. */
  .mobile-top-actions,
  .mobile-header-actions,
  .topbar-mobile-actions,
  .header-mobile-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    width:auto !important;
  }

  .mobile-top-actions > *,
  .mobile-header-actions > *,
  .topbar-mobile-actions > *,
  .header-mobile-actions > *{
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .mobile-top-actions .icon-btn,
  .mobile-header-actions .icon-btn,
  .topbar-mobile-actions .icon-btn,
  .header-mobile-actions .icon-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

@media(max-width:860px){
  .mobile-header-right,
  .mobile-topbar-right,
  .topbar-actions.mobile,
  .top-actions-mobile{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
  }

  .mobile-header-right > *,
  .mobile-topbar-right > *,
  .topbar-actions.mobile > *,
  .top-actions-mobile > *{
    margin:0 !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.3 — EXACT MOBILE HEADER FIX
   Targets the real markup:
   .topbar / .mobile-topbar-leading / .mobile-app-brand / .topbar-actions
   ============================================================ */

@media (max-width:860px){

  .topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:8px !important;
    min-height:68px !important;
    padding:
      max(8px,env(safe-area-inset-top))
      10px
      8px !important;
  }

  .mobile-topbar-leading{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    min-width:0 !important;
    width:auto !important;
    flex:1 1 auto !important;
    gap:9px !important;
  }

  .mobile-app-brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    gap:8px !important;
  }

  /* Requested: mobile logo visibly larger. */
  .mobile-app-brand > img{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    flex:0 0 46px !important;
    object-fit:contain !important;
    border-radius:11px !important;
  }

  .mobile-app-brand > div{
    min-width:0 !important;
  }

  .mobile-app-brand strong{
    font-size:11px !important;
  }

  .mobile-app-brand span{
    font-size:6px !important;
  }

  /* Requested: status + bell in one horizontal row. */
  .topbar > .topbar-actions{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    min-width:75px !important;
    max-width:none !important;
    gap:7px !important;
    align-self:center !important;
  }

  .topbar > .topbar-actions > #realtime-chip,
  .topbar > .topbar-actions > .notifications-bell-btn{
    position:relative !important;
    inset:auto !important;
    float:none !important;
    margin:0 !important;
    flex:0 0 auto !important;
    transform:none !important;
  }

  .topbar > .topbar-actions > #realtime-chip{
    order:1 !important;
    width:35px !important;
    min-width:35px !important;
    height:35px !important;
    min-height:35px !important;
  }

  .topbar > .topbar-actions > .notifications-bell-btn{
    order:2 !important;
    width:35px !important;
    min-width:35px !important;
    height:35px !important;
    min-height:35px !important;
  }

  .topbar > .topbar-actions > #refresh-btn,
  .topbar > .topbar-actions > .top-account-card{
    display:none !important;
  }
}

/* Extra-small Android widths: keep the same single-row layout. */
@media (max-width:430px){
  .topbar{
    grid-template-columns:minmax(0,1fr) 77px !important;
  }

  .mobile-app-brand > img{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    flex-basis:44px !important;
  }

  .topbar > .topbar-actions{
    width:77px !important;
    min-width:77px !important;
    gap:7px !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.5.6 — MOBILE MODAL HEADER + LOGOUT FIX
   Encabezados compactos que NO se superponen al contenido.
   ============================================================ */
.mobile-sidebar-logout{
  display:none;
}

@media (max-width:860px){
  /* El dialogo es el unico contenedor de scroll. */
  .security-modal:not(.hidden){
    overflow:hidden !important;
  }

  .security-modal:not(.hidden) > .security-dialog,
  .security-modal:not(.hidden) > [class$="-dialog"]{
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:
      max(8px,env(safe-area-inset-top))
      10px
      calc(78px + env(safe-area-inset-bottom))
      !important;
  }

  /* Header dentro del flujo: nunca absolute/fixed ni con margen negativo. */
  .security-modal .security-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:5 !important;
    flex:0 0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px !important;
    align-items:start !important;
    gap:8px !important;
    width:auto !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 0 10px !important;
    padding:2px 0 9px !important;
    background:#06192f !important;
    border-bottom:1px solid rgba(105,185,235,.12) !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .security-modal .security-header > div{
    min-width:0 !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
  }

  .security-modal .security-header .eyebrow{
    margin:0 0 4px !important;
    font-size:7px !important;
    line-height:1.25 !important;
    letter-spacing:.12em !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .security-modal .security-header h2{
    margin:0 !important;
    padding:0 !important;
    font-size:18px !important;
    line-height:1.15 !important;
  }

  .security-modal .security-header .manager-subtitle,
  .security-modal .security-header .device-command-subtitle,
  .security-modal .security-header p:not(.eyebrow){
    margin:5px 0 0 !important;
    padding:0 !important;
    font-size:9px !important;
    line-height:1.35 !important;
    max-width:none !important;
  }

  .security-modal .security-header .icon-btn{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    justify-self:end !important;
    align-self:start !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:11px !important;
    transform:none !important;
  }

  /* Primer bloque después del header siempre empieza debajo del header. */
  .security-modal .security-header + *{
    position:relative !important;
    z-index:1 !important;
    margin-top:0 !important;
  }

  #alerts-manager-modal .manager-toolbar,
  #fleet-admin-modal .security-tabs,
  #commercial-modal #tenant-context-card,
  #security-modal .security-tabs{
    flex:0 0 auto !important;
    clear:both !important;
  }

  /* Cerrar sesión visible dentro del menú Más de la APK. */
  .mobile-sidebar-logout{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:43px;
    margin:0 0 8px;
    padding:9px 12px;
    border:1px solid rgba(255,92,112,.35);
    border-radius:11px;
    background:rgba(119,25,45,.18);
    color:#ff9aaa;
    font:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }

  .mobile-sidebar-logout-icon{
    font-size:16px;
    line-height:1;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.5.7 — FICHA INLINE + BLOQUEO SEGURO
   ============================================================ */
.vehicle-item{
  overflow:hidden;
}

.vehicle-item.active{
  padding-bottom:10px;
}

.vehicle-inline-detail{
  margin:10px -2px -2px;
  padding:11px;
  border-top:1px solid rgba(86,179,235,.17);
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,rgba(8,31,55,.78),rgba(3,20,38,.92));
}

.vehicle-inline-location{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:9px;
}

.vehicle-inline-location span,
.vehicle-inline-telemetry span{
  color:#7696ad;
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.vehicle-inline-location strong{
  color:#e9f7ff;
  font-size:10px;
  line-height:1.35;
}

.vehicle-inline-location small{
  color:#6e8799;
  font-size:8px;
}

.vehicle-inline-telemetry{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.vehicle-inline-telemetry>div{
  min-width:0;
  padding:7px 8px;
  border:1px solid rgba(80,171,228,.12);
  border-radius:9px;
  background:rgba(5,25,44,.68);
}

.vehicle-inline-telemetry strong{
  display:block;
  margin-top:3px;
  color:#e8f8ff;
  font-size:10px;
  overflow-wrap:anywhere;
}

.vehicle-inline-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}

.vehicle-inline-action{
  min-height:34px;
  padding:7px 6px;
  border:1px solid rgba(53,174,232,.25);
  border-radius:9px;
  background:rgba(12,66,100,.22);
  color:#bdeeff;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.vehicle-inline-action.danger{
  border-color:rgba(255,91,108,.38);
  background:rgba(111,22,38,.28);
  color:#ffadb8;
}

.vehicle-inline-action:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.vehicle-inline-safety{
  margin-top:7px;
  padding:7px 8px;
  border-radius:8px;
  background:rgba(255,180,64,.06);
  color:#8ca5b5;
  font-size:7.5px;
  line-height:1.4;
}

.vehicle-inline-safety strong{
  color:#ffd17a;
}

@media(max-width:430px){
  .vehicle-inline-actions{
    grid-template-columns:1fr 1fr;
  }
  .vehicle-inline-action.danger{
    grid-column:1 / -1;
  }
}

/* BAZCO V2.0.0.5.8 - ficha expandida sin recorte */
#vehicle-list{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  max-height:calc(100vh - 310px) !important;
  padding-right:4px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
#vehicle-list .vehicle-item,
#vehicle-list .vehicle-item.active,
#vehicle-list .vehicle-inline-detail{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  flex:none !important;
}
@media(max-width:860px){
  #vehicle-list{
    max-height:52vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}
@media(max-width:430px){
  #vehicle-list{max-height:46vh !important;}
}


/* ============================================================
   BAZCO GPS V2.0.0.5.9
   LISTA DE FLOTA COMPACTA + DETALLE SOBRE MARCADOR
   ============================================================ */

/* La columna Flota vuelve a ser una lista compacta. */
#vehicle-list{
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#vehicle-list .vehicle-item{
  max-height:none !important;
  overflow:hidden !important;
  padding:10px !important;
}

#vehicle-list .vehicle-item.active{
  border-color:#16aee9 !important;
  background:rgba(14,72,108,.28) !important;
}

.vehicle-inline-detail{
  display:none !important;
}

/* Google InfoWindow: ficha profesional del vehículo. */
.gm-style .gm-style-iw-c{
  padding:0 !important;
  border-radius:14px !important;
  background:#061a30 !important;
  box-shadow:0 16px 42px rgba(0,0,0,.38) !important;
}

.gm-style .gm-style-iw-d{
  overflow:auto !important;
  max-height:min(470px,70vh) !important;
}

.gm-style .gm-style-iw-tc::after{
  background:#061a30 !important;
}

.gm-style .gm-ui-hover-effect{
  width:34px !important;
  height:34px !important;
  top:4px !important;
  right:4px !important;
  filter:invert(1);
  opacity:.8 !important;
}

.bazco-map-vehicle-card{
  width:min(330px,78vw);
  padding:14px;
  color:#eaf8ff;
  background:linear-gradient(180deg,#08203a,#05172a);
  font-family:inherit;
}

.bazco-map-vehicle-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-right:25px;
  margin-bottom:10px;
}

.bazco-map-vehicle-head>div{
  min-width:0;
}

.bazco-map-vehicle-head strong{
  display:block;
  font-size:16px;
  line-height:1.15;
}

.bazco-map-vehicle-head span{
  display:block;
  margin-top:3px;
  color:#77a1ba;
  font-size:9px;
}

.bazco-map-vehicle-head em{
  flex:none;
  padding:5px 7px;
  border-radius:999px;
  font-size:8px;
  font-style:normal;
  font-weight:900;
}

.bazco-map-vehicle-head em.online{
  color:#51efbd;
  background:rgba(24,184,130,.15);
}

.bazco-map-vehicle-head em.offline{
  color:#ff8292;
  background:rgba(218,54,79,.15);
}

.bazco-map-location{
  padding:9px;
  margin-bottom:8px;
  border:1px solid rgba(73,168,226,.14);
  border-radius:10px;
  background:rgba(5,25,45,.55);
}

.bazco-map-location span,
.bazco-map-telemetry span{
  display:block;
  color:#6f9bb6;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.bazco-map-location strong{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.35;
}

.bazco-map-location small{
  display:block;
  margin-top:4px;
  color:#69879a;
  font-size:8px;
}

.bazco-map-telemetry{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.bazco-map-telemetry>div{
  min-width:0;
  padding:8px;
  border:1px solid rgba(73,168,226,.12);
  border-radius:9px;
  background:rgba(4,22,39,.55);
}

.bazco-map-telemetry strong{
  display:block;
  margin-top:3px;
  font-size:10px;
  overflow-wrap:anywhere;
}

.bazco-map-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:9px;
}

.bazco-map-actions button{
  min-height:34px;
  border:1px solid rgba(57,173,231,.30);
  border-radius:9px;
  background:rgba(14,91,132,.26);
  color:#bfeeff;
  font:inherit;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}

.bazco-map-actions button.danger{
  grid-column:1/-1;
  border-color:rgba(255,80,103,.34);
  background:rgba(121,26,43,.28);
  color:#ffadba;
}

.bazco-map-actions button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.bazco-map-offline-note{
  margin-top:8px;
  padding:7px 8px;
  border-radius:8px;
  color:#d3b06e;
  background:rgba(209,146,44,.08);
  font-size:7.5px;
  line-height:1.4;
}

@media(max-width:860px){
  .bazco-map-vehicle-card{
    width:min(300px,76vw);
    padding:11px;
  }
  .gm-style .gm-style-iw-d{
    max-height:60vh !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.6.0
   POPUP COMPACTO + CONECTIVIDAD REAL + FLOTA SIN SOLAPAMIENTO
   ============================================================ */

/* El punto de estado móvil usa el color de la clase real. */
.realtime-disconnected .pulse{
  background:#ff4f63 !important;
  box-shadow:0 0 0 5px rgba(255,79,99,.12) !important;
}

.realtime-connecting .pulse{
  background:#ffc857 !important;
  box-shadow:0 0 0 5px rgba(255,200,87,.10) !important;
}

/* Popup: suficientemente pequeño para evitar la barra de scroll. */
.gm-style .gm-style-iw-c{
  max-width:286px !important;
}

.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  max-height:none !important;
}

.bazco-map-vehicle-card{
  width:min(276px,74vw) !important;
  padding:9px !important;
}

.bazco-map-vehicle-head{
  gap:6px !important;
  padding-right:20px !important;
  margin-bottom:6px !important;
}

.bazco-map-vehicle-head strong{
  font-size:13px !important;
}

.bazco-map-vehicle-head span{
  margin-top:2px !important;
  font-size:7px !important;
}

.bazco-map-vehicle-head em{
  padding:3px 5px !important;
  font-size:6.5px !important;
}

.bazco-map-location{
  padding:6px 7px !important;
  margin-bottom:5px !important;
}

.bazco-map-location span,
.bazco-map-telemetry span{
  font-size:5.8px !important;
}

.bazco-map-location strong{
  margin-top:2px !important;
  font-size:8px !important;
  line-height:1.22 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.bazco-map-location small{
  margin-top:2px !important;
  font-size:6.5px !important;
}

.bazco-map-telemetry{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:4px !important;
}

.bazco-map-telemetry>div{
  padding:5px 6px !important;
  border-radius:7px !important;
}

.bazco-map-telemetry strong{
  margin-top:2px !important;
  font-size:8px !important;
}

.bazco-map-actions{
  grid-template-columns:1fr 1fr !important;
  gap:4px !important;
  margin-top:5px !important;
}

.bazco-map-actions button{
  min-height:27px !important;
  border-radius:7px !important;
  font-size:6.8px !important;
  padding:4px !important;
}

.bazco-map-offline-note{
  margin-top:5px !important;
  padding:5px 6px !important;
  font-size:6px !important;
  line-height:1.25 !important;
}

/* En móvil la tarjeta de vehículo siempre comienza debajo del título Vehículos. */
@media(max-width:860px){
  .vehicle-panel{
    display:flex !important;
    flex-direction:column !important;
    overflow:visible !important;
  }

  .vehicle-panel .panel-heading{
    position:relative !important;
    top:auto !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    margin:0 0 8px !important;
    padding:0 !important;
    background:var(--bazco-mobile-surface) !important;
  }

  #vehicle-list,
  .vehicle-list{
    position:relative !important;
    z-index:1 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    max-height:190px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:none !important;
  }

  #vehicle-list .vehicle-item:first-child{
    margin-top:0 !important;
  }

  .bazco-map-vehicle-card{
    width:min(260px,70vw) !important;
    padding:8px !important;
  }

  .gm-style .gm-style-iw-d{
    overflow:hidden !important;
    max-height:none !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.6.1 — AUTHORITATIVE UI PATCH
   ============================================================ */

/* Desktop + móvil: cabecera Flota siempre ocupa su propia fila. */
.workspace > .vehicle-panel{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.workspace > .vehicle-panel > .panel-heading{
  position:relative !important;
  inset:auto !important;
  flex:0 0 auto !important;
  z-index:4 !important;
  width:100% !important;
  min-height:42px !important;
  margin:0 !important;
  padding:0 0 8px !important;
  transform:none !important;
  background:#071d34 !important;
}

.workspace > .vehicle-panel > #vehicle-list{
  position:relative !important;
  inset:auto !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.workspace > .vehicle-panel > #vehicle-list > .vehicle-item{
  margin-top:0 !important;
}

/* Popup de mapa ultra-compacto: cero scrollbar. */
.gm-style .gm-style-iw-c{
  max-width:248px !important;
  padding:0 !important;
}
.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  max-height:none !important;
}
.bazco-map-vehicle-card{
  width:238px !important;
  padding:7px !important;
}
.bazco-map-vehicle-head{margin-bottom:4px !important;}
.bazco-map-vehicle-head strong{font-size:11px !important;}
.bazco-map-vehicle-head span{font-size:6px !important;}
.bazco-map-location{padding:5px 6px !important;margin-bottom:4px !important;}
.bazco-map-location strong{font-size:7.2px !important;line-height:1.16 !important;}
.bazco-map-location small{font-size:5.8px !important;}
.bazco-map-telemetry{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:3px !important;}
.bazco-map-telemetry>div{padding:4px !important;}
.bazco-map-telemetry span{font-size:5px !important;}
.bazco-map-telemetry strong{font-size:7.2px !important;}
.bazco-map-actions{gap:3px !important;margin-top:4px !important;}
.bazco-map-actions button{min-height:24px !important;font-size:6px !important;}
.bazco-map-offline-note{font-size:5.5px !important;padding:4px 5px !important;}

/* Herramientas de dibujo de geocerca. */
.geofence-draw-tools{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.geofence-form select{
  width:100%;
  min-height:38px;
  border:1px solid rgba(80,174,230,.22);
  border-radius:9px;
  background:#071b31;
  color:#eaf8ff;
  padding:8px 10px;
}


/* ============================================================
   BAZCO GPS V2.0.0.6.2 — CONTROLES PROFESIONALES DE MAPA
   ============================================================ */

.bazco-map-control-rail{
  position:absolute;
  top:12px;
  left:12px;
  z-index:18;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  pointer-events:auto;
}

.bazco-map-control-group{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(25,74,103,.35);
  border-radius:8px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
}

.bazco-map-control-btn{
  position:relative;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(39,80,104,.25);
  border-radius:7px;
  background:#fff;
  color:#102433;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.18);
  transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease;
}

.bazco-map-control-group .bazco-map-control-btn{
  border:0;
  border-radius:0;
  box-shadow:none;
}

.bazco-map-control-group .bazco-map-control-btn + .bazco-map-control-btn{
  border-top:1px solid #d7e0e6;
}

.bazco-map-control-btn:hover{
  background:#f1f8fb;
  transform:translateY(-1px);
}

.bazco-map-control-btn:active{
  transform:translateY(0);
}

.bazco-map-control-btn.zoom-btn{
  width:38px;
  height:34px;
  font-family:Arial,sans-serif;
  font-size:25px;
  font-weight:500;
  line-height:1;
}

.bazco-map-control-btn.action-btn svg{
  width:21px;
  height:21px;
  fill:currentColor;
}

.bazco-map-control-btn.action-btn.active{
  color:#063f60;
  border-color:#1dbcf1;
  background:#dff7ff;
  box-shadow:0 0 0 2px rgba(29,188,241,.15),0 2px 8px rgba(0,0,0,.18);
}

.control-active-dot{
  position:absolute;
  top:4px;
  right:4px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:transparent;
}

#vehicle-follow-btn.active .control-active-dot{
  background:#19ce91;
  box-shadow:0 0 0 3px rgba(25,206,145,.15);
}

#vehicle-panel-toggle-btn.active .collapse-arrow{
  transform-origin:center;
  transform:rotate(180deg);
}

/* Contraer la columna de flota para que el mapa use todo el ancho. */
.workspace{
  transition:grid-template-columns .20s ease;
}

.workspace.vehicle-panel-collapsed{
  grid-template-columns:minmax(0,1fr) !important;
}

.workspace.vehicle-panel-collapsed > .vehicle-panel{
  display:none !important;
}

.workspace.vehicle-panel-collapsed > .map-panel{
  grid-column:1 / -1 !important;
}

/* Los controles antiguos con flechas/refresh desaparecen definitivamente. */
.mobile-map-actions{
  display:none !important;
}

/* Google no dibuja su zoom nativo; estos +/- son los únicos controles de zoom. */
.gm-bundled-control-on-bottom .gmnoprint[role="menubar"]{
  display:none;
}

@media(max-width:860px){
  .bazco-map-control-rail{
    top:9px;
    left:9px;
    gap:6px;
  }

  .bazco-map-control-btn{
    width:36px;
    height:36px;
  }

  .bazco-map-control-btn.zoom-btn{
    width:36px;
    height:32px;
    font-size:23px;
  }

  /* En móvil el botón 3 oculta/muestra la sección Vehículos y deja el mapa prioritario. */
  .workspace.vehicle-panel-collapsed > .map-panel{
    min-height:calc(100vh - 190px);
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.6.3 — PANEL FLOTA / POPUP LEGIBLE
   ============================================================ */

.workspace > .vehicle-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  align-content:start !important;
  padding:14px !important;
}

.workspace > .vehicle-panel > .panel-heading{
  display:flex !important;
  position:static !important;
  min-height:54px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 0 12px !important;
  z-index:auto !important;
  background:transparent !important;
  transform:none !important;
}

.workspace > .vehicle-panel > #vehicle-list{
  display:flex !important;
  flex-direction:column !important;
  position:static !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.workspace > .vehicle-panel > #vehicle-list > .vehicle-item:first-child{
  margin-top:0 !important;
}

/* Ficha flotante: tamaño intermedio y solo información esencial. */
.gm-style .gm-style-iw-c{
  max-width:325px !important;
  padding:0 !important;
}
.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  max-height:none !important;
}
.bazco-map-vehicle-card{
  width:305px !important;
  padding:12px !important;
}
.bazco-map-vehicle-head{
  margin-bottom:8px !important;
  padding-right:22px !important;
}
.bazco-map-vehicle-head strong{
  font-size:15px !important;
}
.bazco-map-vehicle-head span{
  font-size:8px !important;
}
.bazco-map-vehicle-head em{
  font-size:7px !important;
}
.bazco-map-location{
  padding:8px !important;
  margin-bottom:7px !important;
}
.bazco-map-location span,
.bazco-map-summary-grid span{
  display:block;
  color:#73a0bb;
  font-size:7px !important;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.bazco-map-location strong{
  display:block;
  margin-top:3px !important;
  font-size:9px !important;
  line-height:1.3 !important;
  white-space:normal !important;
}
.bazco-map-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.bazco-map-summary-grid>div{
  padding:7px 8px;
  border:1px solid rgba(73,168,226,.13);
  border-radius:8px;
  background:rgba(4,22,39,.55);
}
.bazco-map-summary-grid strong{
  display:block;
  margin-top:3px;
  font-size:10px !important;
  color:#f0fbff;
}
.bazco-map-actions{
  gap:6px !important;
  margin-top:8px !important;
}
.bazco-map-actions button{
  min-height:31px !important;
  font-size:7.5px !important;
}

/* Modal de selección para seguimiento individual. */
.tracking-dialog{
  width:min(560px,92vw) !important;
  max-height:min(720px,88vh);
}
.tracking-search-row{
  margin:8px 0 10px;
}
.tracking-search-row label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#8fb2c8;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.tracking-search-row input{
  width:100%;
  min-height:40px;
  border:1px solid rgba(78,174,233,.22);
  border-radius:9px;
  background:#071b31;
  color:#eefaff;
  padding:8px 10px;
}
.tracking-vehicle-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:370px;
  overflow-y:auto;
  padding:2px;
}
.tracking-vehicle-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(74,165,222,.16);
  border-radius:10px;
  background:#071b31;
  color:#eaf8ff;
  text-align:left;
  cursor:pointer;
}
.tracking-vehicle-option:hover,
.tracking-vehicle-option.selected{
  border-color:#20bff2;
  background:rgba(13,82,121,.32);
}
.tracking-vehicle-option strong{
  display:block;
  font-size:12px;
}
.tracking-vehicle-option span{
  display:block;
  margin-top:3px;
  color:#789bb1;
  font-size:8px;
}
.tracking-vehicle-option em{
  flex:none;
  font-size:7px;
  font-style:normal;
  font-weight:900;
}
.tracking-vehicle-option em.online{color:#4be0ae;}
.tracking-vehicle-option em.offline{color:#ff7587;}
.tracking-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.tracking-empty{
  padding:22px;
  text-align:center;
  color:#7f9caf;
  font-size:10px;
}


/* ============================================================
   BAZCO GPS V2.0.0.6.4 — PRIORITY FIX: FLOTA HEADER SEPARATION
   The header and the vehicle list are now physically different
   wrappers, so the card cannot render behind "FLOTA / Vehículos".
   ============================================================ */

.workspace > .vehicle-panel{
  display:grid !important;
  grid-template-rows:72px minmax(0,1fr) !important;
  gap:10px !important;
  align-content:stretch !important;
  padding:12px !important;
  overflow:hidden !important;
}

.workspace > .vehicle-panel > .vehicle-panel-header{
  grid-row:1 !important;
  position:relative !important;
  display:block !important;
  min-height:72px !important;
  height:72px !important;
  padding:4px 0 12px !important;
  margin:0 !important;
  overflow:visible !important;
  z-index:5 !important;
  background:#071d34 !important;
  border-bottom:1px solid rgba(72,160,215,.11);
}

.workspace > .vehicle-panel > .vehicle-panel-header > .panel-heading{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:50px !important;
  height:50px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
}

.workspace > .vehicle-panel > .vehicle-panel-header .eyebrow{
  display:block !important;
  margin:0 0 5px !important;
  font-size:8px !important;
  line-height:1 !important;
}

.workspace > .vehicle-panel > .vehicle-panel-header h2{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.05 !important;
}

.workspace > .vehicle-panel > .vehicle-panel-list-wrap{
  grid-row:2 !important;
  position:relative !important;
  display:block !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:1 !important;
}

.workspace > .vehicle-panel > .vehicle-panel-list-wrap > #vehicle-list{
  position:static !important;
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 2px 0 0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  transform:none !important;
}

.workspace > .vehicle-panel > .vehicle-panel-list-wrap > #vehicle-list > .vehicle-item{
  position:relative !important;
  flex:0 0 auto !important;
  margin:0 !important;
  transform:none !important;
  z-index:1 !important;
}

/* El hover no mueve la tarjeta hacia arriba debajo de la cabecera. */
.workspace > .vehicle-panel .vehicle-item:hover,
.workspace > .vehicle-panel .vehicle-item.active{
  transform:none !important;
}

/* Popup de vehículo: legible y con botón de bloqueo visible. */
.bazco-map-actions button.danger{
  grid-column:1 / -1 !important;
  min-height:30px !important;
}

@media(max-width:860px){
  .workspace > .vehicle-panel{
    grid-template-rows:68px minmax(0,auto) !important;
    gap:8px !important;
  }

  .workspace > .vehicle-panel > .vehicle-panel-header{
    min-height:68px !important;
    height:68px !important;
  }

  .workspace > .vehicle-panel > .vehicle-panel-list-wrap > #vehicle-list{
    max-height:210px !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.6.5 — SOLO CONTROLES BAZCO
   Google Camera Control (flechas + zoom inferior derecho) queda
   desactivado por JS y oculto defensivamente por CSS.
   ============================================================ */
#map .gm-bundled-control,
#map .gm-bundled-control-on-bottom,
#map .gm-fullscreen-control,
#map .gm-svpc,
#map .gmnoprint[role="menubar"]{
  display:none !important;
}


/* Selector de rol al crear una empresa cliente */
#new-company-form select{
  width:100%;
  min-height:36px;
  border:1px solid rgba(79,169,225,.22);
  border-radius:8px;
  background:#071b31;
  color:#eefaff;
  padding:7px 9px;
}
.company-role-help{
  margin:10px 0 0;
  padding:9px 11px;
  border:1px solid rgba(67,157,212,.13);
  border-radius:9px;
  background:rgba(5,27,47,.55);
  color:#8eafc2;
  font-size:8px;
  line-height:1.45;
}
.company-role-help strong{color:#dff6ff;}


/* ============================================================
   BAZCO GPS V2.0.0.6.6 — CIERRE DE FICHA + OSM DEFAULT
   ============================================================ */

/* La X de Google InfoWindow queda alineada con la franja superior de la ficha. */
.gm-style .gm-ui-hover-effect{
  top:-13px !important;
  right:3px !important;
  width:34px !important;
  height:34px !important;
  z-index:30 !important;
  opacity:1 !important;
  filter:invert(1) !important;
}

/* Permite que la X sobresalga hacia arriba sin ser recortada. */
.gm-style .gm-style-iw-c{
  overflow:visible !important;
}

.gm-style .gm-style-iw-d{
  overflow:hidden !important;
}


/* ============================================================
   BAZCO GPS V2.0.0.6.7 — X CENTRADA EN LA BARRA SUPERIOR
   La barra mide ~38px. La X queda centrada verticalmente y con
   margen derecho interno para no tocar el borde.
   ============================================================ */
.gm-style .gm-ui-hover-effect{
  top:-2px !important;
  right:9px !important;
  width:32px !important;
  height:32px !important;
  margin:0 !important;
  padding:0 !important;
  z-index:40 !important;
  opacity:1 !important;
  filter:invert(1) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.gm-style .gm-ui-hover-effect > span,
.gm-style .gm-ui-hover-effect > img{
  margin:0 !important;
}


/* ============================================================
   BAZCO GPS V2.0.0.6.8 — X SEGÚN REFERENCIA
   Más abajo, más a la izquierda y con botón cuadrado redondeado.
   ============================================================ */
.gm-style .gm-ui-hover-effect{
  top:7px !important;
  right:16px !important;
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(105,157,194,.30) !important;
  border-radius:10px !important;
  background:#0d2a46 !important;
  box-shadow:none !important;

  z-index:50 !important;
  opacity:1 !important;
  filter:none !important;
}

.gm-style .gm-ui-hover-effect > span{
  width:12px !important;
  height:12px !important;
  margin:0 !important;
  background-size:12px 12px !important;
  filter:invert(1) brightness(2) !important;
  opacity:.95 !important;
}

.gm-style .gm-ui-hover-effect > img{
  width:12px !important;
  height:12px !important;
  margin:0 !important;
  filter:invert(1) brightness(2) !important;
  opacity:.95 !important;
}

/* Evita que reglas anteriores vuelvan a empujar el botón fuera de la barra. */
.gm-style .gm-style-iw-c{
  overflow:visible !important;
}


/* ============================================================
   BAZCO GPS V2.0.0.6.9 — BOTÓN CERRAR FINAL / CONTROLADO POR BAZCO
   Se deja de reposicionar el botón interno de Google Maps.
   El botón X ahora forma parte del encabezado de la ficha.
   ============================================================ */

/* Ocultar por completo la X nativa de Google InfoWindow. */
.gm-style .gm-ui-hover-effect{
  display:none !important;
}

/* El InfoWindow vuelve a un flujo normal, sin elementos flotando fuera. */
.gm-style .gm-style-iw-c{
  overflow:hidden !important;
  padding:0 !important;
}

.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  max-height:none !important;
}

/* Encabezado con altura estable para alinear perfectamente estado + X. */
.bazco-map-vehicle-head{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;
  min-height:44px !important;
  margin:0 0 8px !important;
  padding:0 !important;
}

.bazco-map-vehicle-title{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}

.bazco-map-vehicle-head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  height:44px !important;
}

/* Botón exactamente 30x30, centrado en una barra de 44px. */
.bazco-map-close-btn{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;

  border:1px solid rgba(105,157,194,.32) !important;
  border-radius:9px !important;
  background:#0d2a46 !important;
  color:#ffffff !important;
  box-shadow:none !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:19px !important;
  font-weight:400 !important;
  line-height:1 !important;

  cursor:pointer !important;
}

.bazco-map-close-btn > span{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 0 2px !important;
  line-height:1 !important;
  transform:none !important;
}

.bazco-map-close-btn:hover{
  background:#123655 !important;
  border-color:rgba(126,187,228,.48) !important;
}

.bazco-map-close-btn:active{
  transform:scale(.96) !important;
}

/* Evita que reglas históricas añadan espacio reservado para la X de Google. */
.bazco-map-vehicle-head{
  padding-right:0 !important;
}

@media(max-width:860px){
  .bazco-map-vehicle-head{
    min-height:42px !important;
  }
  .bazco-map-vehicle-head-actions{
    height:42px !important;
  }
  .bazco-map-close-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.7.0 — FICHA APROBADA + VEHÍCULOS/DISPOSITIVOS
   ============================================================ */

/* Google close button stays hidden: BAZCO owns the close control. */
.gm-style .gm-ui-hover-effect{
  display:none !important;
}
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d{
  overflow:hidden !important;
}

/* APPROVED LAYOUT:
   row 1 = blank title bar + close
   row 2 = vehicle identity + status
*/
.bazco-map-vehicle-card{
  width:310px !important;
  padding:0 12px 12px !important;
  overflow:hidden !important;
}

.bazco-map-window-bar{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  height:42px !important;
  margin:0 -12px 0 !important;
  padding:0 10px !important;
  border-bottom:1px solid rgba(68,154,205,.15) !important;
  background:#06192e !important;
}

.bazco-map-close-btn{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(105,157,194,.33) !important;
  border-radius:9px !important;
  background:#0c2945 !important;
  color:#fff !important;
  font:400 19px/1 Arial,sans-serif !important;
  cursor:pointer !important;
}

.bazco-map-close-btn span{
  display:block !important;
  margin:0 !important;
  padding:0 0 2px !important;
  line-height:1 !important;
}

.bazco-map-identity-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:58px !important;
  margin:0 -12px 9px !important;
  padding:8px 12px !important;
  border-bottom:1px solid rgba(68,154,205,.12) !important;
  background:#071d34 !important;
}

.bazco-map-identity-row .bazco-map-vehicle-title strong{
  display:block !important;
  font-size:15px !important;
}
.bazco-map-identity-row .bazco-map-vehicle-title span{
  display:block !important;
  margin-top:4px !important;
  color:#7195aa !important;
  font-size:7px !important;
}
.bazco-map-identity-row em{
  padding:4px 7px !important;
  border-radius:999px !important;
  font-size:7px !important;
  font-style:normal !important;
  font-weight:900 !important;
}
.bazco-map-identity-row em.online{
  color:#4de2ae !important;
  background:rgba(27,181,128,.13) !important;
}
.bazco-map-identity-row em.offline{
  color:#ff7e91 !important;
  background:rgba(216,51,76,.14) !important;
}

.device-tech-id{
  display:block;
  margin-top:3px;
  color:#7191a6;
  font-size:7px;
}
.device-edit-note{
  margin:10px 0 0;
  padding:9px 10px;
  border:1px solid rgba(72,164,221,.12);
  border-radius:8px;
  background:rgba(6,29,50,.55);
  color:#86a6b9;
  font-size:8px;
  line-height:1.45;
}
.inline-admin-form label small{
  display:block;
  margin-top:4px;
  color:#7898aa;
  font-size:7px;
  line-height:1.3;
}

@media(max-width:860px){
  .bazco-map-vehicle-card{
    width:min(300px,78vw) !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.7.1 — FICHA MÁS COMPACTA
   Mantiene la composición aprobada pero recupera espacio vertical
   para que TODOS los botones inferiores queden visibles.
   ============================================================ */

.bazco-map-vehicle-card{
  width:300px !important;
  padding:0 10px 9px !important;
}

/* Barra superior aprobada, pero más baja. */
.bazco-map-window-bar{
  height:34px !important;
  margin:0 -10px 0 !important;
  padding:0 8px !important;
}

.bazco-map-close-btn{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  flex-basis:27px !important;
  border-radius:8px !important;
  font-size:17px !important;
}

/* Identidad del vehículo: compacta, sin bajar el resto del contenido. */
.bazco-map-identity-row{
  min-height:48px !important;
  margin:0 -10px 6px !important;
  padding:6px 10px !important;
}

.bazco-map-identity-row .bazco-map-vehicle-title strong{
  font-size:14px !important;
}
.bazco-map-identity-row .bazco-map-vehicle-title span{
  margin-top:2px !important;
  font-size:6.5px !important;
}
.bazco-map-identity-row em{
  padding:3px 6px !important;
  font-size:6.5px !important;
}

/* Ubicación y telemetría con menor separación vertical. */
.bazco-map-location{
  padding:6px 7px !important;
  margin-bottom:5px !important;
  border-radius:8px !important;
}
.bazco-map-location span{
  font-size:5.8px !important;
}
.bazco-map-location strong{
  margin-top:2px !important;
  font-size:8px !important;
  line-height:1.2 !important;
}

.bazco-map-summary-grid{
  gap:4px !important;
}
.bazco-map-summary-grid>div{
  padding:5px 6px !important;
  border-radius:7px !important;
}
.bazco-map-summary-grid span{
  font-size:5.6px !important;
}
.bazco-map-summary-grid strong{
  margin-top:2px !important;
  font-size:8.5px !important;
}

/* Acciones finales: compactas y siempre visibles. */
.bazco-map-actions{
  gap:4px !important;
  margin-top:6px !important;
}
.bazco-map-actions button{
  min-height:27px !important;
  padding:4px 5px !important;
  font-size:6.8px !important;
  border-radius:7px !important;
}
.bazco-map-actions button.danger{
  min-height:27px !important;
}

/* Altura máxima defensiva: la ficha no debe desbordar el mapa. */
.gm-style .gm-style-iw-c{
  max-height:none !important;
  overflow:hidden !important;
}
.gm-style .gm-style-iw-d{
  max-height:none !important;
  overflow:hidden !important;
}

@media(max-width:860px){
  .bazco-map-vehicle-card{
    width:min(292px,76vw) !important;
  }
  .bazco-map-window-bar{
    height:32px !important;
  }
  .bazco-map-close-btn{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    min-height:26px !important;
    flex-basis:26px !important;
  }
  .bazco-map-identity-row{
    min-height:46px !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.7.2 — AJUSTE FINO DE FICHA + MENÚ OPERACIONES
   ============================================================ */

/* Sube el contenido unos ~9px manteniendo el diseño aprobado. */
.bazco-map-window-bar{
  height:29px !important;
}

.bazco-map-close-btn{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  flex-basis:24px !important;
  border-radius:7px !important;
  font-size:16px !important;
}

.bazco-map-identity-row{
  min-height:44px !important;
  margin-bottom:4px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}

.bazco-map-location{
  margin-bottom:4px !important;
}

.bazco-map-actions{
  margin-top:5px !important;
}

/* En escritorio, los accesos administrativos de Operaciones deben verse
   como elementos normales del menú, sin depender del acordeón móvil. */
@media(min-width:861px){
  #vehicles-admin-btn,
  #fleet-admin-btn,
  #maintenance-btn,
  #device-commands-btn,
  #analytics-btn{
    visibility:visible;
  }

  #vehicles-admin-btn:not(.hidden),
  #fleet-admin-btn:not(.hidden),
  #maintenance-btn:not(.hidden),
  #device-commands-btn:not(.hidden),
  #analytics-btn:not(.hidden){
    display:flex !important;
  }
}


/* ============================================================
   BAZCO GPS V2.0.0.7.3 — FIX REAL DE ALTURA INFOWINDOW
   Google agrega .gm-style-iw-chr por encima del contenido aunque
   su botón X esté oculto. Ese bloque invisible era el espacio extra.
   ============================================================ */

/* Eliminar COMPLETAMENTE la cabecera reservada por Google. */
.gm-style .gm-style-iw-chr{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* La única barra superior es ahora la barra propia de BAZCO. */
.bazco-map-window-bar{
  height:32px !important;
  min-height:32px !important;
  margin:0 -10px 0 !important;
  padding:0 8px !important;
}

.bazco-map-close-btn{
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  min-height:25px !important;
  flex-basis:25px !important;
  border-radius:7px !important;
  font-size:16px !important;
}

/* Identidad inmediatamente debajo de la barra, como referencia aprobada. */
.bazco-map-identity-row{
  min-height:43px !important;
  margin:0 -10px 5px !important;
  padding:5px 10px !important;
}

/* El resto conserva legibilidad y todos los botones. */
.bazco-map-location{
  margin-bottom:4px !important;
}
.bazco-map-summary-grid{
  gap:4px !important;
}
.bazco-map-actions{
  margin-top:5px !important;
}

/* Menú de Operaciones: reglas finales de escritorio.
   La clase hidden sigue ganando cuando el rol no tiene permiso. */
@media(min-width:861px){
  #vehicles-admin-btn:not(.hidden),
  #fleet-admin-btn:not(.hidden),
  #maintenance-btn:not(.hidden),
  #analytics-btn:not(.hidden),
  #device-commands-btn:not(.hidden),
  #reports-btn:not(.hidden),
  #history-btn:not(.hidden){
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}