:root {
  color-scheme: light;
  --ink: #17202a;
  --muted: #617083;
  --line: #d8e1e8;
  --panel: #ffffff;
  --base: #eef3f6;
  --green: #16865a;
  --red: #c63f3f;
  --amber: #b7791f;
  --blue: #2367a9;
  --teal: #167f8f;
  --shadow: 0 18px 40px rgba(20, 31, 43, 0.12);
}

* {
  box-sizing: border-box;
}

/* Scroll moderno estilo WhatsApp Web: barra fina translucida, pista
   transparente y sin flechas.
   CLAVE: en Edge/Chrome, si se define la propiedad ESTANDAR scrollbar-width,
   esta GANA y las reglas ::-webkit-scrollbar se ignoran (Edge pinta entonces su
   barra "fluent" con flechas). Por eso las estandar van SOLO para Firefox (que
   no soporta ::-webkit-scrollbar) y Edge/Chrome usan unicamente las webkit,
   igual que hace WhatsApp Web. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(20, 31, 43, 0.25) transparent;
  }
}
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 31, 43, 0.25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 31, 43, 0.42); }
/* Sin flechas de subir/bajar. */
::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--base);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.hidden {
  display: none !important;
}

.login-screen {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 520px);
  align-items: center;
  justify-content: center;
  gap: 48px;
  min-height: 100vh;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(16, 35, 49, 0.94), rgba(22, 127, 143, 0.82)),
    url("assets/map-lapaz.svg");
  background-size: cover;
  background-position: center;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.login-logo {
  width: 92px;
  height: 92px;
  padding: 6px;
}

.login-brand strong {
  display: block;
  font-size: 34px;
}

.login-brand span {
  display: block;
  color: #cce0ea;
}

.login-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  padding: 28px;
}

.login-card h1 {
  font-size: 30px;
}

.login-card p {
  color: var(--muted);
  line-height: 1.5;
}

.login-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.login-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
}

.login-error {
  min-height: 18px;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.demo-access {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.demo-access a {
  width: fit-content;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.demo-access a:hover {
  text-decoration: underline;
}

.app-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px;
  background: #102331;
  color: #f6fbff;
}

/* --- Glass eficiente en la barra lateral ---------------------------------
   blur bajo (10px) + fondo bastante opaco (~82%): visualmente da el vidrio
   esmerilado pero el navegador casi no trabaja. @supports deja la barra
   solida en equipos/navegadores sin soporte, sin romper nada. La barra es
   columna de grid (no va sobre el mapa), asi que no afecta el rendimiento
   del mapa en movimiento. */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .app-shell {
    background:
      radial-gradient(1200px 600px at 18% -10%, rgba(37, 99, 145, 0.25), transparent 60%),
      radial-gradient(900px 500px at 8% 120%, rgba(21, 160, 133, 0.18), transparent 55%),
      #0b1a26;
  }

  .sidebar {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%),
      linear-gradient(180deg, rgba(22, 46, 64, 0.72), rgba(11, 26, 38, 0.8));
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05), 2px 0 24px rgba(4, 14, 22, 0.28);
  }

  /* Brillo esmerilado simulado: una franja de luz sutil arriba que hace que
     la barra se lea como vidrio aunque no haya mapa detras. */
  .sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(140% 60% at 15% 0%, rgba(120, 190, 255, 0.14), transparent 60%);
  }

  .client-sidebar {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%),
      linear-gradient(180deg, rgba(12, 52, 74, 0.72), rgba(4, 26, 38, 0.82));
  }
}

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

.brand-logo {
  display: block;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  padding: 4px;
}

.brand span,
.model-panel p,
.eyebrow {
  color: var(--muted);
  font-size: 13px;
}

.brand span {
  display: block;
  color: #9bb3c7;
}

.nav-stack {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  background: transparent;
  color: #c6d6e1;
  text-align: left;
  cursor: pointer;
}

.nav-item.active,
.nav-item:hover {
  background: #203a4d;
  color: #fff;
}

.nav-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.nav-label {
  white-space: nowrap;
  overflow: hidden;
}

/* Boton para contraer/expandir el menu (solo iconos). */
.nav-collapse-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -6px 0 -8px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #9bb3c7;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nav-collapse-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.nav-collapse-btn svg { width: 18px; height: 18px; transition: transform 0.2s ease; }

/* --- Estado FINO (solo iconos): manual (boton) o forzado por pantalla
   estrecha. Se aplica solo al portal administrador. --------------------- */
.app-shell.nav-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}
.app-shell.nav-collapsed .sidebar { padding: 20px 12px; gap: 18px; }
.app-shell.nav-collapsed .brand { justify-content: center; }
.app-shell.nav-collapsed .brand > div,
.app-shell.nav-collapsed .nav-label,
.app-shell.nav-collapsed .model-panel { display: none; }
.app-shell.nav-collapsed .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
.app-shell.nav-collapsed .nav-collapse-btn { align-self: center; }
.app-shell.nav-collapsed .nav-collapse-btn svg { transform: rotate(180deg); }

/* Estado fino en el PORTAL CLIENTE (mismo comportamiento). Oculta el texto del
   perfil, la etiqueta de descarga y las insignias; centra icono/logo. */
.client-shell.nav-collapsed .client-profile > div,
.client-shell.nav-collapsed .app-download-link span,
.client-shell.nav-collapsed .nav-badge { display: none; }
.client-shell.nav-collapsed .client-profile,
.client-shell.nav-collapsed .app-download-link { justify-content: center; }
.client-shell.nav-collapsed .client-nav { grid-template-columns: 1fr; }
/* La cabecera (☰ + logo) se apila y encoge para caber en la barra fina. */
.client-shell.nav-collapsed .client-menu-head { flex-direction: column; align-items: center; gap: 12px; }
.client-shell.nav-collapsed .client-menu-head .sidebar-logo { width: 40px; height: 40px; }

.model-panel {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.model-panel h2 {
  margin: 8px 0;
  font-size: 20px;
}

.workspace {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 18px;
  padding: 24px;
}

.app-view {
  display: none;
}

.app-view.active {
  display: grid;
  gap: 18px;
}

.topbar,
.panel-heading,
.top-actions,
.send-row,
.map-toolbar {
  display: flex;
  align-items: center;
}

.topbar,
.panel-heading,
.map-toolbar {
  justify-content: space-between;
  gap: 16px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: 32px;
}

h2 {
  font-size: 18px;
}

.top-actions,
.send-row {
  gap: 10px;
}

.primary-button,
.icon-button,
.ghost-button,
.command-grid button,
menu button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.ghost-button {
  padding: 10px 13px;
  font-weight: 700;
}

.primary-button {
  border-color: #1f6a4c;
  background: var(--green);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
}

.session-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 12px 7px 8px;
}

.session-pill-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.session-pill-text span {
  color: var(--muted);
  font-size: 12px;
}

.session-pill-text strong {
  font-size: 13px;
}

/* Avatar del usuario en la topbar del admin: mismo estilo que el del cliente
   (.client-profile .profile-avatar) — cuadro azul redondeado con la inicial. */
.session-pill .profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #1f6aa8;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

/* La "R" del boton refrescar paso a icono; lo dimensionamos. */
#refreshBtn svg {
  width: 18px;
  height: 18px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  white-space: nowrap;
}

.row-actions .icon-button {
  width: 28px;
  height: 28px;
  font-size: 14px;
  border-radius: 6px;
  color: #666d75;
}

.row-actions .icon-button:hover {
  background: rgba(20, 31, 43, 0.06);
  color: #303236;
}

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

.dashboard-kpis {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.metric,
.map-panel,
.fleet-panel,
.device-detail,
.command-console,
.chart-panel,
.table-panel,
.settings-panel,
.report-panel,
dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
}

.metric span,
.detail-grid span,
.fleet-meta,
.command-console label {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.metric small {
  display: block;
  margin-top: 8px;
  color: #8a97a6;
  font-size: 11px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.chart-panel,
.table-panel,
.settings-panel,
.report-panel {
  padding: 16px;
}

.bar-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(20px, 1fr);
  align-items: end;
  gap: 8px;
  height: 250px;
  margin-top: 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to top, rgba(216, 225, 232, 0.5) 1px, transparent 1px);
  background-size: 100% 50px;
}

.bar-item {
  display: grid;
  align-items: end;
  gap: 8px;
  height: 100%;
  text-align: center;
}

.bar {
  display: block;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #5e7cf0, #7248a8);
}

.bar-chart.green .bar {
  background: linear-gradient(180deg, #16a085, #35dc78);
}

.bar-item small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

/* Chip de variacion "mes actual vs anterior" en las tarjetas del resumen. */
.delta-chip {
  display: inline-block;
  vertical-align: middle;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.delta-chip.up {
  background: #e2f6e9;
  color: #178233;
}

.delta-chip.down {
  background: #fdeaea;
  color: #c0392b;
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.legend-dot.blue {
  background: #5e7cf0;
}

.legend-dot.green {
  background: #16a085;
}

.line-chart {
  position: relative;
  overflow: hidden;
  height: 250px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(to top, rgba(216, 225, 232, 0.55) 1px, transparent 1px),
    linear-gradient(to right, rgba(216, 225, 232, 0.45) 1px, transparent 1px);
  background-size: 100% 50px, 80px 100%;
}

.line {
  position: absolute;
  left: 10%;
  right: 8%;
  height: 3px;
  border-radius: 999px;
  transform-origin: left center;
}

.line.blue {
  top: 39%;
  background: #5e7cf0;
  transform: rotate(-2deg);
}

.line.teal {
  top: 54%;
  background: #159c98;
  transform: rotate(4deg);
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.dot.blue {
  background: #5e7cf0;
}

.dot.teal {
  background: #159c98;
}

.table-panel {
  grid-column: span 1;
}

.leader-list {
  display: grid;
  margin-top: 14px;
}

.leader-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 4px;
}

.leader-row strong {
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
}

.leader-row em {
  justify-self: end;
  border-radius: 999px;
  background: #1f7bd3;
  color: #fff;
  padding: 5px 10px;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.monitor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.map-panel,
.fleet-panel,
.device-detail,
.command-console {
  padding: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #f8fafb;
}

.search-box input,
.send-row input,
dialog input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.search-box input {
  border: 0;
  padding: 11px 0;
  background: transparent;
  outline: 0;
}

select {
  max-width: 170px;
  padding: 10px;
}

.map-style-switch {
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.map-style-switch button {
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.map-style-switch button:last-child {
  border-right: 0;
}

.map-style-switch button.active {
  background: var(--blue);
  color: #fff;
}

.map-stage {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  min-height: 520px;
  border: 1px solid #cfdbe3;
  border-radius: 8px;
  background: #dfeaf0;
}

#map {
  width: 100%;
  height: 520px;
  min-height: 520px;
}

.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #dfeaf0;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  padding: 20px;
}

.map-marker {
  /* ABSOLUTE, no relative: MapLibre posiciona sus marcadores DOM con
     position:absolute + transform. Un relative aqui lo pisaba y los marcadores
     quedaban en el flujo del documento APILADOS: el primero caia bien y cada
     siguiente bajaba 16px (su alto), un corrimiento fijo en pantalla que al
     alejar el zoom se convertia en cuadras de error. */
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

/* Marcador estilo app/X-GPS: circulo del color del grupo con flecha (rumbo)
   o "P", y la etiqueta del nombre debajo, del mismo color. */
.map-marker .vm-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(20, 31, 43, 0.3);
}
.map-marker .vm-p {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.map-marker .vm-label {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  max-width: 170px;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(20, 31, 43, 0.25);
}

.marker-dot {
  display: block;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(35, 103, 169, 0.18);
}

.direction-arrow {
  position: absolute;
  left: 50%;
  top: -13px;
  display: none;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 16px solid var(--blue);
  filter: drop-shadow(0 3px 4px rgba(20, 31, 43, 0.28));
  transform: translateX(-50%) rotate(var(--heading));
  transform-origin: 50% 21px;
  pointer-events: none;
}

.map-marker.moving .direction-arrow {
  display: block;
}

.parking-badge {
  position: absolute;
  inset: 0;
  display: none;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.map-marker.parked .parking-badge {
  display: block;
}

.marker-label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 160px;
  border: 1px solid rgba(20, 31, 43, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(20, 31, 43, 0.14);
  padding: 5px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.map-marker.alert .marker-dot {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(198, 63, 63, 0.2);
}

.map-marker.offline .marker-dot {
  background: #687481;
  box-shadow: 0 0 0 6px rgba(104, 116, 129, 0.18);
}

.map-marker.online .marker-dot {
  animation: livePulse 1.8s ease-out infinite;
}

.history-endpoint-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--trip-color);
  border-radius: 7px;
  background: #fff;
  color: var(--trip-color);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.22);
  cursor: pointer;
}

.history-endpoint-marker::after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 18px;
  height: 18px;
  border-right: 3px solid var(--trip-color);
  border-bottom: 3px solid var(--trip-color);
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

.history-endpoint-marker.end {
  font-size: 21px;
}

.history-parking-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--trip-color);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25);
  cursor: pointer;
}

.history-arrow-popup-marker {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

.history-arrow-popup-marker span {
  display: block;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    -2px -2px 0 var(--trip-color),
    2px -2px 0 var(--trip-color),
    -2px 2px 0 var(--trip-color),
    2px 2px 0 var(--trip-color),
    0 3px 8px rgba(17, 24, 39, 0.3);
  transform: rotate(var(--arrow-rotation));
}

.history-popup {
  min-width: 280px;
  color: #33373c;
}

.history-popup strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.history-popup p {
  margin: 0 0 4px;
  color: #627083;
  font-weight: 800;
}

.history-popup span {
  display: block;
  margin: 2px 0;
  color: #6b7280;
}

.history-popup dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  margin: 18px 0 0;
}

.history-popup dt {
  color: #737b86;
}

.history-popup dd {
  margin: 0;
  color: #33373c;
  font-weight: 800;
  text-align: right;
}

/* Popup de alerta (mapa de la vista Alertas): icono + titulo en una fila,
   mensaje y datos debajo. Reusa .history-popup pero mas compacto. */
.history-popup.alert-popup { min-width: 240px; }
.alert-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.alert-popup-head strong { margin: 0; font-size: 16px; }
.alert-popup-head .alert-icon-badge { flex: 0 0 36px; }
.alert-popup-msg { margin: 0 0 4px; color: #627083; font-weight: 700; }
.history-popup.alert-popup dl { margin-top: 10px; gap: 6px 20px; }
.alert-popup-note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid #edf1f5;
  color: #8a94a3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.history-popup.arrow-popup {
  min-width: 300px;
}

.history-popup.arrow-popup > span {
  margin-bottom: 8px;
  font-size: 16px;
}

.history-popup.arrow-popup dl {
  margin-top: 8px;
  gap: 6px 28px;
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(35, 103, 169, 0.3);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(35, 103, 169, 0);
  }
}

