/*
 * VelozaTech UI: estilos de funciones propias, se cargan siempre (con o sin el
 * diseño de vidrio). Usan las variables --vt-* que define cada tema de color.
 */

/* --------------------------------------------------------------- tipografía: Inter
   Incluida en la plataforma (assets/fonts/inter, licencia OFL) para que se vea igual en
   todos los equipos, con los pesos suaves de la interfaz de referencia. */
@font-face {
  font-family: 'Inter VT';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter/inter-latin-wght-normal.woff2) format('woff2-variations'), url(../fonts/inter/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter VT';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(../fonts/inter/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --vt-font: 'Inter VT', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
body,
.tooltip, .popover, .leaflet-container,
button, input, select, textarea,
.modal, .dropdown-menu, .bootstrap-select .dropdown-menu {
  font-family: var(--vt-font);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: 0;
}

/* ------------------------------------------------------------ iconos de comandos */
.cmd-icon-tile {
  --c1: #64748b;
  --c2: #475569;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--c2) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  vertical-align: middle;
}
.cmd-icon-tile--sm { width: 24px; height: 24px; border-radius: 7px; margin-right: 6px; }
.cmd-icon-tile .cmd-icon-svg { display: block; }
.cmd-icon--red    { --c1: #f25c5c; --c2: #d63434; }
.cmd-icon--green  { --c1: #2fd28a; --c2: #12a565; }
.cmd-icon--blue   { --c1: #4aa8f0; --c2: #1f7fd0; }
.cmd-icon--indigo { --c1: #7c83f2; --c2: #5158d6; }
.cmd-icon--purple { --c1: #b07cf0; --c2: #8550d6; }
.cmd-icon--teal   { --c1: #2fd0c8; --c2: #12a3a0; }
.cmd-icon--orange { --c1: #ffaa4d; --c2: #f07d1a; }
.cmd-icon--amber  { --c1: #ffd25a; --c2: #f0a91a; }
.cmd-icon--pink   { --c1: #f57bb0; --c2: #d94c8c; }
.cmd-icon--slate  { --c1: #8a96a8; --c2: #5d6a7d; }
.cmd-icon--auto   { --c1: var(--vt-accent, #2b97db); --c2: color-mix(in srgb, var(--vt-accent, #2b97db) 70%, #000); }

/* selector de icono (crear / editar plantilla de comando) */
.cmd-icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  max-height: 248px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.cmd-icon-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 10px 4px 8px;
  border: 1px solid var(--vt-hairline, #e3e3e3);
  border-radius: 12px;
  background: var(--vt-card, #fff);
  cursor: pointer;
  text-align: center;
  font-weight: 500 !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cmd-icon-option:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--vt-accent, #2b97db) 45%, transparent); }
.cmd-icon-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.cmd-icon-option:has(input:checked) {
  border-color: var(--vt-accent, #2b97db);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-accent, #2b97db) 20%, transparent);
}
.cmd-icon-option .cmd-icon-name {
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--vt-text-2, #666);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd-icon-option:has(input:checked) .cmd-icon-name { color: var(--vt-text, #222); font-weight: 600; }

/* widget de comandos del dock: una fila por comando con su icono */
#widgets .cmd-widget-table { border-collapse: separate !important; border-spacing: 0 5px; margin: -5px 0 0 !important; }
#widgets .widget-gprs-command .widget-body { overflow-y: auto; scrollbar-width: thin; }
#widgets .cmd-widget-row .cmd-icon-tile { width: 26px; height: 26px; border-radius: 8px; }
#widgets .cmd-widget-table > tbody > tr > td { border: 0 !important; padding: 0 !important; vertical-align: middle !important; background: transparent !important; }
#widgets .cmd-widget-row > td:first-child { padding: 4px 8px 4px 4px !important; border-radius: 11px 0 0 11px; }
#widgets .cmd-widget-row > td:last-child { padding: 4px 5px 4px 0 !important; border-radius: 0 11px 11px 0; width: 1%; }
#widgets .cmd-widget-row > td { background: var(--vt-fill-2, #f4f5f7) !important; transition: background-color .15s; }
#widgets .cmd-widget-row:hover > td { background: var(--vt-fill, #eceef2) !important; }
#widgets .cmd-widget-name { display: table-cell; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
#widgets .cmd-widget-name .cmd-icon-tile { margin-right: 9px; }
#widgets .cmd-widget-title { font-size: 12px; font-weight: 600; color: var(--vt-text, #222); vertical-align: middle; }
#widgets .cmd-widget-action .send-command {
  width: 26px;
  height: 26px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--vt-accent, #2b97db) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--vt-accent, #2b97db) 35%, transparent);
  transition: transform .15s, filter .15s;
}
#widgets .cmd-widget-action .send-command:hover { transform: scale(1.08); filter: brightness(1.06); }
#widgets .cmd-widget-action .send-command .cmd-icon-svg { margin-left: -1px; }
.cmd-widget-empty { padding: 18px 8px; text-align: center; color: var(--vt-text-2, #888); font-size: 12px; }

/* --------------------------------------------- iconos de sensores a color (todos los temas) */
.sensor-ico {
  --sc: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 7px;
  vertical-align: middle;
  background: color-mix(in srgb, var(--sc) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 18%, transparent);
  color: var(--sc);
  flex: 0 0 auto;
}
html body .sensor-ico > i.icon,
html body .sensor-ico > i {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  width: auto !important;
  color: inherit !important;
  opacity: 1 !important;
}
html body .sensor-ico > img.sensor-icon { width: 15px !important; height: 15px !important; margin: 0 !important; object-fit: contain; }
/* velocidad y movimiento */
.sensor-ico--speed, .sensor-ico--speed_ecm, .sensor-ico--tachometer { --sc: #1f86d6; }
/* distancia, horas de motor, odómetro */
.sensor-ico--odometer, .sensor-ico--engine_hours, .sensor-ico--counter { --sc: #5b5fd6; }
/* encendido y motor */
.sensor-ico--ignition, .sensor-ico--acc, .sensor-ico--engine { --sc: #f07d1a; }
/* batería y alimentación */
.sensor-ico--battery, .sensor-ico--battery_external, .sensor-ico--plugged { --sc: #12a565; }
/* señal */
.sensor-ico--gsm, .sensor-ico--satellites { --sc: #0ea5a0; }
/* combustible */
.sensor-ico--fuel_tank, .sensor-ico--fuel_consumption { --sc: #e0453b; }
/* temperatura */
.sensor-ico--temperature { --sc: #db4b8f; }
/* puertas, cinturón, carga */
.sensor-ico--door, .sensor-ico--seatbelt, .sensor-ico--load { --sc: #8b52d9; }
/* conducción brusca */
.sensor-ico--harsh_acceleration, .sensor-ico--harsh_breaking, .sensor-ico--harsh_turning { --sc: #d63434; }
/* bloqueo */
.sensor-ico--blocked { --sc: #c0392b; }
/* identificación y datos */
.sensor-ico--rfid, .sensor-ico--vin, .sensor-ico--textual, .sensor-ico--datetime { --sc: #2f7fbf; }
.sensor-ico--logical, .sensor-ico--numerical { --sc: #64748b; }
.sensor-ico--drive_business, .sensor-ico--drive_private { --sc: #4f6bd6; }
/* nombre del sensor alineado con la ficha */
[data-device="sensors"] td:first-child { white-space: nowrap; }

/* ---------------------------------------------------------- widget Estadísticas diarias */
#widgets .widget-daily-stats { min-width: 300px; }
#widgets .widget-daily-stats .widget-body { padding: 8px 12px !important; overflow: hidden; }
.dstats { display: flex; flex-direction: column; gap: 6px; }
.dstats-hero { display: flex; align-items: center; gap: 10px; }
.dstats-hero-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--vt-accent, #2b97db), color-mix(in srgb, var(--vt-accent, #2b97db) 65%, #000));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--vt-accent, #2b97db) 35%, transparent);
}
.dstats-hero-value { font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--vt-text, #1f2937); font-variant-numeric: tabular-nums; }
.dstats-hero-label { font-size: 11px; color: var(--vt-text-2, #6b7280); margin-top: 1px; }
.dstats-split {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6b24a, #f08a1a);
  overflow: hidden;
}
.dstats-split-move {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fd28a, #12a565);
  box-shadow: 2px 0 0 var(--vt-card, #fff);
}
.dstats-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--vt-text-2, #6b7280); white-space: nowrap; }
.dstats-legend b { color: var(--vt-text, #1f2937); font-weight: 700; }
.dstats-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dstats-dot--move { background: #12a565; }
.dstats-dot--stop { background: #f08a1a; }
.dstats-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dstats-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--vt-fill-2, #f4f5f7);
}
.dstats-chip b { display: block; font-size: 12.5px; font-weight: 800; color: var(--vt-text, #1f2937); line-height: 1.15; font-variant-numeric: tabular-nums; }
.dstats-chip small { display: block; font-size: 10px; color: var(--vt-text-2, #6b7280); line-height: 1.2; white-space: nowrap; }
.dstats-chip-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.dstats-chip--max .dstats-chip-ico { background: linear-gradient(135deg, #f25c5c, #d63434); }
.dstats-chip--avg .dstats-chip-ico { background: linear-gradient(135deg, #4aa8f0, #1f7fd0); }
.dstats-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 90px; color: var(--vt-text-2, #888); font-size: 12px; text-align: center; }
.dstats-empty-ico { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--vt-fill-2, #f2f3f5); color: var(--vt-text-2, #999); }

/* ------------------------------------------- admin → Ajustes: tarjetas compactas (como la referencia) */
html body .configuration-menu.with-groups { gap: 44px; }
html body .configuration-menu .configuration-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 12px;
}
html body .configuration-menu .configuration-group .configuration-group-title {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--vt-text, #333);
}
html body .configuration-menu .item {
  width: 160px;
  min-height: 112px;
  padding: 16px 10px;
  gap: 8px;
  border: 1px solid var(--vt-hairline, #e3e3e3);
  border-radius: 14px;
  background: var(--vt-card, #fff);
  color: var(--vt-text, #333);
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html body .configuration-menu .item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vt-accent, #2b97db) 45%, transparent);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
  background: var(--vt-card, #fff);
  color: var(--vt-text, #333);
}
html body .configuration-menu .item__icon { margin: 0; color: var(--vt-accent, #2b97db); }
html body .configuration-menu .item__icon i,
html body .configuration-menu .item__icon .icon { font-size: 21px; }
html body .configuration-menu .item__title { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--vt-text, #333); }
@media (max-width: 600px) {
  html body .configuration-menu .configuration-group { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  html body .configuration-menu .item { width: auto; }
}

/* ------------------------------------------------------------ admin: asistente inicial */
.setup-wizard { max-width: 1100px; margin: 0 auto; padding: 24px 20px 40px; }
.setup-wizard-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.setup-wizard-hero h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--vt-text, #1f2937); }
.setup-wizard-hero p { margin: 0; color: var(--vt-text-2, #6b7280); max-width: 640px; }
.setup-wizard-progress, .setup-wizard-banner-ring {
  --p: 0;
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--vt-accent, #2b97db) calc(var(--p) * 1%), var(--vt-fill-2, #eef0f3) 0);
  position: relative;
}
.setup-wizard-progress::before, .setup-wizard-banner-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--vt-card, #fff);
}
.setup-wizard-progress span { position: relative; font-size: 13px; color: var(--vt-text-2, #6b7280); }
.setup-wizard-progress b { font-size: 20px; color: var(--vt-text, #1f2937); }
.setup-wizard-bar { height: 6px; margin: 18px 0 22px; border-radius: 999px; background: var(--vt-fill-2, #eef0f3); overflow: hidden; }
.setup-wizard-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vt-accent, #2b97db), color-mix(in srgb, var(--vt-accent, #2b97db) 60%, #2fd28a)); transition: width .6s ease; }
.setup-wizard-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.setup-step {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--vt-hairline, #e5e7eb);
  background: var(--vt-card, #fff);
  transition: transform .15s ease, box-shadow .15s ease;
}
.setup-step:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .07); }
.setup-step-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-accent, #2b97db);
  background: color-mix(in srgb, var(--vt-accent, #2b97db) 12%, transparent);
}
.setup-step.is-done .setup-step-ico { color: #fff; background: linear-gradient(135deg, #2fd28a, #12a565); }
.setup-step-body { min-width: 0; flex: 1; }
.setup-step-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--vt-text, #1f2937); }
.setup-step-num { font-size: 11px; font-weight: 700; color: var(--vt-text-2, #6b7280); }
.setup-step-chip { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--vt-fill-2, #eef0f3); color: var(--vt-text-2, #6b7280); }
.setup-step.is-done .setup-step-chip { background: rgba(18, 165, 101, .12); color: #0f8f57; }
.setup-step p { margin: 6px 0 12px; font-size: 12.5px; color: var(--vt-text-2, #6b7280); line-height: 1.45; }
.setup-step-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-step-auto { font-size: 11px; color: var(--vt-text-2, #888); }
/* aviso en la parte superior del admin */
.setup-wizard-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 20px 0;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--vt-accent, #2b97db) 25%, transparent);
  background: color-mix(in srgb, var(--vt-accent, #2b97db) 8%, var(--vt-card, #fff));
}
.setup-wizard-banner-ring { width: 38px; height: 38px; }
.setup-wizard-banner-ring::before { inset: 5px; }
.setup-wizard-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--vt-text-2, #6b7280); }
.setup-wizard-banner-text b { color: var(--vt-text, #1f2937); font-size: 13.5px; }
@media (max-width: 600px) { .setup-wizard-banner { flex-wrap: wrap; } }

/* ----------------------------------------------------- Theme Pro: panel lateral */
/* solo el fondo del panel es más transparente (se ve el mapa con un tinte del color del tema);
   tarjetas, filas y la franja superior quedan sólidas y ganan protagonismo.
   Sin desenfoque: el mapa se repinta al moverse y el blur de todo el panel es costoso. */
html body.basic_theme_pro #sidebar .sidebar-content {
  background: rgba(255, 255, 255, .32) !important;
  background: color-mix(in srgb, var(--vt-accent, #2b97db) 10%, color-mix(in srgb, var(--vt-card, #fff) 30%, transparent)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* modo oscuro: más sólido (como la referencia), el mapa apenas se intuye detrás */
html.vt-scheme-dark body.basic_theme_pro #sidebar .sidebar-content {
  background: rgba(28, 28, 30, .9) !important;
  background: color-mix(in srgb, var(--vt-accent, #2b97db) 4%, color-mix(in srgb, var(--vt-card, #1c1c1e) 90%, transparent)) !important;
}

/* Theme Pro: fila de dispositivo como el nuevo diseño y la referencia:
   casilla | nombre + hora | [motor] velocidad ● ⋮
   Compacta y abreviada; al pasar el mouse (o seleccionada) muestra el nombre completo */
html body.basic_theme_pro #sidebar ul.group-list {
  table-layout: fixed !important;
  width: 100% !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] { cursor: pointer; }
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .checkbox {
  width: 30px !important;
  padding: 4px 0 4px 10px !important;
  vertical-align: middle !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .name {
  padding: 5px 4px 5px 8px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .name [data-device="name"] {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  letter-spacing: .01em;
  transition: font-size .2s ease, font-weight .2s ease;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .name [data-device="time"] {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.5px !important;
  font-weight: 500;
  margin-top: 1px !important;
  color: var(--vt-text-2, #6b7280) !important;
  transition: color .2s ease, font-size .2s ease;
}
/* al pasar el mouse o seleccionada: nombre completo en negrita (puede ocupar dos líneas) y hora en color */
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"]:hover > .name [data-device="name"],
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"].active > .name [data-device="name"] {
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"]:hover > .name [data-device="time"],
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"].active > .name [data-device="time"] {
  font-size: 9.5px !important;
  color: var(--vt-accent, #2b97db) !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .name [data-device="time_text"] { display: none !important; }
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details {
  width: 100px !important;
  padding: 4px 8px 4px 0 !important;
  white-space: nowrap !important;
  text-align: right !important;
  vertical-align: middle !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details > * {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 0 0 5px !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details > *:first-child { margin-left: 0 !important; }
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details [data-device="speed"] {
  background: transparent !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--vt-accent, #2b97db) !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details [data-device="detect_engine"] {
  font-size: 14px !important;
  line-height: 1;
  color: var(--vt-text-2, #6b7280) !important;
  opacity: .5;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details [data-device="detect_engine"].on { color: #22a35a !important; opacity: 1; }
/* punto de estado a la derecha con el mismo pulso que el nuevo diseño */
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details span[data-device="status"] {
  position: relative;
  width: 9px !important;
  height: 9px !important;
  min-width: 9px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details span[data-device="status"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: vt-status-pulse 1.8s ease-out infinite;
}
@keyframes vt-status-pulse {
  0% { transform: scale(1); opacity: .65; }
  75%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details span[data-device="status"]::after { animation: none; }
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details .btn-group,
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details .btn-group > .btn {
  width: 16px !important;
}
html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details .btn-group > .btn {
  height: 22px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* ----------------------------------------------------- widget Foto (todos los temas) */
/* el tema le daba al cuerpo un ancho fijo de 280px con borde: la foto quedaba corrida en la tarjeta */
#widgets .widget-image .widget-body,
#bottombar .widget-image .widget-body {
  width: auto !important;
  min-width: 280px;
  border: 0 !important;
  padding: 8px !important;
  box-sizing: border-box;
  position: relative;
}
#widgets .widget-image .widget-body > a.image,
#bottombar .widget-image .widget-body > a.image {
  display: block;
  width: 100% !important;
  height: 110px !important;
  margin: 0 !important;
  border-radius: 10px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ----------------------------------------------------- Activar dispositivo: comandos de la plantilla */
.device-config-commands {
  margin-top: 6px;
  padding: 12px 12px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--vt-text, #1f2937) 10%, transparent);
  background: color-mix(in srgb, var(--vt-card, #fff) 85%, transparent);
}
.device-config-commands .dcc-head { display: flex; align-items: center; gap: 8px; }
.device-config-commands .dcc-title { flex: 1; font-weight: 600; font-size: 13px; color: var(--vt-text, #1f2937); }
.device-config-commands .dcc-title i { color: var(--vt-accent, #2b97db); margin-right: 4px; }
.device-config-commands .dcc-count {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 4px; border-radius: 999px;
  font-size: 11px; text-align: center; color: #fff; background: var(--vt-accent, #2b97db);
}
.device-config-commands .dcc-count:empty { display: none; }
.device-config-commands .dcc-send-all { border-radius: 8px; padding: 3px 10px; }
.device-config-commands .dcc-hint { margin: 4px 0 8px; font-size: 11.5px; color: var(--vt-text-2, #6b7280); }
.device-config-commands .dcc-alert { margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; font-size: 12px; }
.device-config-commands .dcc-alert--warn { color: #92400e; background: rgba(245, 158, 11, .14); }
.device-config-commands .dcc-empty { padding: 10px; font-size: 12px; color: var(--vt-text-2, #6b7280); text-align: center; }
.device-config-commands .dcc-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.device-config-commands .dcc-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-top: 1px solid color-mix(in srgb, var(--vt-text, #1f2937) 7%, transparent);
}
.device-config-commands .dcc-item:first-child { border-top: 0; }
.device-config-commands .dcc-check { margin: 0; display: inline-flex; cursor: pointer; }
.device-config-commands .dcc-check input { margin: 0; width: 15px; height: 15px; accent-color: var(--vt-accent, #2b97db); }
.device-config-commands .dcc-check span { display: none; }
.device-config-commands .dcc-num {
  flex: 0 0 20px; height: 20px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 20px; text-align: center;
  color: var(--vt-text-2, #6b7280); background: var(--vt-fill-2, #eef0f3);
}
.device-config-commands .dcc-code {
  flex: 1; min-width: 0; padding: 0; background: none; border: 0;
  font-size: 12px; color: var(--vt-text, #1f2937); white-space: normal; word-break: break-all;
}
.device-config-commands .dcc-code mark { padding: 0 2px; border-radius: 4px; color: inherit; background: color-mix(in srgb, var(--vt-accent, #2b97db) 16%, transparent); }
.device-config-commands .dcc-code mark.is-empty { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.device-config-commands .dcc-status { flex: 0 0 auto; font-weight: 700; font-size: 13px; }
.device-config-commands .is-sent .dcc-status { color: #16a34a; }
.device-config-commands .is-error .dcc-status { color: #dc2626; cursor: help; }
.device-config-commands .dcc-send {
  flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--vt-accent, #2b97db); background: color-mix(in srgb, var(--vt-accent, #2b97db) 12%, transparent); border: 0;
}
.device-config-commands .dcc-send:hover { color: #fff; background: var(--vt-accent, #2b97db); }
.device-config-commands .is-sending .dcc-send { pointer-events: none; opacity: .5; animation: vt-dcc-pulse 1s ease-in-out infinite; }
@keyframes vt-dcc-pulse { 50% { transform: scale(.85); } }

/* ----------------------------------------------------- widget Tacómetro */
/* mismo alto que las demás tarjetas del dock: cabecera normal y cuerpo de 126px sin desplazamiento */
#widgets .widgets-content > .widget-tachometer,
#bottombar .widget-tachometer { min-width: 350px !important; }
.widget-tachometer { --tacho: #3b82f6; }
.widget-tachometer .widget-title { display: flex !important; align-items: center; gap: 7px; min-width: 0; }
.widget-tachometer .tacho-badge {
  order: 1; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vt-accent, #2b97db);
}
.widget-tachometer .tacho-badge svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.widget-tachometer .tacho-plate {
  order: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: inherit; text-transform: uppercase;
}
.widget-tachometer .tacho-meta {
  order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500; opacity: .9; white-space: nowrap;
}
.widget-tachometer .tacho-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa0a6; }
.widget-tachometer .tacho-pill {
  padding: 0 6px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 15px; border: 1px solid currentColor; opacity: .85;
}
.widget-tachometer .widget-body {
  display: flex !important; align-items: center; gap: 8px; padding: 6px 8px !important; box-sizing: border-box;
  overflow: hidden !important;
}
.widget-tachometer .tacho-stats { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
.widget-tachometer .tacho-stat {
  --c: #3b82f6;
  position: relative; padding: 4px 7px 3px; border-radius: 9px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background: color-mix(in srgb, var(--c) 8%, var(--vt-card, #fff));
  line-height: 1.1; white-space: nowrap; overflow: hidden;
}
.widget-tachometer .tacho-stat--max { --c: #f97316; }
.widget-tachometer .tacho-stat--heading { --c: #8b5cf6; }
.widget-tachometer .tacho-stat--km { --c: #22c55e; }
.widget-tachometer .tacho-stat-label {
  display: flex; align-items: center; gap: 4px; margin-bottom: 2px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vt-text-2, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-tachometer .tacho-stat-label svg {
  flex: 0 0 15px; width: 15px; height: 15px; padding: 2.5px; border-radius: 5px; box-sizing: border-box;
  fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.widget-tachometer .tacho-stat--heading .tacho-stat-label svg { fill: var(--c); stroke: none; }
.widget-tachometer .tacho-stat b { font-size: 16px; font-weight: 800; color: var(--vt-text, #1f2937); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.widget-tachometer .tacho-stat--heading b { font-size: 12.5px; text-transform: uppercase; display: block; overflow: hidden; text-overflow: ellipsis; line-height: 18px; }
.widget-tachometer .tacho-stat small { margin-left: 2px; font-size: 9.5px; font-weight: 600; color: var(--vt-text-2, #6b7280); }
.widget-tachometer .tacho-gauge { flex: 0 0 120px; width: 120px; }
.widget-tachometer .tacho-svg { display: block; width: 100%; height: auto; max-height: 114px; overflow: visible; }
.widget-tachometer .tacho-glow {
  fill: color-mix(in srgb, var(--tacho) 10%, transparent);
  stroke: color-mix(in srgb, var(--tacho) 18%, transparent); stroke-width: 1;
  transition: fill .6s ease, stroke .6s ease;
}
.widget-tachometer .tacho-track { fill: none; stroke: color-mix(in srgb, var(--vt-text, #1f2937) 9%, transparent); stroke-width: 5; stroke-linecap: round; }
.widget-tachometer .tacho-progress {
  fill: none; stroke: var(--tacho); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dasharray .8s cubic-bezier(.22, 1, .36, 1), stroke .6s ease, opacity .3s ease;
}
.widget-tachometer .tacho-tick { stroke: var(--vt-text-2, #6b7280); stroke-width: 1; opacity: .55; }
.widget-tachometer .tacho-tick.is-major { stroke-width: 1.8; opacity: .9; }
.widget-tachometer .tacho-num {
  fill: var(--vt-text-2, #6b7280); font-size: 9.5px; font-weight: 600; text-anchor: middle; dominant-baseline: central;
  font-family: var(--vt-font, inherit);
}
.widget-tachometer .tacho-needle {
  transform-box: view-box; transform-origin: 100px 100px; transform: rotate(135deg);
  transition: transform .9s cubic-bezier(.34, 1.3, .64, 1);
}
.widget-tachometer .tacho-needle path { fill: var(--tacho); transition: fill .6s ease; }
.widget-tachometer .tacho-hub { fill: var(--vt-card, #fff); stroke: var(--tacho); stroke-width: 3; transition: stroke .6s ease; }
.widget-tachometer .tacho-hub-dot { fill: var(--tacho); transition: fill .6s ease; }
.widget-tachometer .tacho-speed {
  fill: var(--vt-text, #1f2937); font-size: 28px; font-weight: 800; text-anchor: middle;
  font-family: var(--vt-font, inherit); font-variant-numeric: tabular-nums;
}
.widget-tachometer .tacho-unit { fill: var(--tacho); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; transition: fill .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .widget-tachometer .tacho-needle, .widget-tachometer .tacho-progress { transition: none; }
}

/* ----------------------------------------------------- Básico / Básico con pestañas: dock */
/* dock flotante (como Theme Pro y el Nuevo diseño): separado de la lista de dispositivos
   y del borde inferior, con las esquinas redondeadas */
body:not(.new-design-active) #bottombar > #widgets { margin-left: 10px !important; }
body.basic #bottombar > #widgets,
body.basic_new_tabs #bottombar > #widgets {
  /* el tema lo flotaba a la derecha con ancho fijo: el margen izquierdo no separaba nada */
  float: none !important;
  width: auto !important;
  margin: 0 10px 10px 12px !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* Theme Pro / Básico: con el panel colapsado, la pestaña flota separada del borde */
body #sidebar.collapsed > .btn-collapse {
  margin-left: 10px !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .22) !important;
  transition: margin .25s ease, border-radius .25s ease;
}

/* ----------------------------------------------------- controles del mapa más compactos */
/* botones de 26px: la columna ya no llega hasta el dock (Básico, con pestañas y Nuevo diseño) */
body:not(.basic_theme_pro) #map-controls .btn-group-vertical,
body:not(.basic_theme_pro) #map-controls-tile .btn-group-vertical {
  padding: 2px !important;
  border-radius: 11px !important;
}
body:not(.basic_theme_pro) #map-controls .btn-group-vertical > .btn,
body:not(.basic_theme_pro) #map-controls .btn-group-vertical > label.btn,
body:not(.basic_theme_pro) #map-controls .btn-group-vertical .btn-group > .btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  min-height: 26px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
body:not(.basic_theme_pro) #map-controls .btn-group-vertical .btn i,
body:not(.basic_theme_pro) #map-controls .btn-group-vertical .btn .icon {
  font-size: 14px !important;
  transform: scale(.88);
}
@media (max-height: 720px) {
  body:not(.basic_theme_pro) #map-controls .btn-group-vertical > .btn,
  body:not(.basic_theme_pro) #map-controls .btn-group-vertical > label.btn,
  body:not(.basic_theme_pro) #map-controls .btn-group-vertical .btn-group > .btn {
    width: 23px !important; height: 23px !important; min-width: 23px; min-height: 23px !important;
  }
}

/* ----------------------------------------------------- widget Sensores */
/* filas compactas (icono pequeño, nombre y valor a la derecha), 4 por columna; la tarjeta
   tiene el mismo ancho de base en todos los temas y crece a lo ancho con más columnas */
html body #bottombar #widgets .widgets-content > .widget-sensors,
html body #widgets .widgets-content > .widget-sensors,
html body #bottombar .widget-sensors {
  width: auto !important;
  min-width: 260px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
.widget-sensors .widget-body {
  width: auto !important;
  overflow: hidden !important;
  padding: 6px 12px !important;
  box-sizing: border-box;
}
.widget-sensors .vt-sensors {
  display: flex !important;
  align-items: flex-start;
  gap: 0 18px;
}
.widget-sensors .vt-sensor-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 234px;
}
.widget-sensors .vt-sensor {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 4px 0 2px;
  border-bottom: 1px solid var(--vt-hairline, rgba(0, 0, 0, .06));
}
.widget-sensors .vt-sensor:last-child { border-bottom: 0; }
html body .widget-sensors .vt-sensor .sensor-ico {
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 6px !important;
}
.widget-sensors .vt-sensor-text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  line-height: 1.2;
}
.widget-sensors .vt-sensor-text small {
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-text, #1f2937);
  white-space: nowrap;
}
.widget-sensors .vt-sensor-text b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vt-accent, #2b97db);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* modo oscuro: el color primario de algunas plantillas (p. ej. azul oscuro) no se lee sobre la
   tarjeta oscura; el valor va del mismo color claro que la dirección de la tarjeta de ubicación */
html.vt-scheme-dark body .widget-sensors .vt-sensor-text b {
  color: rgba(255, 255, 255, .82);
}
html.vt-scheme-dark body .widget-sensors .vt-sensor-text small {
  color: rgba(255, 255, 255, .92);
}
.widget-sensors .vt-sensor-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #9aa0a6; }
.widget-sensors .vt-sensor-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }

/* ----------------------------------------------------- ventanas (modales) largas */
/* la cabecera y los botones quedan fijos y solo el contenido se desplaza (antes se movía
   toda la pantalla, p. ej. al editar un dispositivo) */
@media (min-width: 768px) {
  .modal .modal-dialog { margin-top: 24px; margin-bottom: 24px; }
  .modal .modal-dialog > .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
  .modal .modal-dialog > .modal-content > .modal-header,
  .modal .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto; }
  .modal .modal-dialog > .modal-content > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* las pestañas del modal (Principal, Avanzado…) quedan arriba mientras se desplaza */
  .modal .modal-dialog > .modal-content > .modal-body > .nav-tabs:first-child {
    position: sticky;
    top: -16px;
    z-index: 5;
    margin-top: -16px;
    padding-top: 16px;
    padding-bottom: 8px;
    /* sólido, del mismo tono con el que se ve la ventana (vidrio sobre el fondo oscurecido) */
    background: #f4f4f5 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 var(--vt-hairline, rgba(0, 0, 0, .08));
  }
  html.vt-scheme-dark .modal .modal-dialog > .modal-content > .modal-body > .nav-tabs:first-child { background: #242426 !important; }
}
/* los botones ocultos por la app (p. ej. "cancelar medición" de la regla, que solo aparece
   mientras se mide) siguen ocultos aunque los botones usen display: flex */
html body #map-controls .btn-group-vertical .btn-group > .btn[style*="display: none"],
html body #map-controls .btn-group-vertical .btn-group > .btn[style*="display:none"],
html body #map-controls .btn-group-vertical > .btn[style*="display: none"],
html body #map-controls .btn-group-vertical > .btn[style*="display:none"] { display: none !important; }

/* ----------------------------------------------------- Nuevo diseño: barra lateral colapsada */
/* como la referencia: una columna estrecha con todos los iconos centrados en el mismo eje,
   el activo en un cuadro redondeado y sin textos ni flechas que la descuadren */
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-header {
  width: 50px !important;
  padding: 12px 0 !important;
  justify-content: center !important;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-collapse-btn {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  justify-content: center !important;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-collapse-btn:hover { background: var(--vt-fill-2, rgba(0, 0, 0, .05)) !important; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-vertical-menu { background: var(--vt-card, #fff) !important; padding: 0 !important; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-top,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-footer {
  width: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll { scrollbar-width: none; gap: 2px; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-scroll::-webkit-scrollbar { display: none; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-footer { background: var(--vt-card, #fff) !important; padding: 6px 0 10px !important; border-top: 1px solid var(--vt-hairline, rgba(0, 0, 0, .08)); }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-dropdown {
  width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-dropdown::before,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-dropdown::after,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item::after { display: none !important; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px;
  margin: 1px 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 11px !important;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item > .text,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item > .caret,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item > [class*="chevron"] { display: none !important; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item > i,
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item > .icon {
  margin: 0 !important;
  width: auto !important;
  font-size: 16px;
  text-align: center;
}
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-item:not(.active):hover { background: var(--vt-fill-2, rgba(0, 0, 0, .05)) !important; }
html body #sidebar.sidebar-new-design-layout.collapsed .sidebar-menu-separator { width: 24px !important; margin: 6px auto !important; }

/* ===================================================== MÓVIL (≤ 767px) */
@media (max-width: 767px) {
  /* la cabecera (logo + rampa) medía 405px: el navegador ensanchaba toda la página y las
     ventanas quedaban cortadas a la derecha */
  #header { overflow-x: clip; max-width: 100vw; }
  #header .container-fluid > .navbar-header { margin-left: 0 !important; margin-right: 0 !important; }

  /* --- panel de dispositivos (como la referencia): termina antes de la columna de controles
     del mapa, que queda siempre visible a la derecha */
  html body.basic_theme_pro #sidebar:not(.collapsed) { width: calc(100vw - 70px) !important; max-width: 360px; }
  html body.new-design-active #sidebar-content:not(.collapsed) { width: min(290px, calc(100vw - 116px)) !important; }
  /* Theme Pro: filas más estrechas para que quepan casilla, nombre, velocidad, estado y ⋮ */
  html body.basic_theme_pro #sidebar ul.group-list { min-width: 0 !important; max-width: 100% !important; }
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .checkbox { width: 22px !important; padding-left: 6px !important; }
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .name { padding-left: 4px !important; width: auto !important; max-width: none !important; }
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details { width: 76px !important; padding-right: 4px !important; }
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details > * { margin-left: 3px !important; }
  html body.basic_theme_pro #sidebar ul.group-list li[id^="list-device-"] > .details [data-device="detect_engine"] { font-size: 12px !important; }

  /* Básico y Básico con pestañas: panel y dock alineados a 8px del borde izquierdo, con una
     separación entre el panel y el dock (antes el panel iba pegado al borde y tocaba el dock) */
  html body.basic #sidebar .sidebar-content,
  html body.basic_new_tabs #sidebar .sidebar-content {
    margin-left: 8px !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 10px) !important;
    border-radius: 18px !important;
    overflow: hidden;
  }
  /* con pestañas el panel ya trae 5px de desplazamiento propio */
  html body.basic_new_tabs #sidebar .sidebar-content { margin-left: 3px !important; width: calc(100% - 3px) !important; }
  html body.basic #bottombar > #widgets,
  html body.basic_new_tabs #bottombar > #widgets { margin: 0 8px 8px 8px !important; }

  /* --- dock: tarjetas de ~280px (como la referencia), la siguiente asoma a la derecha */
  #widgets .widgets-content {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  html body #bottombar #widgets .widgets-content > .widget {
    min-width: 0 !important;
    max-width: none !important;
    width: min(280px, calc(100vw - 90px)) !important;
    flex: 0 0 min(280px, calc(100vw - 90px)) !important;
    scroll-snap-align: start;
  }
  /* sensores: puede ser más ancha (varias columnas) */
  html body #bottombar #widgets .widgets-content > .widget-sensors { width: auto !important; min-width: 260px !important; flex: 0 0 auto !important; max-width: none !important; }
  /* tacómetro en pantallas estrechas: tarjetitas y velocímetro algo más pequeños */
  .widget-tachometer .tacho-gauge { flex-basis: 104px; width: 104px; }
  .widget-tachometer .tacho-stat { padding: 4px 6px 3px; }
  .widget-tachometer .tacho-stat b { font-size: 14px; }
  .widget-tachometer .tacho-stat--heading b { font-size: 11px; }
  .widget-tachometer .tacho-stat-label { font-size: 8px; }
  .widget-tachometer .tacho-meta .tacho-pill { display: none; }
}
@media (max-width: 480px) {
  /* tarjeta muy estrecha: cada tarjetita muestra solo su icono de color y el valor completo */
  .widget-tachometer .widget-body { gap: 6px; padding: 6px !important; }
  .widget-tachometer .tacho-stats { gap: 5px; }
  .widget-tachometer .tacho-stat { padding: 4px 5px 3px; }
  .widget-tachometer .tacho-stat-label { font-size: 0 !important; margin-bottom: 3px; }
  .widget-tachometer .tacho-stat-label svg { width: 16px; height: 16px; flex-basis: 16px; }
  .widget-tachometer .tacho-stat b { font-size: 14px; }
  .widget-tachometer .tacho-stat small { font-size: 8.5px; }
  .widget-tachometer .tacho-stat--heading b { font-size: 10.5px; line-height: 17px; }
  .widget-tachometer .tacho-gauge { flex-basis: 96px; width: 96px; }

  /* --- ventanas: casi a pantalla completa; cabecera y botones fijos, el contenido se desplaza */
  .modal .modal-dialog { margin: 8px !important; width: auto !important; }
  .modal .modal-dialog > .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border-radius: 18px !important;
  }
  .modal .modal-dialog > .modal-content > .modal-header,
  .modal .modal-dialog > .modal-content > .modal-footer { flex: 0 0 auto; }
  .modal .modal-dialog > .modal-content > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .modal .modal-dialog > .modal-content > .modal-body > .nav-tabs:first-child {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .modal .modal-footer .buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .modal .modal-footer .buttons .btn { margin: 0 !important; flex: 1 1 90px; }
}

/* ----------------------------------------------------- Theme Pro: pestañas del panel */
/* Eventos, Historial, Geocercas… van en una tarjeta sólida (con el panel translúcido solo se
   leían al pasar el mouse); Dispositivos ya usa tarjetas por grupo */
html body.basic_theme_pro #sidebar .tab-content > .tab-pane:not(#objects_tab) > .tab-pane-body {
  background: var(--vt-card, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--vt-text, #1f2937) 9%, transparent);
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  margin: 2px 4px 8px !important;
}
/* la tarjeta crece a medida que hay registros (hasta el alto disponible, luego se desplaza)
   en vez de mostrar de entrada un cuadro blanco de todo el alto */
html body.basic_theme_pro #sidebar .tab-content > .tab-pane:not(#objects_tab) > .tab-pane-body {
  height: auto !important;
  max-height: calc(var(--vt-body-max, 100vh) - 12px);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* sin registros (historial o ecodrive sin buscar, sin eventos): sin tarjeta, transparente */
html body.basic_theme_pro #sidebar .tab-pane-body:has(> #ajax-history:empty),
html body.basic_theme_pro #sidebar .tab-pane-body:has(> #ajax-ecodrive:empty) {
  display: none !important;
}
html body.basic_theme_pro #sidebar .tab-pane-body:has(> #ajax-events:empty),
html body.basic_theme_pro #sidebar .tab-pane-body:has(> #ajax-events > .no-data:only-child) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.basic_theme_pro #sidebar #ajax-events > .no-data:only-child .event-title {
  color: var(--vt-text-2, rgba(0, 0, 0, .55)) !important;
  font-weight: 500;
  text-align: center;
}
html body.basic_theme_pro #sidebar .events-list .event-item {
  background: transparent !important;
  border-bottom: 1px solid var(--vt-hairline, rgba(0, 0, 0, .07)) !important;
  transition: background-color .15s ease;
}
html body.basic_theme_pro #sidebar .events-list .event-item:last-child { border-bottom: 0 !important; }
html body.basic_theme_pro #sidebar .events-list .event-item:hover { background: var(--vt-fill-2, rgba(0, 0, 0, .04)) !important; }
html body.basic_theme_pro #sidebar .events-list .event-item .event-title { color: var(--vt-text, #1f2937) !important; }
html body.basic_theme_pro #sidebar .events-list .event-item .event-icon i { color: var(--vt-accent, #2b97db) !important; }

/* regla: va dentro de un .btn-group extra que sumaba 4px de ancho y la descentraba; mismo tamaño
   y eje que los demás botones (al medir, "cancelar" aparece justo encima) */
body:not(.basic_theme_pro) #map-controls #ruler-group {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  float: none !important;
}
body:not(.basic_theme_pro) #map-controls #ruler-group > .btn { float: none !important; }

/* Básico / Básico con pestañas: la flecha de colapsar está en la barrita del dock; con el dock
   colapsado queda solo un botón redondo (como el Nuevo diseño) para volver a abrirlo */
body.basic #widgets > .btn-collapse,
body.basic_new_tabs #widgets > .btn-collapse { display: none !important; }
body.basic #widgets.collapsed,
body.basic_new_tabs #widgets.collapsed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
body.basic #widgets.collapsed > .widgets-toolbar,
body.basic_new_tabs #widgets.collapsed > .widgets-toolbar,
body.basic #widgets.collapsed > .widgets-content,
body.basic_new_tabs #widgets.collapsed > .widgets-content { display: none !important; }
body.basic #widgets.collapsed > .btn-collapse,
body.basic_new_tabs #widgets.collapsed > .btn-collapse {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 6px !important;
  bottom: 6px !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--vt-accent, #2b97db) !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px var(--vt-accent-ring, rgba(43, 151, 219, .35)) !important;
  transform: none !important;
  cursor: pointer;
}
body.basic #widgets.collapsed > .btn-collapse::before,
body.basic #widgets.collapsed > .btn-collapse::after,
body.basic_new_tabs #widgets.collapsed > .btn-collapse::before,
body.basic_new_tabs #widgets.collapsed > .btn-collapse::after { display: none !important; }
body.basic #widgets.collapsed > .btn-collapse i,
body.basic_new_tabs #widgets.collapsed > .btn-collapse i { color: #fff !important; }
body.basic #widgets.collapsed > .btn-collapse i::before,
body.basic_new_tabs #widgets.collapsed > .btn-collapse i::before { content: "\e954" !important; }

/* Módulo de video: icono del menú en Theme Pro (sus iconos son imágenes blancas, no fuente) */
html body.basic_theme_pro #sidebar a[data-modal="video_modal"] .icon.camera {
    background-image: url(../theme/iconsNew/video.svg) !important;
}
html body.basic_theme_pro #sidebar a[data-modal="video_modal"] .icon.camera::before {
    content: none !important;
}

/* Módulo de video: mismo icono de cámara de video que en Theme Pro en los demás temas
   (diseño nuevo, Básico y Básico con pestañas). Toma el color y el tamaño de cada tema. */
html body:not(.basic_theme_pro) a[data-modal="video_modal"] .icon.camera::before,
html body:not(.basic_theme_pro) a[data-modal="video_modal"] .icon-gps-camera::before {
    content: "" !important;
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url(../theme/iconsNew/video-mask.svg) center / contain no-repeat;
    mask: url(../theme/iconsNew/video-mask.svg) center / contain no-repeat;
}

/* ----------------------------------------------------- Modo oscuro: detalles en ventanas */
/* pestañas inactivas de las ventanas (Permisos, Dispositivos…) legibles sobre el fondo oscuro */
html.vt-scheme-dark .modal .modal-body > .nav-tabs > li:not(.active) > a {
  color: rgba(255, 255, 255, .72) !important;
}
html.vt-scheme-dark .modal .modal-body > .nav-tabs > li:not(.active) > a:hover {
  color: #fff !important;
}
/* barras de progreso (Herramientas, copias de seguridad…) sin el fondo claro de Bootstrap */
html.vt-scheme-dark .progress {
  background-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

/* ----------------------------------------------------- Theme Pro: bordes del color del tema */
/* el panel, sus tarjetas y los buscadores llevan un borde del color elegido (antes blanco o
   gris: sobre el panel translúcido no se distinguían) */
html body.basic_theme_pro #sidebar .sidebar-content {
  border: 1.5px solid color-mix(in srgb, var(--vt-accent, #2b97db) 45%, transparent) !important;
}
html body.basic_theme_pro #sidebar #objects_tab .group {
  border: 1.5px solid color-mix(in srgb, var(--vt-accent, #2b97db) 30%, transparent) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--vt-accent, #2b97db) 10%, transparent);
}
html body.basic_theme_pro #sidebar .tab-content > .tab-pane:not(#objects_tab) > .tab-pane-body {
  border-color: color-mix(in srgb, var(--vt-accent, #2b97db) 30%, transparent) !important;
}
/* buscadores y campos de la cabecera de cada pestaña (dispositivos, eventos, historial…) */
html body.basic_theme_pro #sidebar .tab-pane-header .form-control,
html body.basic_theme_pro #sidebar .tab-pane-header .btn.dropdown-toggle.btn-default {
  background: var(--vt-card, #fff) !important;
  border: 1.5px solid color-mix(in srgb, var(--vt-accent, #2b97db) 55%, transparent) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--vt-accent, #2b97db) 12%, transparent) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.basic_theme_pro #sidebar .tab-pane-header .form-control:hover,
html body.basic_theme_pro #sidebar .tab-pane-header .btn.dropdown-toggle.btn-default:hover {
  border-color: color-mix(in srgb, var(--vt-accent, #2b97db) 80%, transparent) !important;
}
html body.basic_theme_pro #sidebar .tab-pane-header .form-control:focus {
  border-color: var(--vt-accent, #2b97db) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-accent, #2b97db) 20%, transparent) !important;
  outline: 0;
}
html body.basic_theme_pro #sidebar .tab-pane-header .search .icon,
html body.basic_theme_pro #sidebar .tab-pane-header .search .fa,
html body.basic_theme_pro #sidebar .tab-pane-header .search::before {
  color: var(--vt-accent, #2b97db) !important;
}

/* panel colapsado: también se esconden el buscador y sus botones (agregar, menú) */
html body.basic_theme_pro #sidebar .tab-content,
html body.basic #sidebar .tab-content,
html body.basic_new_tabs #sidebar .tab-content {
  transition: opacity .2s ease, visibility 0s linear 0s;
}
html body.basic_theme_pro #sidebar.collapsed .tab-content,
html body.basic #sidebar.collapsed .tab-content,
html body.basic_new_tabs #sidebar.collapsed .tab-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .15s ease, visibility 0s linear .15s;
}

/* ----------------------------------------------------- tarjeta de Ubicación (widget del dispositivo) */
/* más ancha (al menos como el tacómetro): una dirección larga ya no la vuelve una columna angosta.
   La etiqueta ocupa lo justo y la dirección completa (complemento «dirección completa») muestra
   3 líneas; el resto al pasar el mouse, con la tarjeta desplazable */
@media (min-width: 768px) {
  html body #widgets .widgets-content > .widget-device,
  html body #bottombar .widgets-content > .widget-device {
    width: 380px !important;
    min-width: 380px !important;
    flex-shrink: 0 !important;
  }
}
html body .widget-device .widget-body { overflow-y: auto !important; }
/* (el tema fija la tabla en 260px y cada celda con max-width: 1px) */
html body .widget-device .widget-body .table {
  width: 100% !important;
  max-width: none !important;
}
html body .widget-device .widget-body .table > tbody > tr > td:first-child {
  width: 1% !important;
  max-width: none !important;
  white-space: nowrap !important;
  padding-right: 12px !important;
}
html body .widget-device .widget-body .table > tbody > tr > td + td {
  max-width: 0 !important;
}
html body .widget-device .widget-body td.full-text [data-device="address"] {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  white-space: normal !important;
  line-height: 1.35;
}
html body .widget-device:hover .widget-body td.full-text [data-device="address"] {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* ----------------------------------------------------- móvil: menú del encabezado sin temblor */
/* Bootstrap lo abría animando el alto: empujaba el panel y el mapa hacia abajo y al final
   saltaba al alto real (se veía temblar). Ahora flota sobre la página y entra/sale con un
   desvanecido corto; nada de lo de abajo se mueve. */
@media (max-width: 767px) {
  html body #header #bs-header-navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    margin: 0 !important;
    max-height: calc(100vh - 80px) !important;
    max-height: calc(100dvh - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16) !important;
    border-radius: 0 0 16px 16px !important;
  }
  html body #header #bs-header-navbar-collapse.collapsing {
    height: auto !important;
    transition: none !important;
    overflow: hidden !important;
  }
  html body #header #bs-header-navbar-collapse.collapsing[aria-expanded="true"],
  html body #header #bs-header-navbar-collapse.collapse.in {
    animation: vt-menu-in .2s cubic-bezier(.2, .8, .2, 1) both;
  }
  html body #header #bs-header-navbar-collapse.collapsing[aria-expanded="false"] {
    animation: vt-menu-out .16s ease-in both;
    pointer-events: none;
  }
}
@keyframes vt-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-menu-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  html body #header #bs-header-navbar-collapse { animation: none !important; }
}

/* ----------------------------------------------------- móvil: Básico con pestañas */
/* los accesos ocupaban 3 filas de tarjetas grandes y casi no se veía la lista de dispositivos:
   ahora 2 filas de 3 tarjetas compactas (sin «Enviar comando», que sigue en el menú de cada
   dispositivo) */
@media (max-width: 767px) {
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
    padding: 6px 6px 2px !important;
    margin: 0 !important;
    height: auto !important;
  }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default::before,
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default::after { content: none !important; display: none !important; }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li.hidden,
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li:has(> a[data-modal="send_command"]) {
    display: none !important;
  }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li > a {
    height: 54px !important;
    min-height: 0 !important;
    padding: 6px 4px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li > a .icon {
    font-size: 19px !important;
    width: auto !important;
    height: 21px !important;
    line-height: 21px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.basic_new_tabs #sidebar .nav-tabs.nav-default > li > a .text {
    display: block;
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}