.vehicle-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  max-height: 530px;
  overflow: auto;
}

.vehicle-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
  text-align: left;
}

.vehicle-card.active {
  border-color: var(--blue);
  box-shadow: inset 4px 0 0 var(--blue);
}

.vehicle-card strong {
  display: block;
  margin-bottom: 5px;
}

.fleet-meta {
  line-height: 1.5;
}

.status-chip {
  border-radius: 999px;
  padding: 6px 10px;
  background: #e7eef4;
  color: #34495e;
  font-size: 12px;
  font-weight: 800;
}

.status-chip.online {
  background: #dff3ea;
  color: #126746;
}

.status-chip.alert {
  background: #f9e2df;
  color: #a3322d;
}

.status-chip.offline {
  background: #e7eaee;
  color: #56616d;
}

.details-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 18px;
}

.details-layout.single {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Dispositivos (admin): tabla a la izquierda; columna derecha con el
       mapa arriba y el cuadro de informacion del equipo debajo, igual que
       la vista de dispositivos de Navixy. --- */
/* Tabla + mapa arriba (dos columnas) y el detalle abajo a lo ANCHO, para
   aprovechar el espacio en blanco y que el detalle no obligue a hacer scroll. */
/* La vista llena el alto disponible: fila superior (tabla + mapa) elastica y
   AMBAS del mismo alto; el detalle debajo a su alto natural. Asi no quedan
   huecos vacios y todo cuadra al tamano de la pagina. */
.devices-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "table map"
    "detail detail";
  gap: 18px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.devices-layout > .management-table-panel { grid-area: table; }
.devices-layout > .devices-side-column { grid-area: map; }
.devices-layout > .device-detail { grid-area: detail; }

/* La tabla ocupa todo el alto de su fila; el cuerpo con scroll propio y el
   "Total" pegado abajo. */
.devices-layout .management-table-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.devices-layout .data-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Columna del mapa: el panel llena todo el alto de la fila (igual que la
   tabla) y dentro el lienzo del mapa se estira a lo que sobra. */
.devices-side-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

/* El mapa llena el ancho de su columna (el .map-panel global mide 360px,
   pensado para el panel flotante de Seguimiento) y todo el alto de la fila. */
.devices-side-column .map-panel {
  width: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* La caja del mapa (.map-stage) se estira a lo que sobra de la fila; el lienzo
   #map la llena por completo (height:100%) para que no quede el fondo azul
   claro asomando debajo. */
.devices-side-column .map-stage {
  flex: 1;
  height: auto;
  min-height: 240px;
  margin-top: 0;
}
.devices-side-column #map {
  height: 100%;
  min-height: 0;
}

.devices-side-column .map-toolbar {
  flex-wrap: wrap;
  gap: 8px;
}

.devices-side-column .map-toolbar select {
  flex: 1 1 auto;
  max-width: none;
}

/* Botones de tipo de mapa (Calles/Satelite/Combinado/B/N) mas compactos:
   ocupaban dos filas y mucho alto. */
.devices-side-column .map-style-switch button {
  padding: 5px 9px;
  font-size: 12px;
}

/* Boton de ampliar / minimizar el mapa (esquina del encabezado). */
.map-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.map-expand-btn:hover {
  color: var(--ink);
  border-color: var(--blue);
}
.map-expand-btn svg {
  width: 17px;
  height: 17px;
}
.map-expand-btn .icon-collapse { display: none; }
.map-panel.map-expanded .map-expand-btn .icon-expand { display: none; }
.map-panel.map-expanded .map-expand-btn .icon-collapse { display: block; }

/* El encabezado tiene h2 + contador + boton; que el boton quede a la derecha. */
.map-panel .panel-heading #mapEquipmentCount { margin-left: auto; }

/* Ventana flotante del mapa (ampliado). Se saca del flujo y cubre la pantalla;
   al minimizar vuelve exactamente a su sitio (solo se quita la clase). */
body.map-expanded-open { overflow: hidden; }
body.map-expanded-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(4, 15, 25, 0.55);
  backdrop-filter: blur(2px);
}
.map-panel.map-expanded {
  position: fixed;
  inset: 3vh 3vw;
  z-index: 1200;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.map-panel.map-expanded .map-stage,
.map-panel.map-expanded #map {
  height: auto !important;
  min-height: 0 !important;
  flex: 1;
}

/* Detalle del dispositivo a lo ancho, en varias columnas (sin scroll). */
.device-detail .dd-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.device-detail .dd-head h3 { margin: 0; }
.device-detail .dd-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 18px;
}
.device-detail .dd-f {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.device-detail .dd-k {
  color: var(--muted);
  font-size: 12px;
}
.device-detail .dd-v {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  word-break: break-word;
}
.device-detail .user-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
}

.devices-layout .data-table {
  min-width: 720px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.detail-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafb;
}

.detail-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
}

.client-assignment {
  grid-column: span 2;
}

.assignment-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.assignment-row select {
  max-width: none;
}

.track-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.track-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.command-grid button {
  min-height: 42px;
  padding: 8px;
}

.command-console label {
  margin-bottom: 6px;
}

.send-row input {
  padding: 10px;
}

.command-log {
  margin-top: 12px;
  min-height: 74px;
  max-height: 128px;
  overflow: auto;
  border-radius: 8px;
  background: #111b24;
  color: #d7f7e9;
  padding: 10px;
  font-family: Consolas, monospace;
  font-size: 12px;
}

.command-console.readonly {
  background: #fbfcfd;
}

.users-panel {
  padding: 0;
}

.management-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  margin-top: 18px;
}

.management-layout.detail-collapsed {
  grid-template-columns: 1fr;
}

.users-panel .management-layout {
  margin-top: 0;
}

.management-table-panel,
.side-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.management-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

.management-toolbar h2 {
  margin: 0;
  white-space: nowrap;
}

.square-action {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 22px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.toggle-row input {
  width: 16px;
  height: 16px;
}

.search-box.compact {
  margin-left: auto;
  max-width: 360px;
}

/* Toolbar de Dispositivos: titulo + "Sin clones" a la izquierda, la busqueda
   centrada y el boton "Agregar GPS" pegado a la derecha. Las margenes auto a
   ambos lados de la busqueda reparten el espacio libre por igual, dejandola
   en el centro y empujando el boton al borde derecho. */
.devices-layout .management-toolbar {
  flex-wrap: wrap;
}
.devices-layout .management-toolbar .search-box.compact {
  margin-left: auto;
  margin-right: auto;
}
.devices-layout .management-toolbar #openDeviceForm {
  white-space: nowrap;
}

.data-table-wrap {
  overflow: auto;
  min-height: 380px;
}

.data-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid #edf1f4;
  padding: 13px 14px;
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  color: #3b4652;
  font-weight: 800;
}

.data-table tr {
  cursor: pointer;
}

.data-table tr.selected {
  background: #e7f3fb;
}

.table-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 12px 14px;
  font-size: 13px;
}

.side-detail {
  padding: 18px;
  color: var(--muted);
}

.side-detail h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 18px;
}

.side-detail dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.side-detail dt {
  color: var(--muted);
  font-size: 12px;
}

.side-detail dd {
  margin: -8px 0 0;
  color: var(--ink);
  font-weight: 700;
}

/* --- Usuarios: panel de detalle con enlaces de accion (igual que Navixy) --- */
.user-action-links {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.user-action-links a {
  color: var(--blue);
  cursor: pointer;
  font-size: 14px;
}

.user-action-links a:hover {
  text-decoration: underline;
}

/* Acciones destructivas (Eliminar usuario) en rojo, para que no se confundan
   con los enlaces normales. */
.user-action-links a.danger-link {
  color: #e0463f;
}

/* --- "Dispositivos del usuario": dialogo ancho con tabla, igual que Navixy --- */
#userDevicesDialog {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

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

#userDevicesDialog .management-toolbar {
  margin-bottom: 10px;
}

.fleet-fuel-form {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

.fleet-fuel-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.fleet-fuel-form input {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.side-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.side-actions button {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding: 4px 0;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.service-chip {
  display: inline-block;
  border: 1px solid #55b56b;
  border-radius: 999px;
  color: #178233;
  padding: 3px 7px;
  font-size: 12px;
}

/* Estados de Navixy: servicio suspendido (rojo), clon (azul gris), oculto
   (naranja) - se muestran junto al chip verde/rojo en la columna Estado. */
.service-chip.suspended {
  border-color: #d9534f;
  color: #c0392b;
}

.service-chip.clone {
  border-color: #8fa3b8;
  color: #56708c;
  background: #f2f6fa;
}

.service-chip.hidden-flag {
  border-color: #e2a03f;
  color: #b97a17;
}

/* --- Dialogo "Crear clon": fuente a la izquierda, configuracion a la derecha --- */
#cloneDialog {
  width: min(760px, calc(100vw - 32px));
}

.clone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 14px;
}

.clone-grid h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.clone-grid label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.clone-grid input,
.clone-grid select,
.clone-grid textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.clone-grid input:disabled {
  background: #f3f6f8;
  color: var(--muted);
}

.clone-grid textarea {
  min-height: 92px;
  resize: vertical;
}

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

.connection-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 999px;
  background: #687481;
}

.connection-dot.online {
  background: #4fc20d;
}

.connection-dot.offline {
  background: #f2933b;
}

/* No GPS: el equipo comunica (heartbeats) pero no fija satelites — mismo
   azul que usa el estado "No GPS" del mapa y de la APK. */
.connection-dot.nogps {
  background: #2295df;
}

.connection-dot.alert {
  background: #ff6a00;
}

.client-shell {
  grid-template-columns: 290px minmax(0, 1fr);
}

.client-sidebar {
  background: #06283a;
  min-height: 100vh;
}

.client-menu-head {
  display: flex;
  /* El boton de contraer (☰) va SIEMPRE debajo del logo, tanto abierto como
     colapsado. */
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.menu-icon {
  border: 0;
  background: transparent;
  color: #9fb8c8;
  font-size: 22px;
  cursor: pointer;
}

/* Boton de contraer/expandir del panel CLIENTE: mismo estilo que el admin
   (flecha < / > que gira, alineada a la derecha bajo el logo y se centra al
   contraer). Se estiliza solo el de la cabecera para no tocar los otros
   .menu-icon (panel de historial, cabecera del rastreador). */
.client-menu-head .menu-icon {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #9bb3c7;
  transition: background 0.15s ease;
}
.client-menu-head .menu-icon:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.client-menu-head .menu-icon svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.client-shell.nav-collapsed .client-menu-head .menu-icon { align-self: center; }
.client-shell.nav-collapsed .client-menu-head .menu-icon svg { transform: rotate(180deg); }

.client-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
}

/* El bloque del usuario abre Preferencias (ya no hay boton propio en el menu). */
.client-profile[data-client-view] {
  cursor: pointer;
  border-radius: 12px;
  padding: 6px;
  margin: 14px -6px 0;
  transition: background 0.15s ease;
}
.client-profile[data-client-view]:hover {
  background: rgba(255, 255, 255, 0.08);
}
.client-profile[data-client-view].active {
  background: rgba(255, 255, 255, 0.14);
}

/* Checkbox "Permitir navegación al vehículo" del diálogo de geo-enlace. */
.geolink-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.geolink-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: #1f8f4e; flex: 0 0 auto; }
.geolink-check span { font-size: 13.5px; color: #33373c; }
.geolink-check small { display: block; color: #8a939c; font-size: 12px; }

/* Linea que separa el bloque logo + usuario de los iconos del menu. */
.client-nav-divider {
  height: 1px;
  margin: 18px 0;
  background: rgba(255, 255, 255, 0.16);
}

.client-profile .profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #1f6aa8;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.client-profile strong,
.client-profile span {
  display: block;
}

.client-profile span {
  color: #9fb8c8;
}

.client-nav {
  gap: 12px;
}

.client-nav.secondary {
  margin-top: auto;
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  background: #e41d2c;
  color: #fff;
  font-size: 11px;
}

.nav-badge.green {
  background: #5bbd31;
}

.logout-link {
  margin-top: 8px;
}

/* Boton "Descargar app Android" del sidebar del cliente: mismo lenguaje
   visual que los nav-item, con el robot de Android en verde. */
.app-download-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  border-radius: 8px;
  padding: 12px 14px;
  color: #c6d6e1;
  text-decoration: none;
  font-size: 14px;
}

.app-download-link svg {
  color: #3ddc84;
  flex-shrink: 0;
}

.app-download-link:hover {
  background: #203a4d;
  color: #fff;
}

/* Variante sobre la tarjeta blanca de login: texto oscuro y borde suave. */
.app-download-link.on-card {
  margin-top: 14px;
  justify-content: center;
  border: 1px solid #dfe6ec;
  color: #33475b;
  font-weight: 600;
}

.app-download-link.on-card:hover {
  background: #f2f7fb;
  color: #0e2438;
}

.client-workspace {
  min-height: 100vh;
  background: #f4f7fb;
}

.client-view {
  display: none;
  min-height: 100vh;
  padding: 24px;
}

.client-view[data-client-panel="overview"] {
  position: relative;
  overflow: auto;
  padding: 18px 28px 20px;
}

.client-view.active {
  display: block;
}

.client-title {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: #2b95df;
  text-align: center;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0;
}

.overview-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 340px));
  justify-content: center;
  gap: 18px;
}

.overview-card,
.client-chart-panel {
  border: 1px solid rgba(216, 225, 232, 0.85);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 39, 58, 0.14);
}

.overview-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 16px;
}

.overview-card h2,
.overview-card p,
.overview-card a,
.overview-links,
.overview-card strong,
.overview-card ul {
  margin-left: 20px;
  margin-right: 20px;
}

.overview-card h2 {
  margin-top: 18px;
  margin-bottom: 6px;
  color: #2295df;
  font-size: 20px;
  line-height: 1.1;
}

.overview-card p {
  min-height: 42px;
  margin-top: 0;
  margin-bottom: 12px;
  color: #5f6f7b;
  font-size: 14px;
  line-height: 1.4;
}

.overview-card a {
  display: inline-block;
  margin-bottom: 16px;
  color: #1684d8;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.overview-card a + a {
  margin-left: 16px;
}

.overview-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  white-space: nowrap;
}

.overview-links a {
  margin: 0;
}

.overview-links a + a {
  margin-left: 0;
}

.overview-card strong {
  display: block;
  margin-bottom: 12px;
  color: #5b5f66;
  font-size: 15px;
}

.overview-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  color: #5f6f7b;
  font-size: 14px;
}

.overview-card li {
  display: flex;
  align-items: center;
  min-height: 20px;
  line-height: 1.25;
}

.overview-card li span:not(.dot) {
  margin-right: 4px;
}

/* Cabecera ilustrada de cada tarjeta: fondo con tinte suave e icono grande
   centrado. Escala limpio a cualquier alto (a diferencia de las ilustraciones
   con posiciones fijas de antes, que se desbordaban al achicar). */
.overview-visual {
  position: relative;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.overview-visual::after {
  font-size: 44px;
  line-height: 1;
  filter: saturate(1.1);
}

.map-preview {
  background: linear-gradient(135deg, #e6f4ff, #f5fbff);
}

.map-preview::after {
  content: "📍";
}

.task-preview {
  background: linear-gradient(135deg, #eaf7e6, #f6fdf3);
}

.task-preview::after {
  content: "🔧";
}

.fleet-preview {
  background: linear-gradient(135deg, #e9f0ff, #f5f9ff);
}

.fleet-preview::after {
  content: "🚚";
}

.dot {
  position: static;
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 0;
  margin-right: 8px;
  border-radius: 999px;
  background: #9ca3af;
  transform: none;
}

.dot.green { background: #51ba19; }
.dot.red { background: #e23d36; }
.dot.blue { background: #2295df; }
.dot.gray { background: #c8ccd0; }

.client-chart-panel {
  position: relative;
  z-index: 1;
  width: min(1230px, 94%);
  margin: 16px auto 0;
  padding: 16px 24px 14px;
}

.client-chart-panel h2 {
  margin: 0 0 12px;
  color: #2d3035;
  font-size: 18px;
  font-weight: 500;
}

.client-km-chart {
  display: grid;
  grid-template-columns: 46px 1fr;
  height: 165px;
}

.km-y-axis {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  color: #30343a;
  font-size: 13px;
  text-align: right;
}

.km-y-axis span {
  transform: translateY(-8px);
}

.km-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(64px, 1fr));
  align-items: end;
  gap: 22px;
  border-left: 1px solid #8e98a3;
  border-bottom: 1px solid #c7d0d8;
  padding: 0 24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(86, 106, 122, 0.13) 64px 65px),
    linear-gradient(#fff, #fff);
}

.km-bars span {
  display: block;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #4db2e5, #2b7fc4);
  cursor: pointer;
  transition: filter 0.12s ease;
}
.km-bars span:hover { filter: brightness(1.12) saturate(1.1); }

/* Tooltip de la grafica de kilometraje: dia + total + desglose por vehiculo.
   Posicion fija (se coloca por JS) para no recortarse dentro del panel. */
.km-tooltip {
  position: fixed;
  z-index: 9998;
  display: none;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 12px;
  background: #0f2536;
  color: #eaf2f8;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(9, 20, 30, 0.35);
  font-size: 13px;
  pointer-events: none;
}
.km-tooltip .km-tt-day { font-weight: 800; font-size: 13.5px; text-transform: capitalize; }
.km-tooltip .km-tt-total { margin-top: 2px; color: #7fd0ff; font-weight: 700; }
.km-tooltip ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 5px; }
.km-tooltip li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.km-tooltip li span { color: #c4d3df; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-tooltip li strong { color: #fff; white-space: nowrap; }
.km-tooltip li.km-tt-empty { color: #9fb2c1; justify-content: flex-start; font-style: italic; }

.chart-legend {
  display: flex;
  gap: 30px;
  overflow: hidden;
  padding: 20px 12px 0;
  color: #111827;
  white-space: nowrap;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  line-height: 1;
}

.chart-legend .dot {
  margin-top: 0;
}

.tracking-view {
  position: relative;
  padding: 0;
  overflow: hidden;
  --tracker-drawer-button-left: 24px;
  --tracker-detail-left: 404px;
  --history-left: 24px;
  --history-button-left: 24px;
}

.tracker-drawer {
  position: absolute;
  left: 24px;
  top: 20px;
  z-index: 4;
  width: 360px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 32, 43, 0.22);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.tracking-view.tracker-drawer-closed .tracker-drawer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-24px);
}

.tracker-drawer-open,
.tracker-detail-open,
.history-panel-open {
  position: absolute;
  top: 20px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #8d9297;
  box-shadow: 0 8px 20px rgba(18, 32, 43, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: left 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.tracker-drawer-open {
  left: var(--tracker-drawer-button-left);
}

.tracker-detail-open {
  left: var(--tracker-detail-left);
}

.history-panel-open {
  left: var(--history-button-left);
}

.tracker-drawer-open span,
.tracker-detail-open span,
.history-panel-open span {
  font-size: 24px;
  line-height: 1;
}

.tracking-view.tracker-drawer-closed .tracker-drawer-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.tracking-view.tracker-detail-closed .tracker-detail-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.tracking-view.history-panel-closed .history-panel-open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.tracker-head,
.tracker-search,
.tracker-group strong {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.tracker-head h2 {
  margin: 0;
  flex: 1;
}

.tracker-search input {
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.group-color {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.group-color.blue {
  background: #2295df;
}

.tracker-list {
  gap: 0;
  max-height: none;
}

.tracker-list .vehicle-card {
  border-width: 0 0 1px;
  border-radius: 0;
  padding-left: 44px;
}

.tracker-device-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px 46px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #eef1f4;
  background: #fff;
  padding: 9px 12px;
  color: #30343a;
  text-align: left;
  cursor: pointer;
}

/* Icono de informacion a la derecha del nombre: aparece al seleccionar la fila
   y abre el panel de detalle del vehiculo. */
.tracker-info-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #2295df;
  cursor: pointer;
}

.tracker-info-open svg { width: 18px; height: 18px; }
.tracker-info-open:hover { background: rgba(34, 149, 223, 0.12); }
.tracker-info-open.hidden { display: none; }

.tracker-device-row.active {
  background: #e7f3fb;
}

.tracker-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #9da3a9;
  color: #2295df;
  font-size: 0;
  font-weight: 900;
}

.tracker-device-row.active .tracker-check {
  border-color: #2295df;
}

.tracker-device-row.active .tracker-check::before {
  content: "";
  width: 6px;
  height: 12px;
  border: solid #2295df;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tracker-device-icon {
  display: grid;
  place-items: center;
  color: #2516e8;
  font-size: 20px;
}

.tracker-device-copy {
  min-width: 0;
}

/* --- Foto del vehiculo (lista de rastreadores, panel y perfil) --- */
.vehicle-photo {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #eef2f6;
  color: #9aa6b2;
}

.vehicle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-photo.dim {
  filter: grayscale(0.85) opacity(0.75);
}

/* Sin foto: icono de vehiculo sobre un fondo suave. */
.vehicle-photo.placeholder {
  background: linear-gradient(135deg, #eef2f6, #e2e8ee);
  color: #8794a2;
}

.tracker-detail-thumb {
  width: 44px;
  height: 44px;
}

.vehicle-photo-field {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vehicle-photo-field .vehicle-photo {
  width: 84px;
  height: 84px;
  border-radius: 12px;
}

.photo-upload-btn {
  display: inline-block;
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.photo-upload-btn:hover {
  background: #eef6fd;
}

.tracker-device-copy strong {
  display: block;
  overflow: hidden;
  color: #3a3d42;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.mini-status {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 7px 1px 0;
  border-radius: 999px;
  background: #9ca3af;
}

.mini-status.online { background: #51ba19; }
.mini-status.alert { background: #ff6500; }
.mini-status.offline { background: #f2933b; }

/* Punto de estado real (mismos colores que el icono de "Estado"). */
.mini-status.state-moving { background: #35b558; }
.mini-status.state-parked { background: #2295df; }
.mini-status.state-idle { background: #efb016; }
.mini-status.state-nogps { background: #2295df; }
.mini-status.state-offline { background: #f2933b; }

.tracker-detail-panel {
  position: absolute;
  left: var(--tracker-detail-left);
  top: 20px;
  z-index: 4;
  display: none;
  /* Mismo ancho que el panel de Rastreadores. */
  width: 360px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(18, 32, 43, 0.24);
  transition: left 0.2s ease;
}

.tracker-detail-panel.open {
  display: block;
}

.tracker-history-button {
  position: sticky;
  left: 100%;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 18px 16px 14px auto;
  border: 0;
  border-radius: 8px;
  background: #3498db;
  box-shadow: 0 8px 20px rgba(20, 31, 43, 0.26);
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.history-panel {
  position: absolute;
  left: var(--history-left);
  top: 20px;
  z-index: 6;
  display: none;
  /* Mismo ancho que el panel de Rastreadores. */
  width: 360px;
  max-height: calc(100vh - 40px);
  /* El scroll vive DENTRO del contenido (.history-content), no en el panel:
     asi la barra de totales queda fija abajo y ni los iconos del timeline ni
     el scrollbar la tocan. */
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.26);
  transition: left 0.2s ease;
}

.history-panel.open {
  display: flex;
  flex-direction: column;
}

.history-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.history-panel > header div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-panel > header span.menu-icon {
  display: none;
}

.history-panel h2 {
  margin: 0;
  color: #303236;
  font-size: 18px;
}

.history-panel > header button {
  border: 0;
  background: transparent;
  color: #8d9297;
  font-size: 22px;
  cursor: pointer;
}

.tracker-head .menu-icon,
.tracker-detail-menu,
.tracker-detail-gear,
.history-menu-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d9297;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.tracker-detail-gear svg { width: 20px; height: 20px; }
.tracker-detail-menu:hover,
.tracker-detail-gear:hover { color: var(--blue); }

.history-range {
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}

/* Disparador del rango: pastilla celeste con icono de calendario (Navixy). */
.hr-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #e2f0fb;
  color: #2295df;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.hr-trigger svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hr-trigger:hover { background: #d4e9f9; }

/* Popover del selector de rango (preestablecidos + doble calendario). */
.drp {
  position: fixed;
  z-index: 10000;
  width: min(660px, calc(100vw - 24px));
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 30, 45, 0.3);
  color: #33373c;
  font-size: 13px;
}
.drp.hidden { display: none; }
.drp-main { display: grid; grid-template-columns: 156px 1fr; }
.drp-presets {
  display: grid;
  gap: 2px;
  align-content: start;
  border-right: 1px solid var(--line);
  padding: 14px;
}
.drp-presets h4 { margin: 0 0 8px; font-size: 13.5px; }
.drp-presets button {
  border: 0;
  background: none;
  border-radius: 6px;
  padding: 7px 6px;
  color: #33373c;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.drp-presets button:hover { background: #eef6fd; color: #2295df; }
.drp-gap { height: 14px; }
.drp-body { padding: 14px 16px; }
.drp-body h4 { margin: 0 0 10px; font-size: 13.5px; }
.drp-inputs { display: flex; align-items: center; gap: 8px; }
.drp-inputs input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
}
#drpStartText, #drpEndText { width: 92px; text-align: center; }
/* La hora del rango, en 24 h y con dos desplegables: el control nativo de hora
   lo pinta el navegador con a. m./p. m. segun SU idioma, y ahi "12:20 a. m."
   son las 00:20. Con 0-23 no hay confusion posible. */
.drp-hora { display: inline-flex; align-items: center; gap: 3px; }
.drp-hora select {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 5px;
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: inherit;
}
.drp-hora b { color: #9aa3ab; font-weight: 700; }
.drp-dash { color: #9aa3ab; }
.drp-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.drp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.drp-cal-head strong { font-size: 13.5px; }
.drp-nav {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
}
.drp-nav:hover { background: #eef6fd; }
.drp-nav-hueco { width: 26px; }
.drp-dow, .drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.drp-dow span { padding: 4px 0; color: #9ba3ab; font-size: 11.5px; text-align: center; }
.drp-grid .drp-day {
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  padding: 0;
  color: #33373c;
  font-size: 12.5px;
  cursor: pointer;
}
.drp-day:hover { background: #eef6fd; }
.drp-day.today { box-shadow: inset 0 0 0 1px #c3cdd6; }
.drp-day.in-range { border-radius: 0; background: #e2f0fb; }
.drp-day.sel { background: #2295df; color: #fff; }
.drp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
}
#drpCount { color: #8d97a1; }
.drp-foot button {
  border: 0;
  border-radius: 6px;
  background: none;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
}
#drpCancel { color: #8d97a1; }
#drpApply { color: #2295df; }
.drp-foot button:hover { background: #eef6fd; }

.history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.history-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: #fff;
  padding: 12px 8px 10px;
  color: #565b61;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
}

.history-tabs button.active {
  border-bottom-color: #2295df;
  color: #111827;
}

.history-toolbar {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.history-toolbar button {
  border: 0;
  background: transparent;
  color: #a0a4a8;
  font-size: 18px;
}

.history-content {
  display: none;
  padding: 12px 0 8px;
}

.history-content.active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.history-content h3 {
  margin: 0 16px 10px;
  color: #33373c;
  font-size: 14px;
}

.history-empty {
  margin: 0;
  padding: 22px 16px;
  color: #8d9297;
  font-size: 13px;
}

.history-item {
  display: grid;
  grid-template-columns: 40px 28px 78px 1fr;
  gap: 8px;
  align-items: stretch;
  border-bottom: 1px solid #eef1f4;
  padding: 9px 16px;
  font-size: 12.5px;
}

.history-rail {
  position: relative;
  display: grid;
  justify-items: center;
}

.history-rail::before {
  position: absolute;
  top: -9px;
  bottom: -9px;
  width: 3px;
  background: var(--trip-color);
  content: "";
}

.history-rail span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--trip-color);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.history-item.parking .history-rail::before {
  background: var(--trip-color);
}

.history-item.parking .history-rail span {
  background: var(--trip-color);
  color: #fff;
}

/* Las filas no seleccionadas se ven NORMALES (el checkbox indica la
   seleccion); antes se atenuaban con opacity y confundia. */
.history-item.muted {
  opacity: 1;
}

.history-item label {
  display: grid;
  place-items: center;
}

.history-item input {
  width: 18px;
  height: 18px;
}

.history-times {
  display: grid;
  grid-template-rows: 17px 18px 17px 18px;
  align-content: start;
  gap: 0;
  text-align: right;
  font-size: 12px;
}

.history-times strong {
  color: var(--trip-color);
}

.history-times span {
  color: var(--trip-color);
}

.history-summary span {
  color: #9a9fa5;
}

.history-summary {
  display: grid;
  gap: 4px;
}

.history-summary p {
  margin: 0;
  color: #8f949a;
  font-weight: 700;
}

.history-summary strong {
  color: #3f444a;
  font-weight: 800;
}

.history-event {
  display: grid;
  /* casilla | icono | hora+fecha | texto del evento */
  grid-template-columns: 30px 40px 90px 1fr;
  gap: 9px;
  align-items: center;
  border-bottom: 1px solid #eef1f4;
  padding: 14px 16px;
}

/* Pin del mapa: recuadro tipo globo blanco con borde de color y el icono de
   la alerta centrado adentro (como pidio el usuario, image 1). */
.alert-pin {
  position: relative;
  width: 46px;
  height: 46px;
  background: #fff;
  border: 3px solid var(--pin-color, #e0463f);
  border-radius: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}
.alert-pin::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid var(--pin-color, #e0463f);
}
.alert-pin img {
  width: 32px;
  height: 32px;
  display: block;
}
.alert-pin-glyph {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--pin-color, #e0463f);
}

/* Badge para las filas de listas (Eventos / Alertas / detalle). */
.alert-icon-badge {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: #fff;
  border: 2px solid var(--badge-color, #e0463f);
  border-radius: 10px;
}
.alert-icon-badge img {
  width: 26px;
  height: 26px;
  display: block;
}
.alert-icon-badge.glyph {
  font-size: 18px;
  font-weight: 900;
  color: var(--badge-color, #e0463f);
}
/* Icono del toast (pop-up en vivo) cuando hay PNG. */
.notif-icon.img {
  background: #fff;
  border: 2px solid #e6ebf0;
  padding: 3px;
}
.notif-icon.img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.history-event.muted {
  opacity: 1;
}

/* --- Selector de vehiculos del panel de historial --- */
.history-vehicles {
  border-bottom: 1px solid #eef1f4;
  padding: 6px 16px 8px;
  font-size: 13px;
}
.history-vehicles summary {
  cursor: pointer;
  font-weight: 600;
  color: #33475b;
  padding: 4px 0;
  list-style: none;
}
.history-vehicles summary::-webkit-details-marker { display: none; }
.history-vehicles summary::before { content: "▾ "; color: #8a98a5; }
.hv-hint { margin: 4px 0 0; font-size: 11.5px; color: #8a98a5; }
#historyVehiclesList {
  display: grid;
  gap: 4px;
  max-height: 190px;
  overflow: auto;
  padding: 6px 2px 2px;
}
.hv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #33373c;
}
.hv-item:hover { background: #f2f7fb; }
.hv-item input { width: 18px; height: 18px; }

/* --- Recorridos agrupados por vehiculo --- */
.trip-group {
  border-bottom: 8px solid #f0f3f6;
}
.trip-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-size: 15px;
  color: #1c2b38;
  background: #fff;
}
.trip-group > summary::-webkit-details-marker { display: none; }
.trip-group > summary::before { content: "▸ "; color: #8a98a5; }
.trip-group[open] > summary::before { content: "▾ "; }
.trip-group .trip-count { color: #8a98a5; font-weight: 600; }
.trip-group-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 18px 14px;
}
.tg-endpoint { display: grid; gap: 1px; font-size: 12px; }
.tg-endpoint strong { font-size: 14px; color: #1c2b38; }
.tg-endpoint span { color: #8a98a5; }
.tg-addr { color: #6a7683 !important; margin-top: 3px; line-height: 1.25; }
.tg-metrics {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  color: #33475b;
  font-weight: 600;
  white-space: nowrap;
}
.trip-list { padding: 0 12px 10px; }
.tripr-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  width: 100%;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 10px 8px;
  border-top: 1px solid #f0f3f6;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #33373c;
}
.tripr-item:hover { background: #eef6fd; }
/* Viaje elegido: sombreado con el MISMO color de su ruta en el mapa
   (--trip-sel-color la pone el JS al dibujar el trazo). */
.tripr-item.sel {
  background: color-mix(in srgb, var(--trip-sel-color, #2295df) 14%, #fff);
  box-shadow: inset 3px 0 0 var(--trip-sel-color, #2295df);
}
.tripr-item.sel:hover {
  background: color-mix(in srgb, var(--trip-sel-color, #2295df) 22%, #fff);
}
.tripr-km { color: #1c2b38; font-weight: 600; }
.tripr-dur { color: #8a98a5; }

.history-multi-hint {
  margin: 0;
  padding: 9px 16px;
  font-size: 12px;
  color: #6a7683;
  border-bottom: 1px solid #eef1f4;
  background: #f8fafc;
}
.tracker-check.on { color: #2295df; font-weight: 900; }

/* Filas de eventos agrupados por vehiculo */
.evr-item {
  display: grid;
  grid-template-columns: 38px 88px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  border-top: 1px solid #f0f3f6;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #33373c;
}
.evr-item:hover { background: #eef6fd; }
.evr-time { display: grid; gap: 1px; }
.evr-time strong { font-size: 13px; color: #1c2b38; }
.evr-time span { color: #8a98a5; font-size: 11px; }
.evr-text { color: #3f444a; line-height: 1.25; }

/* Total del periodo debajo de la lista de recorridos. */
/* Pie fijo del panel Historial (hermano del contenido con scroll, no sticky). */
.history-total {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: #0e2438;
  color: #fff;
  font-size: 13px;
}
.history-total.hidden { display: none; }
.history-total span { color: #b7c6d3; }
.history-total strong { font-size: 14.5px; }
.history-total strong:nth-of-type(1) { margin-left: auto; }

.history-event label {
  display: grid;
  place-items: center;
}

.history-event input {
  width: 22px;
  height: 22px;
}

.history-event-time {
  display: grid;
  gap: 2px;
}

.history-event strong {
  color: #33373c;
}

.history-event span {
  color: #9a9fa5;
}

.history-event p {
  margin: 0;
  color: #3f444a;
}

.history-event-marker {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--trip-color);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.25);
  cursor: pointer;
}

.tracker-detail-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

/* La info del vehiculo (foto + nombre + estado) queda centrada; el ☰ a la
   izquierda oculta el panel (como en Rastreadores) y el engranaje a la derecha
   abre la configuracion de ese GPS. */
.tracker-detail-id {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tracker-detail-head h2 {
  margin: 0 0 6px;
  overflow: hidden;
  color: #303236;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
}

.tracker-detail-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #666d75;
  font-size: 14px;
}

.parking-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #2295df;
  border-radius: 999px;
  color: #2295df;
  font-size: 12px;
  font-weight: 900;
}

/* Colores por estado del vehiculo (como Navixy): verde en movimiento, azul
   estacionado, ambar ralenti, rojo sin GPS, gris fuera de linea. */
.parking-icon.state-moving {
  border-color: #35b558;
  color: #35b558;
}

.parking-icon.state-parked {
  border-color: #2295df;
  color: #2295df;
}

.parking-icon.state-idle {
  border-color: #efb016;
  color: #efb016;
}

.parking-icon.state-nogps {
  border-color: #2295df;
  color: #2295df;
}

.parking-icon.state-offline {
  border-color: #f2933b;
  color: #f2933b;
}


/* Iconos SVG del panel (odometro, horas de motor): heredan el gris. */
.tracker-info-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Ubicacion como enlace a Google Maps + boton de compartir. */
.location-link {
  display: grid;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.location-link:hover strong {
  color: var(--blue);
  text-decoration: underline;
}

.location-share {
  justify-self: start;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  background: #f4f8fb;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.location-share:hover {
  background: #e7f1fa;
}

.conductor-select {
  max-width: none;
  width: 100%;
  margin-top: 2px;
}

/* Sub-linea "Direccion:" dentro de Estado (solo cuando va en movimiento). */
.tracker-info-body div .estado-sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

/* --- Mini linea de tiempo del estado (ultimas 12 h) en la seccion Estado --- */
.state-timeline {
  margin-top: 10px;
}

.state-timeline-svg {
  display: block;
  width: 100%;
  height: 58px;
}

/* --- Odometro / Horas de motor editables (lapiz -> input con ✓ / ✕) --- */
.metric-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.metric-edit-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #eef3f7;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.metric-edit-btn:hover {
  background: #dfe9f1;
  color: var(--ink);
}

.tracker-info-body div.metric-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.tracker-info-body div.metric-editor.hidden {
  display: none;
}

.tracker-info-body div.metric-display {
  display: flex;
}

.metric-editor input {
  width: 110px;
  border: 0;
  outline: 0;
  padding: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
}

.metric-editor span {
  color: var(--muted);
  font-size: 13px;
}

.metric-editor button {
  border: 0;
  background: transparent;
  font-size: 17px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
}

.metric-editor [data-metric-save]:hover {
  color: #178233;
}

.metric-editor [data-metric-cancel]:hover {
  color: #c0392b;
}

/* --- "Activacion de entradas": interruptores azules estilo Navixy --- */
.tracker-info-body div.output-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.output-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 18px;
  border: 1px solid #b9c4cd;
  border-radius: 999px;
  background: #e7ecf1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.output-toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 40, 60, 0.35);
  transition: left 0.15s;
}

.output-toggle.on {
  background: var(--blue);
  border-color: var(--blue);
}

.output-toggle.on::after {
  left: 19px;
}

/* Pendiente de confirmacion: ambar y con pulso, con la perilla al centro. */
.output-toggle.pending {
  background: #efb016;
  border-color: #efb016;
  animation: cutoff-pulse 1.2s ease-in-out infinite;
}

.output-toggle.pending::after {
  left: 10px;
}

@keyframes cutoff-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.tracker-info-body div .output-caption {
  display: block;
  margin: -2px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.tracker-info-body div .output-caption.pending_on,
.tracker-info-body div .output-caption.pending_off {
  color: #b97a17;
}

.tracker-info-body div .output-caption.on {
  color: #178233;
  font-weight: 700;
}

/* --- Avisos emergentes (toasts) --- */
#toastHost {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 35, 55, 0.18);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  animation: toast-in 0.18s ease-out;
}

.toast.success {
  border-left-color: #35b558;
}

.toast.warn {
  border-left-color: #efb016;
}

.toast.error {
  border-left-color: #e0463f;
}

/* Toast simple (mensajes tipo "Enviando"/"Aplicado"): altura para al menos 3
   líneas para que el texto no se corte, con el contenido centrado vertical. */
.toast:not(.notif) {
  min-height: 84px;
  align-items: center;
}

/* Solo el toast simple (mensaje de una linea) estira su <span>. Los toasts de
   notificacion (.notif) manejan su propio layout con .notif-icon / .notif-body;
   si tambien recibian flex:1 el icono y la hora se deformaban. */
.toast:not(.notif) span {
  flex: 1;
}

.toast button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

@keyframes toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* --- Notificaciones push (tarjeta emergente) --- */
.toast.notif {
  align-items: stretch;
  padding: 12px;
  gap: 12px;
  cursor: default;
}
.toast.notif .notif-body { cursor: pointer; }
/* Especificidad .toast.notif .notif-icon para ganarle a la regla generica
   ".toast span { flex: 1 }" (pensada para el toast simple de una sola linea):
   sin esto el icono, que es un <span>, crecia hasta ~162px y el PNG quedaba
   estirado/fuera de la tarjeta. flex 0 0 34px lo fija en 34x34. */
.toast.notif .notif-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.notif-body { flex: 1; min-width: 0; }
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.notif-head strong { font-size: 13.5px; }
.notif-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.notif-body p { margin: 3px 0 0; font-size: 13px; color: var(--ink); line-height: 1.35; }
.toast-clear-all {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 35, 55, 0.12);
}
.toast-clear-all:hover { color: var(--ink); }

/* --- Vista de Alertas: Notificaciones sobre el mapa --- */
.alerts-map-view { padding: 0; height: 100vh; }
.alerts-map-view.active { display: block; }
.alerts-map-wrap { position: relative; width: 100%; height: 100%; min-height: 520px; }
.alerts-map { position: absolute; inset: 0; border-radius: 0; }
.alerts-notif-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 380px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 35, 55, 0.22);
  display: flex;
  flex-direction: column;
  z-index: 5;
  overflow: hidden;
}
.alerts-notif-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.alerts-notif-head h2 { margin: 0 0 6px; font-size: 19px; }
.alerts-notif-sub { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.alerts-rules-count { margin: 0 0 10px; font-size: 13px; color: var(--ink); }
.alerts-rules-count strong { color: var(--blue); }
.link-button { background: none; border: 0; color: var(--blue); cursor: pointer; padding: 0; font-size: 13px; }
.link-button.strong { font-weight: 700; letter-spacing: 0.02em; }
.link-button:hover { text-decoration: underline; }
.alerts-notif-count {
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.alerts-notif-list { flex: 1; overflow-y: auto; }
.notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  cursor: pointer;
}
.notif-item:hover { background: #f5f8fb; }
.notif-item.selected { background: rgba(34, 149, 223, 0.09); box-shadow: inset 3px 0 0 var(--blue); }
.notif-item.unread strong::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  margin-left: 6px;
  vertical-align: middle;
}
.notif-item-icon { flex-shrink: 0; font-size: 17px; line-height: 1.2; width: 22px; text-align: center; }
.notif-item-body { display: grid; gap: 2px; min-width: 0; }
.notif-item-body strong { font-size: 13.5px; font-weight: 600; }
.notif-item-dev { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-time { font-size: 11.5px; color: var(--muted); }
.alerts-notif-foot { padding: 12px 18px; border-top: 1px solid var(--line); text-align: center; }

/* tarjeta de detalle flotante (centro) */
.alerts-notif-detail {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-width: calc(100% - 32px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 35, 55, 0.22);
  padding: 16px 18px;
  z-index: 6;
}
.notif-detail-head { display: flex; justify-content: space-between; align-items: center; }
.notif-detail-head strong { font-size: 15px; }
.notif-detail-msg { margin: 8px 0 12px; font-size: 13px; color: var(--ink); line-height: 1.4; }
.notif-detail-row { display: grid; gap: 2px; margin-bottom: 10px; }
.notif-detail-row.two { grid-template-columns: 1fr 1fr; gap: 12px; }
.notif-detail-row span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.notif-detail-row strong { font-size: 13px; font-weight: 600; }
.notif-detail-dev { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.alerts-map-pin {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
}
.alerts-map-pin { }

/* --- Vista de Alertas: configuración de Reglas --- */
.alerts-rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.alerts-rules-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 420px;
}
.alerts-rules-help {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  min-height: 420px;
}
.alerts-rules-help .help-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  color: var(--muted);
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
}
.alerts-rules-help p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 620px; }

/* panel "Configuración de reglas" (estilo Navixy: objetos + pestañas) */
.alerts-rules-side { min-width: 0; }
.rule-config {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.rule-config-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rule-config-head h2 { margin: 0; font-size: 19px; }
.rule-config-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.rule-objects-col {
  border-right: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rule-objects-col .rule-object-list {
  flex: 1;
  overflow-y: auto;
  max-height: 480px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 4px 2px;
}
.rule-form-col { padding: 0 20px 18px; min-width: 0; }
.rule-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.rule-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 18px;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.rule-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.rule-tab-panel { display: none; }
.rule-tab-panel.active { display: grid; gap: 14px; align-content: start; }
.rule-tab-panel h3 { margin: 0; font-size: 17px; }
.rule-tab-panel h4 { margin: 6px 0 0; font-size: 14px; }
.rule-tab-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.rule-tab-panel label.check-row { display: flex; align-items: center; gap: 10px; }
.rule-tab-panel input,
.rule-tab-panel select {
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%;
}
.rule-tab-panel .check-row input { width: 18px; height: 18px; }
.rule-notif-checks { display: flex; gap: 26px; flex-wrap: wrap; }
.rule-config-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  font-size: 13px;
  color: var(--muted);
}
.rule-foot-actions { display: flex; gap: 24px; }

/* cuadricula de horario 7x24 */
.sched-head { display: flex; justify-content: space-between; align-items: center; }
.sched-legend { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.sched-legend span.on,
.sched-legend span.off { width: 12px; height: 16px; border-radius: 2px; display: inline-block; }
.sched-legend span.on { background: #2295df; }
.sched-legend span.off { background: #dfe6ec; }
.sched-grid { display: grid; gap: 3px; margin-top: 4px; }
.sched-row {
  display: grid;
  grid-template-columns: 30px repeat(24, minmax(8px, 1fr));
  gap: 2px;
  align-items: center;
}
.sched-row.sched-hours span { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.sched-day { font-size: 11.5px; color: var(--muted); }
.sched-cell {
  border: 0;
  background: #dfe6ec;
  height: 26px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.sched-cell:hover { outline: 1px solid var(--blue); }
.sched-cell.on { background: #2295df; }

/* notificacion de emergencia: se distingue en rojo */
.toast.notif.emergency { background: #fff5f4; }

/* --- Dispositivos: Rastreadores agrupados + configuracion ------------------ */
.devices-cfg-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.trackers-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 0;
  min-height: 480px;
}
.trackers-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 16px 10px;
}
.trackers-head h2 { margin: 0; font-size: 18px; }
.trackers-search { padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.trackers-search input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
}
.trackers-list { max-height: 68vh; overflow-y: auto; }
.tracker-group { border-left: 4px solid var(--group-color, #2295df); }
.tracker-group-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 12px;
  border-bottom: 1px solid var(--line);
}
.tracker-group-title {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: baseline;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
}
.tracker-group-title span { color: var(--muted); font-size: 12.5px; }
.tracker-kebab, .tracker-chevron { color: var(--muted); }
.tracker-group.collapsed .tracker-group-items { display: none; }
.tracker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px 10px 22px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.tracker-item:hover { background: #f5f8fb; }
.tracker-item.selected { background: rgba(34, 149, 223, 0.09); box-shadow: inset 3px 0 0 var(--blue); }
.tracker-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tracker-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracker-empty { margin: 0; padding: 10px 22px; color: var(--muted); font-size: 12.5px; }

.group-menu {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 35, 55, 0.18);
  display: grid;
  min-width: 170px;
  overflow: hidden;
}
.group-menu button {
  background: none;
  border: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.group-menu button:hover { background: #f5f8fb; }

.group-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.group-swatch {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.group-swatch.selected { border-color: var(--ink); transform: scale(1.08); }
.group-color-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; }

/* panel de configuracion del dispositivo */
.cfg-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.cfg-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cfg-header-top h2 { margin: 0; font-size: 19px; }
.cfg-model { text-align: right; display: grid; gap: 1px; }
.cfg-model span { font-size: 11px; color: var(--muted); }
.cfg-model strong { font-size: 13.5px; }
.cfg-model small { font-size: 11.5px; color: var(--muted); }
.cfg-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-bottom: 14px;
}
.cfg-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; }
.cfg-fields input, .cfg-fields select {
  padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%;
}
.cfg-group-select { display: flex; align-items: center; gap: 8px; }
.cfg-group-select select { flex: 1; }
.cfg-header-actions { display: flex; justify-content: space-between; align-items: center; }
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.cfg-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 18px 14px;
}
.cfg-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 12px 0 8px;
  font: inherit;
  cursor: pointer;
}
.cfg-card-head h3 { margin: 0; font-size: 15px; }
.cfg-chevron { color: var(--muted); transition: transform 0.15s; }
.cfg-card.collapsed .cfg-card-body { display: none; }
.cfg-card.collapsed { padding-bottom: 4px; }
.cfg-card.collapsed .cfg-chevron { transform: rotate(180deg); }
.cfg-card-body { display: grid; gap: 10px; }
.cfg-card-body label { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; }
.cfg-card-body label.check-row { display: flex; align-items: center; gap: 8px; }
.cfg-card-body input,
.cfg-card-body select {
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 100%;
}
.cfg-card-body .check-row input,
.cfg-radio-row input { width: 16px; height: 16px; }
.cfg-radio-row { display: flex; gap: 20px; flex-wrap: wrap; }
.cfg-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cfg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.cfg-two span { display: block; font-size: 11.5px; color: var(--muted); }
.cfg-two strong { font-size: 13px; font-weight: 600; }
.cfg-mini-save { justify-self: end; }
.cfg-commands { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-cmd {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fafc;
  padding: 8px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.cfg-cmd:hover { border-color: var(--blue); color: var(--blue); }

@media (max-width: 1000px) {
  .devices-cfg-layout { grid-template-columns: 1fr; }
}

/* grupos en la lista de Seguimiento (mismos grupos/colores que Dispositivos) */
.tracker-groups { flex: 1; overflow-y: auto; min-height: 0; }
.map-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.map-group-head strong { font-size: 13.5px; }
.map-group-count { color: var(--muted); font-size: 12.5px; }
.map-group-chevron { margin-left: auto; color: var(--muted); }
.map-group.collapsed .vehicle-list { display: none; }

@media (max-width: 1100px) {
  .rule-config-body { grid-template-columns: 1fr; }
  .rule-objects-col { border-right: 0; border-bottom: 1px solid var(--line); }
}
.rule-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
.alerts-panel-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.alerts-panel-head h2 { font-size: 17px; margin: 0; }
.alerts-empty { color: var(--muted); font-size: 14px; padding: 20px 4px; }
.rule-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 14px 0 6px;
}
.rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.rule-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rule-info strong { font-size: 14px; }
.rule-info span { font-size: 12px; color: var(--muted); }
.rule-warn {
  display: inline-block;
  font-size: 10.5px;
  color: #b26a00;
  background: #fff3d6;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
}
.rule-actions { display: flex; gap: 2px; }

/* interruptor tipo switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #cfd8e0; border-radius: 22px; transition: 0.2s;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::before { transform: translateX(16px); }

.alerts-rules-list { max-height: 62vh; overflow-y: auto; }

/* diálogo de regla: objetos y nota */
.rule-object-list { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
.rule-type-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #b26a00;
  background: #fff3d6;
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .alerts-rules-layout { grid-template-columns: 1fr; }
  .alerts-notif-panel { width: calc(100% - 32px); }
}

.metric-edit-btn.small {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.tracker-info-body div.output-rename {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tracker-info-body div.output-rename.hidden {
  display: none;
}

.output-rename input {
  width: 140px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.output-rename button {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
}

.output-rename [data-rename-save]:hover {
  color: #178233;
}

.output-rename [data-rename-cancel]:hover {
  color: #c0392b;
}

.tracker-info-section {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.tracker-info-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 4px;
}

.tracker-info-section h3 {
  margin: 0;
  color: #34373b;
  font-size: 13.5px;
}

.tracker-info-section header span {
  color: #9aa0a6;
  font-size: 16px;
  font-weight: 900;
}

.tracker-info-body {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 6px 16px 14px;
}

.tracker-info-icon {
  display: grid;
  place-items: start center;
  color: #9da2a7;
  font-size: 18px;
  font-weight: 800;
}

/* El rayo de "Ignicion" enciende en azul cuando el ACC del vehiculo esta
   encendido. */
.tracker-info-icon.ignition.on {
  color: var(--blue);
}

/* Icono PNG de encendido/apagado en la seccion Entradas. */
.tracker-info-icon .entrada-acc-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* El icono de la seccion Estado usa los mismos colores del estado, en un
   circulo un poco mas grande. */
.tracker-info-body .tracker-info-icon.parking-icon,
.tracker-info-icon.parking-icon {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.tracker-info-body div {
  display: grid;
  gap: 5px;
  color: #33373c;
  font-size: 12.5px;
  line-height: 1.35;
}

.tracker-info-body span {
  color: #6b7076;
}

.tracker-info-body strong {
  font-weight: 500;
}

.tracker-info-body a {
  color: #1684d8;
  text-decoration: none;
}

.tracking-map,
.client-map-stage,
.tracking-map #map {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

/* El mapa de Seguimiento es a sangre completa: sin el margen/borde/radio que
   trae la tarjeta .map-stage general (esos dejaban una franja arriba). */
.client-map-stage {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.tracking-tools,
.client-map-style {
  position: absolute;
  z-index: 4;
}

/* Barra de herramientas del mapa: vertical y a la derecha, DEBAJO de los
   controles de zoom de maplibre (que ocupan ~top:10 a ~100px). */
/* Mismo tamano y estilo que los controles de zoom de maplibre (botones de
   29x29, esquinas 4px, sombra fina) y alineada a su misma derecha. */
.tracking-tools {
  top: 112px;
  right: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.tracking-tools button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: #8a8f94;
  cursor: pointer;
}

.tracking-tools button:last-child { border-bottom: 0; }

.tracking-tools button svg {
  width: 16px;
  height: 16px;
}

.tracking-tools button:hover,
.tracking-tools button.active {
  color: #2295df;
}

.client-map-style {
  display: none;
}

.tracking-panel {
  position: absolute;
  top: 112px;
  right: 66px;
  z-index: 5;
  display: none;
  /* Mismo tamano que el panel de Rastreadores (360px de ancho). */
  width: 360px;
  max-height: calc(100vh - 132px);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.24);
}

.tracking-panel.active {
  display: block;
}

.tracking-panel header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.tracking-panel header h2 {
  flex: 1;
  margin: 0;
  color: #303236;
  font-size: 18px;
  line-height: 1;
}

.tracking-panel header > button:not(.primary-button) {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #8d9297;
  font-size: 22px;
  cursor: pointer;
}

.tracking-panel .square-action {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  font-size: 22px;
  box-shadow: 0 10px 22px rgba(35, 103, 169, 0.25);
}

.tracking-panel-search {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 13px 18px;
}

.tracking-panel-search input {
  flex: 1;
  border: 0;
  outline: 0;
  color: #3f454b;
  font-size: 14px;
}

.tracking-panel-search span {
  color: #92979c;
  font-size: 18px;
}

.tracking-panel p {
  margin: 0;
  padding: 18px 18px 22px;
  color: #33373c;
  font-size: 14px;
  line-height: 1.45;
}

.panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}

.panel-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: #fff;
  padding: 12px 8px 10px;
  color: #565b61;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.panel-tabs button.active {
  border-bottom-color: #2295df;
  color: #111827;
}

.tracking-list-row {
  display: grid;
  grid-template-columns: 26px 32px 1fr;
  align-items: center;
  column-gap: 10px;
  min-height: 54px;
  border-bottom: 1px solid #eef1f4;
  padding: 9px 18px;
}

.tracking-list-row.selected {
  background: #e7f3fb;
}

.tracking-list-row input {
  width: 18px;
  height: 18px;
  accent-color: #2295df;
}

.tracking-list-row strong {
  display: block;
  color: #31353a;
  font-size: 14px;
  font-weight: 600;
}

.tracking-list-row small {
  display: inline-block;
  justify-self: start;
  grid-column: 3;
  margin-top: 4px;
  border: 1px solid #13a79b;
  border-radius: 999px;
  background: #e5fbf7;
  color: #008f85;
  padding: 3px 10px;
  font-size: 12px;
}

.poi-thumb,
.geofence-shape {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef4f8;
}

.poi-thumb::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2295df;
}

.poi-thumb.barrick::before { background: #b6d87a; }
.poi-thumb.mall::before { background: #b88a55; }
.poi-thumb.park::before { background: #52b7df; }

.geofence-shape.circle {
  border: 4px solid #9ba0a5;
  background: transparent;
}

.geofence-shape.route::before {
  content: "";
  width: 26px;
  height: 14px;
  border-top: 5px solid #969ba0;
  border-bottom: 5px solid #969ba0;
  transform: rotate(-28deg);
}

.tracking-panel footer {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-top: 1px solid var(--line);
  padding: 0 18px;
  color: #5f6670;
  font-size: 13px;
}

.empty-panel-text {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 24px 18px;
  color: #a0a4a8;
  font-weight: 800;
}

/* --- Geocercas: lista dinamica del panel ---------------------------------- */
.geofence-list {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}

.geofence-row {
  grid-template-columns: 26px 32px 1fr 30px;
}

.geofence-row-body {
  cursor: pointer;
}

.geofence-shape-ico {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.geofence-shape-ico svg {
  width: 24px;
  height: 24px;
}

.gf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.gf-chip {
  display: inline-block;
  border-radius: 999px;
  color: #fff;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}

.gf-del {
  color: #9ba0a5;
}

.gf-del:hover {
  color: #c63f3f;
}

/* --- Editor "Nueva geocerca" (tarjeta flotante sobre el mapa) ------------- */
.geofence-editor {
  position: absolute;
  top: 112px;
  right: 66px;
  z-index: 6;
  width: 340px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.28);
  padding: 0 0 14px;
}

.geofence-editor.hidden {
  display: none;
}

.geofence-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.geofence-editor header h2 {
  margin: 0;
  color: #303236;
  font-size: 18px;
}

.geofence-editor header button {
  border: 0;
  background: transparent;
  color: #8d9297;
  font-size: 22px;
  cursor: pointer;
}

.geofence-editor > label {
  display: block;
  padding: 12px 18px 0;
}

.geofence-editor > label > span {
  display: block;
  margin-bottom: 6px;
  color: #565b61;
  font-size: 12px;
  font-weight: 700;
}

.geofence-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}

.geofence-name-row input[type="color"] {
  flex: 0 0 34px;
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.geofence-name-row input[type="text"] {
  flex: 1;
  border: 0;
  outline: 0;
  color: #31353a;
  font-size: 15px;
}

.geofence-width-field input,
.geofence-tags-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: #31353a;
  font-size: 14px;
}

/* Selector de forma: Circulo / Poligono / Ruta con la elegida sombreada. */
.geofence-shape-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 18px 0;
}

.geofence-shape-picker button {
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 4px;
  color: #565b61;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.geofence-shape-picker button svg {
  width: 26px;
  height: 26px;
}

.geofence-shape-picker button.active {
  border-color: #2295df;
  background: #e7f3fb;
  color: #1273b1;
}

.geofence-draw-hint {
  margin: 12px 18px 0;
  border-radius: 8px;
  background: #f2f7fb;
  padding: 10px 12px;
  color: #33566f;
  font-size: 13px;
  line-height: 1.4;
}

.geofence-editor footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 0;
}

/* --- Geocercas dentro del formulario de reglas de alerta ------------------ */
.rule-geofences h4 {
  margin: 14px 0 4px;
}

.rule-geofence-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 8px;
  padding: 6px 10px;
}

.gf-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: -1px;
}

.map-panel {
  width: 360px;
}

/* El .map-panel comparte una regla con padding:16px que inseta y empuja hacia
   abajo el encabezado y las opciones; se anula para que peguen arriba. */
.tracking-panel.map-panel {
  padding: 0;
}

.map-panel label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  color: #6a6f75;
  font-size: 14px;
  cursor: pointer;
}

.map-panel input {
  width: 18px;
  height: 18px;
  accent-color: #2295df;
}

.client-tabs,
.report-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 14px;
}

.client-tabs button,
.report-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 18px 8px;
  font-weight: 800;
}

.client-tabs button.active,
.report-tabs button.active {
  border-bottom-color: #2295df;
  color: #111827;
}

#vehicleProfileDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.vehicle-profile-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.vehicle-profile-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 10px 4px;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.vehicle-profile-tabs button.active {
  border-bottom-color: #2295df;
  color: #111827;
}

.vehicle-profile-panel {
  display: none;
}

.vehicle-profile-panel.active {
  display: grid;
  gap: 16px;
}

.vehicle-profile-panel h3 {
  margin: 6px 0 -6px;
  font-size: 15px;
}

.fleet-side-detail {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.fleet-mini-map {
  height: 260px;
  border-bottom: 1px solid var(--line);
}

.fleet-vehicle-detail {
  padding: 18px;
  overflow: auto;
}

.empty-copy {
  padding: 28px;
  color: #4b5563;
}

.report-list {
  display: grid;
  gap: 0;
}

.geo-links-list {
  display: grid;
  gap: 0;
}

.geo-link-item {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.geo-link-item span {
  color: var(--muted);
  font-size: 13px;
}

.geo-link-item .geo-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.geo-link-item .geo-link-row input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  color: #4b5563;
  background: #f8fafc;
}

.geo-link-item .geo-link-row button {
  white-space: nowrap;
}

.geo-link-item.expired {
  opacity: 0.55;
}

.report-list article {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}

.report-list article[data-schedule-id] button {
  justify-self: start;
  margin-top: 4px;
  padding: 6px 14px;
}

.report-list span,
.report-types span,
.report-type-list span {
  color: var(--muted);
  font-size: 13px;
}

.report-types {
  display: grid;
  gap: 14px;
}

.report-types input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.report-types button,
.report-type-list button {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 0;
  text-align: left;
  cursor: pointer;
}

.report-type-list {
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 6px;
}

.report-type-group.hidden,
.report-vehicle-list label.hidden {
  display: none !important;
}

.report-builder-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
  font: inherit;
}

.field-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.report-weekday-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.weekday-toggle {
  border: 1px solid var(--line);
  background: #f4f6f8;
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.weekday-toggle.active {
  background: #eaf4fc;
  border-color: #8ec7ea;
  color: #1c6fa5;
}

.report-time-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.report-time-inputs input {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-time-presets {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}

.report-time-presets label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.report-type-list button.selected {
  background: #eaf4fc;
  border-radius: 6px;
  padding-left: 8px;
}

.report-type-list button.selected span:not(.soon) {
  color: #1c6fa5;
}

.report-list article.selected,
.report-list [data-report-id].selected {
  background: #eaf4fc;
}

.report-view-panel {
  overflow: auto;
}

.report-empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 260px;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.report-empty-icon {
  font-size: 40px;
  color: #c7cdd4;
}

.report-view-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 14px;
}

.report-builder-dialog {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

#scheduleDialog {
  width: min(1400px, calc(100vw - 32px));
}

.report-builder-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  align-items: start;
}

#scheduleDialog .report-builder-columns {
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}

.schedule-frequency-radios {
  display: flex;
  gap: 18px;
  margin-bottom: 14px;
  font-size: 14px;
}

.schedule-frequency-radios label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-coverage-field {
  margin-bottom: 14px;
}

.schedule-coverage-inputs {
  display: flex;
  gap: 8px;
}

.schedule-coverage-inputs input {
  width: 70px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.schedule-coverage-inputs select {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.field-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: -6px;
}

#scheduleRunWeekdayField {
  margin-bottom: 14px;
}

.report-builder-col h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.report-vehicle-list {
  display: grid;
  gap: 4px;
  max-height: 60vh;
  overflow: auto;
}

.report-vehicle-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
}

.report-vehicle-list input {
  width: 18px;
  height: 18px;
}

.report-types span.soon {
  font-style: italic;
  color: #b45309;
}

.client-hidden-details {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.settings-grid,
.report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.settings-grid article,
.report-grid article {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.settings-grid h3 {
  margin: 0;
  font-size: 15px;
}

.settings-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.settings-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.report-grid span {
  color: var(--muted);
  font-size: 12px;
}

.report-grid strong {
  line-height: 1.45;
}

.users-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.user-card {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 140px minmax(160px, 1fr) 100px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

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

.user-card span {
  color: var(--muted);
  font-size: 13px;
}

.role-chip {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

.role-chip.admin {
  background: #e4eff9;
  color: var(--blue);
}

.role-chip.operator {
  background: #e0f2f4;
  color: var(--teal);
}

.role-chip.client {
  background: #e4f2e8;
  color: var(--green);
}

dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
}

#userDialog,
#reportViewDialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.report-view-meta {
  color: var(--muted);
  font-size: 13px;
}

.report-view-table-wrap {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-view-table-wrap .data-table {
  width: 100%;
}

dialog::backdrop {
  background: rgba(10, 20, 30, 0.45);
}

dialog form {
  display: grid;
  gap: 14px;
}

.user-form {
  gap: 22px;
}

.form-section {
  display: grid;
  gap: 14px;
}

.form-section h3 {
  margin: 0;
  font-size: 18px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.new-client-fields {
  display: grid;
  gap: 12px;
  border: 1px dashed #9fb5c7;
  border-radius: 8px;
  background: #f6fafc;
  padding: 12px;
}

dialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

dialog input {
  padding: 10px;
}

dialog textarea {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  resize: vertical;
  font: inherit;
}

dialog select {
  max-width: none;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}

menu button {
  padding: 10px 14px;
}

/* --- Mantenimiento (Gestion de flotas) ----------------------------------- */

.fleet-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--muted);
}

.empty-row {
  text-align: center;
  color: var(--muted);
  padding: 28px 12px;
}

.req {
  color: var(--blue);
}

/* --- Eco Driving --- */
.eco-driving {
  padding: 4px 6px 24px;
}

/* Layout de dos columnas: filtros a la izquierda, resultados/info a la derecha. */
.eco-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.eco-filter {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.eco-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.eco-field-label {
  font-weight: 600;
}

.eco-daterange {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eco-daterange input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.eco-days {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.eco-days button {
  width: 34px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.eco-days button.active {
  background: #e4f1fb;
  border-color: var(--blue);
  color: var(--blue);
}

.eco-time-radios {
  display: flex;
  gap: 14px;
  color: var(--ink);
}

.eco-time-radios label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.eco-config-btn {
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
}

.eco-group-select {
  max-width: none;
  width: 100%;
}

.eco-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eco-search-row .search-box {
  flex: 1;
}

.eco-checkall input {
  width: 18px;
  height: 18px;
}

.eco-driver-list {
  display: grid;
  gap: 2px;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
}

.eco-dept-head {
  padding: 8px 6px;
  background: #f4f7fb;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.eco-driver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  cursor: pointer;
}

.eco-driver-row:hover {
  background: #f8fafc;
}

.eco-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.eco-driver-name {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
}

.eco-driver-row input {
  width: 18px;
  height: 18px;
}

.eco-generate-btn {
  width: 100%;
}

.eco-report-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

@media (max-width: 1120px) {
  .eco-layout {
    grid-template-columns: 1fr;
  }
}

.eco-report-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  margin-bottom: 26px;
  overflow: hidden;
}

.eco-report-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.eco-report-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.eco-report-controls input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}

.eco-report-table {
  min-width: 720px;
}

.eco-stars {
  letter-spacing: 1px;
}

.eco-muted {
  color: var(--muted);
  font-size: 12px;
}

.eco-title,
.eco-subtitle {
  text-align: center;
  margin: 10px 0 8px;
  color: #2d3035;
}

.eco-subtitle {
  margin-top: 30px;
}

.eco-intro {
  max-width: 900px;
  margin: 0 auto 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.eco-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.eco-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 22px 20px;
  box-shadow: var(--shadow);
}

.eco-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #eef4fb;
  font-size: 30px;
}

.eco-card h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 16px;
  text-align: center;
}

.eco-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.eco-table-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.eco-table {
  min-width: 0;
  width: 100%;
}

.eco-table th,
.eco-table td {
  text-align: center;
}

.eco-table td:nth-child(2) {
  color: #f2c200;
  letter-spacing: 2px;
}

.eco-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.eco-note {
  max-width: 900px;
  margin: 18px auto 0;
  text-align: center;
  color: #b45309;
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 900px) {
  .eco-cards {
    grid-template-columns: 1fr;
  }
}

.maintenance-unplanned-filter {
  margin-left: auto;
  font-size: 13px;
}

.maintenance-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  font-size: 13px;
}

.maintenance-summary-legend {
  display: grid;
  gap: 4px;
}

.maintenance-summary-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.maintenance-summary-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.maintenance-summary-costs {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.status-chip.scheduled { background: #e7eaee; color: #56616d; }
.status-chip.pending { background: #fdeecb; color: #935b00; }
.status-chip.done { background: #dff3ea; color: #126746; }
.status-chip.expired { background: #f9e2df; color: #a3322d; }

#maintenanceDialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.maintenance-dialog-heading {
  align-items: center;
}

.maintenance-autorepeat {
  margin-left: auto;
  font-size: 13px;
}

.maintenance-dialog-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.maintenance-dialog-col {
  display: grid;
  gap: 12px;
  align-content: start;
}

.maintenance-dialog-col h3 {
  margin: 8px 0 0;
  font-size: 15px;
}

.maintenance-contact-list {
  display: grid;
  gap: 8px;
}

.maintenance-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.maintenance-contact-row input {
  flex: 1;
}

.maintenance-contact-row .icon-button {
  width: 28px;
  height: 28px;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.maintenance-condition {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.maintenance-condition .field-current {
  margin-left: auto;
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.maintenance-condition .check-row {
  justify-content: flex-start;
}

.maintenance-condition-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.maintenance-attachments-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.maintenance-attachments-list a {
  color: var(--blue);
}

.attach-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  cursor: pointer;
  font-size: 13px;
}

.maintenance-dialog-footer {
  align-items: center;
  justify-content: space-between;
}

.maintenance-footer-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 1120px) {
  .app-shell,
  .monitor-layout,
  .details-layout,
  .management-layout,
  .devices-layout,
  .login-screen,
  .dashboard-grid,
  .settings-grid,
  .report-grid,
  #usersPanel .management-layout {
    grid-template-columns: 1fr;
  }

  /* En una sola columna, tabla / mapa / detalle se apilan en ese orden y cada
     cuadro toma su alto natural (el modo "llenar la pagina" es solo de
     escritorio). El mapa toma un alto que cuadra a la pantalla. */
  .devices-layout {
    grid-template-areas: none;
    grid-template-rows: none;
    height: auto;
    min-height: 0;
    align-self: start;
  }

  /* Sin las areas de escritorio, cada cuadro fluye apilado en orden natural. */
  .devices-layout > .management-table-panel,
  .devices-layout > .devices-side-column,
  .devices-layout > .device-detail {
    grid-area: auto;
  }

  .devices-side-column .map-panel {
    flex: none;
  }

  .devices-side-column .map-stage {
    flex: none;
    height: 60vh;
    min-height: 320px;
  }

  .user-side-detail {
    flex-direction: column;
  }

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

  .sidebar {
    position: static;
  }

  /* En una columna la barra no debe ocupar toda la altura de la pantalla:
     colapsa a su contenido y el mapa/las vistas quedan visibles debajo. */
  .client-sidebar,
  .client-workspace,
  .client-view {
    min-height: 0;
  }

  .nav-stack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* La vista de Seguimiento a sangre completa usaba 100vh; al apilar debe
     tener una altura util propia, no toda la ventana. */
  .tracking-view {
    height: 78vh;
  }

  .tracking-map,
  .client-map-stage,
  .tracking-map #map {
    height: 78vh;
    min-height: 78vh;
  }

  .client-view[data-client-panel="overview"] {
    padding: 22px;
  }

  .overview-cards {
    grid-template-columns: repeat(2, minmax(260px, 360px));
  }

  .fleet-card {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(360px, 100%);
  }

  .client-chart-panel {
    width: 100%;
  }
}

/* En pantallas estrechas/verticales, el menú del PORTAL ADMIN no se va arriba
   en horizontal: se queda como barra fina vertical con solo iconos
   (auto-colapsado). No afecta al portal de clientes. */
@media (max-width: 1120px) {
  body[data-portal="admin"] .app-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  body[data-portal="admin"] .sidebar {
    padding: 20px 10px;
    align-items: stretch;
  }
  body[data-portal="admin"] .brand {
    justify-content: center;
  }
  body[data-portal="admin"] .brand > div,
  body[data-portal="admin"] .nav-label,
  body[data-portal="admin"] .model-panel {
    display: none;
  }
  body[data-portal="admin"] .nav-stack {
    grid-template-columns: 1fr !important;
  }
  body[data-portal="admin"] .nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
  }
  body[data-portal="admin"] .nav-collapse-btn {
    display: none;
  }
}

/* Igual para el PORTAL CLIENTE: en estrecho/vertical el menú queda fino a la
   izquierda con solo iconos, no arriba. */
@media (max-width: 1120px) {
  body[data-portal="client"] .app-shell {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
  body[data-portal="client"] .client-sidebar {
    padding: 16px 10px;
    align-items: stretch;
    min-height: 100vh;
  }
  body[data-portal="client"] .client-menu-head,
  body[data-portal="client"] .client-profile,
  body[data-portal="client"] .app-download-link {
    justify-content: center;
  }
  body[data-portal="client"] .client-menu-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  body[data-portal="client"] .client-menu-head .sidebar-logo {
    width: 40px;
    height: 40px;
  }
  body[data-portal="client"] .client-menu-head .menu-icon { align-self: center; }
  body[data-portal="client"] .client-menu-head .menu-icon svg { transform: rotate(180deg); }
  body[data-portal="client"] .client-profile > div,
  body[data-portal="client"] .nav-label,
  body[data-portal="client"] .nav-badge,
  body[data-portal="client"] .app-download-link span {
    display: none;
  }
  body[data-portal="client"] .client-nav {
    grid-template-columns: 1fr !important;
  }
  body[data-portal="client"] .nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
  }

  /* En el portal cliente la barra fina queda AL LADO (no apilada), asi que el
     mapa de Seguimiento debe ocupar toda la altura de la ventana; el 78vh
     generico dejaba una franja en blanco debajo. */
  body[data-portal="client"] .tracking-view,
  body[data-portal="client"] .tracking-map,
  body[data-portal="client"] .client-map-stage,
  body[data-portal="client"] .tracking-map #map {
    height: 100vh;
    min-height: 100vh;
  }
}

@media (max-width: 720px) {
  .workspace,
  .sidebar {
    padding: 16px;
  }

  .topbar,
  .map-toolbar,
  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .metrics-grid,
  .detail-grid,
  .command-grid,
  .nav-stack,
  .user-card,
  .dashboard-kpis,
  .form-grid.two,
  .form-grid.three {
    grid-template-columns: 1fr 1fr;
  }

  .login-screen {
    padding: 18px;
  }

  .login-brand {
    align-items: flex-start;
  }

  h1 {
    font-size: 26px;
  }

  .map-stage,
  #map {
    min-height: 380px;
    height: 380px;
  }

  .client-title {
    font-size: 30px;
  }

  .overview-cards {
    grid-template-columns: 1fr;
  }

  .fleet-card {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  .overview-card {
    min-height: auto;
  }

  .overview-visual {
    height: 170px;
  }

  .client-chart-panel {
    padding: 20px 16px;
  }

  .client-km-chart {
    grid-template-columns: 34px minmax(520px, 1fr);
    overflow-x: auto;
  }

  .km-bars {
    gap: 14px;
    padding: 0 14px;
  }

  .chart-legend {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .form-grid.two,
  .form-grid.three {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   MODO OSCURO DEL PANEL ADMINISTRADOR (igual que el Servicio al cliente).
   Se activa con la clase body.theme-dark (el boton sol/luna de la topbar la
   pone/quita y la recuerda en localStorage; por defecto: oscuro).
   La barra lateral ya es oscura en ambos modos; esto oscurece el area de
   trabajo: fondo, tarjetas, tablas, inputs y dialogos. Los estilos van bajo
   body.theme-dark, asi que NO afectan al portal del cliente (que no lleva
   esa clase). Se sobreescriben tanto las variables como los pocos fondos
   fijos (#fff / grises claros) que quedaban hardcodeados.
   ===================================================================== */
body.theme-dark {
  color-scheme: dark;
  --ink: #e6eef5;
  --muted: #9fbdd2;
  --line: rgba(255, 255, 255, 0.10);
  --panel: #0f2c40;
  --base: #0a2233;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* La pantalla de login (admin y cliente) es UNA sola: no cambia con el modo
   oscuro. El body puede heredar la clase theme-dark (se recuerda del panel),
   pero el login restablece las variables claras y el color-scheme para verse
   siempre igual — tarjeta blanca con texto oscuro, como en modo claro. */
body.theme-dark .login-screen {
  color-scheme: light;
  --ink: #17202a;
  --muted: #617083;
  --line: #d8e1e8;
  --panel: #ffffff;
  --base: #eef3f6;
  --shadow: 0 18px 40px rgba(20, 31, 43, 0.12);
  /* body ya resolvio color:var(--ink) con el valor oscuro y se hereda calculado;
     hay que reaplicarlo aqui para que use el --ink claro restablecido. */
  color: var(--ink);
}
body.theme-dark .login-card h1 { color: var(--ink); }

/* Superficies que tenian blanco fijo */
body.theme-dark .session-pill,
body.theme-dark .management-table-panel,
body.theme-dark .side-detail { background: var(--panel); }

body.theme-dark .search-box { background: #12344c; }
body.theme-dark .settings-grid article,
body.theme-dark .report-grid article,
body.theme-dark .user-card,
body.theme-dark .command-console.readonly { background: #12344c; }

/* Inputs, selects y textareas (tenian fondo blanco fijo) */
body.theme-dark .send-row input,
body.theme-dark dialog input,
body.theme-dark dialog textarea,
body.theme-dark .settings-grid input,
body.theme-dark select {
  background: #0a2233;
  color: var(--ink);
}
body.theme-dark .search-box input { background: transparent; }

/* Selector de tipo de mapa */
body.theme-dark .map-style-switch,
body.theme-dark .map-style-switch button { background: #12344c; }
body.theme-dark .map-style-switch button.active { background: var(--blue); color: #fff; }

/* Tablas de datos (Usuarios, Team, Dispositivos, Actividad) */
body.theme-dark .data-table th,
body.theme-dark .data-table td { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.theme-dark .data-table th { color: #cfe0ec; }
body.theme-dark .data-table tr.selected { background: rgba(35, 103, 169, 0.30); }

/* Bloque de nuevo cliente (borde punteado) dentro del dialogo de GPS */
body.theme-dark .new-client-fields {
  background: #12344c;
  border-color: rgba(255, 255, 255, 0.20);
}

/* Leyenda de las graficas (tenia color fijo #111827, invisible en oscuro) */
body.theme-dark .chart-legend { color: var(--ink); }

/* Boton de tema al fondo de la barra lateral (misma posicion que el Servicio
   al cliente). Reutiliza el look de .nav-item; margin-top:auto lo ancla abajo
   cuando el menu esta contraido (con el menu abierto queda bajo "Modelos GPS"). */
.sidebar .theme-toggle { margin-top: auto; }

/* =====================================================================
   MODO OSCURO DEL PORTAL CLIENTE. El cliente comparte styles.css con el
   admin; estas reglas cubren las superficies PROPIAS del cliente: el area de
   trabajo, las tarjetas de las vistas (resumen, graficas, eco, alertas,
   configuracion) y los paneles flotantes de la vista de rastreo (lista de
   rastreadores, detalle del vehiculo, historial, selector de fechas,
   herramientas del mapa). Usan clases que no existen en el admin, asi que
   solo aplican al cliente cuando body lleva theme-dark. El mapa cambia aparte
   (claro = OSM streets, oscuro = blanco y negro) desde app.js.
   ===================================================================== */
body.theme-dark .client-workspace { background: var(--base); }

/* Tarjetas / paneles con fondo blanco fijo */
body.theme-dark .overview-card,
body.theme-dark .client-chart-panel,
body.theme-dark .eco-report-panel,
body.theme-dark .eco-card,
body.theme-dark .alerts-rules-panel,
body.theme-dark .alerts-notif-panel,
body.theme-dark .alerts-notif-detail,
body.theme-dark .cfg-header,
body.theme-dark .cfg-card,
body.theme-dark .tracker-info-section,
body.theme-dark .tracker-drawer,
body.theme-dark .trackers-panel,
body.theme-dark .tracker-detail-panel,
body.theme-dark .history-panel,
body.theme-dark .drp,
body.theme-dark .tracking-panel,
body.theme-dark .group-menu,
body.theme-dark .history-tabs button,
body.theme-dark .panel-tabs button,
body.theme-dark .tracking-tools,
body.theme-dark .tracking-tools button,
body.theme-dark .tracker-device-row,
body.theme-dark .tracker-info-body div.metric-editor { background: var(--panel); }

body.theme-dark .tracker-device-row,
body.theme-dark .evr-item,
body.theme-dark .hv-item { border-color: var(--line); }

/* Texto oscuro fijo -> claro (los acentos azul/verde/teal se conservan) */
body.theme-dark .history-popup,
body.theme-dark .history-popup dd,
body.theme-dark .tracker-device-row,
body.theme-dark .tracker-device-copy strong,
body.theme-dark .history-panel h2,
body.theme-dark .history-content h3,
body.theme-dark .history-summary strong,
body.theme-dark .history-vehicles summary,
body.theme-dark .hv-item,
body.theme-dark .tg-endpoint strong,
body.theme-dark .tg-metrics,
body.theme-dark .tripr-item,
body.theme-dark .tripr-km,
body.theme-dark .evr-item,
body.theme-dark .evr-time strong,
body.theme-dark .evr-text,
body.theme-dark .history-event strong,
body.theme-dark .history-event p,
body.theme-dark .drp,
body.theme-dark .drp-presets button,
body.theme-dark .drp-grid .drp-day,
body.theme-dark .tracker-detail-head h2,
body.theme-dark .tracker-info-section h3,
body.theme-dark .tracker-info-body div,
body.theme-dark .tracking-panel header h2,
body.theme-dark .tracking-panel p,
body.theme-dark .tracking-list-row strong { color: var(--ink); }

/* Inputs dentro de paneles flotantes */
body.theme-dark .drp-inputs input,
body.theme-dark .drp-hora select,
body.theme-dark .tracking-panel-search input {
  background: #0a2233;
  color: var(--ink);
}

/* Estados hover claros -> velo oscuro sutil */
body.theme-dark .drp-presets button:hover,
body.theme-dark .drp-nav:hover,
body.theme-dark .drp-day:hover,
body.theme-dark .drp-foot button:hover,
body.theme-dark .hv-item:hover,
body.theme-dark .tripr-item:hover,
body.theme-dark .evr-item:hover,
body.theme-dark .notif-item:hover,
body.theme-dark .tracker-item:hover,
body.theme-dark .group-menu button:hover { background: rgba(255, 255, 255, 0.06); }

/* Rango seleccionado del calendario */
body.theme-dark .drp-day.in-range { background: rgba(35, 103, 169, 0.30); }

/* Editor "Nueva geocerca": misma superficie que los paneles flotantes del
   mapa. En claro se queda blanco (reglas base); aqui solo el modo oscuro. */
body.theme-dark .geofence-editor { background: var(--panel); }
body.theme-dark .geofence-editor header { border-color: var(--line); }
body.theme-dark .geofence-editor header h2 { color: var(--ink); }
body.theme-dark .geofence-editor > label > span { color: #a5b3c0; }
body.theme-dark .geofence-name-row { border-color: var(--line); }
body.theme-dark .geofence-name-row input[type="text"] {
  background: transparent;
  color: var(--ink);
}
body.theme-dark .geofence-width-field input,
body.theme-dark .geofence-tags-field input {
  border-color: var(--line);
  background: #0a2233;
  color: var(--ink);
}
body.theme-dark .geofence-shape-picker button {
  border-color: var(--line);
  background: #12344c;
  color: #c7d3dd;
}
body.theme-dark .geofence-shape-picker button.active {
  border-color: #2295df;
  background: rgba(34, 149, 223, 0.22);
  color: #7cc4ef;
}
body.theme-dark .geofence-draw-hint {
  background: #12344c;
  color: #c7d3dd;
}

/* Lista de geocercas del panel y del formulario de reglas en oscuro */
body.theme-dark .geofence-row-body strong { color: var(--ink); }
body.theme-dark .rule-geofence-list { border-color: var(--line); }

/* ===== Modo oscuro cliente: correcciones adicionales (2a pasada) =====
   Cubre superficies que quedaron claras: cabeceras de tarjetas del resumen,
   grafica de kilometraje, barras de pestanas, aviso del historial, input del
   geo-enlace, paneles de eco/alertas y los POP-UPS del mapa (maplibre). */

/* Cabecera (banda con emoji) de las tarjetas del resumen. El icono se conserva;
   solo se oscurece el fondo detras. */
body.theme-dark .map-preview,
body.theme-dark .task-preview,
body.theme-dark .fleet-preview { background: linear-gradient(135deg, #12344c, #0f2c40); }

/* Texto secundario de las tarjetas del resumen (los enlaces azules se conservan) */
body.theme-dark .overview-card p,
body.theme-dark .overview-card ul,
body.theme-dark .overview-card strong { color: var(--muted); }

/* Grafica de kilometraje: titulo, eje Y y area del grafico (era blanca) */
body.theme-dark .client-chart-panel h2 { color: var(--ink); }
body.theme-dark .km-y-axis { color: var(--muted); }
body.theme-dark .km-bars {
  background:
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(255, 255, 255, 0.07) 64px 65px),
    var(--panel);
}

/* Barras de pestanas (Reportes, y otras vistas con pestanas) */
body.theme-dark .client-tabs,
body.theme-dark .report-tabs { background: var(--panel); }

/* Aviso "marca vehiculos" en la cabecera del panel Historial */
body.theme-dark .history-multi-hint {
  background: #12344c;
  color: var(--muted);
  border-bottom-color: var(--line);
}

/* Recorridos agrupados por vehiculo (summary desplegable) */
body.theme-dark .trip-group > summary { background: var(--panel); color: var(--ink); }

/* Paneles de Eco Driving y ayuda de reglas de Alertas */
body.theme-dark .eco-filter,
body.theme-dark .eco-days button,
body.theme-dark .alerts-rules-help { background: var(--panel); }

/* Input con el enlace en Geo enlaces (era gris claro) */
body.theme-dark .geo-link-item .geo-link-row input {
  background: #0a2233;
  color: var(--ink);
}

/* Pop-ups del mapa (maplibre): contenedor blanco -> oscuro, con su punta y el
   boton de cierre. Aplica a los pop-ups de eventos, recorridos y en vivo. */
body.theme-dark .maplibregl-popup-content {
  background: #0f2c40;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
body.theme-dark .maplibregl-popup-close-button { color: var(--muted); }
body.theme-dark .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #0f2c40; }
body.theme-dark .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #0f2c40; }
body.theme-dark .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #0f2c40; }
body.theme-dark .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #0f2c40; }
body.theme-dark .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
body.theme-dark .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #0f2c40; }
body.theme-dark .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
body.theme-dark .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #0f2c40; }

/* Ultimos remanentes del modo oscuro cliente */
/* Config de una regla en Alertas */
body.theme-dark .rule-config { background: var(--panel); }

/* Botones flotantes para reabrir paneles (☰) cuando estan cerrados */
body.theme-dark .tracker-drawer-open,
body.theme-dark .tracker-detail-open,
body.theme-dark .history-panel-open {
  background: var(--panel);
  color: var(--ink);
}

/* Viaje seleccionado: sombreado mezclado con base OSCURA (no blanca) */
body.theme-dark .tripr-item.sel {
  background: color-mix(in srgb, var(--trip-sel-color, #2295df) 26%, #0f2c40);
}
body.theme-dark .tripr-item.sel:hover {
  background: color-mix(in srgb, var(--trip-sel-color, #2295df) 34%, #0f2c40);
}

/* Inputs de solo lectura del dialogo "Crear clon" (admin) */
body.theme-dark .clone-grid input,
body.theme-dark .clone-grid select,
body.theme-dark .clone-grid textarea { background: #0a2233; color: var(--ink); }

/* ===== Modo oscuro cliente: 3a pasada (comandos, fechas, pestañas, líneas) ===== */

/* Botones de "Comandos SMS del GPS" (eran blancos con texto claro = invisibles) */
body.theme-dark .cfg-cmd {
  background: #12344c;
  color: var(--ink);
  border-color: var(--line);
}
body.theme-dark .cfg-cmd:hover { background: #17415e; }

/* Boton de rango de fechas del Historial: el fondo azul CLARO desentonaba;
   se usa un azul mas OSCURO con texto azul claro. */
body.theme-dark .hr-trigger {
  background: #123a5a;
  color: #8fcbf2;
}

/* Lineas blancas que separan filas/vehiculos en el Historial */
body.theme-dark .history-item { border-bottom-color: var(--line); }

/* Texto de las pestañas oscuro -> claro
   (HISTORIAL/EVENTOS y la pestaña activa de Reportes/otras vistas). */
body.theme-dark .history-tabs button { color: var(--muted); }
body.theme-dark .history-tabs button.active { color: #4db2e5; }
body.theme-dark .client-tabs button.active,
body.theme-dark .report-tabs button.active { color: var(--ink); }
body.theme-dark .client-tabs button,
body.theme-dark .report-tabs button,
body.theme-dark .panel-tabs button { color: var(--muted); }

/* Inputs y selects del panel de Configuración del dispositivo: sin fondo propio
   tomaban el gris por defecto del navegador (color-scheme:dark), que no combina
   con el azul del tema. Se les da fondo azul-oscuro consistente con las tarjetas. */
body.theme-dark .cfg-fields input,
body.theme-dark .cfg-fields select,
body.theme-dark .cfg-fields textarea,
body.theme-dark .cfg-card-body input,
body.theme-dark .cfg-card-body select,
body.theme-dark .cfg-card-body textarea {
  background: #0a2233;
  color: var(--ink);
}

/* Banda gruesa (8px) que separa grupos de vehiculos en Historial/Eventos:
   era gris muy claro (#f0f3f6) y en oscuro se veia como una linea blanca. */
body.theme-dark .trip-group { border-bottom-color: #0a2233; }

/* ===========================================================================
   Comandos por SMS — estilo mensajería (lista de conversaciones + chat).
   =========================================================================== */
.sms-messenger {
  display: flex;
  height: calc(100vh - 150px);
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.sms-list {
  width: 320px;
  min-width: 260px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--panel);
}
.sms-list-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.sms-list-head .primary-button { flex: 1; }
.sms-gw-status {
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.sms-conv-list { flex: 1; overflow-y: auto; }
.sms-conv {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.sms-conv:hover { background: var(--base); }
.sms-conv.active { background: var(--base); box-shadow: inset 3px 0 0 var(--green); }
.sms-conv-title { font-weight: 600; color: var(--ink); }
.sms-conv-sub { color: var(--muted); font-size: 0.83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-conv-time { color: var(--muted); font-size: 0.72rem; margin-top: 2px; }
.sms-apk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--blue);
  text-decoration: none;
  font-size: 0.85rem;
}
.sms-apk:hover span { text-decoration: underline; }
.sms-apk-logo { height: 20px; width: auto; flex: 0 0 auto; }
/* En modo oscuro el emblema (negro+azul) se pinta en blanco para verse sobre el
   panel oscuro. En claro se deja tal cual (visible sobre el panel blanco). */
body.theme-dark .sms-apk-logo { filter: brightness(0) invert(1); }

.sms-chat { flex: 1; display: flex; flex-direction: column; background: var(--base); min-width: 0; }
.sms-chat-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
  background: var(--panel);
}
.sms-bubbles { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sms-bubble {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  max-width: 80%;
}
.sms-bubble .lbl { font-weight: 600; color: var(--ink); }
.sms-bubble .st { font-size: 0.85rem; font-weight: 500; margin-top: 2px; }
.sms-bubble .resp { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; color: var(--ink); font-size: 0.82rem; margin-top: 4px; }
.sms-bubble-time { color: var(--muted); font-size: 0.7rem; margin-top: 4px; }
.sms-empty, .sms-empty-chat { color: var(--muted); text-align: center; padding: 30px 16px; font-size: 0.9rem; }
.sms-empty-chat { margin: auto; }

/* Confirmacion Aceptar/Cancelar del Apagar/Restaurar por SMS (como el cliente). */
.sms-confirm-back {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 15, 25, 0.55);
  backdrop-filter: blur(2px);
}
.sms-confirm {
  width: min(430px, 100%);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  padding: 22px;
}
.sms-confirm h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.sms-confirm p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; font-size: 14px; }
.sms-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sms-confirm-actions .primary-button.danger { background: #c63f3f; }
.sms-confirm-actions .primary-button.danger:hover { background: #b23636; }

.sms-actions { border-top: 1px solid var(--line); padding: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.sms-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sms-actions-row select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--base); color: var(--ink); min-width: 130px;
}
.sms-cmd {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--base); color: var(--ink); cursor: pointer; font-size: 0.85rem;
}
.sms-cmd:hover { background: var(--green); color: #fff; border-color: var(--green); }
.sms-new { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.sms-new-row { display: flex; gap: 8px; }
.sms-new-row input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}

/* Menú flotante de plataformas dentro de la barra de acciones del chat SMS. */
.sms-actions { position: relative; }
.sms-plat-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
  min-width: 210px;
}
.sms-plat-menu-title { font-size: 0.78rem; color: var(--muted); padding: 4px 8px 6px; }
.sms-plat-opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: none; background: none;
  color: var(--ink); cursor: pointer; border-radius: 6px; font-size: 0.9rem;
}
.sms-plat-opt:hover { background: var(--green); color: #fff; }

/* CIRCULO DE GRUPO del mapa (clustering). Las porciones de color las pinta un
   conic-gradient en linea, con el color de cada grupo: de un vistazo se ve
   cuantos equipos hay y de que grupos son, como en Navixy. */
.map-cluster {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease;
}

.map-cluster::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.map-cluster span {
  position: relative;
  font-weight: 800;
  font-size: 14px;
  color: #16324a;
  line-height: 1;
}

.map-cluster:hover { transform: scale(1.08); }

body.theme-dark .map-cluster::before { background: rgba(20, 32, 44, 0.92); }
body.theme-dark .map-cluster span { color: #eaf2f8; }

/* --- Preferencias del cliente (Perfil / Usuarios / Roles / POIs) ----------- */
.prefs-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.prefs-tabs button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
}

.prefs-tabs button.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.prefs-form {
  max-width: 720px;
  margin: 18px 0 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

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

.prefs-form menu {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 0;
  padding: 0;
}

/* Listas de entidades (rastreadores/POIs/geocercas) del dialogo de sub-usuario */
.entity-access {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.entity-access h4 {
  margin: 0 0 6px;
}

.entity-list {
  max-height: 160px;
  overflow-y: auto;
  margin: 6px 0 0 24px;
  display: grid;
  gap: 2px;
}

/* --- Anchos FLUIDOS segun la resolucion real de la pantalla ---------------
   La barra lateral y los paneles laterales ya no son fijos: se declaran como
   porcentaje del ancho de la ventana con un minimo y un maximo (clamp), asi
   la interfaz se adapta de forma continua a cualquier resolucion (Surface al
   200%, laptop 1366, monitor 1920, 4K) sin saltos por rangos. En pantallas
   de ~1500px+ el resultado es identico al diseno original (el clamp llega a
   su maximo); por debajo, todo se afina proporcionalmente. Los breakpoints
   existentes (<=1120px) siguen mandando en pantallas chicas. Aplica a ambos
   portales (admin y cliente comparten estos componentes). ------------------ */
@media (min-width: 1121px) {
  .app-shell {
    grid-template-columns: clamp(224px, 19vw, 290px) minmax(0, 1fr);
  }
  .sidebar { padding: 20px clamp(14px, 1.5vw, 24px); gap: clamp(18px, 1.8vw, 26px); }
  .nav-item { padding: clamp(10px, 0.9vw, 12px) clamp(11px, 1vw, 14px); }

  /* Seguimiento: la lista flotante de objetos acompana a la pantalla; la
     posicion del panel de detalle se calcula con el MISMO clamp (24px de
     margen + ancho de la lista + 20px de separacion). */
  .tracker-drawer { width: clamp(300px, 26vw, 360px); }
  .tracking-view { --tracker-detail-left: calc(44px + clamp(300px, 26vw, 360px)); }

  /* Paneles laterales fijos de las vistas de gestion. */
  .monitor-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); }
  .details-layout { grid-template-columns: minmax(0, 1fr) clamp(380px, 33vw, 460px); }
  .devices-layout { grid-template-columns: minmax(0, 1fr) clamp(360px, 31vw, 430px); }
  .management-layout { grid-template-columns: minmax(0, 1fr) clamp(264px, 23vw, 320px); }
}

/* --- Pantallas BAJAS (Surface y laptops al 150-200%: ~700-840px de alto):
   el menu lateral completo (11 filas) necesitaba ~936px y obligaba a hacer
   scroll. Aqui se compacta el ritmo vertical (logo, avatar, paddings y
   separaciones) para que TODO el menu quepa sin scroll. Solo aplica en
   escritorio (>=721px de ancho); en telefonos manda el layout movil. ------- */
@media (min-width: 721px) and (max-height: 840px) {
  /* El menu queda ANCLADO a la pantalla: si la vista de la derecha es mas
     alta y la pagina hace scroll, el menu no se va con ella. */
  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .client-menu-head { gap: 4px; }
  .sidebar-logo { width: 38px; height: 38px; }
  .client-profile { margin-top: 4px; }
  .client-profile[data-client-view] { margin: 2px -6px 0; padding: 4px 6px; }
  .client-profile .profile-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 13px; border-radius: 10px; }
  .client-nav-divider { margin: 6px 0; }
  .nav-stack { gap: 4px; }
  .client-nav { gap: 4px; }
  .nav-item { padding: 6px 12px; }
}

/* --- Mejora de viajes (2026-09-07) --------------------------------------- */
.mejora-layout { display: flex; gap: 12px; height: calc(100vh - 150px); min-height: 540px; }
.mejora-list { flex: 0 0 380px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.mejora-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mejora-tabs { display: flex; gap: 4px; background: var(--base); border-radius: 999px; padding: 3px; }
.mejora-tab { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.mejora-tab.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.mejora-filters { display: flex; gap: 8px; padding: 10px 12px 0; align-items: center; }
.mejora-filters select { flex: 0 0 auto; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--base); color: var(--ink); }
.mejora-filters .search-box { flex: 1; }
.mejora-summary { margin: 8px 12px; font-size: 12.5px; color: var(--muted); }
.mejora-rows { flex: 1; overflow: auto; border-top: 1px solid var(--line); }
.mejora-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 12px; cursor: pointer; color: var(--ink); font: inherit; }
.mejora-row:hover { background: rgba(34, 149, 223, 0.06); }
.mejora-row.active { background: rgba(34, 149, 223, 0.14); box-shadow: inset 3px 0 0 var(--blue); }
.mejora-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.mejora-row-top span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mejora-row-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mejora-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mejora-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 152, 0, 0.16); color: #b35a00; white-space: nowrap; }
.mejora-tag.crudo, .mejora-tag.linea_lejos { background: rgba(229, 57, 53, 0.14); color: #b3261e; }
.mejora-tag.cruce_faltante, .mejora-tag.contra_sentido, .mejora-tag.retorno_dudoso { background: rgba(94, 53, 177, 0.14); color: #5e35b1; }
.mejora-tag.ok { background: rgba(46, 125, 50, 0.14); color: #2e7d32; }
.mejora-verdict { font-weight: 600; color: var(--ink); }
.mejora-detail { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mejora-map { flex: 1 1 55%; min-height: 300px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--base); }
.mejora-info { flex: 0 1 45%; max-height: 46%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.mejora-info h3 { margin: 0 0 2px; font-size: 17px; }
.mejora-info h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mejora-info-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mejora-legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); align-items: center; }
.mejora-legend i { display: inline-block; vertical-align: middle; margin-right: 4px; }
.mejora-legend .sw-line { width: 18px; height: 4px; background: #2295df; border-radius: 2px; }
.mejora-legend .sw-dot { width: 9px; height: 9px; background: #1d2430; border-radius: 50%; }
.mejora-legend .sw-mark { width: 12px; height: 12px; border: 3px solid #ff9800; border-radius: 50%; }
.mejora-lista { margin: 0; padding-left: 18px; font-size: 13.5px; }
.mejora-lista li { margin-bottom: 4px; }
.mejora-verdict-box { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mejora-note { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.mejora-note input { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--base); color: var(--ink); }
.mejora-verdicts { display: flex; flex-wrap: wrap; gap: 8px; }
.mejora-verdicts .secondary-button { font: inherit; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--base); color: var(--ink); cursor: pointer; }
.mejora-verdicts .secondary-button:hover { border-color: var(--blue); }
.link-button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; padding: 0 2px; text-decoration: underline; }
@media (max-width: 960px) {
  .mejora-layout { flex-direction: column; height: auto; }
  .mejora-list { flex: 0 0 auto; max-height: 40vh; }
  .mejora-map { min-height: 320px; }
  .mejora-info { max-height: none; }
}